/* the homepage: the hero and the feature sheets stick and the next one slides up over them, a strip of cards slides sideways, and the footer fades in out of the dots */
.home-page {
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --nav-h: 96px;
  --edge: max(24px, calc((100vw - 1320px) / 2 + 24px));
  overflow-x: clip;
}
.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* ---------- the top bar: fixed, frosted once you've scrolled ---------- */
.topnav { position: fixed; inset: 0 0 auto; z-index: 50; transition: background-color 0.35s, box-shadow 0.35s, -webkit-backdrop-filter 0.35s, backdrop-filter 0.35s; }
.topnav.solid { background-color: rgba(14, 14, 15, 0.72); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }
.nav { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); transition: height 0.35s var(--ease); }
.topnav.solid .nav { height: 72px; }
.nav .brand-name { font-size: 25px; }
.nav .brand-sub { font-size: 25px; font-weight: 300; text-decoration: none; transition: color 0.15s; }
.nav .brand-sub:hover { color: var(--fg); }
.nav-links { display: flex; align-items: center; gap: 18px; font-weight: 700; font-size: clamp(16px, 1.45vw, 22px); letter-spacing: -0.02em; text-transform: uppercase; }
.nav-links a { color: var(--soft); text-decoration: none; transition: color 0.15s; }
.nav-links a:hover { color: var(--fg); }
.nav-links span { width: 2px; height: 1.1em; background: var(--soft); opacity: 0.6; }
.nav-toggle { display: none; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: #1d1d20; color: #fff; cursor: pointer; }
.nav-toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; }

