/* home.css: scrollible.com's home page. Loaded after /shared/tokens.css and
   /shared/site.css, whose colours, header, footer and store badges it uses.

   THE STORY is six full-screen steps that snap, one per flick. The stage
   (the phone, its glow) is pinned behind them. A step only changes the
   stage's data-step; everything then moves on its own, by a transition of
   transform or opacity, so a flick back plays it in reverse and a new flick
   mid-move simply retargets. Nothing is written per frame. */

:root {
  --spring: cubic-bezier(.16, 1, .3, 1);      /* quick off the mark, long soft landing */
  --move: 620ms;                              /* the phone */
  --swipe: 520ms;                             /* a reel to the next */
  --fade: 420ms;
}

html { scroll-snap-type: y mandatory; }
.home main { width: 100%; }

/* ── header: floats over the story, out of the way on a full-screen reel ── */
.home .site-head {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  max-width: none;
  padding-left: max(24px, 3vw, env(safe-area-inset-left));
  padding-right: max(24px, 3vw, env(safe-area-inset-right));
  transition: transform var(--fade) var(--spring), opacity var(--fade), background-color .3s, box-shadow .3s;
}
.home.full .site-head { transform: translate3d(0, -100%, 0); opacity: 0; pointer-events: none; }
.home.solid .site-head { background: var(--paper); box-shadow: 0 1px 0 var(--edge); }

/* ── the story ─────────────────────────────────────────────────────────── */
.story { position: relative; }

.stage {
  position: sticky; top: 0; z-index: 1;
  height: 100vh; height: 100lvh;
  overflow: hidden;
  perspective: var(--persp, 2400px);
  contain: strict;
  width: 100%;
  --u: calc(78vh / 670);                      /* script sets the real size */
}

.steps {
  position: relative; z-index: 2;
  margin-top: -100vh; margin-top: -100lvh;
  pointer-events: none;
}
.step {
  position: relative;
  height: 100vh; height: 100svh;
  scroll-snap-align: start; scroll-snap-stop: always;
}
.step-tail { height: 0; height: calc(100lvh - 100svh); }
.cap { pointer-events: auto; }


/* ── the phone: planes built once, lit once, moved as one ─────────────── */
.rig, .glow {
  position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  transition: transform var(--move) var(--spring);
}
.rig { transform-style: preserve-3d; transform: var(--p0, translate3d(22vw, 2vh, 0)); }
.glow { transform: var(--g0, translate3d(22vw, 2vh, 0)); }
.stage[data-step="1"] .rig { transform: var(--p1); }  .stage[data-step="1"] .glow { transform: var(--g1); }
.stage[data-step="2"] .rig { transform: var(--p2); }  .stage[data-step="2"] .glow { transform: var(--g2); }
.stage[data-step="3"] .rig { transform: var(--p3); }  .stage[data-step="3"] .glow { transform: var(--g3); }
.stage[data-step="4"] .rig { transform: var(--p4); }  .stage[data-step="4"] .glow { transform: var(--g4); }
.stage[data-step="5"] .rig { transform: var(--p5); }  .stage[data-step="5"] .glow { transform: var(--g5); }

.phone {
  position: absolute;
  width: calc(320 * var(--u)); height: calc(670 * var(--u));
  left: calc(-160 * var(--u)); top: calc(-335 * var(--u));
  transform-style: preserve-3d;
}
.phone > * { position: absolute; display: block; }

/* the titanium band: ten outlines stacked 3.2 units apart through the phone's
   32-unit depth, lit darker toward the back. Seen straight on they hide behind
   the front; turned, they read as one solid, rounded edge. */
