/* Sinsonte — landing MOTION + INTERACTIVITY layer (Sep 2026). * * Loaded only by the home page, on top of tokens.css + site2.css. Everything * here serves one brief: "the page should be a working, scrubbable simulation * of the real product, not decoration" — so the three sections this file * dresses (#llamada, #pregunta, #informe) are a single act sharing one clock, * and the rest is the page-wide motion craft that makes them feel of a piece * with the sections around them. * * Four rules this file is written against, in priority order: * * 1. NOTHING IS HIDDEN THAT ONLY JS CAN REVEAL. Every selector that hides * content is gated on `html.js` (set before first paint by the inline * script) or on a class JS itself adds. A visitor with blocked or * broken JS reads the full transcript, all four answers and the finished * report as plain HTML. This is the same contract site2.css's `.reveal` * already follows (website-review-2026-09.md §3) and the reason the * 2026-09 round existed at all. * 2. NO LAYOUT SHIFT. The transcript "types" by fading pre-laid-out word * spans in, never by inserting text; the report's skeleton is sized to * the document it becomes; every frame reserves its own height. * 3. `prefers-reduced-motion: reduce` gets a fully usable page, not a * degraded one: no typing, no autoplay, no scroll-driving, and every * state still reachable by clicking. * 4. Zero network dependencies. No CDN, no font, no image — the CSP in * landing/_headers (default-src 'none') forbids all three, and that is a * feature. */ :root { /* One shared easing set for everything added this round. Spring is a real * overshoot (the 1.28 control point) and is only ever used on transforms of * small elements — never on opacity, never on anything text sits still in. */ --ease-spring: cubic-bezier(0.22, 1.28, 0.36, 1); --ease-emph: cubic-bezier(0.32, 0.72, 0, 1); --dur-quick: 150ms; --dur-mid: 320ms; --dur-long: 620ms; /* Page-wide cursor wash. Grana at document weight on Papel; on Tinta the * brand goes to the measured rose (tokens.css: Grana never sits on Tinta). */ --lift-shadow: 0 2px 4px rgba(25, 21, 25, 0.06), 0 26px 52px -22px rgba(25, 21, 25, 0.34); } :root[data-theme="dark"] { --lift-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 26px 52px -20px rgba(0, 0, 0, 0.7); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --lift-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 26px 52px -20px rgba(0, 0, 0, 0.7); } } /* ══ Page-wide cursor wash ═════════════════════════════════════════════════ * Founder (Sep 2026 round 1): "the effect of the mouse Grana colour behind * the first view — I love it — can we have it for all the background * everywhere in the page?" Round 2, after that first pass shipped as two * layers (an intense one clipped to the hero box + a fainter one behind the * rest of the page): "in the first view … where the grana colour is more * intense I like that kind of colour, but after that it fades and looks * like a rectangle contains it, not natural." The seam was the hero box's * own edge. Fix: ONE layer, full intensity, no clip — a single fixed, * full-viewport, pointer-events:none layer built from JS (js/motion.js — no * HTML change needed per page, so any page that loads this file gets it) * and painted BEHIND every other element (z-index: -1, an explicit negative * stacking context — the only way to guarantee it paints under plain, * non-positioned flow content like
/