/* Snitch motion layer. Everything here only applies once motion.js has run
   (html.m-on) and the visitor hasn't asked for reduced motion, so the page
   reads normally without it. */

html { overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: clip; }

:root { --m-ease: cubic-bezier(.16, 1, .3, 1); }

/* ---------- reveal on scroll ---------- */
.m-on .m-r { opacity: 0; translate: 0 34px; filter: blur(10px); transition: opacity .9s ease, translate 1.2s var(--m-ease), filter 1s ease; transition-delay: var(--d, 0s); }
.m-on .m-r.in { opacity: 1; translate: none; filter: none; }
.m-on .m-r.settled { transition: none; filter: none; }

/* headlines rise word by word out of a mask */
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .12em; margin: 0 -.02em -.12em; }
.mw > span { display: inline-block; }
.m-on .m-h .mw > span { translate: 0 110%; rotate: 4deg; transform-origin: 0 100%; transition: translate 1.25s var(--m-ease), rotate 1.25s var(--m-ease); transition-delay: calc(var(--i) * 55ms + var(--d, 0s)); }
.m-on .m-h.in .mw > span { translate: none; rotate: none; }
.m-on .p-hero h1 .word { animation: none; }

/* ---------- the light that follows the cursor, on every page ---------- */
.m-light, .m-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1s ease; }
/* A torch: a warm white core, a canary halo, then dark. */
.m-light { background: radial-gradient(620px circle at var(--lx, 70%) var(--ly, 30%), rgba(255, 244, 214, .26), rgba(245, 197, 24, .2) 15%, rgba(245, 197, 24, .08) 40%, transparent 68%); }
.m-grid { background-image: linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px); background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(420px circle at var(--lx, 70%) var(--ly, 30%), #000, transparent 75%); mask-image: radial-gradient(420px circle at var(--lx, 70%) var(--ly, 30%), #000, transparent 75%); }
.m-lit .m-light, .m-lit .m-grid { opacity: 1; }
.m-on .p-hero .gridlines { display: none; }

/* ---------- hero ---------- */

.m-on .hero-art { perspective: 1100px; }
.m-on .printer { transform: rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg)) rotate(-2.5deg); transform-style: preserve-3d; will-change: transform; }
.m-on .printer .receipt { box-shadow: calc(var(--ty-n, 0) * -18px) calc(24px + var(--tx-n, 0) * 12px) 50px -18px rgba(0, 0, 0, .75); }
.m-glare { position: absolute; left: 0; right: 0; top: 12px; bottom: 0; pointer-events: none; z-index: 5; opacity: 0; transition: opacity .6s ease; mix-blend-mode: soft-light;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 30%), rgba(255, 255, 255, .9), transparent 60%); }
.m-on .p-hero.m-live .m-glare { opacity: .7; }
.m-on .hero-art .canary { will-change: translate; }
.m-on .hero-art .canary.m-enter { animation: canaryIn 1.6s var(--m-ease) .35s both; }
@keyframes canaryIn { from { opacity: 0; translate: 40px 60px; filter: blur(14px) brightness(.4); } to { opacity: 1; translate: 0 0; filter: none; } }

/* ---------- ticker under the hero ---------- */
.ticker { position: relative; overflow: hidden; border-block: 1px solid #1A1A1E; background: #0A0A0C; padding: 18px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; will-change: transform; }
.ticker-track > div { display: flex; align-items: center; gap: 34px; padding-right: 34px; flex: none; }
.ticker span { font: 600 clamp(20px, 2.2vw, 30px)/1 var(--display); letter-spacing: -.02em; color: #5E5E66; white-space: nowrap; font-variation-settings: "opsz" 96; }
.ticker span b { font-weight: inherit; color: var(--paper); }
.ticker span code { font: 500 .52em var(--typed); letter-spacing: .14em; color: var(--canary); vertical-align: middle; margin-right: 12px; }
.ticker i { width: 7px; height: 7px; border-radius: 50%; background: #2C2C32; flex: none; }

/* ---------- cards light up under the cursor ---------- */
.m-glow { background-image: radial-gradient(380px circle at var(--mx, -400px) var(--my, -400px), rgba(255, 255, 255, .055), transparent 55%) !important; }
.culprit.m-glow.m-hot, .step4.m-glow.m-hot { box-shadow: inset 0 0 0 1px #34343A, 0 30px 60px -40px rgba(0, 0, 0, .9) !important; }
.culprit { transition: box-shadow .4s ease, translate .5s var(--m-ease); }
.m-on .culprit.culprit.m-glow.m-hot, .step4.m-glow.m-hot { translate: 0 -4px; }

/* ---------- buttons ---------- */
.m-on .btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .2s ease, background .2s ease, border-color .2s ease, translate .45s var(--m-ease); }
.m-on .btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); opacity: 0; }
.m-on .btn:not(.ghost):hover::after { animation: sheen .9s ease; }
.m-on .btn.ghost::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .12), transparent); }
.m-on .btn.ghost:hover::after { animation: sheen .9s ease; }
@keyframes sheen { from { left: -60%; opacity: 1; } to { left: 120%; opacity: 1; } }

