/**
 * Physio+ Cinematic Scroll Entrance
 * File: /preview/assets/css/sequence.css
 *
 * Pinned 500vh section with a scroll-driven canvas crossfade across 9 frames,
 * vignette + grain + amber-pain + emerald-recovery overlays, and a hero copy
 * reveal at 88% scroll progress. Mobile (<960px) bypasses the canvas and
 * shows frame-09 as a static background.
 */

.physio-sequence {
  position: relative;
  height: 500vh;
  background: #080604;
  padding: 0;            /* override global section padding (140px) so the canvas reaches the viewport edges */
  margin: 0;
}

.physio-sequence canvas {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  background: #080604;
}

.sequence-overlay {
  position: sticky;
  top: 0;
  width: 100vw;
  height: 100vh;
  margin-top: -100vh;
  pointer-events: none;
}

.sequence-vignette {
  background: radial-gradient(circle at center, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
  z-index: 2;
}

.sequence-grain {
  z-index: 3;
  opacity: .12;
  background-image: radial-gradient(rgba(255,255,255,.18) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}

.sequence-amber {
  z-index: 4;
  opacity: 0;
  background: radial-gradient(circle at 50% 28%, rgba(255,115,24,.42), rgba(255,115,24,.12) 22%, transparent 52%);
  mix-blend-mode: screen;
}

.sequence-emerald {
  z-index: 5;
  opacity: 0;
  background: radial-gradient(circle at 50% 35%, rgba(17,205,146,.18), rgba(17,205,146,.08) 18%, transparent 48%);
  mix-blend-mode: screen;
}

.physio-hero-content {
  position: sticky;
  top: 0;
  z-index: 6;
  min-height: 100vh;
  margin-top: -100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 760px;
  padding: 0 clamp(24px, 7vw, 96px);
  color: #fff;
  opacity: 0;
  transform: translateY(28px);
}

.physio-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  margin: 0 0 18px;
}

.physio-headline {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: clamp(48px, 8vw, 112px);
  line-height: 1.05;
  letter-spacing: -.022em;
  margin: 0 0 24px;
  max-width: 760px;
  color: #f4f1ea;
}

.physio-subheadline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(17px, 1.4vw, 22px);
  line-height: 1.45;
  color: rgba(244,241,234,.78);
  max-width: 620px;
  margin: 0 0 32px;
}

.physio-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: 999px;
  color: #100c08;
  background: #e87f4a;
  text-decoration: none;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
  clip-path: inset(0 100% 0 0 round 999px);
  transition: background 0.3s ease, transform 0.2s ease;
}
.physio-cta:hover {
  background: #f19968;
  transform: translateY(-1px);
}

/* Mobile: cinematic intro is preserved (canvas + overlays + scroll-driven
   reveal stay active). The user explicitly opted into the full experience
   on phones. Reduced-motion below is the only fallback path. */

@media (prefers-reduced-motion: reduce) {
  .physio-sequence {
    height: auto;
    min-height: 100vh;
    background-image: linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.25)), url('/assets/img/sequence/frame-09.webp');
    background-position: center;
    background-size: cover;
  }
  .physio-sequence canvas,
  .sequence-overlay {
    display: none;
  }
  .physio-hero-content {
    position: relative;
    min-height: 100vh;
    margin-top: 0;
    opacity: 1;
    transform: none;
  }
  .physio-cta {
    clip-path: none;
  }
}