/* ---------- words and buttons ---------- */
.big { font-weight: 800; letter-spacing: -0.065em; line-height: 0.96; margin: 0; text-wrap: balance; }
.big.l { font-size: clamp(44px, 5.6vw, 84px); }
.lead { color: var(--soft); font-size: clamp(19px, 2.1vw, 31px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.15; margin: 16px 0 0; max-width: 15em; }
.words.right { text-align: right; justify-self: end; }
.words.right .lead { margin-left: auto; }
.pill {
  display: inline-flex; align-items: center; gap: 14px; padding: 16px 30px 16px 18px; border: 0; border-radius: 999px;
  background: #1d1d1f; color: #c9c9cf; font: 700 clamp(19px, 1.9vw, 28px)/1 var(--font); letter-spacing: -0.04em; text-decoration: none; cursor: pointer;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.pill:hover { background: #242427; color: #fff; }
.pill i { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e6e6e6; color: #1d1d1f; flex: none; }
.pill i svg { width: 62%; height: 62%; fill: currentColor; }
.pill i svg.line { fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pill.white { background: #fff; color: #000; padding: 20px 40px; justify-content: center; }
.pill.small { font-size: 16px; padding: 11px 18px; gap: 10px; }
.pill.small i { width: 16px; height: 16px; }

/* ---------- the sheets: each fills the screen and sticks, the next slides up over it and it sinks back ---------- */
.stack { position: relative; }
.scene { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; border-radius: 40px 40px 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55); }
.scene.hero { border-radius: 0; box-shadow: none; }
/* the girl and the ring hang off the window's right edge like the concept, not the text column, and she never gets wider than the right half, so the headline stays clear of her */
.hero { --m-w: min(calc(98vh * 1095 / 1858), 42vw); --m-r: max(24px, 3vw); }
/* home.js moves these with plain transforms as you scroll; will-change keeps each on its own gpu layer, so a scroll frame only shifts layers and never repaints a sheet */
.scene-body { position: absolute; inset: 0; transform-origin: 50% 30%; will-change: transform; }
.shade { position: absolute; inset: 0; z-index: 6; background: #000; opacity: 0; border-radius: inherit; pointer-events: none; will-change: opacity; }
.scene-grid { position: relative; z-index: 2; height: 100%; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; padding-top: var(--nav-h); }
.scene.flip .words { grid-column: 2; }

/* the words slide in from their own side, the phones rise from below at their own speeds and drift up as the sheet is covered */
.scene .words { will-change: transform, opacity; }
.art { position: absolute; inset: 0; pointer-events: none; }
.slot { position: absolute; pointer-events: auto; will-change: transform; }
.slot .phone { width: 100%; }
.slot.cut { right: var(--edge); top: 24vh; width: min(560px, 40vw); --rise: 320px; --turn: 4deg; }
.slot.cut .phone { height: 92vh; aspect-ratio: auto; }
.slot.cut .phone img { object-position: top; }
.duo .slot { width: clamp(220px, 21vw, 330px); }
.duo.left .a { left: var(--edge); top: 19vh; --rise: 200px; --lift: 40px; --turn: -5deg; }
.duo.left .b { left: calc(var(--edge) + 15vw); top: 28vh; --rise: 340px; --lift: 90px; }
.duo.right .a { right: var(--edge); top: 18vh; --rise: 200px; --lift: 40px; }
.duo.right .b { right: calc(var(--edge) + 15vw); top: 29vh; --rise: 340px; --lift: 90px; --turn: -6deg; }
.phone.tilt { transition: transform 0.5s var(--spring); }

/* ---------- the hero ---------- */
/* two rows of outlined words drifting forever, mochy to the right and music to the left; each row is two identical halves, so sliding by half loops without a seam */
.ghost {
  position: absolute; left: 0; right: 0; top: 9vh; z-index: 0; font: 800 clamp(140px, 21vw, 400px)/0.82 var(--font); letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06); white-space: nowrap; pointer-events: none; user-select: none;
  will-change: transform;
}
.ghost-row { display: flex; width: max-content; will-change: transform; animation: drift 46s linear infinite; }
.ghost-row span { padding-right: 0.22em; }
.ghost-row.to-right { animation-direction: reverse; }
.ghost-row.to-left { animation-duration: 52s; }
.ring-wrap { position: absolute; z-index: 0; right: calc(var(--m-r) + var(--m-w) / 2 - min(500px, 35vw)); top: -22vh; width: min(1000px, 70vw); aspect-ratio: 1; pointer-events: none; will-change: transform; }
.ring { width: 100%; height: 100%; will-change: transform; animation: ring-in 1.6s var(--ease) both, spin 70s linear 1.6s infinite; }
.ring circle { fill: none; stroke: rgba(255, 255, 255, 0.035); stroke-width: 150; }
/* the path runs a little inside the band, so the letters' middle lands on the band's middle in every browser */
.ring text { fill: rgba(255, 255, 255, 0.075); font: 600 66px "Fira Code", ui-monospace, Menlo, monospace; }
/* once a sheet covers the hero nothing in it needs to keep moving */
.resting .ring { animation-play-state: running, paused; }
.resting .ghost-row { animation-play-state: paused; }
.hero h1 { margin: 0; font-weight: 800; letter-spacing: -0.065em; line-height: 0.95; }
.hero h1 .w { display: block; color: #fff; font-size: clamp(48px, 5vw, 82px); animation: rise-in 0.9s var(--ease) 0.1s both; }
.hero h1 .s { display: block; color: #c6c6c6; white-space: nowrap; font-size: clamp(52px, 7.2vw, 126px); animation: rise-in 0.9s var(--ease) 0.22s both; }
.hero .cta { display: flex; flex-wrap: wrap; gap: 20px; margin-top: clamp(48px, 13vh, 150px); animation: rise-in 0.9s var(--ease) 0.36s both; }
.hero-copy { will-change: transform, opacity; }
.mascot-wrap { position: absolute; z-index: 1; right: var(--m-r); bottom: -16vh; width: var(--m-w); aspect-ratio: 1095 / 1858; transform-origin: 50% 100%; will-change: transform; }
.mascot { width: 100%; height: 100%; animation: mascot-in 1.3s var(--ease) 0.15s both; }
.cue { position: absolute; z-index: 3; left: 0; right: 0; width: max-content; margin-inline: auto; bottom: 28px; display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--faint); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; animation: rise-in 0.9s var(--ease) 0.9s backwards; }
.cue i { width: 1px; height: 38px; background: linear-gradient(var(--faint), transparent); transform-origin: top; animation: cue 1.8s var(--ease) infinite; }
.resting .cue i { animation-play-state: paused; }
@keyframes rise-in { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mascot-in { from { opacity: 0; transform: translateY(140px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes ring-in { from { opacity: 0; transform: scale(0.82) rotate(-40deg); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
@keyframes cue { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- the strip: pinned while it slides sideways, the card in the middle the biggest ---------- */
.rail { position: relative; height: 300vh; border-radius: 40px 40px 0 0; box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.55); }
.rail-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 5vh; padding-top: var(--nav-h); }
.rail-head { will-change: transform, opacity; }
.rail-track { display: flex; gap: 22px; width: max-content; padding-inline: var(--edge); will-change: transform; }
.card {
  position: relative; flex: none; width: clamp(280px, 26vw, 380px); height: clamp(380px, 56vh, 560px); overflow: hidden; padding: 28px 28px 0;
  border-radius: 32px; background: var(--card); box-shadow: 0 0 0 1px var(--line); text-decoration: none;
  transition: background 0.2s; will-change: transform;
}
a.card:hover { background: #1b1b1e; }
.card h3 { margin: 0; font-size: clamp(22px, 2vw, 28px); font-weight: 800; letter-spacing: -0.045em; line-height: 1.04; }
.card p { margin: 10px 0 0; color: var(--soft); font-size: 15px; line-height: 1.45; }
.card .phone { position: absolute; left: 50%; bottom: 0; width: 62%; border-radius: 32px; box-shadow: 0 0 0 1px var(--frame); transform: translate(-50%, 36%); }
.card.end { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 30px; background: #fff; color: #000; }
.card.end p { color: #555; }
a.card.end:hover { background: #ececf0; }

/* ---------- after the sheets ---------- */
.js .reveal { opacity: 0; transform: translateY(48px) scale(0.98); transition: opacity 0.9s var(--ease), transform 1s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.tour-scene { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: 48px; padding-block: 140px 80px; }
.contact { text-align: center; padding-block: 160px 40px; }
.contact h2 { font-size: clamp(34px, 3.8vw, 52px); font-weight: 800; letter-spacing: -0.06em; line-height: 1.05; margin: 0 0 40px; text-wrap: balance; }
.contact .pill.white { min-width: min(396px, 100%); font-size: 20px; }

/* the footer fades in out of the dots instead of starting at a hard edge */
.foot { position: relative; padding: clamp(140px, 24vh, 260px) 0 46px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8) 120px, #000 220px); }
.foot-grid { display: flex; justify-content: space-between; gap: 30px; }
.foot .brand-name { font-size: 27px; font-weight: 600; }
.foot small { display: block; color: var(--soft); font-size: 15px; margin-top: 6px; letter-spacing: -0.02em; }
.foot .year { color: var(--soft); margin-top: 70px; }
.foot nav { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; font-size: 15px; }
.foot nav a { color: var(--soft); text-decoration: none; transition: color 0.15s; }
.foot nav a:hover { color: #fff; }

/* ---------- phones and tablets: the sheets flow one after another, the strip swipes ---------- */
@media (max-width: 980px) {
  .home-page { --nav-h: 76px; }
  .nav .brand-sep, .nav .brand-sub { display: none; }
  .nav .brand-name { font-size: 21px; }
  .nav-links { display: none; }
  .nav-toggle { display: grid; }
  .nav.open .nav-links { display: flex; position: absolute; top: calc(var(--nav-h) - 6px); right: 0; flex-direction: column; align-items: flex-end; gap: 12px; padding: 18px 22px; border-radius: 22px; background: #161618; box-shadow: 0 0 0 1px var(--line), 0 20px 50px rgba(0, 0, 0, 0.5); font-size: 18px; animation: rise-in 0.35s var(--ease) both; }
  .nav.open .nav-links span { display: none; }
  .scene { min-height: 0; border-radius: 28px 28px 0 0; }
  .scene-body { display: flex; flex-direction: column; }
  .scene-grid { height: auto; flex: none; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: calc(var(--nav-h) + 28px); }
  .scene.flip .words { grid-column: 1; }
  .words.right { text-align: left; justify-self: start; }
  .words.right .lead { margin-left: 0; }
  .art { position: relative; inset: auto; flex: 1; margin-top: 32px; }
  .slot.cut { left: 50%; right: auto; top: 0; width: min(330px, 80vw); margin-left: calc(min(330px, 80vw) / -2); }
  .slot.cut .phone { height: 700px; }
  .duo .slot { width: min(210px, 46vw); }
  .duo.left .a, .duo.right .b { left: 5%; right: auto; top: 0; }
  .duo.left .b, .duo.right .a { left: auto; right: 5%; top: 64px; }
  .ghost { top: calc(var(--nav-h) + 8px); font-size: 33vw; }
  .ring-wrap { width: 120vw; right: -50vw; top: 18vh; }
  .hero h1 .s { white-space: normal; }
  .hero .cta { margin-top: 36px; }
  .hero .pill { font-size: 18px; padding: 13px 22px 13px 14px; }
  .hero .pill i { width: 22px; height: 22px; }
  .mascot-wrap { left: 0; right: 0; margin-inline: auto; bottom: -14svh; width: min(400px, 84vw, 36svh); }
  .cue { display: none; }
  .rail { position: relative; z-index: 1; height: auto !important; border-radius: 28px 28px 0 0; }
  .rail-pin { position: relative; height: auto; padding: 72px 0 56px; gap: 32px; }
  .rail-track { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding-inline: 24px; padding-bottom: 6px; transform: none !important; scrollbar-width: none; }
  .rail-track::-webkit-scrollbar { display: none; }
  .card { will-change: auto; width: 76vw; max-width: 340px; height: 460px; transform: none; scroll-snap-align: start; }
  .card .phone { transform: translate(-50%, 36%); }
  .tour-scene { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 96px 40px; }
  .contact { padding-block: 110px 20px; }
  .foot-grid { flex-direction: column; }
  .foot nav { align-items: flex-start; }
  .foot .year { margin-top: 30px; }
}

/* without motion the sheets simply follow each other, nothing rides the scroll */
@media (prefers-reduced-motion: reduce) {
  .scene { position: relative; }
  .rail { height: auto !important; }
  .rail-pin { position: relative; height: auto; padding-block: 96px 64px; }
  .rail-track { width: auto; overflow-x: auto; transform: none !important; }
}