/* ==========================================================================
   Cinematic scroll experience — landing page only
   Full-viewport scenes, crossfade backgrounds, pinned typography.
   All animation: transform/opacity only. Respects prefers-reduced-motion.
   ========================================================================== */

/* ── Scene backgrounds ────────────────────────────────────────────────────── */
/*
  Each scene[data-scene] has a matching background defined here.
  Current art: warm cartoon SVG illustrations in /images/ (one per scene),
  each with subtle looping animation embedded as CSS keyframes inside the SVG
  (transform/opacity only; each file carries its own prefers-reduced-motion
  override, so reduced-motion users get the static art).
  The background-color on each rule is a fallback while the SVG loads.

  PHOTO SWAP GUIDE (scenes are in chronological chapter order) — to move to
  real photos, replace each url() with a .webp shot of the same subject:
    Scene 0 (Intro)           → /images/hero.svg       (dusk panorama, trail + summit flag)
    Scene 1 (Camping, Ch.01)  → /images/camping.svg    (glowing tent, fire, friends)
    Scene 2 (Hiking, Ch.02)   → /images/hiking.svg     (sunrise summit, switchback trail)
    Scene 3 (Marathon, Ch.05) → /images/marathon.svg   (golden-hour city, runners)
    Scene 4 (Lifting, Ch.06)  → /images/gym.svg        (garage gym, squat + deadlift)
    Scene 5 (Ironman, Ch.08)  → /images/ironman.svg    (dawn swim, cyclist crossing)
    Scene 6 (Freediving, Ch.09) → /images/freediving.svg (ascent, seaweed, bubbles)
    Scene 7 (Solo Backpacking, Ch.10) → /images/backpacking.svg (campfire under stars)
    Scene 8 (Home Improvement, Ch.11 "Up Next") → /images/home.svg (half-framed house)
    Scene 9 (Follow/CTA)      → /images/travel.svg     (Painted Ladies at sunset)

  ART DIRECTION: keep the subject in the upper-middle of the frame AND inside
  the horizontal center band (x 550–1050 of 1600) — portrait phones crop the
  sides hard. Keep a dark lower zone where the text sits; the ::after scrim
  and the content scrim (.cin-scene-inner::before) handle the rest.
*/

/* ── Stage & background layers ───────────────────────────────────────────── */

.cinematic-body {
  overflow-x: hidden;
}

.cin-stage {
  position: relative;
  height: 100svh;
  overflow: hidden;
  background: #0a0c0f;
}

.cin-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1.06);
  transition: opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Directional drift: backgrounds slide subtly with scroll direction */
.cin-stage.dir-up .cin-bg.is-leaving {
  transform: scale(1.08) translateY(2.5%);
}

.cin-stage.dir-down .cin-bg.is-leaving {
  transform: scale(1.08) translateY(-2.5%);
}

/* Layer A is on top, B is below */
#cin-bg-a { z-index: 1; }
#cin-bg-b { z-index: 0; }

/* Active bg: zoomed out slightly for Ken Burns feel */
.cin-bg.is-active {
  transform: scale(1);
}

/* Outgoing bg: fade out */
.cin-bg.is-leaving {
  opacity: 0;
  transform: scale(1.08);
}

/* ── Fluid motion ──────────────────────────────────────────────────────────
   Once a scene's crossfade settles, cinematic.js adds .is-settled and the
   background picks up a slow Ken Burns drift. --par-x/--par-y are set on the
   stage via CSSOM (pointer / touch / device tilt in cinematic.js), so the
   art leans toward the user's movement. Scene text counter-leans slightly
   for depth. Parallax tops out at ±16px; the 1.025 minimum scale keeps
   edges covered. */
.cin-bg.is-settled {
  animation: cin-kenburns 26s ease-in-out infinite alternate;
}

@keyframes cin-kenburns {
  from { transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1.025); }
  to   { transform: translate3d(var(--par-x, 0px), var(--par-y, 0px), 0) scale(1.08); }
}

.cin-scene.active .cin-scene-inner {
  transform: translate3d(calc(var(--par-x, 0px) * -0.35), calc(var(--par-y, 0px) * -0.35), 0);
}

@media (prefers-reduced-motion: reduce) {
  .cin-bg.is-settled { animation: none; }
  .cin-scene.active .cin-scene-inner { transform: none; }
}

/* ── Illustrated backgrounds per scene ─────────────────────────────────────
   background-size/position (cover/center) come from .cin-bg above.
   ::after is a legibility-only scrim — the art carries its own lighting. */

[data-bg="0"] {
  /* Intro: dusk panorama, winding trail, summit flag */
  background-color: #241a3a;
  background-image: url('/images/hero.svg');
}
[data-bg="0"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,8,16,0.6) 0%, transparent 55%);
}

