/* Infinity Flight — page layout. Moving overlay items read --x (sideways shift), --r (3D turn) and --o (opacity) from flight.js */

#world {
  position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; display: block;
  background: radial-gradient(ellipse at 50% 30%, #161e5c 0%, #0a0f30 45%, var(--bg) 85%);
  transition: opacity .8s ease;
}
#world.is-dim { opacity: 0.28; }
.vignette { position: fixed; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(3, 4, 12, 0.7) 100%); }
main, .footer { position: relative; z-index: 2; }

/* ---------- the ride: a tall scroll space with a sticky stage ---------- */
.flight { position: relative; height: 1000vh; }
.flight__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; pointer-events: none; perspective: 1400px; }
.flight__stage a, .flight__stage button { pointer-events: auto; }
.chapter, .station, .frame { position: absolute; will-change: transform, opacity; }

/* hero */
.chapter--hero {
  left: var(--gutter); top: 50%; max-width: min(660px, 52vw);
  transform: translate3d(var(--x, 0px), -50%, 0); opacity: var(--o, 1);
}
.hero__title { font: 700 clamp(40px, 6.2vw, 104px)/0.98 var(--display); text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 26px; }
.hero__title .line { display: block; overflow: hidden; padding: 0.04em 0.06em; will-change: transform; }
.hero__title .line > span { display: inline-block; transform: translateY(110%); }
.hero__title .thin > span { font-weight: 300; }
.hero__sub { font-size: clamp(17px, 1.5vw, 21px); color: var(--muted); max-width: 42ch; margin: 0 0 34px; }
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; }
.chapter--hero .kicker, .hero__sub, .chapter--hero .hero__cta { opacity: 0; }

/* service cards: slide in from the right, out to the left (and back again when you scroll up) */
.station {
  top: 50%; width: min(460px, 37vw); padding: 30px 32px 28px; border-radius: 26px;
  background: linear-gradient(160deg, rgba(22, 28, 80, 0.8), rgba(6, 8, 26, 0.86));
  border: 1px solid var(--line);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  transform: translate3d(var(--x, 0px), -50%, 0) rotateY(var(--r, 0deg));
  opacity: var(--o, 0); visibility: hidden;
}
.station.is-right { right: var(--gutter); }
.station.is-left { left: var(--gutter); }
.station::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(209, 76, 255, 0.7), transparent 40%, transparent 70%, rgba(138, 43, 226, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.station__meta { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; }
.station__meta b { font: 800 46px/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(248, 221, 244, 0.75); }
.station__meta span { font: 600 11px/1 var(--display); letter-spacing: 0.24em; text-transform: uppercase; color: var(--pink); padding: 8px 12px; border: 1px solid rgba(248, 221, 244, 0.3); border-radius: 999px; }
.station__title { font: 700 clamp(26px, 2.5vw, 40px)/1.02 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.station__title em { font-style: normal; color: var(--pink); text-shadow: 0 0 24px rgba(214, 92, 240, 0.7); }
.station__lead { color: var(--muted); margin: 0 0 16px; font-size: 16px; }
.station__list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.station__list li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.4; }
.station__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; border-radius: 50%; background: var(--magenta); box-shadow: 0 0 10px var(--magenta); }
.station__link { font: 700 12px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; border-bottom: 1px solid var(--magenta); padding-bottom: 6px; }
.station__link span { display: inline-block; transition: transform .3s var(--ease); }
.station__link:hover span { transform: translateX(6px); }

