/* ════════════════════════════════════════════════════════════════
   v2.css — cinematic enhancement layer
   Loaded last; overrides + adds polish. Safe to remove for v1 fallback.
   ════════════════════════════════════════════════════════════════ */

/* ─── Hands-on capstone visual — Winston-Salem photo ─── */
.handson-visual {
  background:
    /* dark gradient overlay so the white "Cohort #3 Capstone" + headline stay legible */
    linear-gradient(180deg, rgba(12, 4, 32, 0.20) 0%, rgba(12, 4, 32, 0.45) 45%, rgba(12, 4, 32, 0.92) 100%),
    /* the actual photo */
    url('/assets/images/winston-salem-capstone.jpg') center/cover no-repeat,
    /* fallback color while image loads */
    var(--ink-2);
  /* let the natural photo aspect (~16:9) breathe a bit; the layout still constrains overall */
  aspect-ratio: 4 / 5;
}
/* The grid pattern from sections.css would crowd the photo — fade it out. */
.handson-visual::before {
  opacity: 0;
}
/* Soften the gold radial glow so it acts as a subtle vignette on the photo. */
.handson-visual::after {
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* ─── Hero background video ─── */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
  /* Slight desaturation + softness so the colorful real-world footage
     reads as a moody, atmospheric texture rather than a stock-clip clash
     with our purple+gold identity. The .hero-bg sits above and tints. */
  filter: saturate(0.85) brightness(0.65) hue-rotate(-8deg);
  pointer-events: none;
  /* Fade in once it starts playing */
  opacity: 0;
  transition: opacity 1.4s var(--ease-drama, ease-out);
}
.hero-video.is-playing {
  opacity: 1;
}

/* Reduced-motion: no autoplay video, just the still poster */
@media (prefers-reduced-motion: reduce) {
  .hero-video {
    display: none;
  }
  .hero {
    background-image:
      linear-gradient(180deg, rgba(12, 4, 32, 0.7), rgba(12, 4, 32, 0.9)),
      url('/assets/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}

/* Mobile: skip the video to save data — show the poster instead */
@media (max-width: 768px) {
  .hero-video {
    display: none;
  }
  .hero {
    background-image:
      linear-gradient(180deg, rgba(12, 4, 32, 0.62), rgba(12, 4, 32, 0.88)),
      url('/assets/hero-poster.jpg');
    background-size: cover;
    background-position: center;
  }
}

/* ─── Body grain ─── */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.55;
  mix-blend-mode: overlay;
}

/* ─── Hero h1 — split-line rise reveal ─── */
.hero h1 .l1, .hero h1 .l2 {
  display: block;
  overflow: hidden;
}
.hero h1 .l1 .word,
.hero h1 .l2 .word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.1s var(--ease-drama);
}
.hero h1.in .word { transform: translateY(0); }
.hero h1.in .word.d2 { transition-delay: 0.08s; }
.hero h1.in .word.d3 { transition-delay: 0.16s; }
.hero h1.in .word.d4 { transition-delay: 0.24s; }
.hero h1.in .word.d5 { transition-delay: 0.32s; }
.hero h1.in .word.d6 { transition-delay: 0.40s; }
.hero h1.in .word.d7 { transition-delay: 0.48s; }
.hero h1.in .word.d8 { transition-delay: 0.56s; }

/* ─── Hero stats — scramble target ─── */
.hero-stat-num[data-scramble] {
  font-variant-numeric: tabular-nums;
}

/* ─── Cursor-tracked aurora glow on hero ─── */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    600px circle at var(--cx, 50%) var(--cy, 30%),
    rgba(244, 200, 66, 0.08),
    transparent 60%
  );
  z-index: 1;
  pointer-events: none;
  transition: background var(--d-fast) var(--ease-silk);
}

/* ─── Magnetic button — capture cursor ─── */
.magnetic .btn {
  transition: transform var(--d-base) var(--ease-spring),
              box-shadow var(--d-base) var(--ease-drama),
              background var(--d-base) var(--ease-drama);
}

/* ─── Section bleed (color transition between sections) ─── */
.bleed-pain-to-out {
  position: relative;
}
.bleed-pain-to-out::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 200px;
  background: linear-gradient(180deg, transparent, var(--ink) 80%);
  pointer-events: none;
  z-index: 5;
}

/* ─── Stat card glassmorphism (parallax) ─── */
.hero-stat {
  transition: transform 0.6s var(--ease-drama);
}