/* ---------- floating dock once the hero has scrolled away ---------- */
.dock { position: fixed; top: 14px; left: 50%; z-index: 50; display: flex; align-items: center; gap: 22px; padding: 7px 7px 7px 20px; border-radius: 999px;
  background: rgba(16, 16, 19, .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 0 0 1px #26262C, 0 20px 50px -20px rgba(0, 0, 0, .9);
  translate: -50% -140%; opacity: 0; transition: translate .7s var(--m-ease), opacity .5s ease; width: max-content; max-width: calc(100vw - 32px); box-sizing: border-box; }
.dock.show { translate: -50% 0; opacity: 1; }
.dock .logo { font-size: 22px; flex-shrink: 0; }
.dock .logo img.wm { height: 22px; width: auto; }
.dock nav { display: flex; gap: 2px; }
.dock nav a { position: relative; padding: 8px 10px; border-radius: 999px; color: #8E8E96; font-size: 14px; font-weight: 500; text-decoration: none; transition: color .25s ease, background .25s ease; white-space: nowrap; }
.dock nav a:hover { color: var(--paper); }
.dock nav a.here { color: var(--paper); background: #222227; }
.dock .btn { flex-shrink: 0; white-space: nowrap; min-height: 38px; padding: 0 16px; font-size: 14px; }
.dock .prog { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px; background: var(--canary); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); opacity: .8; border-radius: 1px; }
@media (max-width: 860px) { .dock nav { display: none; } .dock { gap: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .m-r, .m-h .mw > span { opacity: 1 !important; translate: none !important; rotate: none !important; filter: none !important; transition: none !important; }
  .ticker-track { transform: none !important; }
}

/* ---------- the canary keeps turning up, peeking round edges ---------- */
/* Each picture is cut off where he hides: that cut sits exactly on the edge he hides behind,
   so he never rotates or drifts off it. He only slides out, and breathes a little. */
.peek { position: absolute; pointer-events: none; z-index: 0; }
.peek img { display: block; width: 100%; height: auto; }
/* side pictures are cut off at the bottom too: that edge fades into the dark instead of stopping in mid-air */
.peek img[src*="peek-edge"] { -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 98%); mask-image: linear-gradient(to bottom, #000 68%, transparent 98%); }
.peek-say { position: absolute; white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: var(--paper); color: #0A0A0B; font: 600 12px var(--typed); letter-spacing: .02em; box-shadow: 0 12px 30px -10px rgba(0,0,0,.8); }
.peek-say::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--canary); margin-right: 8px; vertical-align: middle; }
.m-on .peek { transition: translate .9s cubic-bezier(.34, 1.4, .64, 1), opacity .4s ease; }
.m-on .peek-say { opacity: 0; scale: .6; transform-origin: 100% 50%; transition: opacity .3s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); }
.m-on .peek.in .peek-say { opacity: 1; scale: 1; transition-delay: .9s; }
/* side peeks breathe up and down (along the edge), never sideways off it */
.m-on .peek-side.in .peek-in, .m-on .peek-corner.in .peek-in, .m-on .peek-top[data-side="left"].in .peek-in, .m-on .peek-top[data-side="right"].in .peek-in { animation: peekIdle 5s ease-in-out 1.2s infinite; }
@keyframes peekIdle { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* from the right edge of the page, in The problem */
#problem { position: relative; overflow-x: clip; }
.peek-side { right: 0; top: 26%; width: clamp(110px, 10vw, 150px); translate: 0 0; }
.m-on .peek-side:not(.in) { translate: 105% 0; }
.peek-side .peek-say { right: 6%; bottom: 100%; margin-bottom: 8px; }
@media (max-width: 700px) { .peek-side { top: 4%; width: 92px; } .peek-side .peek-say { display: none; } }

/* round the How it works stage: over the top, or round the left or right side */
.stage-wrap { position: relative; min-width: 0; }
.stage-wrap .stage { z-index: 1; }
.peek-top { top: 0; left: var(--px, 72%); width: clamp(150px, 13vw, 190px); translate: -50% -100%; }
.m-on .peek-top:not(.in) { translate: -50% -6%; }
@media (max-width: 900px) { .stage-wrap { order: -1; margin-top: 96px; } .peek-top { width: 140px; } }
@media (min-width: 901px) {
  .peek-top[data-side="left"], .peek-top[data-side="right"] { top: var(--py, 40%); width: clamp(96px, 8vw, 122px); }
  .peek-top[data-side="left"] { left: 0; translate: -92% 0; }
  .m-on .peek-top[data-side="left"]:not(.in) { translate: 0 0; }
  .peek-top[data-side="right"] { left: auto; right: 0; translate: 98% 0; }
  .m-on .peek-top[data-side="right"]:not(.in) { translate: 0 0; }
}

/* the report page: from the right edge, low down; ducks while you scroll */
.peek-corner { position: fixed; right: 0; bottom: 70px; width: clamp(96px, 8vw, 124px); z-index: 45; pointer-events: auto; cursor: pointer; translate: 0 0; }
.m-on .peek-corner:not(.in), .m-on .peek-corner.duck { translate: 105% 0; }
.peek-corner .peek-say { right: 90%; top: 16%; }
.m-on .peek-corner.duck .peek-say { opacity: 0; transition-delay: 0s; }
@media (max-width: 600px) { .peek-corner { width: 80px; bottom: 90px; } .peek-corner .peek-say { font-size: 11px; } }

/* rising at the end of the page: the whole bird, standing on the floor, never cut */
.p-close .wrap { z-index: 1; }
.peek-rise { left: auto; right: clamp(16px, 6vw, 110px); bottom: 0; width: clamp(160px, 15vw, 220px); translate: 0 0; }
.peek-rise::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: -14px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgba(245,197,24,.2), transparent); z-index: -1; }
.m-on .peek-rise:not(.in) { translate: 0 105%; }
.m-on .peek-rise { transition: translate 1.4s cubic-bezier(.22, 1.2, .36, 1); }
@media (max-width: 900px) {
  .p-close { padding-bottom: 300px !important; }
  .peek-rise { right: 3vw; width: 140px; }
}