/* Balance MediBall — Modern Eastern Refresh v0.3.0
 * Contemporary, airy, eastern-inspired visual layer.
 */

:root {
  --bm-modern-ink: #142c40;
  --bm-modern-ink-soft: #365267;
  --bm-modern-paper: #f7f3eb;
  --bm-modern-paper-2: #fbf9f5;
  --bm-modern-glass: rgba(255,255,255,.64);
  --bm-modern-line: rgba(20,44,64,.10);
  --bm-modern-shadow: 0 28px 80px rgba(20,44,64,.09);
  --bm-modern-shadow-hover: 0 34px 90px rgba(20,44,64,.14);
  --bm-modern-radius: 34px;
  --bm-modern-ease: cubic-bezier(.2,.7,.2,1);
}

html { scroll-padding-top: 96px; }
body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 18%, rgba(137,160,174,.12), transparent 28rem),
    radial-gradient(circle at 92% 52%, rgba(199,71,69,.07), transparent 26rem),
    var(--bm-modern-paper);
}
::selection { background: rgba(199,71,69,.18); color: var(--bm-modern-ink); }

/* --- Modern glass header ------------------------------------------------ */
.bm-site-header {
  background: rgba(247,243,235,.78) !important;
  border-bottom: 1px solid rgba(20,44,64,.07) !important;
  box-shadow: 0 8px 30px rgba(20,44,64,.035);
  backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
}
.bm-brand { transition: transform .35s var(--bm-modern-ease); }
.bm-brand:hover { transform: translateY(-1px); }
.bm-site-header .wp-block-navigation-item__content {
  position: relative;
  padding-block: .35rem;
  color: rgba(20,44,64,.82);
  transition: color .25s ease;
}
.bm-site-header .wp-block-navigation-item__content::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--bm-red), rgba(199,71,69,.35));
  transition: right .35s var(--bm-modern-ease);
}
.bm-site-header .wp-block-navigation-item__content:hover { color: var(--bm-modern-ink); }
.bm-site-header .wp-block-navigation-item__content:hover::after { right: 0; }

/* --- Global rhythm / typography ---------------------------------------- */
.bm-home-section { isolation: isolate; }
.bm-section-inner { position: relative; }
.bm-kicker {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-bottom: 1rem;
  font-size: .72rem;
  letter-spacing: .19em;
  color: rgba(199,71,69,.92);
}
.bm-kicker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
  opacity: .65;
}
.bm-section-title {
  color: var(--bm-modern-ink);
  font-size: clamp(2.45rem, 5.3vw, 5.1rem);
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}
.bm-section-lead {
  color: var(--bm-modern-ink-soft);
  line-height: 1.72;
  font-size: clamp(1.05rem,1.65vw,1.28rem);
}

/* --- Hero --------------------------------------------------------------- */
.bm-hero-section {
  min-height: min(860px, 92vh);
  background:
    radial-gradient(circle at 77% 27%, rgba(137,160,174,.26), transparent 24rem),
    radial-gradient(circle at 66% 74%, rgba(194,164,121,.10), transparent 18rem),
    linear-gradient(180deg, #fcfaf6 0%, #f7f3eb 84%, rgba(247,243,235,.96) 100%);
}
.bm-hero-section::after {
  content: '';
  position: absolute;
  width: 34rem;
  aspect-ratio: 1;
  right: -16rem;
  top: -13rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.65), rgba(137,160,174,.07) 52%, transparent 72%);
  filter: blur(2px);
  pointer-events: none;
  animation: bm-modern-orb 13s ease-in-out infinite alternate;
}
.bm-hero-grid { gap: clamp(2.5rem,6vw,6.25rem); }
.bm-hero-copy { max-width: 690px; }
.bm-hero-title {
  color: var(--bm-modern-ink);
  font-size: clamp(3.65rem,7.5vw,7.4rem);
  line-height: .88;
  letter-spacing: -.064em;
  margin-bottom: 1.55rem;
}
.bm-hero-lead {
  color: #3e596d;
  line-height: 1.7;
  max-width: 620px;
}
.bm-hero-art {
  min-height: 620px;
  filter: drop-shadow(0 24px 55px rgba(20,44,64,.055));
}
.bm-hero-photo {
  transition: translate .25s ease-out;
  will-change: translate;
}
.bm-hero-photo::before {
  content: '';
  position: absolute;
  inset: -14px;
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 49% 51% 44% 56% / 44% 43% 57% 56%;
  box-shadow: inset 0 0 0 1px rgba(20,44,64,.035);
  pointer-events: none;
}
.bm-hero-photo img {
  border-radius: 48% 52% 44% 56% / 42% 44% 56% 58%;
  box-shadow: 0 36px 90px rgba(20,44,64,.18);
  transition: transform .7s var(--bm-modern-ease), filter .7s ease;
}
.bm-hero-photo:hover img { transform: scale(1.015); filter: saturate(.86) contrast(1.01); }
.bm-hero-word { opacity: .72; font-size: 1rem; letter-spacing: .2em; }
.bm-orbit-ball {
  box-shadow: 0 12px 30px rgba(199,71,69,.28), 0 0 0 8px rgba(255,255,255,.25);
  animation: bm-modern-float 5.8s ease-in-out infinite;
}