[data-bg="1"] {
  /* Camping: glowing orange tent, dusk mountains */
  background-color: #10223a;
  background-image: url('/images/camping.svg');
}
[data-bg="1"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5,10,8,0.6) 0%, transparent 55%);
}

[data-bg="2"] {
  /* Hiking: sunrise summit, switchback trail */
  background-color: #c8956a;
  background-image: url('/images/hiking.svg');
}
[data-bg="2"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(10,14,9,0.65) 0%, transparent 50%),
    linear-gradient(to bottom, rgba(10,12,15,0.2) 0%, transparent 30%);
}

[data-bg="3"] {
  /* Marathon: golden-hour city, runners on the road */
  background-color: #7a3a18;
  background-image: url('/images/marathon.svg');
}
[data-bg="3"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(16,8,4,0.65) 0%, transparent 55%);
}

[data-bg="4"] {
  /* Lifting: garage gym, squat reps under the lamp */
  background-color: #553318;
  background-image: url('/images/gym.svg');
}
[data-bg="4"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(12,8,4,0.7) 0%, transparent 55%);
}

[data-bg="5"] {
  /* Ironman: dawn ocean swim, course buoys */
  background-color: #143246;
  background-image: url('/images/ironman.svg');
}
[data-bg="5"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(3,12,20,0.7) 0%, rgba(3,12,20,0.1) 50%, transparent 75%);
}

[data-bg="6"] {
  /* Freediving: one-breath ascent, god rays */
  background-color: #073050;
  background-image: url('/images/freediving.svg');
}
[data-bg="6"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,10,20,0.7) 0%, transparent 55%);
}

[data-bg="7"] {
  /* Solo backpacking: campfire under the stars */
  background-color: #0c1428;
  background-image: url('/images/backpacking.svg');
}
[data-bg="7"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(2,3,6,0.6) 0%, transparent 50%);
}

[data-bg="8"] {
  /* Home improvement: half-framed house at dusk */
  background-color: #4a2a16;
  background-image: url('/images/home.svg');
}
[data-bg="8"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,6,3,0.7) 0%, transparent 55%);
}

[data-bg="9"] {
  /* CTA: Painted Ladies at sunset */
  background-color: #a85064;
  background-image: url('/images/travel.svg');
}
[data-bg="9"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10,12,8,0.7) 0%, rgba(10,12,16,0.15) 55%, transparent 80%);
}

/* ── Vignette ─────────────────────────────────────────────────────────────── */

.cin-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(ellipse 100% 100% at 50% 50%,
    transparent 40%, rgba(0,0,0,0.35) 100%);
}

/* ── Scenes ───────────────────────────────────────────────────────────────── */

.cin-scene {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  padding-inline: clamp(1.5rem, 6vw, 6rem);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 500ms ease-out, visibility 0s 500ms;
}

.cin-scene.active {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 500ms ease-out, visibility 0s;
}

.cin-scene-inner {
  max-width: 38rem;
  position: relative;
}

/* Legibility scrim anchored to the content, not the whole scene */
.cin-scene-inner::before {
  content: "";
  position: absolute;
  inset: -3rem;
  z-index: -1;
  background: radial-gradient(ellipse 120% 120% at 50% 50%,
    rgba(6, 10, 15, 0.45), transparent 70%);
  pointer-events: none;
}

/* Hero breaks out of the column and owns the viewport */
.cin-scene--hero .cin-scene-inner {
  max-width: none;
}

.cin-scene--hero .cin-title {
  font-size: clamp(4rem, 13vw, 10rem);
}

