:root { --bg:#050609; --text:#d9dee3; --muted:#8a949d; --line:#1b2026; --ice:#7fc8e8; --focus:#ffd166; }
* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin:0; background:var(--bg); color:var(--text); font:1rem/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--ice); }
a.brand { color:#e03850; font-weight:700; text-decoration:none; letter-spacing:.04em; }
a.brand:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, .stage:focus-visible { outline:3px solid var(--focus); outline-offset:3px; }
.wrap { max-width:42rem; margin:0 auto; padding:2.5rem 1rem 3rem; }
.wrap.wide { max-width:78rem; }
h1 { margin:0; font-size:clamp(2rem,8vw,3.4rem); letter-spacing:.06em; text-transform:uppercase; font-weight:300; }
.lede { color:var(--muted); margin:.3rem 0 1.4rem; }
.plain { padding-left:1.2rem; }
.foot { color:var(--muted); margin-top:2rem; font-size:.9rem; }

/* picture stage: one shared zoom wrapper, so every layer stays locked to the photo */
.stage-frame { overflow:hidden; border:1px solid var(--line); border-radius:6px; background:#000; }
.stage { position:relative; aspect-ratio:2/1; container-type:inline-size; overflow:hidden; cursor:zoom-in; touch-action:pan-y; }
.zoomer { position:absolute; inset:0; transform-origin:var(--ox,50%) var(--oy,50%); transition:transform .6s ease; }
.stage.zoomed { cursor:zoom-out; }
.stage.zoomed .zoomer { transform:scale(2.2); }
.layer { position:absolute; display:block; user-select:none; -webkit-user-drag:none; pointer-events:none; }
.base { inset:0; width:100%; height:100%; }
/* layer positions, as % of the 2000 x 1000 photo */
.ghost, .ghost-echo { left:71.1%; top:0%; width:20.85%; height:79.2%; }
.glint { left:80.3%; top:9.4%; width:2.15%; height:4.5%; }
.body { left:8.45%; top:21.2%; width:35.65%; height:78.8%; }
.head { left:15.7%; top:18.8%; width:18.7%; height:36%; }
.eye { left:23.55%; top:39.7%; width:1.55%; height:3.1%; }

/* tiny movements, in cqw (1% of the picture width) so they scale with the screen */
@keyframes ghost-drift { 0%,100% { translate:-.18cqw 0; opacity:.82 } 50% { translate:.22cqw -.06cqw; opacity:1 } }
@keyframes ghost-echo  { 0%,100% { translate:-.55cqw .05cqw; opacity:.10 } 50% { translate:.6cqw -.1cqw; opacity:.32 } }
@keyframes glint-pulse { 0%,100% { opacity:.25 } 45% { opacity:.9 } 60% { opacity:.4 } }
@keyframes breathe     { 0%,100% { translate:0 0; scale:1 } 50% { translate:0 -.1cqw; scale:1.0025 } }
@keyframes sway        { 0%,100% { rotate:-.35deg } 50% { rotate:.45deg } }
@keyframes eye-look    { 0%,38%,100% { translate:0 0 } 42%,60% { translate:-.13cqw .02cqw } 64%,82% { translate:.1cqw -.03cqw } 86% { translate:0 0 } }

/* different loop lengths and start delays: it starts as a still photo, then slowly comes alive */
.ghost      { opacity:.82; animation:ghost-drift 13s ease-in-out 4s infinite; }
.ghost-echo { opacity:0; mix-blend-mode:screen; animation:ghost-echo 17s ease-in-out 8s infinite; }
.glint      { opacity:0; mix-blend-mode:screen; animation:glint-pulse 11s ease-in-out 20s infinite; }
.body       { animation:breathe 7s ease-in-out 12s infinite; }
.head       { transform-origin:50% 90%; animation:sway 11s ease-in-out 16s infinite; }
.eye        { animation:eye-look 19s ease-in-out 24s infinite; }

.controls { display:flex; flex-wrap:wrap; gap:.6rem; margin:.8rem 0; }
button { font:inherit; color:var(--text); background:#0d1116; border:1px solid #2a323b; border-radius:6px; padding:.5rem 1rem; cursor:pointer; min-height:44px; }
button:hover { border-color:var(--ice); }
.notes { max-width:42rem; }
.tech { color:var(--muted); font-size:.9rem; }

@media (prefers-reduced-motion: reduce) {
  .layer { animation:none !important; }
  .zoomer { transition:none; }
  .ghost { opacity:1; }
}