/* æthis · homepage — ink particles on a light ground.
   Nothing on this page moves except the field. The words are fixed in place and only fade. */
:root {
  --ground: #fbfaf6;
  --ink: 21, 18, 14;
  --sig: #15120e;
  --a2: 0.74; --a3: 0.56;
  --t1: rgba(var(--ink), 0.94);
  --t2: rgba(var(--ink), var(--a2));
  --t3: rgba(var(--ink), var(--a3));
  --rule: rgba(var(--ink), 0.16);
  --sans: 'Jost', 'Futura', system-ui, sans-serif;
  --mono: 'DM Mono', ui-monospace, Menlo, monospace;
  --script: 'Estonia', cursive;
  --ease-orbit: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-drift: cubic-bezier(0.25, 0.1, 0.25, 1);
  --fast: 160ms; --norm: 320ms; --slow: 900ms; --write: 1500ms;
}
:root[data-ground="paper"] { --ground: #ebe5d6; }
:root[data-ground="night"] { --ground: #0b0a09; --ink: 232, 226, 212; --sig: #f0e3bd; --a2: 0.66; --a3: 0.46; }

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--ground); color: var(--t2);
  font: 400 18px/1.5 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden;
  transition: background-color var(--norm) var(--ease-drift);
}
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 1px solid var(--t1); outline-offset: 4px; border-radius: 2px; }
.mono { font: 400 12px/1.5 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lens { display: block; overflow: visible; }
@keyframes arrive { from { opacity: 0; } }

/* The page is only as tall as the story is long (the script sets it from the scene map). The scroll is a dial, not a document. */
.scroll { height: 1000vh; }
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
.stage { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.scene { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; padding: 96px 24px; }

/* Words fade. They never travel. The script sets their opacity from the scroll, so there is no timer here. */
.fade { opacity: 0; visibility: hidden; }

/* ── Nav ── */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; padding: 20px clamp(20px, 4vw, 44px); animation: arrive var(--slow) var(--ease-drift) 1200ms backwards; }
.nav-id { display: flex; align-items: center; gap: 12px; color: var(--t1); font: 400 14px var(--mono); }
.nav-id .lens { width: 44px; height: 23px; --lw: 13; }
.nav-link { font: 400 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--t3); }

/* ── the cue to scroll ── */
.cue { position: absolute; bottom: 30px; left: 50%; width: 1px; height: 52px; background: var(--t1); transform-origin: top; animation: cue 2800ms var(--ease-drift) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 50.01% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ── the hand signs ── */
.s-name { gap: clamp(18px, 3vh, 32px); }
.sig { font: 400 clamp(130px, 22vw, 300px)/0.74 var(--script); color: var(--sig); }
.sig span { display: inline-block; padding: 0 0.1em; clip-path: inset(-30% -10% -30% 0); animation: write var(--write) var(--ease-drift) 300ms backwards; }
@keyframes write { from { clip-path: inset(-30% 100% -30% 0); } }

/* ── one line ── */
.say { font: 300 clamp(28px, 4.2vw, 58px)/1.08 var(--sans); letter-spacing: -0.018em; color: var(--t1); max-width: 15ch; text-wrap: balance; }

/* ── three views, framed by the field ── */
.views { display: flex; gap: clamp(28px, 5vw, 72px); }
.view { width: clamp(150px, 17vw, 220px); aspect-ratio: 22 / 28; display: grid; place-content: center; gap: 12px; }
.view p:last-child { font: 300 clamp(19px, 1.9vw, 25px)/1.15 var(--sans); letter-spacing: -0.01em; color: var(--t1); }

/* ── the lens: one line, then its reflection; then the eye, then the way through it ── */
.fig { position: relative; width: min(84vw, 820px, 110vh); aspect-ratio: 496 / 300; }
.fig svg { width: 100%; height: 100%; display: block; overflow: visible; }
.line { fill: none; stroke: rgb(var(--ink)); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.lab { position: absolute; font: 400 clamp(15px, 2vw, 24px)/1 var(--sans); letter-spacing: -0.01em; color: var(--t1); opacity: 0; white-space: nowrap; }
.l1 { left: 3.8%; top: 55.5%; }
.l2 { left: 50%; top: 4.5%; transform: translate(-50%, -100%); }
.l3 { right: 3.8%; top: 55.5%; }

/* ── the foot ── */
.foot { position: absolute; inset: auto 0 0 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 24px clamp(20px, 4vw, 44px); border-top: 1px solid var(--rule); }
.foot .nav-id { color: var(--t2); pointer-events: auto; }

@media (max-width: 760px) {
  .views { flex-direction: column; gap: 58px; }
  .view { width: 170px; aspect-ratio: 22 / 12; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .cue { display: none; }
}