/* =========================================================
   RYZE Up Motion System v1
   Pairs with motion.js. Vanilla CSS, no build step.
   Rule of thumb: one opening moment, one scroll thread
   (the colour lift), one pinned section. Everything else only
   moves when someone touches it.
   ========================================================= */

:root {
  /* Colour */
  --night: #0E0E0F;
  --bone: #EDE6DA;
  --red-earth: #A6431F;
  --ironstone: #4A2416;
  --gold: #C9A24A;
  --smoke: #2A2826;

  /* Easing */
  --ease-rise: cubic-bezier(0.22, 0.61, 0.36, 1);   /* things lifting into place */
  --ease-settle: cubic-bezier(0.16, 1, 0.3, 1);     /* big, slow arrivals */
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);      /* things travelling across */
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);       /* taps and hovers */

  /* Timing */
  --t-tap: 160ms;
  --t-base: 320ms;
  --t-reveal: 700ms;
  --t-cinema: 1200ms;
  --stagger: 90ms;

  /* Distance */
  --lift: 20px;

  /* Set by motion.js */
  --p: 0;   /* whole page scroll progress 0 to 1 */
  --hp: 0;  /* hero scroll progress 0 to 1 */
}

/* Page to page fade (Chrome, Edge, Safari 18+; others just load normally) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 400ms; animation-timing-function: var(--ease-move); }

/* ---------------------------------------------------------
   1. The colour lift: fixed sky behind everything
   --------------------------------------------------------- */
.sky {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      color-mix(in oklab, var(--ironstone), var(--gold) calc(var(--p) * 70%)) 0%,
      color-mix(in oklab, var(--night), var(--red-earth) calc(var(--p) * 55%)) 40%,
      color-mix(in oklab, var(--night), var(--ironstone) calc(var(--p) * 40%)) 75%,
      var(--night) 100%
    );
}

/* ---------------------------------------------------------
   2. Hero
   --------------------------------------------------------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }

.hero__media,
.hero__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__media { object-fit: cover; z-index: -2; }
.hero__video { opacity: 0; transition: opacity var(--t-cinema) var(--ease-settle); }
.hero__video.is-ready { opacity: 1; }
.hero__dust { z-index: 1; pointer-events: none; }

/* Horizon line: drawn on intro, stretches on scroll */
.horizon {
  height: 1px;
  background: var(--gold);
  transform-origin: center;
  transform: scaleX(calc(0.6 + var(--hp) * 0.4));
  box-shadow: 0 0 calc(12px + var(--hp) * 24px) color-mix(in oklab, var(--gold), transparent 40%);
}

/* Hero copy drifts up and fades as you leave */
.hero__copy {
  transform: translate3d(0, calc(var(--hp) * -40px), 0);
  opacity: calc(1 - var(--hp) * 1.4);
}

/* Pointer depth layers (desktop only, set by JS) */
[data-depth] { transform: translate3d(var(--dx, 0px), var(--dy, 0px), 0); will-change: transform; }

/* Intro sequence. Only hidden when JS adds .intro-play,
   so no-JS and returning visitors see the finished hero. */
.intro-play [data-intro] { opacity: 0; }
.intro-play [data-intro="line"]    { animation: draw 900ms var(--ease-settle) 300ms both; opacity: 1; }
.intro-play [data-intro="glow"]    { animation: fade 1200ms var(--ease-settle) 800ms both; }
.intro-play [data-intro="logo"]    { animation: warm 1000ms var(--ease-rise) 1200ms both; }
.intro-play [data-intro="head"] > * { animation: rise var(--t-reveal) var(--ease-rise) both; }
.intro-play [data-intro="head"] > :nth-child(1) { animation-delay: 1800ms; }
.intro-play [data-intro="head"] > :nth-child(2) { animation-delay: calc(1800ms + var(--stagger)); }
.intro-play [data-intro="head"] { opacity: 1; }
.intro-play [data-intro="rest"]    { animation: rise 600ms var(--ease-rise) 2400ms both; }
.intro-play [data-intro="media"]   { animation: fade 1400ms var(--ease-settle) 400ms both; }

@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(0.6); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes warm { from { opacity: 0; filter: brightness(0.25); } to { opacity: 1; filter: brightness(1); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, var(--lift), 0); } to { opacity: 1; transform: none; } }

.scroll-cue .horizon-pulse { animation: pulse 2.4s var(--ease-move) infinite; }
@keyframes pulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---------------------------------------------------------
   3. Reveals. Use on each act's headline only, not every element.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal]:not(.is-visible) { opacity: 0; transform: translate3d(0, var(--lift), 0); }
  .js [data-reveal="lines"]:not(.is-visible) { opacity: 1; transform: none; }
  .js [data-reveal="lines"]:not(.is-visible) > * { opacity: 0; transform: translate3d(0, var(--lift), 0); }
}
[data-reveal],
[data-reveal="lines"] > * {
  transition: opacity var(--t-reveal) var(--ease-rise), transform var(--t-reveal) var(--ease-rise);
}
[data-reveal="lines"] > :nth-child(2) { transition-delay: var(--stagger); }
[data-reveal="lines"] > :nth-child(3) { transition-delay: calc(var(--stagger) * 2); }