/* --- CTA language ------------------------------------------------------- */
.bm-primary-cta .wp-block-button__link,
.bm-header-cta .wp-block-button__link,
.bm-final-cta .wp-block-button__link,
.bm-session-section .wp-block-button__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  border: 1px solid rgba(20,44,64,.06);
  border-radius: 999px !important;
  padding: .92rem 1.35rem !important;
  background: linear-gradient(135deg, #18364f, #244b67) !important;
  box-shadow: 0 16px 35px rgba(20,44,64,.16);
  transition: transform .3s var(--bm-modern-ease), box-shadow .3s ease, filter .3s ease;
  overflow: hidden;
}
.bm-primary-cta .wp-block-button__link::after,
.bm-header-cta .wp-block-button__link::after,
.bm-final-cta .wp-block-button__link::after,
.bm-session-section .wp-block-button__link::after {
  content: '→';
  font-size: 1.1em;
  transition: transform .3s var(--bm-modern-ease);
}
.bm-primary-cta .wp-block-button__link:hover,
.bm-header-cta .wp-block-button__link:hover,
.bm-final-cta .wp-block-button__link:hover,
.bm-session-section .wp-block-button__link:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(20,44,64,.23);
  filter: saturate(1.08);
}
.bm-primary-cta .wp-block-button__link:hover::after,
.bm-header-cta .wp-block-button__link:hover::after,
.bm-final-cta .wp-block-button__link:hover::after,
.bm-session-section .wp-block-button__link:hover::after { transform: translateX(4px); }

/* --- Trust / glass surfaces -------------------------------------------- */
.bm-trust-grid {
  background: rgba(255,255,255,.68);
  border: 1px solid rgba(255,255,255,.72);
  box-shadow: 0 22px 60px rgba(20,44,64,.08);
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
}
.bm-trust-grid p { color: rgba(20,44,64,.82); letter-spacing: .01em; }

/* --- Section flow ------------------------------------------------------- */
.bm-flow-section,
.bm-start-section,
.bm-instructors-section,
.bm-equipment-section { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.30)); }

.bm-flow-card,
.bm-start-card,
.bm-instructor-card,
.bm-session-card,
.bm-equipment-card {
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.58) !important;
  box-shadow: var(--bm-modern-shadow) !important;
  backdrop-filter: blur(18px) saturate(1.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.08);
  transition: transform .45s var(--bm-modern-ease), box-shadow .45s ease, border-color .45s ease;
}
.bm-flow-card:hover,
.bm-instructor-card:hover,
.bm-session-card:hover,
.bm-equipment-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--bm-modern-shadow-hover) !important;
  border-color: rgba(255,255,255,.9) !important;
}
.bm-flow-card { border-radius: 42px !important; }
.bm-start-card { border-radius: 44px 44px 90px 44px !important; background: linear-gradient(145deg, rgba(220,230,228,.72), rgba(255,255,255,.58)) !important; }
.bm-session-card { border-radius: 46px !important; }
.bm-equipment-card { border-radius: 42px !important; }
.bm-instructor-card { border-radius: 30px !important; }

/* Flow scale becomes a modern editorial axis. */
.bm-flow-scale { margin-top: 2.4rem; padding-top: 1.7rem; color: var(--bm-modern-ink); }
.bm-flow-scale::before {
  height: 1px;
  background: linear-gradient(90deg, rgba(83,112,133,.2), rgba(199,71,69,.72), rgba(83,112,133,.2));
}
.bm-flow-scale::after {
  width: 13px;
  height: 13px;
  top: -6px;
  box-shadow: 0 0 0 7px rgba(199,71,69,.10), 0 0 0 15px rgba(199,71,69,.035);
}

