:root { --brand-logo-height: 51.44px; color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: #263a3b; background: #000; font-synthesis: none; }
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; }
body { overflow-x: clip; }
.scroll-story { --center-hold-scroll: 1000px; --livery-scroll: 1250px; height: calc(520vh + var(--center-hold-scroll) + var(--livery-scroll)); height: calc(520svh + var(--center-hold-scroll) + var(--livery-scroll)); }
.stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; isolation: isolate; background: #000; }
/* Start the one-time reveal after the first painted scene, so loading assets
   cannot use up the hold or expose a bright frame before the scrim appears. */
.stage::after { content: ''; position: absolute; inset: 0; z-index: 30; background: #000; opacity: .75; pointer-events: none; }
.stage[data-ready="true"]::after { animation: scene-reveal var(--scrim-reveal-duration, 1200ms) cubic-bezier(.22, 1, .36, 1) var(--scrim-reveal-delay, 500ms) both; }
@keyframes scene-reveal { from { opacity: .75; } to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .stage[data-ready="true"]::after { animation-duration: 1ms; animation-delay: 0ms; } }
.world { position: absolute; inset: 0; will-change: opacity; }
.world canvas { width: 100%; height: 100%; display: block; }
.world::after { content: ''; position: absolute; inset: 0; background: linear-gradient(var(--scrim-angle, 150deg), rgb(0 0 0 / var(--scrim-opacity, .65)) 0px, rgb(0 0 0 / 0) var(--scrim-distance, 50%)); pointer-events: none; }
.intro-copy {
  --hero-font-size: clamp(28px, 6vw, 96px);
  position: absolute; top: 96px; left: 96px; z-index: 1;
  display: flex; flex-direction: column; gap: 12px; width: 50%; max-width: 50vw;
  text-align: left; opacity: 0; pointer-events: none; will-change: opacity;
}
.intro-headline {
  margin: 0; color: #FFDE0A; font-size: var(--hero-font-size);
  font-weight: 900; line-height: 1.03; letter-spacing: -.035em; text-wrap: balance;
}
.intro-tagline {
  margin: 0; color: #000; font-size: calc(var(--hero-font-size) * .5);
  font-weight: 900; line-height: 1.2;
}
@media (max-width: 1200px) {
  .intro-copy { top: 64px; left: 48px; width: 60%; max-width: 640px; }
}
@media (max-width: 600px) {
  .intro-copy { --hero-font-size: clamp(38px, 10.5vw, 60px); top: max(48px, env(safe-area-inset-top)); left: 24px; width: calc(100% - 48px); max-width: none; }
  .intro-tagline { white-space: nowrap; }
}
@media (max-height: 500px) and (max-width: 1200px) {
  .intro-copy { --hero-font-size: clamp(28px, 5vw, 44px); top: 24px; left: 24px; width: 50%; }
  .intro-scroll { display: none !important; }
}
.intro-scroll { display: block; margin-top: 8px; flex: none; align-self: flex-start; width: 40px; height: 110px; color: rgb(0 0 0 / .35); transition: opacity 250ms ease; }
.scroll-cue { display: block; width: 100%; height: 100%; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.scroll-cue > rect, .scroll-cue-wheel { stroke: rgb(0 0 0 / .20); }
.scroll-cue-wheel { animation: scroll-cue-wheel 2800ms ease-in-out infinite; }
.scroll-cue-arrow { animation: scroll-cue-arrow 2800ms ease-in-out infinite; }
/* Fade the wheel in for 112ms, move it with the arrow reveal for 784ms,
   then fade it out for 112ms before arrow retraction. No wheel-only cycle.
   Stroke padding keeps the rounded tip intact. */
@keyframes scroll-cue-wheel {
  0%, 100% { transform: translateY(0); opacity: 0; }
  4% { transform: translateY(0); opacity: 1; }
  32% { transform: translateY(12px); opacity: 1; }
  36% { transform: translateY(12px); opacity: 0; }
  36.01% { transform: translateY(0); opacity: 0; }
}
@keyframes scroll-cue-arrow {
  0%, 4% { clip-path: inset(-2px -2px calc(100% + 2px) -2px) fill-box; }
  32%, 36% { clip-path: inset(-2px) fill-box; }
  58%, 100% { clip-path: inset(calc(100% + 2px) -2px -2px -2px) fill-box; }
}
.intro-headline, .intro-tagline, .intro-scroll { opacity: 0; transform: translateY(-16px); }
.stage[data-ready="true"] .intro-headline,
.stage[data-ready="true"] .intro-tagline,
.stage[data-ready="true"] .intro-scroll {
  animation: intro-text-reveal var(--intro-text-duration, 900ms) cubic-bezier(.22, 1, .36, 1) var(--intro-delay, 1950ms) both;
}
.stage[data-ready="true"] .intro-tagline { animation-delay: calc(var(--intro-delay, 1950ms) + var(--intro-stagger, 250ms)); }
.stage[data-ready="true"] .intro-scroll { animation-delay: var(--scroll-cue-delay, 4250ms); }
@keyframes intro-text-reveal { from { opacity: 0; transform: translateY(-16px); } to { opacity: var(--intro-opacity, 1); transform: translateY(0); } }
.stage[data-intro="complete"] .intro-headline,
.stage[data-intro="complete"] .intro-tagline { animation: none; opacity: var(--intro-opacity, 1); transform: none; }
.stage[data-scroll-cue-dismissed="true"] .intro-copy .intro-scroll { animation: none; opacity: 0; transform: none; }
.stage:not([data-ready="true"]) .phone { visibility: hidden; }
@media (prefers-reduced-motion: reduce) {
  .scroll-cue-wheel, .scroll-cue-arrow { animation: none; }
  .stage[data-ready="true"] .intro-headline,
  .stage[data-ready="true"] .intro-tagline,
  .stage[data-ready="true"] .intro-scroll { animation: none; opacity: var(--intro-opacity, 1); transform: none; }
}
/* 402 × 874 CSS-pixel display: the supplied 1206 × 2622 capture at 3×.
   The outer shell adds 7px per side; JavaScript only scales it down to fit. */
.phone { --shell-scale: 1.358108; position: absolute; top: 0; left: 0; width: 416px; height: 888px; padding: 7px; background: #0b0c0e; border: 2px solid #24262a; border-radius: 64px; box-shadow: 0 0 0 1px #08090a, 0 28px 65px -24px #0006, inset 0 0 0 2px #14161a; will-change: transform; transform-origin: center; }
/* Bleed the display underneath the bezel. The bezel covers its clipped edge,
   preventing a compositing seam as the phone moves between device pixels. */
.phone-screen { --phone-unit: .913636px; --photo-width: 90%; position: absolute; inset: 5px; overflow: hidden; border-radius: 57px; background: #000; isolation: isolate; }
.phone::after { content: ''; position: absolute; inset: 5px; border: 2px solid #0b0c0e; border-radius: 57px; z-index: 20; pointer-events: none; }
.phone-button { position: absolute; width: 3px; background: #1c1e22; border-radius: 3px; left: -4px; }.button-silent { top: calc(100px * var(--shell-scale)); height: calc(23px * var(--shell-scale)); }.button-volume { top: calc(145px * var(--shell-scale)); height: calc(65px * var(--shell-scale)); }.button-power { left: auto; right: -4px; top: calc(159px * var(--shell-scale)); height: calc(55px * var(--shell-scale)); }
/* iOS 27 light-content status bar, scaled from the camera's 440pt device.
   Keep both groups centred in the areas beside the Dynamic Island. */
.phone-status { position: absolute; top: 0; left: 0; right: 0; height: calc(62 * var(--phone-unit)); padding-top: calc(6 * var(--phone-unit)); z-index: 10; color: #fff; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.status-leading, .status-trailing { width: calc(157 * var(--phone-unit)); display: flex; align-items: center; justify-content: center; }
.status-leading time { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', sans-serif; font-size: calc(17 * var(--phone-unit)); line-height: calc(22 * var(--phone-unit)); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.025em; white-space: nowrap; }
.status-icons { display: flex; gap: calc(7 * var(--phone-unit)); align-items: center; }
.status-icons svg { display: block; flex: none; fill: currentColor; }
.status-cellular { width: calc(19.2 * var(--phone-unit)); height: calc(12.3 * var(--phone-unit)); }
.status-wifi { width: calc(17.4 * var(--phone-unit)); height: calc(12.5 * var(--phone-unit)); }
.status-battery { width: calc(27.5 * var(--phone-unit)); height: calc(13 * var(--phone-unit)); }
.battery-terminal { opacity: .45; }
.dynamic-island { position: absolute; z-index: 11; top: calc(10px * var(--shell-scale)); left: 50%; transform: translateX(-50%); width: calc(85px * var(--shell-scale)); height: calc(25px * var(--shell-scale)); background: #090b0d; border-radius: calc(20px * var(--shell-scale)); }
.camera-app, .photo-review, .spot-app { position: absolute; inset: 0; }
/* Tarmac sample (93, 107, 121), lifted toward white for a soft blue-gray glow. */
.photo-review { --photo-glow-rgb: 133 144 155; display: grid; place-items: center; background: #000; opacity: 0; pointer-events: none; }
.photo-review::after { content: ''; position: absolute; top: var(--photo-top); left: 50%; width: var(--photo-width); height: var(--photo-height); transform: translateX(-50%); border-radius: calc(18 * var(--phone-unit)); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .50); mix-blend-mode: overlay; pointer-events: none; }
.photo-loading { position: absolute; inset: 0; opacity: 0; transition: opacity 240ms ease-out; }
.photo-review[data-analyzing="true"] .photo-loading { opacity: 1; }
.photo-glow {
  position: absolute; top: var(--photo-top); left: 50%; width: var(--photo-width); height: var(--photo-height); transform: translateX(-50%); border-radius: calc(18 * var(--phone-unit));
  box-shadow:
    0 0 2px rgb(var(--photo-glow-rgb) / .30),
    0 0 6px rgb(var(--photo-glow-rgb) / .27),
    0 0 12px rgb(var(--photo-glow-rgb) / .24),
    0 0 24px rgb(var(--photo-glow-rgb) / .21),
    0 0 48px rgb(var(--photo-glow-rgb) / .18),
    0 0 64px 8px rgb(var(--photo-glow-rgb) / .15);
}
.photo-analysis {
  position: absolute; top: calc(var(--photo-top) - 53 * var(--phone-unit)); left: 0; right: 0; margin: 0; text-align: center; font-family: ui-monospace, 'SFMono-Regular', Menlo, Monaco, Consolas, monospace; font-size: calc(19.125 * var(--phone-unit)); line-height: calc(27 * var(--phone-unit)); font-weight: 400;
}
/* HomeCrtPhosphorText's separate near/wide yellow emissions (70% / 35%,
   each at 45% intensity). Soft glyph copies strengthen the web halo while
   the foreground stays sharp. The analyzing label pulses all layers together. */
.phosphor-label { --phosphor-yellow: #FFDE0A; color: var(--phosphor-yellow); isolation: isolate; }
.phosphor-glow { position: absolute; inset: 0; pointer-events: none; }
.phosphor-glow-near {
  opacity: .315;
  filter: blur(calc(2 * var(--phone-unit)));
  text-shadow: 0 0 calc(10 * var(--phone-unit)) var(--phosphor-yellow);
}
.phosphor-glow-wide {
  opacity: .1575;
  filter: blur(calc(5 * var(--phone-unit)));
  text-shadow: 0 0 calc(18 * var(--phone-unit)) var(--phosphor-yellow);
}
.phosphor-text {
  position: relative;
  text-shadow:
    calc(-2 * var(--phone-unit)) 0 0 rgb(239 67 64 / .35),
    calc(2 * var(--phone-unit)) 0 0 rgb(32 188 117 / .35);
}
.captured-photo { position: relative; display: block; width: var(--photo-width); height: auto; aspect-ratio: 2 / 3; border-radius: calc(18 * var(--phone-unit)); }
.photo-review[data-analyzing="true"] .captured-photo,
.photo-review[data-analyzing="true"] .photo-analysis { animation: photo-analyzing 2200ms cubic-bezier(.45, 0, .55, 1) infinite; }
.photo-review[data-analyzing="true"] .photo-analysis { animation-delay: 150ms; }
@keyframes photo-analyzing { 0%, 100% { opacity: 1; } 50% { opacity: .50; } }
@media (prefers-reduced-motion: reduce) {
  .photo-loading { transition: none; }
  .photo-review[data-analyzing="true"] .captured-photo,
  .photo-review[data-analyzing="true"] .photo-analysis { animation: none; }
}
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }.no-script { position: fixed; inset: 0; display: grid; place-items: center; background: #f3f3ee; z-index: 99; }