/* ── Only things Tailwind CDN can't do ── */
html { scroll-behavior: smooth; }
*,*::before,*::after { box-sizing: border-box; }
body { overflow-x: hidden; }

/* ── HERO – cinematic ── */
.hero-bg-img {
  background-image: url('https://images.unsplash.com/photo-1558494949-ef010cbdcc31?w=1920&h=1080&fit=crop&auto=format&q=85');
  background-size: cover;
  background-position: center 30%;
  transform: scale(1.05);
  transition: transform 9s ease-out;
}
.hero-bg-img.loaded { transform: scale(1); }
.hero-gradient {
  background: linear-gradient(to right, rgba(1,15,30,0.97) 0%, rgba(1,36,74,0.82) 45%, rgba(1,36,74,0.28) 75%, transparent 100%),
              linear-gradient(to top, rgba(1,15,30,0.9) 0%, transparent 55%);
}
.hero-noise {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Hero title — refined, not screaming */
.hero-h1 {
  font-family: 'Roboto Slab', serif;
  font-weight: 700;
  font-size: 2.5em;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}
.hero-h1 .hl { color: #a40000; }

/* Eyebrow pulse dot */
@keyframes pdot { 0%,100%{opacity:1;transform:scale(1);}50%{opacity:.4;transform:scale(.65);} }
.pulse-dot { animation: pdot 2.2s infinite; }

/* ── STICKY COURSE NAV ── */
/* The nav sticks below the main header; JS removes 'hidden' class once hero exits */
#course-nav {
  position: sticky;
  /* top = main header height (68px topbar is hidden once scrolled, so we just use 0) */
  top: 0;
  z-index: 90;
  /* hidden until hero scrolls past */
}
#course-nav.nav-hidden { display: none; }

/* ── Reveal animation ── */
.reveal { opacity:0; transform:translateY(24px); transition:opacity .65s cubic-bezier(0.22,1,0.36,1), transform .65s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible { opacity:1; transform:none; }
.reveal-l { opacity:0; transform:translateX(-32px); transition:opacity .65s cubic-bezier(0.22,1,0.36,1), transform .65s cubic-bezier(0.22,1,0.36,1); }
.reveal-l.visible { opacity:1; transform:none; }
.reveal-r { opacity:0; transform:translateX(32px); transition:opacity .65s cubic-bezier(0.22,1,0.36,1), transform .65s cubic-bezier(0.22,1,0.36,1); }
.reveal-r.visible { opacity:1; transform:none; }
[data-d="1"]{ transition-delay:.08s; }
[data-d="2"]{ transition-delay:.16s; }
[data-d="3"]{ transition-delay:.24s; }
[data-d="4"]{ transition-delay:.32s; }
[data-d="5"]{ transition-delay:.40s; }

/* ── Batch table seat bar ── */
.seat-bar-fill { height: 100%; border-radius: 9999px; transition: width 1.1s cubic-bezier(0.22,1,0.36,1); }


/* ── FAQ accordion ── */
.faq-body { max-height: 0; overflow: hidden; transition: max-height .38s cubic-bezier(0.22,1,0.36,1); }
.faq-item.open .faq-body { max-height: 400px; }
.faq-item.open .faq-chevron { transform: rotate(180deg); color: #a40000; }
.faq-item.open .faq-q-text { color: #a40000; }

/* ── Desc fade expand ── */
.desc-fade { max-height: 190px; overflow: hidden; transition: max-height .55s cubic-bezier(0.22,1,0.36,1); position:relative; }
.desc-fade:not(.open)::after { content:''; position:absolute; bottom:0; left:0; right:0; height:70px; background:linear-gradient(transparent,#f7f8fc); }
.desc-fade.open { max-height: 3000px; }

/* ── Review track snap ── */
.rev-track { scroll-snap-type: x mandatory; scrollbar-width: none; }
.rev-track::-webkit-scrollbar { display: none; }
.rev-card { scroll-snap-align: start; }

/* ── Domain bar ── */
.domain-fill { transition: width 1.2s cubic-bezier(0.22,1,0.36,1); }

/* ── Stats section canvas ── */
#statsCanvas { position:absolute; inset:0; pointer-events:none; opacity:.22; }

/* ── Dark section stats grid border trick ── */
.stat-grid-cell { border-right: 1px solid rgba(255,255,255,0.07); }
.stat-grid-cell:last-child { border-right: none; }


/* ── WhatsApp float ── */
@keyframes wa-glow { 0%,100%{box-shadow:0 4px 20px rgba(37,211,102,.38);}50%{box-shadow:0 4px 36px rgba(37,211,102,.6);} }
.wa-float { animation: wa-glow 3s ease-in-out infinite; }

/* ── Scroll-hide course nav (shown only when hero is past) ── */
/* handled by JS IntersectionObserver on hero */