.ph-slice {
  inset: 0; border-radius: calc(55 * var(--u));
  border: calc(3.4 * var(--u)) solid color-mix(in srgb, #c9cdd1, #4d5256 calc(var(--k) * 10%));
  transform: translateZ(calc(var(--k) * -3.2 * var(--u)));
}
.ph-btn {
  left: calc(315.5 * var(--u)); width: calc(9 * var(--u)); border-radius: calc(4.5 * var(--u));
  background: linear-gradient(90deg, #6f7479, #d0d3d6 50%, #6f7479);
  transform: translateZ(calc(-16 * var(--u))) rotateY(90deg) translateZ(calc(1.3 * var(--u)));
}
.ph-power { top: calc(206 * var(--u)); height: calc(68 * var(--u)); }
.ph-cam { top: calc(380 * var(--u)); height: calc(46 * var(--u)); background: linear-gradient(90deg, #3a3e42, #7d8286 50%, #3a3e42); }

/* each outline's depth, and each reel's place in the stack (classes, not inline styles, so the page's CSP can forbid those) */
.k1 { --k: 1; } .k2 { --k: 2; } .k3 { --k: 3; } .k4 { --k: 4; } .k5 { --k: 5; } .k6 { --k: 6; } .k7 { --k: 7; } .k8 { --k: 8; } .k9 { --k: 9; } .k10 { --k: 10; }
.r0 { --i: 0; } .r1 { --i: 1; } .r2 { --i: 2; }

/* the front: a brushed rim, then the black of the glass */
.ph-body {
  inset: 0; border-radius: calc(55 * var(--u));
  background: linear-gradient(142deg, #eceef0 0%, #9ca1a6 12%, #5a5f64 30%, #8a8f94 52%, #474c50 74%, #b9bdc1 94%, #e2e4e6 100%);
}
.ph-body::before {
  content: ""; position: absolute; inset: calc(2.6 * var(--u)); border-radius: calc(52.4 * var(--u));
  background: #030405; box-shadow: inset 0 0 0 calc(.9 * var(--u)) rgba(255, 255, 255, .07);
}
.ph-screen {
  left: calc(11 * var(--u)); top: calc(11 * var(--u));
  width: calc(298 * var(--u)); height: calc(648 * var(--u));
  border-radius: calc(44 * var(--u)); overflow: hidden; background: #05080a;
  transform: translateZ(calc(.3 * var(--u)));
}
.ph-pill {
  left: calc(113.5 * var(--u)); top: calc(19.2 * var(--u));
  width: calc(93 * var(--u)); height: calc(27.4 * var(--u)); border-radius: calc(14 * var(--u));
  background: #000; transform: translateZ(calc(.6 * var(--u)));
}
.ph-glare {
  left: calc(11 * var(--u)); top: calc(11 * var(--u));
  width: calc(298 * var(--u)); height: calc(648 * var(--u)); border-radius: calc(44 * var(--u));
  background: linear-gradient(116deg, rgba(255,255,255,0) 28%, rgba(255,255,255,.13) 40%, rgba(255,255,255,.03) 50%, rgba(255,255,255,0) 58%);
  transform: translateZ(calc(.9 * var(--u)));
  pointer-events: none;
}
.ph-shadow {
  left: -8%; right: -8%; top: 4%; bottom: -6%;
  background: radial-gradient(closest-side, var(--phone-shadow), transparent);
  transform: translateZ(calc(-70 * var(--u)));
}
:root { --phone-shadow: rgba(16, 24, 32, .42); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --phone-shadow: rgba(0, 0, 0, .8); } }
:root[data-theme="dark"] { --phone-shadow: rgba(0, 0, 0, .8); }

/* what each step shows of the phone */
.ph-slice, .ph-btn, .ph-body, .ph-pill, .ph-glare, .ph-shadow { transition: opacity var(--fade) var(--spring); }
.ph-glare { opacity: .7; }
.stage[data-step="1"] .ph-glare { opacity: 1; }
.stage:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.ph-slice, .ph-btn, .ph-body, .ph-pill, .ph-glare, .ph-shadow) { opacity: 0; }

/* ── the reels, stacked in the screen; the current one is at 0 ─────────── */
.reel {
  position: absolute; inset: 0;
  transform: translate3d(0, calc((var(--i) - var(--cur, 0)) * 100%), 0);
  transition: transform var(--swipe) var(--spring);
}
.stage[data-reel="1"] .reel { --cur: 1; }
.stage[data-reel="2"] .reel { --cur: 2; }
.reel video { width: 100%; height: 100%; object-fit: cover; display: block; background: #05080a; }

/* ── the glow: the reel's own colours, spilling onto the page ──────────── */
.gl {
  position: absolute;
  width: calc(192 * var(--u)); height: calc(360 * var(--u));
  left: calc(-96 * var(--u)); top: calc(-180 * var(--u));
  background:
    radial-gradient(closest-side at 38% 40%, var(--c1), transparent),
    radial-gradient(closest-side at 62% 64%, var(--c2), transparent);
  transform: scale(3);
  opacity: 0; transition: opacity 700ms var(--spring);
}
.gl0 { --c1: #1d6fd6; --c2: #e0a928; }
.gl1 { --c1: #c58a4a; --c2: #4d76bb; }
.gl2 { --c1: #4f6a86; --c2: #1d3f66; }
.gl3 { --c1: #3a6ea8; --c2: #b98a4e; }
.stage { --glow: .42; }
.stage:is([data-step="2"], [data-step="3"], [data-step="4"]) { --glow: .3; }
.stage[data-reel="0"] .gl0, .stage[data-reel="1"] .gl1, .stage[data-reel="2"]:not([data-step="5"]) .gl2, .stage[data-step="5"] .gl3 { opacity: var(--glow); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .stage { --glow: .34; } }

/* ── captions: they ride their step, so they scroll with the flick ─────── */
.eyebrow {
  margin: 0 0 10px; font-size: 13px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-muted);
}
.cap h2 {
  margin: 0; font-size: clamp(30px, 3.1vw, 50px); line-height: 1.04; letter-spacing: -.03em; font-weight: 720;
  text-wrap: balance;
}
.cap p:not(.eyebrow) { margin: 14px 0 0; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; color: var(--ink-body); max-width: 26em; }

/* the headline is written on the way the app writes a verse: a paper strip a
   character ahead of the ink, line by line (ContentView.wipeBars) */
.verse {
  margin: 0; font: 500 clamp(40px, 4.3vw, 66px)/1.43 var(--font-serif); letter-spacing: -.005em;
  color: var(--band-ink); padding-left: .33em; max-width: 7em;
}
.verse .vl { position: relative; display: block; width: fit-content; margin-bottom: .14em; }
.verse .vp { position: absolute; inset: 0 -.33em; background: var(--band); border-radius: .28em; }
.verse .vi { position: relative; display: block; white-space: nowrap; }
.verse .vi, .verse .vp {
  -webkit-mask-image: linear-gradient(90deg, #000 var(--a, 100%), transparent var(--c, 100%));
  mask-image: linear-gradient(90deg, #000 var(--a, 100%), transparent var(--c, 100%));
}
.js .verse:not(.laid) { visibility: hidden; }
html:not(.js) .verse {
  background: var(--band); box-decoration-break: clone; -webkit-box-decoration-break: clone;
  display: inline; padding: .05em .33em; border-radius: .28em;
}
@media (prefers-color-scheme: light) { .verse .vp { background: #fff; } }

.more {
  position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom)); margin: 0;
  transform: translateX(-50%); font-size: 13px; font-weight: 600; color: var(--ink-muted); letter-spacing: .04em;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.more::after {
  content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); animation: nudge 1.8s var(--spring) infinite;
}
@keyframes nudge { 0%, 100% { transform: translateY(-2px) rotate(45deg); opacity: .5; } 50% { transform: translateY(3px) rotate(45deg); opacity: 1; } }

/* wide: captions in a column beside the phone */
@media (min-width: 820px) {
  .step { display: flex; align-items: center; }
  .cap {
    --side: max(6vw, calc((100vw - 1320px) / 2 + 24px));
    margin-left: var(--side);
    width: min(430px, calc(50vw - 22vh - var(--side) - 40px));
  }
  .s5 .cap { margin-left: auto; margin-right: var(--side); width: min(430px, 36vw); }
  .cap.lead { width: min(600px, 46vw); margin-top: 2vh; }
}

/* narrow: captions on top, the phone below; on a full-screen reel, a chip */
@media (max-width: 819.98px) {
  .cap {
    position: absolute; left: max(var(--gutter), env(safe-area-inset-left)); right: max(var(--gutter), env(safe-area-inset-right));
    top: calc(env(safe-area-inset-top) + 72px); text-align: center;
  }
  .cap p:not(.eyebrow) { margin-left: auto; margin-right: auto; }
  .cap h2 { font-size: clamp(27px, 7.4vw, 36px); }
  .cap p:not(.eyebrow) { margin-top: 8px; font-size: 16px; }
  .eyebrow { margin-bottom: 6px; font-size: 12px; }
  .cap.lead { top: calc(env(safe-area-inset-top) + 70px); }
  .verse { font-size: clamp(30px, 8.6vw, 40px); padding-left: 0; margin-left: auto; margin-right: auto; }
  .verse .vl { margin-left: auto; margin-right: auto; }
  .more { display: none; }
}
@media (max-width: 819.98px) and (max-height: 700px) {
  .verse { font-size: 29px; }
}

/* ── 1b · Home, in the phone, when it steps back out ─────────────────── */
.home-scr {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity var(--fade) var(--spring);
}
.home-scr video { width: 100%; height: 100%; object-fit: cover; display: block; background: #05080a; }
.stage[data-step="5"] .home-scr { opacity: 1; }

/* the loader, on the phone's screen until the first reel plays */
.ph-loader { display: none; }
.js .ph-loader {
  position: absolute; inset: 0; display: grid; place-items: center; background: #05080a;
  transition: opacity 360ms ease-out;
}
.stage.ready .ph-loader { opacity: 0; pointer-events: none; }
.loader-slot { width: calc(83 * var(--u)); height: calc(83 * var(--u)); display: grid; place-items: center; }
.loader-slot img { width: 100%; height: 100%; border-radius: 22.5%; animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 0%, 100% { opacity: .55; transform: scale(.94); } 50% { opacity: 1; transform: scale(1); } }

/* ── 3 · real pictures ─────────────────────────────────────────────────── */
.snap { scroll-snap-align: start; scroll-snap-stop: always; position: relative; z-index: 3; }
.pics {
  height: 100vh; height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top)) var(--gutter) 28px; gap: 18px;
  content-visibility: auto; contain-intrinsic-size: auto 100svh;
}
.pics h2 { margin: 0; font-size: clamp(28px, 3.4vw, 46px); line-height: 1.05; letter-spacing: -.03em; font-weight: 720; text-align: center; }
.pic-card {
  position: relative; flex: none;
  height: min(64svh, 660px, calc((100vw - 2 * var(--gutter)) * 16 / 9)); aspect-ratio: 9 / 16;
  border-radius: 26px; overflow: hidden; background: var(--card);
  box-shadow: 0 40px 70px -34px var(--phone-shadow), 0 18px 34px -22px var(--phone-shadow);
}
.pic {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  opacity: 0; transition: opacity 1400ms ease-in-out;
}
.pic.on { opacity: 1; }
.pic-ref { margin: 0; font: 500 17px/1.3 var(--font-serif); color: var(--ink-muted); min-height: 1.3em; transition: opacity 500ms; }
.pic-ref.swap { opacity: 0; }

/* ── 4 · get it ────────────────────────────────────────────────────────── */
.last { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
.get-it {
  flex: 1 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: calc(64px + env(safe-area-inset-top)) var(--gutter) 24px; text-align: center;
}
.get-it .stores { margin-top: 26px; }
.home .write { animation-play-state: paused; }
.home .get-it.seen .write { animation-play-state: running; }
.home .site-foot { max-width: none; width: 100%; }

/* ── still, for those who asked for less motion ────────────────────────── */
.rm .rig, .rm .glow, .rm .reel, .rm .gl, .rm .site-head, .rm .home-scr, .rm .pic,
.rm .ph-slice, .rm .ph-btn, .rm .ph-body, .rm .ph-pill, .rm .ph-glare, .rm .ph-shadow { transition: none !important; }
.rm .more::after, .rm .loader-slot img { animation: none; }
.now .rig, .now .glow, .now .reel, .now .gl, .now .home-scr,
.now .ph-slice, .now .ph-btn, .now .ph-body, .now .ph-pill, .now .ph-glare, .now .ph-shadow { transition: none !important; }