/* Ghost chapter numerals behind titles */
.cin-ghost {
  position: absolute;
  top: -0.55em;
  left: -0.08em;
  z-index: -2;
  font-size: clamp(7rem, 18vw, 14rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
  user-select: none;
}

.cin-scene-inner--right .cin-ghost {
  left: auto;
  right: -0.08em;
}

.cin-scene-inner--center .cin-ghost {
  left: 50%;
  translate: -50% 0;
}

.cin-scene-inner--left  { margin-right: auto; }
.cin-scene-inner--right { margin-left: auto; }
.cin-scene-inner--center {
  margin-inline: auto;
  text-align: center;
}

/* ── Typography ───────────────────────────────────────────────────────────── */

.cin-eyebrow {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: clamp(0.7rem, 1.2vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.9rem;
}

.cin-title {
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 0.95;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 40px rgba(0,0,0,0.5);
}

.cin-title .accent { color: #ff5a36; }
.cin-title .dot    { color: #ff5a36; }

.cin-word {
  display: block;
}

.cin-sub {
  margin-top: 1.4rem;
  font-size: clamp(1rem, 2vw, 1.3rem);
  color: rgba(255,255,255,0.75);
  font-weight: 500;
}

.cin-body {
  margin-top: 1rem;
  font-size: clamp(0.95rem, 1.5vw, 1.1rem);
  color: rgba(255,255,255,0.85);
  line-height: 1.65;
  max-width: 34rem;
}

.cin-scene-inner--center .cin-body {
  margin-inline: auto;
}

.cin-link {
  display: inline-block;
  margin-top: 1.6rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: #ff5a36;
  text-decoration: none;
  letter-spacing: 0.04em;
  position: relative;
}

.cin-link .arrow {
  display: inline-block;
  transition: transform 200ms ease-out;
}

.cin-link:hover .arrow {
  transform: translateX(4px);
}

/* ── Scene content entrance ───────────────────────────────────────────────── */

.cin-scene .cin-eyebrow,
.cin-scene .cin-sub,
.cin-scene .cin-body,
.cin-scene .cin-link,
.cin-scene .cin-actions,
.cin-scene .cin-stat-row {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease-out, transform 500ms cubic-bezier(0.16,1,0.3,1);
}

/* Title gets the hero move: bigger travel, longer duration */
.cin-scene .cin-title {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 800ms ease-out, transform 800ms cubic-bezier(0.16,1,0.3,1);
}

/* Scrolling up: content drifts in from above instead */
.cin-stage.dir-up .cin-scene:not(.active) .cin-eyebrow,
.cin-stage.dir-up .cin-scene:not(.active) .cin-sub,
.cin-stage.dir-up .cin-scene:not(.active) .cin-body,
.cin-stage.dir-up .cin-scene:not(.active) .cin-link,
.cin-stage.dir-up .cin-scene:not(.active) .cin-actions,
.cin-stage.dir-up .cin-scene:not(.active) .cin-stat-row {
  transform: translateY(-12px);
}

.cin-stage.dir-up .cin-scene:not(.active) .cin-title {
  transform: translateY(-36px);
}

.cin-scene.active .cin-eyebrow { opacity: 1; transform: none; transition-delay: 200ms; }
.cin-scene.active .cin-title   { opacity: 1; transform: none; transition-delay: 320ms; }
.cin-scene.active .cin-sub     { opacity: 1; transform: none; transition-delay: 440ms; }
.cin-scene.active .cin-body    { opacity: 1; transform: none; transition-delay: 440ms; }
.cin-scene.active .cin-link    { opacity: 1; transform: none; transition-delay: 560ms; }
.cin-scene.active .cin-actions { opacity: 1; transform: none; transition-delay: 560ms; }
.cin-scene.active .cin-stat-row{ opacity: 1; transform: none; transition-delay: 560ms; }

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.cin-actions {
  margin-top: 2rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.cin-scene-inner--center .cin-actions {
  justify-content: center;
}

.cin-btn-primary,
.cin-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 1.8rem;
  font: 700 0.95rem/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  border-radius: 99px;
  cursor: pointer;
  border: 0;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, background 180ms ease-out;
}

.cin-btn-primary {
  background: #ff5a36;
  color: #0a0c0f;
}

.cin-btn-primary:hover {
  background: #ff6f4f;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(255,90,54,0.4);
}

.cin-btn-ghost {
  background: rgba(255,255,255,0.1);
  color: #fff;
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
}

.cin-btn-ghost:hover {
  background: rgba(255,255,255,0.18);
  transform: translateY(-2px);
}

/* ── Ironman stats ────────────────────────────────────────────────────────── */

.cin-stat-row {
  display: flex;
  gap: 2rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}

.cin-stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.cin-stat strong {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #ff5a36;
  line-height: 1;
}

.cin-stat span {
  font-size: 0.8rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

/* ── Scroll hint ──────────────────────────────────────────────────────────── */

.cin-scroll-hint {
  position: absolute;
  bottom: 2.2rem;
  left: 50%;
  translate: -50% 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  animation: hint-pulse 2.2s ease-in-out infinite;
  z-index: 4;
}

.cin-scroll-line {
  width: 1px;
  height: 2.5rem;
  background: linear-gradient(rgba(255,255,255,0.4), transparent);
}

@keyframes hint-pulse {
  0%,100% { opacity: 1; transform: translateY(0); }
  50%      { opacity: 0.4; transform: translateY(5px); }
}

/* ── Progress dots ────────────────────────────────────────────────────────── */

.cin-dots {
  position: fixed;
  right: 1rem;
  top: 50%;
  translate: 0 -50%;
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: opacity 300ms ease-out;
}

.cin-dots.is-hidden {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* 24px hit target (WCAG 2.2), dot drawn via ::before */
.cin-dot {
  position: relative;
  width: 24px;
  height: 24px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0;
}

.cin-dot::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transition: background 250ms ease-out, transform 250ms ease-out;
}

.cin-dot:hover::before,
.cin-dot.active::before {
  background: #ff5a36;
  transform: scale(1.4);
}

/* ── Nav ──────────────────────────────────────────────────────────────────── */

.cin-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem clamp(1.5rem, 4vw, 3rem);
  transition: background 300ms ease-out, border-color 300ms ease-out;
  border-bottom: 1px solid transparent;
}

.cin-nav.scrolled {
  background: rgba(10,12,15,0.75);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(255,255,255,0.08);
}

.cin-brand {
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: #fff;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.cin-brand span { color: #ff5a36; }

.cin-nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.cin-nav-links a {
  font-weight: 600;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.8);
  text-decoration: none;
  transition: color 200ms ease-out;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.cin-nav-links a:hover { color: #fff; }

.cin-nav-cta {
  padding: 0.5rem 1.1rem;
  background: #ff5a36;
  color: #0a0c0f !important;
  border-radius: 99px;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out !important;
}

.cin-nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,90,54,0.4);
}

/* ── Hamburger ────────────────────────────────────────────────────────────── */

/* Mobile-only follow pill: keeps the conversion CTA one tap away */
.cin-nav-follow {
  display: none;
  padding: 0.5rem 1.1rem;
  background: #ff5a36;
  color: #0a0c0f;
  font: 700 0.88rem/1 ui-sans-serif, system-ui, sans-serif;
  text-decoration: none;
  border-radius: 99px;
}

.cin-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 8px;
}

.cin-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 250ms ease-out, opacity 200ms ease-out;
}

/* open state */
.cin-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.cin-hamburger.is-open span:nth-child(2) { opacity: 0; }
.cin-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile menu ──────────────────────────────────────────────────────────── */

.cin-mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 54;
  background: rgba(10,12,15,0.96);
  backdrop-filter: blur(18px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: opacity 250ms ease-out, visibility 0s 250ms;
}

.cin-mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
  visibility: visible;
  transition: opacity 250ms ease-out, visibility 0s;
}

.cin-mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
}

