/* ============================================================================
WOULD YOU KNOW HIM? — the DIORAMA take · game.css
A little lit museum vitrine of Aven. The character card stands in real space,
seven mark-pins hover at different Z-depths, and the whole scene tilts to
follow the pointer (desktop) or the phone's gyro (mobile).
Design tokens inherited from the Haven design contract (DESIGN.md, 2026-07-24):
signal/lime #d3f227 · ink #0b171e · bone #f3ecde · gold #e7ab5c ·
mist #c9d4d9 · orange #ff6a3d · deep-teal panels derived in-family.
Fonts assumed loaded by the host page (demo.html loads them):
"Fraunces" (titles) · "Hanken Grotesk" (body/UI) · "DM Mono" (labels).
No libraries. Works with JS off. Full reduced-motion path (flattens the 3D).
============================================================================ */
/* ═══════════════════════════════════════════════════════════════════════════
▓▓ RE-TUNING SURFACE — everything you touch when the real photo drops in ▓▓
═══════════════════════════════════════════════════════════════════════════
1) Drop the real 3:4 portrait: set src="…" on ![]()
(or set --aven-portrait: url('aven.jpg') on the .dio root). The cartoon
SVG stand-in sits behind it and is covered automatically.
2) Re-tune the seven pins to the new art with the --pin-*-x / -y pairs below
(percent of the stage box, 0–100). --pin-*-z is how far each floats toward
the glass, in px — bigger = more parallax/hover. Leave the rest alone.
═════════════════════════════════════════════════════════════════════════ */
.dio {
/* -- the real-photo slot (optional CSS route; img src is the primary one) -- */
--aven-portrait: none;
/* -- pin positions on the CARTOON stand-in (percent of the PORTRAIT box) ---
x/y are 0–100 across the 3:4 character card; z is extra float toward the
glass in px (bigger = more hover/parallax). Re-tune x/y to the real photo. */
--pin-ears-x: 46; --pin-ears-y: 11; --pin-ears-z: 88; /* 1 radar ears */
--pin-eyes-x: 44; --pin-eyes-y: 32; --pin-eyes-z: 72; /* 5 eyes + nose */
--pin-voice-x: 41; --pin-voice-y: 41; --pin-voice-z: 104; /* 7 chirpy voice*/
--pin-chest-x: 43; --pin-chest-y: 55; --pin-chest-z: 80; /* 4 muzzle/chest*/
--pin-spots-x: 61; --pin-spots-y: 70; --pin-spots-z: 60; /* 2 round spots */
--pin-legs-x: 42; --pin-legs-y: 85; --pin-legs-z: 44; /* 6 long legs */
--pin-tail-x: 73; --pin-tail-y: 88; --pin-tail-z: 52; /* 3 banded tail */
/* -- how theatrical the diorama is (safe to nudge) ------------------------ */
--tilt: 9deg; /* max pointer/gyro tilt each way */
--depth: 900px; /* perspective; smaller = more dramatic */
--stage-max: 440px; /* max width of the vitrine */
/* -- palette (do not re-decide; from DESIGN.md) -------------------------- */
--ink: #0b171e;
--teal: #0f2e37;
--teal2: #0a2028;
--teal3: #08181e;
--bone: #f3ecde;
--lime: #d3f227;
--gold: #e7ab5c;
--mist: #c9d4d9;
--orange:#ff6a3d;
--line: rgba(201,212,217,.16);
/* cartoon cat inks */
--c-gold-lt: #f2c67e;
--c-gold: #e7ab5c;
--c-gold-dk: #cf9038;
--c-cream: #f7f0e1;
--c-cream-dk:#e7d9bf;
--c-mark: #201509;
--c-nose: #ef9a8f;
box-sizing: border-box;
position: relative;
width: 100%;
max-width: 720px;
margin-inline: auto;
padding: 4px;
color: var(--bone);
font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
-webkit-tap-highlight-color: transparent;
text-rendering: optimizeLegibility;
}
.dio *, .dio *::before, .dio *::after { box-sizing: border-box; }
/* ───────────────────────────── HEADER ───────────────────────────────── */
.dio__head { text-align: center; padding: 6px 10px 14px; }
.dio__eyebrow {
margin: 0 0 6px;
font-family: "DM Mono", ui-monospace, monospace;
font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
color: var(--lime);
display: inline-flex; align-items: center; gap: 9px;
}
.dio__eyebrow::before {
content: "LOST"; /* status chip — never "stolen" */
font-size: 10.5px; letter-spacing: .12em;
padding: 2px 7px; border-radius: 999px;
color: var(--ink); background: var(--lime); font-weight: 700;
}
.dio__title {
margin: 0 0 8px;
font-family: "Fraunces", Georgia, "Times New Roman", serif;
font-optical-sizing: auto; font-weight: 600; font-style: italic;
font-size: clamp(28px, 7vw, 46px); line-height: 1.02;
color: var(--bone); letter-spacing: -.01em;
}
.dio__lede {
margin: 0 auto; max-width: 46ch;
font-size: clamp(14px, 3.6vw, 16px); line-height: 1.5;
color: var(--mist);
}
/* ═══════════════════════════ THE VITRINE ════════════════════════════════
.dio__vitrine is the perspective host (and the clip frame — overflow hidden
is fine here because the 3D subtree lives in .dio__scene, a child). */
.dio__stagewrap { padding: 4px clamp(4px, 3vw, 20px) 8px; }
.dio__vitrine {
position: relative;
width: 100%;
max-width: var(--stage-max);
margin-inline: auto;
aspect-ratio: 3 / 4;
border-radius: 20px;
overflow: hidden;
perspective: var(--depth);
perspective-origin: 50% 42%;
background:
radial-gradient(120% 90% at 50% 8%, #17454f 0%, var(--teal) 34%, var(--teal2) 66%, var(--teal3) 100%);
box-shadow:
0 30px 70px rgba(0,0,0,.5),
inset 0 1px 0 rgba(255,255,255,.06),
inset 0 0 0 1px rgba(0,0,0,.35);
touch-action: pan-y;
isolation: isolate;
}
/* warm vignette + top light lip, painted on the frame (flat) */
.dio__vitrine::before {
content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
background:
radial-gradient(80% 55% at 50% 30%, rgba(231,171,92,.12), transparent 70%),
radial-gradient(130% 100% at 50% 118%, rgba(0,0,0,.55), transparent 60%);
}
/* the moving 3D world */
.dio__scene {
position: absolute; inset: 0;
transform-style: preserve-3d;
transform: rotateX(0deg) rotateY(0deg);
will-change: transform;
animation: dio-sway 11s ease-in-out infinite alternate;
}
@keyframes dio-sway {
from { transform: rotateX(2.2deg) rotateY(-5deg); }
to { transform: rotateX(-1.6deg) rotateY(5deg); }
}
/* while the pointer/gyro drives it, JS adds .is-live and sets an inline
transform that overrides the idle sway */
.dio__scene.is-live { animation: none; }
/* settle the case (and its tap targets) the moment someone reaches to interact */
.dio__vitrine:hover .dio__scene,
.dio:focus-within .dio__scene { animation-play-state: paused; }
/* warm lightbox glow, set BEHIND the cat in Z */
.dio__glow {
position: absolute; left: 50%; top: 46%; width: 78%; height: 66%;
transform: translate(-50%,-50%) translateZ(-60px);
background: radial-gradient(circle at 50% 45%,
rgba(231,171,92,.55) 0%, rgba(231,171,92,.16) 42%, transparent 68%);
filter: blur(6px); border-radius: 50%;
z-index: 0; pointer-events: none;
}
/* the plinth the cat stands on — a disc tilted toward the floor plane */
.dio__pedestal {
position: absolute; left: 50%; bottom: 8%; width: 62%; height: 20%;
transform: translateX(-50%) translateZ(6px) rotateX(64deg);
transform-style: preserve-3d;
border-radius: 50%;
background:
radial-gradient(closest-side, #17414b 0%, #123640 58%, #0d2a32 100%);
box-shadow: 0 0 0 2px rgba(231,171,92,.28), 0 18px 26px rgba(0,0,0,.5);
z-index: 1;
}
.dio__pedestal::after { /* engraved nameplate ring */
content: ""; position: absolute; inset: 20% 24%;
border-radius: 50%; border: 1px dashed rgba(231,171,92,.35);
}
/* contact shadow that grounds the portrait onto the plinth */
.dio__contactshadow {
position: absolute; left: 50%; bottom: 12%; width: 46%; height: 8%;
transform: translateX(-50%) translateZ(4px) rotateX(64deg);
background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent 72%);
filter: blur(3px); z-index: 2; pointer-events: none;
}
/* ───────────────────────── THE CHARACTER CARD ─────────────────────────
The portrait stands upright out of the plinth (small +Z). It holds the SVG
stand-in and, on top, the ![]()
slot for the real photo. */
.dio__portrait {
position: absolute;
left: 8%; right: 8%; top: 6%; bottom: 16%;
transform: translateZ(20px);
transform-style: preserve-3d; /* keep 3D — no CSS filter here (it would flatten the pins) */
z-index: 3;
}
.dio__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* real-photo slot: hidden until it actually has a source, then it covers the
SVG. Two routes supported: an ![]()
(primary) or --aven-portrait (CSS). */
.aven-char {
position: absolute; inset: 0; width: 100%; height: 100%;
object-fit: cover; object-position: 50% 42%;
border-radius: 14px; display: none;
}
.aven-char[src]:not([src=""]) { display: block; }
.dio[style*="--aven-portrait"] .dio__photo,
.dio.has-photo .dio__photo { display: block; }
.dio__photo { /* CSS-route mirror of aven-char, driven by --aven-portrait on .dio */
position: absolute; inset: 0; border-radius: 14px; display: none;
background-image: var(--aven-portrait);
background-size: cover; background-position: 50% 42%; background-repeat: no-repeat;
}
/* ─────────────────────────────── PINS ────────────────────────────────
Each pin is a zero-area anchor at (--x,--y). Inside it a floating HEAD
(the button, at +Z) and a SHADOW on the card plane (~0 Z). As the scene
tilts, head and shadow separate → the pin reads as hovering in real space. */
.dio__pins { position: absolute; inset: 0; transform-style: preserve-3d; z-index: 4; }
.dio__pin {
position: absolute;
left: calc(var(--x) * 1%); top: calc(var(--y) * 1%);
width: 0; height: 0; transform-style: preserve-3d;
}
.dio__pin--ears { --x: var(--pin-ears-x); --y: var(--pin-ears-y); --pz: var(--pin-ears-z); }
.dio__pin--eyes { --x: var(--pin-eyes-x); --y: var(--pin-eyes-y); --pz: var(--pin-eyes-z); }
.dio__pin--voice { --x: var(--pin-voice-x); --y: var(--pin-voice-y); --pz: var(--pin-voice-z); }
.dio__pin--chest { --x: var(--pin-chest-x); --y: var(--pin-chest-y); --pz: var(--pin-chest-z); }
.dio__pin--spots { --x: var(--pin-spots-x); --y: var(--pin-spots-y); --pz: var(--pin-spots-z); }
.dio__pin--legs { --x: var(--pin-legs-x); --y: var(--pin-legs-y); --pz: var(--pin-legs-z); }
.dio__pin--tail { --x: var(--pin-tail-x); --y: var(--pin-tail-y); --pz: var(--pin-tail-z); }
.dio__pin-shadow {
position: absolute; left: 0; top: 0; width: 26px; height: 26px;
transform: translate(-50%,-50%) translateZ(3px);
border-radius: 50%;
background: radial-gradient(closest-side, rgba(0,0,0,.42), transparent 70%);
filter: blur(2px); pointer-events: none;
}
.dio__pin-head {
position: absolute; left: 0; top: 0;
width: 30px; height: 30px; padding: 0; margin: 0;
transform: translate(-50%,-50%) translateZ(calc(var(--pz) * 1px));
border: 0; border-radius: 50%; cursor: pointer;
background: transparent; color: var(--ink);
display: grid; place-items: center;
-webkit-tap-highlight-color: transparent;
}
/* the visible token: a gold ring by default, filled lime when learned */
.dio__pin-head::before {
content: ""; position: absolute; inset: 5px;
border-radius: 50%;
background: radial-gradient(circle at 40% 34%, #ffe9a8, var(--gold) 68%);
box-shadow: 0 3px 8px rgba(0,0,0,.45), 0 0 0 3px rgba(231,171,92,.25);
transition: transform .18s ease, box-shadow .18s ease, background .2s ease;
}
/* a soft pulsing halo invites the tap (motion-gated below) */
.dio__pin-head::after {
content: ""; position: absolute; inset: -2px;
border-radius: 50%; border: 2px solid var(--lime);
opacity: .0; transform: scale(.6);
animation: dio-ping 2.6s ease-out infinite;
}
.dio__pin:nth-child(2) .dio__pin-head::after { animation-delay: .4s; }
.dio__pin:nth-child(3) .dio__pin-head::after { animation-delay: .8s; }
.dio__pin:nth-child(4) .dio__pin-head::after { animation-delay: 1.2s; }
.dio__pin:nth-child(5) .dio__pin-head::after { animation-delay: 1.6s; }
.dio__pin:nth-child(6) .dio__pin-head::after { animation-delay: 2.0s; }
.dio__pin:nth-child(7) .dio__pin-head::after { animation-delay: 2.4s; }
@keyframes dio-ping {
0% { opacity: .0; transform: scale(.5); }
22% { opacity: .7; }
70% { opacity: 0; transform: scale(1.5); }
100% { opacity: 0; transform: scale(1.5); }
}
.dio__pin-head:hover::before { transform: scale(1.12); }
.dio__pin-head:focus-visible { outline: none; }
.dio__pin-head:focus-visible::before {
box-shadow: 0 0 0 3px var(--ink), 0 0 0 6px var(--lime), 0 3px 8px rgba(0,0,0,.45);
}
/* learned state */
.dio__pin-head[aria-pressed="true"]::before {
background: radial-gradient(circle at 42% 34%, #f4ffb0, var(--lime) 70%);
box-shadow: 0 3px 10px rgba(0,0,0,.4), 0 0 0 3px rgba(211,242,39,.3);
}
.dio__pin-head[aria-pressed="true"]::after { animation: none; opacity: 0; }
.dio__pin-head[aria-pressed="true"] .dio__pin-check { opacity: 1; transform: scale(1); }
.dio__pin-num, .dio__pin-check {
position: relative; z-index: 1;
font-family: "DM Mono", monospace; font-size: 13px; font-weight: 700;
color: var(--ink); line-height: 1;
}
.dio__pin-check { position: absolute; opacity: 0; transform: scale(.5); transition: .2s ease; }
.dio__pin-head[aria-pressed="true"] .dio__pin-num { opacity: 0; }
/* front glass reflection — flat, above the scene, never eats clicks */
.dio__glass {
position: absolute; inset: 0; z-index: 6; pointer-events: none;
border-radius: 20px;
background: linear-gradient(133deg,
rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 16%,
transparent 34%, transparent 100%);
mix-blend-mode: screen;
}
/* ─────────────────────────────── PANEL ─────────────────────────────── */
.dio__panel {
max-width: var(--stage-max);
margin: 14px auto 0;
padding: 0 clamp(4px, 3vw, 12px);
}
/* progress */
.dio__progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dio__pips { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex: 1; }
.dio__pips li {
height: 6px; flex: 1; border-radius: 999px;
background: rgba(201,212,217,.18); transition: background .3s ease, box-shadow .3s ease;
}
.dio__pips li.is-on { background: var(--lime); box-shadow: 0 0 10px rgba(211,242,39,.5); }
.dio__count {
margin: 0; white-space: nowrap;
font-family: "DM Mono", monospace; font-size: 13px; letter-spacing: .04em;
color: var(--mist);
}
.dio__count b { color: var(--bone); font-size: 15px; }
/* caption */
.dio__caption {
min-height: 92px;
background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.14));
border: 1px solid var(--line); border-radius: 14px;
padding: 13px 15px; margin-bottom: 12px;
}
.dio__caption-tag {
margin: 0 0 5px;
font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .14em;
text-transform: uppercase; color: var(--gold);
}
.dio__caption-text { margin: 0 0 6px; font-size: clamp(15px, 4vw, 17px); line-height: 1.42; color: var(--bone); }
.dio__caption-spot { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--mist); }
.dio__caption-spot b { color: var(--lime); font-weight: 600; }
/* the one test that matters — spots vs stripes flip card */
.dio__coat {
display: grid; grid-template-columns: 128px 1fr; gap: 14px; align-items: center;
background: linear-gradient(180deg, rgba(231,171,92,.06), rgba(0,0,0,.12));
border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
}
.dio__flip { width: 128px; height: 128px; perspective: 700px; }
.dio__flip-inner {
position: relative; width: 100%; height: 100%;
transform-style: preserve-3d; transition: transform .6s cubic-bezier(.4,.15,.2,1);
}
.dio.is-stripes .dio__flip-inner { transform: rotateY(180deg); }
.dio__flip-face {
position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden;
border-radius: 12px; overflow: hidden; display: grid; place-items: center;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.35);
}
.dio__flip-face svg { width: 100%; height: 100%; display: block; }
.dio__flip-face--back { transform: rotateY(180deg); }
.dio__flip-badge {
position: absolute; left: 8px; bottom: 8px;
font-family: "DM Mono", monospace; font-size: 11px; font-weight: 700;
padding: 3px 8px; border-radius: 999px; letter-spacing: .06em;
}
.dio__flip-face--front .dio__flip-badge { background: var(--lime); color: var(--ink); }
.dio__flip-face--back .dio__flip-badge { background: var(--orange); color: #fff; }
.dio__coat-body { min-width: 0; }
.dio__coat-title { margin: 0 0 8px; font-family: "DM Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--mist); }
.dio__seg { display: inline-flex; background: rgba(0,0,0,.28); border-radius: 999px; padding: 3px; gap: 2px; }
.dio__seg button {
appearance: none; border: 0; cursor: pointer;
font-family: "Hanken Grotesk", sans-serif; font-size: 13px; font-weight: 600;
padding: 7px 13px; border-radius: 999px; color: var(--mist); background: transparent;
transition: background .2s ease, color .2s ease;
}
.dio__seg button[aria-pressed="true"] { background: var(--bone); color: var(--ink); }
.dio__seg button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; }
.dio__coat-note { margin: 9px 0 0; font-size: 13.5px; line-height: 1.4; font-weight: 600; }
.dio__coat-note::before { content: attr(data-icon) " "; }
.dio__coat-note.is-good { color: var(--lime); }
.dio__coat-note.is-bad { color: var(--orange); }
/* ───────────────────────────── COMPLETION ────────────────────────────── */
.dio__done {
margin: 14px auto 0; max-width: var(--stage-max);
text-align: center; padding: 18px 16px;
background: radial-gradient(120% 130% at 50% 0%, rgba(231,171,92,.16), rgba(15,46,55,.5));
border: 1px solid rgba(231,171,92,.32); border-radius: 16px;
}
.dio__done[hidden] { display: none; }
.dio__done-title {
margin: 0 0 6px; font-family: "Fraunces", Georgia, serif; font-style: italic;
font-weight: 600; font-size: clamp(22px, 6vw, 30px); color: var(--bone);
}
.dio__done-sub { margin: 0 auto 12px; max-width: 42ch; font-size: 14.5px; line-height: 1.5; color: var(--mist); }
.dio__done-contact { margin: 0; font-family: "DM Mono", monospace; font-size: clamp(15px, 4.4vw, 18px); }
.dio__done-contact a { color: var(--lime); text-decoration: none; font-weight: 700; }
.dio__done-contact a:hover { text-decoration: underline; }
.dio__done-contact .sep { color: rgba(201,212,217,.5); margin: 0 8px; }
/* quiet standing contact line (always present) */
.dio__contact { margin: 14px 4px 6px; text-align: center; font-size: 13px; color: var(--mist); }
.dio__contact a { color: var(--gold); text-decoration: none; font-weight: 600; }
.dio__contact a:hover { text-decoration: underline; }
/* tilt affordance hint (mobile gyro) */
.dio__hint {
position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
z-index: 7; display: none; align-items: center; gap: 7px;
padding: 7px 13px; border-radius: 999px;
background: rgba(11,23,30,.82); color: var(--bone);
font-family: "DM Mono", monospace; font-size: 11.5px; letter-spacing: .04em;
border: 1px solid rgba(211,242,39,.4);
}
.dio.show-hint .dio__hint { display: inline-flex; }
.dio__hint svg { width: 15px; height: 15px; }
/* ═════════════════════════════ RESPONSIVE ═══════════════════════════════ */
@media (max-width: 380px) {
.dio { --stage-max: 300px; --tilt: 7deg; }
.dio__coat { grid-template-columns: 104px 1fr; gap: 10px; padding: 10px; }
.dio__flip { width: 104px; height: 104px; }
.dio__caption { min-height: 100px; }
}
/* ═══════════════════════ REDUCED MOTION — flatten it ═════════════════════
No sway, no pointer/gyro tilt (JS also bails), no pulsing, no 3D flip.
Pins sit flat on the card; everything stays fully usable. */
@media (prefers-reduced-motion: reduce) {
.dio__scene { animation: none !important; transform: none !important; transform-style: flat; }
.dio__glow, .dio__pedestal, .dio__contactshadow { transform: translate(-50%,-50%); }
.dio__pedestal { left: 50%; bottom: 8%; transform: translateX(-50%); }
.dio__contactshadow { left: 50%; bottom: 12%; transform: translateX(-50%); }
.dio__portrait { transform: none; }
.dio__pins { transform: none; }
.dio__pin-head { transform: translate(-50%,-50%) !important; }
.dio__pin-shadow { display: none; }
.dio__pin-head::after { animation: none; opacity: 0; }
.dio__scene { animation: none; }
.dio__flip-inner { transition: opacity .25s ease; transform: none !important; }
.dio__flip-face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity .25s ease; }
.dio__flip-face--back { opacity: 0; }
.dio.is-stripes .dio__flip-face--front { opacity: 0; }
.dio.is-stripes .dio__flip-face--back { opacity: 1; }
}