/* picture frames sweep past faster on the other side (parallax) */
.frame {
  top: 50%; margin: 0; width: min(320px, 24vw); aspect-ratio: 4 / 5; border-radius: 22px; overflow: hidden;
  border: 1px solid rgba(248, 221, 244, 0.25);
  box-shadow: 0 0 0 1px rgba(176, 75, 255, 0.15), 0 30px 90px -20px rgba(138, 43, 226, 0.65);
  transform: translate3d(var(--x, 0px), -50%, 0) rotateY(var(--r, 0deg));
  opacity: var(--o, 0); visibility: hidden;
}
.frame.is-right { right: calc(var(--gutter) + 3vw); }
.frame.is-left { left: calc(var(--gutter) + 3vw); }
.frame img { width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--ix, 0%)) scale(1.18); }
.frame figcaption { position: absolute; left: 14px; bottom: 14px; font: 600 11px/1 var(--display); letter-spacing: 0.22em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; background: rgba(5, 6, 15, 0.65); border: 1px solid var(--line); }
.frame__play { position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; margin: -37px 0 0 -37px; border-radius: 50%; background: rgba(5, 6, 15, 0.55); border: 1px solid rgba(248, 221, 244, 0.7); backdrop-filter: blur(6px); animation: pulse 2s infinite; }
.frame__play::after { content: ""; position: absolute; left: 30px; top: 24px; border-left: 20px solid #fff; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(209, 76, 255, 0.6); } 100% { box-shadow: 0 0 0 26px rgba(209, 76, 255, 0); } }

/* finale */
.chapter--finale {
  left: 50%; bottom: 11vh; width: min(900px, 90vw); text-align: center;
  transform: translate3d(calc(-50% + var(--x, 0px)), 0, 0); opacity: var(--o, 0); visibility: hidden;
}
.chapter--finale .hero__cta { justify-content: center; }
.chapter--finale::before, .chapter--hero::before { content: ""; position: absolute; inset: -18% -12%; z-index: -1; pointer-events: none; background: radial-gradient(closest-side, rgba(5, 6, 15, 0.62), rgba(5, 6, 15, 0)); }

/* HUD */
.hud { position: absolute; inset: 0; }
.hud__map { position: absolute; left: var(--gutter); bottom: 26px; width: 210px; opacity: var(--o, 1); }
.hud__map svg { width: 100%; display: block; overflow: visible; }
.hud__map p { margin: 8px 0 0; font: 600 10px/1 var(--display); letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); }
.hud__track { fill: none; stroke: rgba(201, 168, 255, 0.26); stroke-width: 2; }
.hud__done { fill: none; stroke: var(--magenta); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 4px rgba(209, 76, 255, 0.9)); }
.hud__tick { fill: var(--bg); stroke: var(--pink); stroke-width: 1.5; }
.hud__tick.is-on { fill: var(--pink); }
.hud__dot { fill: #fff; filter: drop-shadow(0 0 6px #d14cff); }
.hud__count { position: absolute; right: var(--gutter); bottom: 28px; display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 4px 12px; opacity: var(--o, 1); }
.hud__count b { font: 800 46px/1 var(--display); color: #fff; text-shadow: 0 0 22px rgba(209, 76, 255, 0.8); }
.hud__count i { width: 42px; height: 1px; background: var(--line); }
.hud__count span { font: 600 14px/1 var(--display); color: var(--muted); letter-spacing: 0.1em; }
.hud__count em { grid-column: 1 / -1; font: 600 11px/1 var(--display); font-style: normal; letter-spacing: 0.26em; text-transform: uppercase; color: var(--pink); text-align: right; }
.hud__hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); white-space: nowrap; font: 600 11px/1 var(--display); letter-spacing: 0.26em; text-transform: uppercase; color: var(--muted); opacity: var(--o, 1); }
.hud__arrow { display: inline-block; color: var(--pink); animation: nudge 1.6s ease-in-out infinite; }
.hud__arrow:last-of-type { animation-direction: reverse; }
.hud__sep { margin: 0 8px; opacity: .5; }
@keyframes nudge { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(3px); } }

/* ---------- transparent LED: picture slides right, words slide left ---------- */
.led { position: relative; padding: clamp(110px, 16vh, 180px) 0 clamp(60px, 10vh, 120px); overflow: hidden; }
.led__track { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 5vw; align-items: center; padding: 0 var(--gutter); }
.led__img { border-radius: 28px; overflow: hidden; aspect-ratio: 16 / 10; border: 1px solid var(--line); box-shadow: 0 40px 120px -30px rgba(138, 43, 226, 0.75); }
.led__img img { width: 100%; height: 100%; object-fit: cover; }
.chips { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-wrap: wrap; gap: 10px; }
.chips li { padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; font: 600 11px/1 var(--display); letter-spacing: 0.16em; text-transform: uppercase; background: var(--glass); }
.led__ticker { margin: 80px 0 0; white-space: nowrap; font: 800 clamp(56px, 9vw, 150px)/1 var(--display); color: transparent; -webkit-text-stroke: 1px rgba(248, 221, 244, 0.35); }
.led__ticker span { display: inline-block; }