/* ---------------------------------------------------------
   4. Pathway bands (tap to expand)
   --------------------------------------------------------- */
.band__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--t-base) var(--ease-settle);
}
.band__panel > div { overflow: hidden; }
.band[aria-expanded="true"] + .band__panel,
.band__panel.is-open { grid-template-rows: 1fr; }
.band__icon { transition: transform var(--t-base) var(--ease-press); }

/* ---------------------------------------------------------
   5. Stylers crossfade (scroll decides which photo shows)
   --------------------------------------------------------- */
.crossfade { position: relative; }
.crossfade > * {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 900ms var(--ease-move), transform 1600ms var(--ease-settle);
}
.crossfade > .is-active { opacity: 1; transform: scale(1); }

/* ---------------------------------------------------------
   6. The Road Ahead (the only pinned section)
   --------------------------------------------------------- */
.journey__track { display: flex; gap: clamp(24px, 4vw, 64px); }
.journey__stop { flex: 0 0 min(80vw, 640px); }

/* Mobile and reduced motion: plain swipe with snap */
.journey__viewport { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.journey__stop { scroll-snap-align: center; }

/* Desktop with motion: JS adds .is-pinned and sets the height */
.journey.is-pinned .journey__viewport {
  position: sticky; top: 0; height: 100svh;
  overflow: hidden; display: flex; align-items: center;
}
.journey.is-pinned .journey__track { will-change: transform; }
.journey.is-pinned .journey__stop { opacity: 0.45; transition: opacity var(--t-base) var(--ease-press); }
.journey.is-pinned .journey__stop.is-current { opacity: 1; }

/* ---------------------------------------------------------
   7. Quotes
   --------------------------------------------------------- */
.quotes__stage { display: grid; touch-action: pan-y; }
.quote {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transform: translate3d(0, 8px, 0);
  transition: opacity 500ms var(--ease-move), transform 500ms var(--ease-move), visibility 0s 500ms;
}
.quote.is-active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity 500ms var(--ease-move) 120ms, transform 500ms var(--ease-move) 120ms;
}

/* ---------------------------------------------------------
   8. Buttons, links, focus
   --------------------------------------------------------- */
.btn {
  position: relative; overflow: hidden; isolation: isolate;
  min-height: 44px; padding: 0 1.4em;
  display: inline-flex; align-items: center;
  border: 1px solid var(--gold); color: var(--bone); background: transparent;
  transition: color var(--t-base) var(--ease-press), transform var(--t-tap) var(--ease-press);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--gold);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-base) var(--ease-rise);
}
.btn--primary { color: var(--night); }
.btn--primary::before { transform: scaleY(1); }
.btn--primary:hover::before { background: color-mix(in oklab, var(--gold), var(--bone) 18%); }
.btn:not(.btn--primary):hover { color: var(--night); }
.btn:not(.btn--primary):hover::before { transform: scaleY(1); }
.btn:active { transform: scale(0.98); }

.link-line {
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 1px no-repeat;
  transition: background-size var(--t-base) var(--ease-rise);
}
.link-line:hover, .link-line:focus-visible { background-size: 100% 1px; }

:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------------------------------------------------------
   9. Nav and menu
   --------------------------------------------------------- */
.nav { transition: background-color var(--t-base) var(--ease-press); }
.nav.is-solid { background-color: var(--night); }

.menu {
  position: fixed; inset: 0; z-index: 50; background: var(--night);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 600ms var(--ease-settle), visibility 0s 600ms;
}
.menu-open .menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 600ms var(--ease-settle); }
.menu a { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity 400ms var(--ease-rise), transform 400ms var(--ease-rise); }
.menu-open .menu a { opacity: 1; transform: none; }
.menu-open .menu li:nth-child(2) a { transition-delay: 60ms; }
.menu-open .menu li:nth-child(3) a { transition-delay: 120ms; }
.menu-open .menu li:nth-child(4) a { transition-delay: 180ms; }
.menu-open .menu li:nth-child(5) a { transition-delay: 240ms; }


/* Gold progress line at the top of the page */
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  background: var(--gold); transform-origin: left; transform: scaleX(var(--p));
}

/* ---------------------------------------------------------
   10. Reduced motion: content appears, colour still shifts
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .hero__copy, [data-depth] { transform: none !important; opacity: 1 !important; }
  .hero__dust, .hero__video, .hero__panel video { display: none; }
  .crossfade > * { transform: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}