/* Video frame: cinematic but airy. */
.bm-video-frame {
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 78% 24%, rgba(199,71,69,.20), transparent 19rem),
    linear-gradient(135deg,#142f45,#244c65 58%,#19384e);
  box-shadow: 0 34px 95px rgba(20,44,64,.20);
  border: 1px solid rgba(255,255,255,.08);
}
.bm-video-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.05) 48%, transparent 66%);
  transform: translateX(-120%);
  animation: bm-modern-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.bm-video-play {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
  box-shadow: 0 12px 34px rgba(0,0,0,.12);
  transition: transform .4s var(--bm-modern-ease), background .4s ease;
}
.bm-video-frame:hover .bm-video-play { transform: scale(1.08); background: rgba(255,255,255,.12); }

/* First session steps: modern modular cards. */
.bm-first-section { background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(247,243,235,.68)); }
.bm-steps { gap: 1rem; }
.bm-step {
  position: relative;
  min-height: 190px;
  padding: 1.55rem 1.45rem 1.65rem;
  border: 1px solid rgba(20,44,64,.075) !important;
  border-radius: 26px;
  background: rgba(255,255,255,.46);
  box-shadow: 0 12px 34px rgba(20,44,64,.035);
  transition: transform .38s var(--bm-modern-ease), background .38s ease, box-shadow .38s ease;
}
.bm-step:hover {
  transform: translateY(-5px);
  background: rgba(255,255,255,.72);
  box-shadow: 0 24px 55px rgba(20,44,64,.08);
}
.bm-step-number { font-size: 1rem; letter-spacing: .12em; font-family: var(--bm-sans); font-weight: 800; }
.bm-step h3 { font-size: 1.65rem; }
.bm-step p { line-height: 1.65; }

/* Benefits: tactile chips, not pills floating without hierarchy. */
.bm-benefit-cloud { gap: .75rem; }
.bm-benefit-chip {
  border-color: rgba(20,44,64,.09);
  background: rgba(255,255,255,.55);
  box-shadow: 0 8px 24px rgba(20,44,64,.03);
  backdrop-filter: blur(9px);
  transition: transform .3s var(--bm-modern-ease), background .3s ease, border-color .3s ease;
}
.bm-benefit-chip:hover { transform: translateY(-3px) rotate(-.35deg); background: rgba(255,255,255,.82); border-color: rgba(199,71,69,.20); }