/* ---------- process: a sideways path ---------- */
.process__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 80px 0 30px; }
.process__head { padding: 0 var(--gutter); }
.process__track { position: relative; display: flex; gap: 5vw; width: max-content; padding: 34px var(--gutter) 0; }
.process__line { position: absolute; left: var(--gutter); right: var(--gutter); top: 57px; width: calc(100% - var(--gutter) * 2); height: 2px; overflow: visible; }
.process__line path { fill: none; stroke: var(--magenta); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px var(--magenta)); vector-effect: non-scaling-stroke; }
.process__track::before { content: ""; position: absolute; left: var(--gutter); right: var(--gutter); top: 57px; height: 1px; background: var(--line); }
.pstep { position: relative; flex: none; width: min(520px, 42vw); padding-top: 70px; opacity: 0.35; transition: opacity .6s var(--ease); }
.pstep.is-on { opacity: 1; }
.pstep span { position: absolute; top: 0; left: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-content: center; background: var(--bg); border: 1px solid var(--magenta); font: 700 13px/1 var(--display); color: var(--pink); transition: background .5s, box-shadow .5s; }
.pstep.is-on span { background: linear-gradient(135deg, var(--violet), var(--magenta)); color: #fff; box-shadow: 0 0 26px rgba(209, 76, 255, 0.8); }
.pstep h3 { font: 700 clamp(32px, 3.8vw, 60px)/1 var(--display); text-transform: uppercase; margin: 0 0 14px; }
.pstep p { color: var(--muted); font-size: 18px; max-width: 38ch; margin: 0; }

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .flight__stage { height: 100svh; }
  .chapter--hero { left: 20px; right: 20px; top: auto; bottom: 44px; max-width: none; text-align: center; transform: translate3d(var(--x, 0px), 0, 0); }
  .chapter--hero .hero__cta { justify-content: center; }
  .hero__sub { margin: 0 auto 26px; }
  .station { left: 14px; right: 14px; width: auto; top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding: 20px 20px 18px; transform: translate3d(var(--x, 0px), 0, 0); }
  .station.is-right, .station.is-left { left: 14px; right: 14px; }
  .station__meta b { font-size: 34px; }
  .station__lead { display: none; }
  .station__list { gap: 6px; }
  .station__list li { font-size: 14.5px; }
  .frame { display: none; }
  .hud__map { top: 74px; bottom: auto; left: 16px; width: 120px; }
  .hud__map p { display: none; }
  .hud__count { top: 74px; bottom: auto; right: 16px; }
  .hud__count b { font-size: 30px; }
  .hud__hint { display: none; }
  .chapter--finale { bottom: 9vh; }
  .led__track { grid-template-columns: 1fr; }
  .pstep { width: 78vw; }
}

/* ---------- reduced motion: a calm, readable list instead of the ride ---------- */
.reduced .flight { height: auto; }
.reduced .flight__stage { position: relative; height: auto; overflow: visible; display: grid; gap: 24px; padding: 120px var(--gutter) 60px; pointer-events: auto; }
.reduced .chapter, .reduced .station, .reduced .frame, .reduced .chapter--finale { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; max-width: 760px; transform: none; opacity: 1; visibility: visible; }
.reduced .hero__title .line > span, .no-js .hero__title .line > span { transform: none; }
.reduced .chapter--hero .kicker, .reduced .hero__sub, .reduced .chapter--hero .hero__cta,
.no-js .chapter--hero .kicker, .no-js .hero__sub, .no-js .chapter--hero .hero__cta { opacity: 1; }
.reduced .frame, .reduced .hud { display: none; }
.reduced .chapter--finale { text-align: left; }
.reduced .chapter--finale .hero__cta { justify-content: flex-start; }