/* Yawrn AI. Not a page with an animation on it — a stage. Nothing here scrolls; the wheel moves a timeline, and the thread carries each line in and sets it down. So: no navigation, no panels, no rows of buttons. Type, dark, and yarn. */ :root { --bg: #07070a; --gold: #b8952c; --gold-soft: #d9bd76; --gold-dim: #6b5a28; --text: #ece7dc; --muted: #857f70; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif; } * { box-sizing: border-box; } /* * Do not give body a height, and do not put overflow-x on it. * * With `height: 100%` and `overflow-x: hidden` together, the other axis * computes to `auto` and body becomes its own scroll container: the wheel then * scrolls body's overflow while window.scrollY stays at 0, so the timeline * never advances and the whole thing sits still. The horizontal clip belongs on * html, where it propagates to the viewport and leaves the document scrolling * normally. */ html { overflow-x: hidden; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; } /* * Everything below is the enhancement layer and starts hidden. It is shown only * once main.js has a working renderer and adds `enhanced` to . If the * script never runs — an older mobile browser without import maps, no WebGL2, * a throw anywhere — the document underneath is what is on screen, and it is * readable. The page is never blank by default. */ #thread-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: none; z-index: 0; pointer-events: none; } body.enhanced #thread-canvas { display: block; } .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .03; background-image: url("data:image/svg+xml;utf8,"); } /* the wheel's track — nothing is drawn here */ .driver { display: none; } body.enhanced .driver { display: block; height: 760vh; } /* ---------- the stage ---------- */ .stage { display: none; } body.enhanced .stage { display: block; position: fixed; inset: 0; z-index: 10; pointer-events: none; } .beat { position: absolute; left: 0; top: 0; width: min(88vw, 30em); text-align: center; opacity: 0; /* The transform carries a translate(-50%,-50%), so the point the thread sets it down at is the centre of the line, not its top-left corner. */ transform-origin: 50% 50%; will-change: transform, opacity; pointer-events: none; } .beat p { margin: 0; } .beat a { pointer-events: auto; } /* Type is sized from the mark it sits on, so a --scale is set per frame and every size below is expressed against it. */ .beat { --scale: 1; } .beat-kicker { display: block; font-family: var(--sans); font-size: calc(var(--scale) * 0.052px); letter-spacing: .28em; text-transform: uppercase; color: var(--gold-dim); margin-bottom: calc(var(--scale) * 0.05px); } .beat-lead, .beat-claim, .beat-note, .beat-end-line { margin: 0; font-family: var(--serif); line-height: 1.18; letter-spacing: -.012em; } .beat-lead { font-size: calc(var(--scale) * 0.108px); } .beat-claim { font-size: calc(var(--scale) * 0.115px); color: var(--gold-soft); } .beat-note { font-size: calc(var(--scale) * 0.098px); } .beat-end-line { font-size: calc(var(--scale) * 0.100px); } .beat-cta { display: inline-block; margin-top: calc(var(--scale) * 0.045px); font-family: var(--serif); font-size: calc(var(--scale) * 0.072px); color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid #6b5a2866; padding-bottom: .14em; } /* The reveal is a clip that sweeps across, so nothing about the type itself is disturbed — no per-character spans, so kerning, word spacing and wrapping are the typeface's own. */ .beat .reveal-clip { display: block; clip-path: inset(-0.35em 100% -0.35em -0.1em); will-change: clip-path; } .beat .reveal-clip + .reveal-clip { margin-top: 0.5em; } /* ---------- the only chrome there is ---------- */ .cue { display: none; } body.enhanced .cue { display: inline-flex; position: fixed; z-index: 12; left: 50%; transform: translateX(-50%); bottom: 34px; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #55503f; transition: opacity .6s ease; } .cue span { display: block; width: 26px; height: 1px; background: #55503f; animation: draw 2.8s ease-in-out infinite; transform-origin: left; } @keyframes draw { 0%,100% { transform: scaleX(.3); opacity: .45; } 50% { transform: scaleX(1); opacity: 1; } } .cue.gone { opacity: 0; } /* ---------- the document ---------- */ /* * Not a fallback — the page. Sized for a phone first and allowed to grow, and * it is what everything else is layered over. It is hidden only when the * animation is actually running. */ .plain { position: relative; z-index: 5; max-width: 34rem; margin: 0 auto; padding: 18vh 1.5rem 16vh; display: flex; flex-direction: column; gap: 1.9rem; font-family: var(--serif); } .plain h1 { font-size: clamp(2.6rem, 13vw, 4.6rem); font-weight: 400; line-height: 1; letter-spacing: -.01em; margin: 0 0 .4em; } .plain h1 i { font-style: italic; color: var(--gold-soft); } .plain p { margin: 0; font-size: clamp(1.15rem, 5.2vw, 1.6rem); line-height: 1.42; color: var(--text); } .plain p.dim { color: var(--muted); } .plain a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid #6b5a2866; padding-bottom: .12em; } .plain-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(80vw 60vh at 76% -8%, #16130b 0%, transparent 64%), radial-gradient(70vw 50vh at 10% 104%, #12100a 0%, transparent 60%); } body.enhanced .plain { display: none; } body.enhanced .plain-glow { display: none; } @media (min-width: 720px) { .plain { padding: 22vh 2rem 18vh; gap: 2.2rem; } }