/* ─── Pain card — emphasized scroll-reveal ─── */
.pain-card.in { animation: painSlide 1.2s var(--ease-drama) both; }
.pain-card.delay-1.in { animation-delay: 0.1s; }
.pain-card.delay-2.in { animation-delay: 0.2s; }
@keyframes painSlide {
  from {
    opacity: 0;
    transform: translateY(60px) rotateX(8deg);
    transform-origin: bottom;
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ─── Outcome cards: stagger ─── */
.outcome.in { animation: outcomeIn 1s var(--ease-drama) both; }
.outcome.delay-1.in { animation-delay: 0.08s; }
.outcome.delay-2.in { animation-delay: 0.16s; }
.outcome.delay-3.in { animation-delay: 0.24s; }
.outcome.delay-4.in { animation-delay: 0.32s; }
.outcome.delay-5.in { animation-delay: 0.40s; }
@keyframes outcomeIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ─── Bento — choreographed stagger ─── */
.bento-item {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.9s var(--ease-drama),
              transform 0.9s var(--ease-drama),
              border-color 0.4s var(--ease-drama),
              box-shadow 0.4s var(--ease-drama);
}
.bento-item.in {
  opacity: 1;
  transform: none;
}

/* ─── Bento — perspective tilt on hover ─── */
.bento-item {
  perspective: 1000px;
  transform-style: preserve-3d;
}
.bento-item.tilt:hover {
  transform: translateY(-6px) rotateX(2deg) rotateY(-2deg);
}

/* ─── Curriculum number flair ─── */
.bento-item h3 em {
  position: relative;
  display: inline-block;
}

/* ─── Stack item — staggered reveal ─── */
.stack-item {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.7s var(--ease-drama),
              transform 0.7s var(--ease-drama),
              background 0.4s var(--ease-drama),
              border-color 0.4s var(--ease-drama);
}
.stack-item.in { opacity: 1; transform: none; }

/* ─── Stack total — pulse on view ─── */
.stack-total.in {
  animation: totalPulse 2.4s var(--ease-drama) 0.4s both;
}
@keyframes totalPulse {
  0%   { opacity: 0; transform: translateY(20px); }
  50%  { box-shadow: 0 0 80px -10px rgba(244, 200, 66, 0.6); }
  100% { opacity: 1; transform: none; box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8); }
}

/* ─── Warranty card — perspective hover ─── */
.warranty-card {
  perspective: 1200px;
}

/* ─── Testimonial cards — slide in ─── */
.testimonial-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.9s var(--ease-drama),
              transform 0.9s var(--ease-drama),
              border-color 0.4s var(--ease-drama),
              box-shadow 0.4s var(--ease-drama);
}
.testimonial-card.in { opacity: 1; transform: none; }
.testimonial-card.delay-1.in { transition-delay: 0.08s; }
.testimonial-card.delay-2.in { transition-delay: 0.16s; }

/* ─── Coach reveal ─── */
.coach {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s var(--ease-drama),
              transform 1s var(--ease-drama),
              border-color 0.4s var(--ease-drama);
}
.coach.in { opacity: 1; transform: none; }
.coach.delay-1.in { transition-delay: 0.12s; }

/* ─── FAQ — smooth height ─── */
.faq-item.open .faq-a { animation: fadeIn 0.5s var(--ease-drama); }

/* ─── Final CTA — aggressive aura ─── */
.final::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    700px circle at var(--cx, 50%) var(--cy, 50%),
    rgba(244, 200, 66, 0.1),
    transparent 50%
  );
  pointer-events: none;
  transition: background var(--d-fast) var(--ease-silk);
  z-index: 1;
}
.final h2 {
  position: relative;
  z-index: 2;
}

/* ─── Scroll-driven gradient sweep on big titles ─── */
.section-title {
  background-size: 200% 100%;
  background-position: 0% 50%;
}

/* ─── Authority logos: subtle pulse on view ─── */
.authority-logo {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s var(--ease-drama),
              transform 0.7s var(--ease-drama),
              color var(--d-base);
}
.authority-logo.in {
  opacity: 0.7;
  transform: none;
}
.authority-logo.in.delay-1 { transition-delay: 0.08s; }
.authority-logo.in.delay-2 { transition-delay: 0.16s; }
.authority-logo.in.delay-3 { transition-delay: 0.24s; }
.authority-logo.in.delay-4 { transition-delay: 0.32s; }
.authority-logo.in.delay-5 { transition-delay: 0.40s; }

/* ─── Hover-reveal on coach portrait ─── */
.coach-portrait {
  transition: transform 1.4s var(--ease-drama);
}
.coach:hover .coach-portrait {
  transform: scale(1.02);
}

/* ─── Bonus card — emerald glow pulse ─── */
.bonus-card {
  position: relative;
}
.bonus-card.in {
  animation: emeraldGlow 4s var(--ease-drama) infinite alternate;
}
@keyframes emeraldGlow {
  0%   { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8), 0 0 0 rgba(45, 212, 162, 0); }
  100% { box-shadow: 0 30px 80px -40px rgba(0, 0, 0, 0.8), 0 0 80px -10px rgba(45, 212, 162, 0.4); }
}

/* ─── Delivery card — recommended badge animate ─── */
.delivery-card.recommended .delivery-tag.premium {
  animation: tagShine 3s var(--ease-drama) infinite;
}
@keyframes tagShine {
  0%, 100% { box-shadow: 0 0 0 rgba(244, 200, 66, 0); }
  50%      { box-shadow: 0 0 20px rgba(244, 200, 66, 0.5); }
}

/* ─── Reduced-motion safety ─── */
@media (prefers-reduced-motion: reduce) {
  .hero h1 .word { transform: none !important; }
  .pain-card, .outcome, .bento-item, .testimonial-card, .coach, .stack-item, .stack-total, .bonus-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .hero::after, .final::before { background: transparent !important; }
}