.cin-mobile-menu a {
  font-size: clamp(1.6rem, 6vw, 2.4rem);
  font-weight: 800;
  color: #fff;
  text-decoration: none;
  letter-spacing: -0.02em;
  font-family: ui-sans-serif, system-ui, sans-serif;
  transition: color 200ms ease-out;
}

.cin-mobile-menu a:hover { color: #ff5a36; }

/* ── Below-fold content ───────────────────────────────────────────────────── */

#below-fold {
  position: relative;
  z-index: 10;
  background: var(--bg, #0a0c0f);
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 760px) {
  .cin-nav-links { display: none; }
  .cin-nav-follow { display: inline-flex; margin-left: auto; margin-right: 0.8rem; }
  .cin-hamburger { display: flex; }
  .cin-dots { right: 0.3rem; }

  .cin-scene--hero .cin-title {
    font-size: clamp(3.4rem, 18vw, 6rem);
  }

  .cin-title {
    font-size: clamp(2.6rem, 13vw, 4.5rem);
  }

  .cin-scene {
    padding-inline: 1.4rem;
    align-items: flex-end;
    padding-bottom: 5rem;
  }

  .cin-scene-inner--right {
    margin-left: 0;
  }

  .cin-scene-inner--center {
    text-align: left;
  }

  .cin-scene-inner--center .cin-actions {
    justify-content: flex-start;
  }

  .cin-scene-inner--center .cin-body {
    margin-inline: 0;
  }

  .cin-stat-row {
    gap: 1.4rem;
  }
}

/* ── Reduced motion ───────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .cin-bg,
  .cin-scene,
  .cin-scene .cin-eyebrow,
  .cin-scene .cin-title,
  .cin-scene .cin-sub,
  .cin-scene .cin-body,
  .cin-scene .cin-link,
  .cin-scene .cin-actions,
  .cin-scene .cin-stat-row,
  .cin-dot,
  .cin-btn-primary,
  .cin-btn-ghost {
    transition: none;
    animation: none;
  }

  .cin-scroll-hint { animation: none; }

  .cin-scene .cin-eyebrow,
  .cin-scene .cin-title,
  .cin-scene .cin-sub,
  .cin-scene .cin-body,
  .cin-scene .cin-link,
  .cin-scene .cin-actions,
  .cin-scene .cin-stat-row {
    opacity: 1;
    transform: none;
  }
}