/* Competition gets a contemporary deep-field look. */
.bm-competition-section {
  background:
    radial-gradient(circle at 88% 18%, rgba(199,71,69,.18), transparent 24rem),
    radial-gradient(circle at 18% 82%, rgba(137,160,174,.11), transparent 28rem),
    linear-gradient(145deg,#112b3f,#173b54 56%,#102638);
}
.bm-competition-section .bm-section-title { color: white; }
.bm-competition-section .bm-section-lead { color: rgba(231,238,242,.82); }
.bm-competition-card::after {
  width: 90px;
  height: 90px;
  opacity: .76;
  box-shadow: 0 0 0 34px rgba(199,71,69,.065), 0 0 0 74px rgba(199,71,69,.025);
  animation: bm-modern-pulse 5s ease-in-out infinite;
}

/* Instructor cards / practical blocks. */
.bm-instructor-role { letter-spacing: .16em; }
.bm-instructor-card h3 { font-size: 1.9rem; }
.bm-session-section { background: linear-gradient(180deg,#fbf9f5,#f3eee5); }
.bm-session-fact { padding: .85rem 0; border-color: rgba(20,44,64,.08); }
.bm-session-fact strong { font-size: 1.45rem; }

/* FAQ becomes a clean modern accordion surface. */
.bm-faq-section details {
  position: relative;
  margin: 0 0 .7rem;
  padding: 0;
  border: 1px solid rgba(20,44,64,.075);
  border-radius: 22px;
  background: rgba(255,255,255,.42);
  overflow: hidden;
  transition: background .3s ease, box-shadow .3s ease, transform .3s var(--bm-modern-ease);
}
.bm-faq-section details:hover { transform: translateY(-2px); background: rgba(255,255,255,.62); box-shadow: 0 14px 38px rgba(20,44,64,.055); }
.bm-faq-section details[open] { background: rgba(255,255,255,.74); box-shadow: 0 18px 50px rgba(20,44,64,.065); }
.bm-faq-section summary {
  position: relative;
  list-style: none;
  padding: 1.25rem 3.5rem 1.25rem 1.35rem;
  font-size: 1.18rem;
}
.bm-faq-section summary::-webkit-details-marker { display: none; }
.bm-faq-section summary::after {
  content: '+';
  position: absolute;
  right: 1.3rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--bm-sans);
  font-size: 1.45rem;
  color: var(--bm-red);
  transition: transform .3s var(--bm-modern-ease);
}
.bm-faq-section details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.bm-faq-section details p { padding: 0 1.35rem 1.3rem; line-height: 1.7; }

/* Final CTA: airy glass island. */
.bm-final-cta { padding-inline: 1rem; background: transparent; }
.bm-final-cta .bm-section-inner {
  max-width: 1050px;
  padding: clamp(3.5rem,7vw,6rem) clamp(1.5rem,5vw,4rem);
  border: 1px solid rgba(255,255,255,.74);
  border-radius: 52px;
  background: linear-gradient(145deg, rgba(255,255,255,.62), rgba(220,230,228,.42));
  box-shadow: 0 30px 90px rgba(20,44,64,.085);
  backdrop-filter: blur(20px) saturate(1.08);
  -webkit-backdrop-filter: blur(20px) saturate(1.08);
}

/* Footer: lighter, more editorial. */
.bm-site-footer {
  background: linear-gradient(145deg,#102b3e,#173b53);
  border-top: 1px solid rgba(255,255,255,.06);
}

/* --- Motion system ------------------------------------------------------ */
.bm-motion-ready .bm-reveal {
  opacity: 0;
  transform: translateY(26px) scale(.992);
  filter: blur(4px);
  transition:
    opacity .85s var(--bm-modern-ease),
    transform .85s var(--bm-modern-ease),
    filter .85s var(--bm-modern-ease);
  transition-delay: var(--bm-reveal-delay, 0ms);
}
.bm-motion-ready .bm-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

.bm-motion-dot {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  opacity: .55;
  translate: 0 var(--bm-parallax-soft, 0px);
  transition: translate .12s linear;
  animation: bm-modern-dot 7s ease-in-out infinite alternate;
}
.bm-motion-dot--blue { background: #6f899b; }
.bm-motion-dot--red { background: #c74745; }
.bm-motion-dot--sand { background: #c2a479; }
.bm-motion-dot--sm { width: 8px; height: 8px; }
.bm-motion-dot--md { width: 13px; height: 13px; }
.bm-motion-dot--lg { width: 22px; height: 22px; }

.bm-parallax-soft { translate: 0 var(--bm-parallax-soft, 0px); }
.bm-parallax-strong { translate: 0 var(--bm-parallax-strong, 0px); }

.bm-hero-art::before,
.bm-flow-section::before,
.bm-first-section::after,
.bm-competition-section::before,
.bm-final-cta::before {
  animation: bm-modern-brush-drift 11s ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes bm-modern-float {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(-11px,15px,0) scale(1.05); }
}
@keyframes bm-modern-orb {
  from { transform: translate3d(0,0,0) scale(.96); opacity: .72; }
  to { transform: translate3d(-28px,20px,0) scale(1.06); opacity: 1; }
}
@keyframes bm-modern-dot {
  from { margin-top: -5px; }
  to { margin-top: 9px; }
}
@keyframes bm-modern-brush-drift {
  from { translate: 0 0; }
  to { translate: 0 9px; }
}
@keyframes bm-modern-pulse {
  0%,100% { scale: .96; opacity: .62; }
  50% { scale: 1.06; opacity: .86; }
}
@keyframes bm-modern-sheen {
  0%,58% { transform: translateX(-120%); }
  78%,100% { transform: translateX(120%); }
}

@media (max-width: 900px) {
  .bm-hero-section { min-height: auto; }
  .bm-hero-title { font-size: clamp(3.4rem, 11vw, 6rem); }
  .bm-hero-art { min-height: 520px; }
  .bm-final-cta .bm-section-inner { border-radius: 38px; }
}

@media (max-width: 600px) {
  .bm-section-title { font-size: clamp(2.35rem, 11.8vw, 3.75rem); }
  .bm-hero-title { font-size: clamp(3.2rem, 14.5vw, 4.7rem); }
  .bm-hero-lead { font-size: 1.04rem; }
  .bm-trust-grid { border-radius: 24px; }
  .bm-flow-card,
  .bm-start-card,
  .bm-session-card,
  .bm-equipment-card { border-radius: 28px !important; }
  .bm-step { min-height: 0; border-radius: 20px; }
  .bm-final-cta .bm-section-inner { border-radius: 30px; padding-block: 3.5rem; }
  .bm-motion-dot--lg { width: 15px; height: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .bm-motion-ready .bm-reveal,
  .bm-motion-ready .bm-reveal.is-visible { opacity: 1; transform: none; filter: none; transition: none; }
  .bm-motion-dot,
  .bm-hero-art::before,
  .bm-flow-section::before,
  .bm-first-section::after,
  .bm-competition-section::before,
  .bm-final-cta::before,
  .bm-video-frame::after,
  .bm-competition-card::after { animation: none !important; }
}