/* Snapshot landing page, glass edition: midnight, a quiet star field, clear glass with lit edges. No colour washes.
   Laid out with room to breathe: the copy has the first screen, the showcase rises from its lower edge (Cluely-style). */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-italic.woff2) format('woff2'); }
:root { --muted: #8A90A2; --faint: #5C6274; --pad: clamp(20px, 4vw, 48px);
  --glass: linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.025));
  --rim: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(255,255,255,.05), inset 0 0 0 1px rgba(255,255,255,.07);
  --surface: #17151F; --surface-base: #0C0B12;
  /* sized so the whole showcase fits in the first screen on a laptop, never smaller than 500 */
  --cw: min(860px, calc(100vw - 2 * var(--pad) - 24px), max(500px, calc((100svh - 460px) * 1.5))); }
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: #000; overflow-x: clip; }
body { min-height: 100dvh; display: flex; flex-direction: column; color: #F4F4F6; overflow-x: clip;
  font: 16px/1.5 Inter, system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  background:
    radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,.5), transparent 60%), radial-gradient(1px 1px at 78% 12%, rgba(255,255,255,.4), transparent 60%),
    radial-gradient(1px 1px at 64% 38%, rgba(255,255,255,.3), transparent 60%), radial-gradient(1px 1px at 30% 62%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(1px 1px at 88% 70%, rgba(255,255,255,.4), transparent 60%), radial-gradient(1px 1px at 6% 84%, rgba(255,255,255,.3), transparent 60%),
    radial-gradient(1.5px 1.5px at 46% 8%, rgba(255,255,255,.45), transparent 60%), radial-gradient(1px 1px at 94% 40%, rgba(255,255,255,.3), transparent 60%),
    linear-gradient(180deg, #000 0%, #000 55%, #000 100%); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.09) .6px, transparent .8px); background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
/* the night flight behind the hero (sky.js): it fades out before the page below */
.sky { position: absolute; left: 0; top: 0; width: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 280px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 280px), transparent); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
svg { display: block; flex: none; }
.i { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Header: logo, the step dots in the middle, links */
.top { position: sticky; top: 0; z-index: 20; flex: none; height: 72px; padding: 0 var(--pad); display: grid; grid-template-columns: 1fr auto; align-items: center; }
.brand { justify-self: start; display: flex; align-items: center; gap: 10px; }
.brand sup { align-self: flex-start; margin: -1px 0 0 -6px; font-size: 10px; font-weight: 600; }
nav { justify-self: end; display: flex; align-items: center; gap: 24px; }
.link { font-size: 14px; color: var(--muted); transition: color .15s; }
.link:hover { color: #fff; }
.get { height: 48px; padding: 0 24px 0 20px; border-radius: 999px; background: #F4F4F6; color: #000; display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; white-space: nowrap; box-shadow: inset 0 -2px 0 rgba(0,0,0,.08), 0 8px 30px rgba(255,255,255,.08); transition: background-color .15s, transform .1s; }
.get:hover { background: #fff; }
.get:active { transform: scale(.98); }
.get.sm { height: 36px; padding: 0 16px; font-size: 14px; }

.hero { position: relative; z-index: 1; flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: clamp(28px, 6vh, 72px) var(--pad) clamp(64px, 10vh, 120px);
  display: flex; flex-direction: column; align-items: center; text-align: center; }
h1 { font-size: clamp(36px, min(5vw, 7.4vh), 64px); font-weight: 600; letter-spacing: -.035em; line-height: 1.06; text-wrap: balance; }
/* "snapshot." flies in place (zip.js); its streaks only ever trail off to the right */
.lot { display: inline-block; }
.zip { position: relative; display: inline-block; transform: translateX(var(--x, 0px)); }
.zip .word { display: inline-block; transform-origin: 0% 85%; }
/* the road it leaves behind: plain white streaks, only as bright as it is fast */
.zip .lane { position: absolute; left: 55%; top: 8%; bottom: 4%; width: 1400px; pointer-events: none; opacity: var(--lane, 0); }
.zip .lane i { position: absolute; left: 0; height: var(--h); width: var(--w); border-radius: 99px; background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(255,255,255,0)); }
/* the road fades in from the word and out to the right, so nothing pops in or ends on a hard edge */
.zip .lane { -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 45%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 45%, transparent); }
/* one small four-point glint that twinkles as it settles */
.zip .sparks { position: absolute; inset: 0; pointer-events: none; }
.zip .sparks svg { position: absolute; width: .26em; height: .26em; margin: -.13em; fill: #fff; transform: scale(0); }
.lede { margin-top: clamp(16px, 2.6vh, 26px); font-size: 19px; color: var(--muted); text-wrap: balance; }
.lede strong { color: #F4F4F6; font-weight: 600; }
.cta { margin-top: clamp(28px, 4.6vh, 44px); display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.aside { font-size: 13px; color: var(--faint); }

/* The showcase: the clip in a dark frame, lit along its top edge, sitting on a soft shadow with a hint of the tiles' purple */
.show { margin-top: clamp(40px, 6vh, 64px); width: 100%; display: flex; flex-direction: column; align-items: center; }
.slab { position: relative; margin-top: 0; width: calc(var(--cw) + 24px); max-width: 100%; }
.glass { position: relative; z-index: 1; padding: 12px; border-radius: 28px; background: linear-gradient(180deg, #24212F, #17151F);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.04),
    0 18px 36px -8px rgba(0,0,0,.55), 0 50px 100px -24px rgba(0,0,0,.75), 0 30px 120px -20px rgba(123,92,255,.18); }
.media { position: relative; aspect-ratio: 3 / 2; border-radius: 16px; overflow: hidden; background: #000; }
.media > * { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; }
.media > .on { opacity: 1; }

/* the header stays at the top; once the page scrolls a black backdrop fades in behind it */
.top::before { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0,0,0,.92); box-shadow: 0 1px 0 rgba(255,255,255,.06); opacity: 0; transition: opacity .25s ease; }
.top.stuck::before { opacity: 1; }

/* The close (Phantom-style): one big line pinned BEHIND the tiles, so the cards scroll up and off over it, with Wick
   standing where the last word would start. Hidden until the tiles have mostly gone (close.js adds .in); then the
   words rise one by one and Wick drops in, and from then on he hops, blinks and his flame flickers. */
.reveal { display: flex; flex-direction: column; }
.reveal > .features { margin-top: -100svh; margin-bottom: 100svh; }   /* over the pinned line, then a screen of room so it stays pinned until the tiles are gone */
.reveal > .close { order: -1; }
.close { position: sticky; top: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100svh; padding: 0 var(--pad); text-align: center; pointer-events: none; }
.say { font: 500 clamp(40px, 7.4vw, 104px)/1.05 'Rethink Sans', Inter, system-ui, sans-serif; letter-spacing: -.035em; color: #F4F4F6; }
.say .w { display: inline-block; } .say .ph { display: none; }
.close .more { margin-top: clamp(28px, 4vh, 44px); pointer-events: auto; }
.hop { position: relative; display: inline-block; width: .7em; height: 1.26em; margin: 0 .14em 0 .22em; vertical-align: -.08em; }
.hopin { position: absolute; inset: 0; }
.hop .wk { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; overflow: visible; }
.wk * { transform-box: fill-box; }
.wk-hop, .wk-flame { transform-origin: 50% 100%; } .wk-eyes, .wk-glow { transform-origin: 50% 50%; }
.wk-joy { opacity: 0; }
.hop .shadow { position: absolute; left: 4%; right: 4%; bottom: -.05em; height: .07em; border-radius: 50%; background: rgba(255,255,255,.13); }
.hop .dot { position: absolute; width: .2em; height: .2em; fill: #FFE680; opacity: 0; left: -.22em; top: .12em; }
.hop .d2 { left: auto; right: -.24em; top: .02em; width: .14em; height: .14em; fill: #fff; }
/* hidden until the tiles have scrolled off; the motion itself only without reduced motion */
.close .w, .close .hopin { opacity: 0; }
.close.in .w, .close.in .hopin { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .close .w { translate: 0 .45em; transition: opacity .5s ease, translate .9s cubic-bezier(.3, 1.22, .5, 1); transition-delay: calc(var(--i) * 90ms); }
  .close.in .w { translate: none; }
  .close.in .hopin { animation: drop .9s .32s cubic-bezier(.4, 0, .6, 1) both; transform-origin: 50% 100%; }
  .close.in .wk-flame { animation: wkflick .45s ease-in-out infinite alternate; }
  .close.in .wk-glow { animation: wkglow 2.4s ease-in-out infinite; }
  .close.in .wk-eyes { animation: wkeyes 3.4s 1.5s infinite; }
  .close.in .wk-joy { animation: wkjoy 3.4s 1.5s infinite; }
  .close.in .wk-hop { animation: hop 3.4s 1.5s infinite; }
  .close.in .shadow { animation: shade 3.4s 1.5s infinite; }
  .close.in .dot { animation: pop 3.4s 1.5s infinite; } .close.in .d2 { animation-name: pop2; }
}
@keyframes drop { 0% { transform: translateY(-150%); opacity: 0; } 30% { opacity: 1; } 52% { transform: none; animation-timing-function: ease-out; }
  64% { transform: scale(1.16, .8); } 80% { transform: scale(.95, 1.06); } 100% { transform: none; opacity: 1; } }
/* a happy hop: a little bob, then crouch, jump with a tilt of joy (eyes go ^ ^), land squashed */
@keyframes hop { 0%, 20% { transform: none; } 26% { transform: translateY(-3%); } 32%, 56% { transform: none; }
  62% { transform: scale(1.1, .86); animation-timing-function: cubic-bezier(.2, .8, .4, 1); }
  74% { transform: translateY(-34%) rotate(-8deg) scale(.94, 1.08); animation-timing-function: cubic-bezier(.6, 0, .8, .4); }
  86% { transform: scale(1.14, .84); animation-timing-function: ease-out; } 92% { transform: scale(.97, 1.04); } 100% { transform: none; } }
@keyframes shade { 0%, 62%, 86%, 100% { transform: none; opacity: 1; } 74% { transform: scaleX(.55); opacity: .4; } }
@keyframes wkeyes { 0%, 10%, 16%, 60%, 100% { transform: none; opacity: 1; } 13% { transform: scaleY(.1); } 63%, 95% { opacity: 0; } }
@keyframes wkjoy { 0%, 60%, 97%, 100% { opacity: 0; } 63%, 95% { opacity: 1; } }
@keyframes wkflick { to { transform: scale(1.1, .9) rotate(5deg); } }
@keyframes wkglow { 50% { transform: scale(1.15); opacity: .4; } }
@keyframes pop { 0%, 85% { opacity: 0; transform: scale(0) rotate(0); } 89% { opacity: 1; transform: scale(1.1) rotate(45deg); } 97%, 100% { opacity: 0; transform: scale(.4) rotate(90deg); } }
@keyframes pop2 { 0%, 87% { opacity: 0; transform: scale(0); } 91% { opacity: 1; transform: scale(1) rotate(-30deg); } 99%, 100% { opacity: 0; transform: scale(.3) rotate(-70deg); } }

/* The footer (Phantom-style): a big rounded card with the mark on the left, link columns on the right and a small pill;
   the small print sits under it, outside the card */
.foot { position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 var(--pad) 28px; text-align: left; }
.fcard { display: grid; grid-template-columns: 1fr minmax(0, 1.15fr); grid-template-rows: 1fr auto; gap: 48px 32px; min-height: 380px;
  padding: clamp(32px, 4vw, 48px); border-radius: 28px; background: var(--surface); }
.fmark { align-self: start; justify-self: start; color: #F4F4F6; }
.fmark svg { width: 64px; height: auto; }
.fcols { grid-row: 1 / 3; grid-column: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-content: start; }
.fcol { display: flex; flex-direction: column; align-items: flex-start; justify-self: start; gap: 12px; font-size: 14px; }   /* not the header nav's layout */
.fcol h3 { margin-bottom: 2px; font-size: 14px; font-weight: 500; color: var(--faint); }
.fcol a { display: inline-flex; align-items: center; gap: 8px; color: #E4E4EA; font-weight: 500; transition: color .15s; } .fcol a:hover { color: #fff; }
.fcol .tag { padding: 1px 7px; border-radius: 999px; background: #7B5CFF; color: #fff; font-size: 10px; font-weight: 700; line-height: 15px; }
.fpill { align-self: end; justify-self: start; display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 12px; border-radius: 999px;
  background: rgba(255,255,255,.06); font-size: 13px; font-weight: 500; color: #E4E4EA; }
.fpill .led { width: 7px; height: 7px; border-radius: 50%; background: #3DDC97; box-shadow: 0 0 0 3px rgba(61,220,151,.15); }
.fbase { display: flex; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; padding: 22px 4px 0; font-size: 12px; color: var(--faint); }

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: in .9s cubic-bezier(.2, .7, .2, 1) both; }
  .hero > :nth-child(2) { animation-delay: .06s; } .hero > :nth-child(3) { animation-delay: .12s; } .hero > :nth-child(4) { animation-delay: .2s; }
}
@keyframes in { from { opacity: 0; transform: translateY(12px); } }


@media (max-width: 700px) {
  .top { grid-template-columns: 1fr auto; }
  .link, .get.sm { display: none; }
  .hero { padding-top: 40px; padding-bottom: 48px; }
  .show { margin-top: 40px; }
  .slab { margin-top: 0; }
  .lede { font-size: 15px; }
  .cta { flex-direction: column; gap: 12px; }
  .glass { padding: 8px; border-radius: 24px; }
  .fcard { grid-template-columns: 1fr; grid-template-rows: auto; gap: 36px; min-height: 0; border-radius: 24px; }
  .fcols { grid-row: auto; grid-column: auto; gap: 24px; }
  .fmark svg { width: 52px; }
  .say .ph { display: inline; }
}