/* The 3D hero. Sits on top of hero-carousel.css, which still shapes the box and styles the D swatch. */
/* The hand on the card: the slanted pen hand of the cards sent with presentations (Caveat, OFL, Latin slice). */
@font-face { font-family:'Dorothea Note'; src:url('assets/fonts/caveat.woff2') format('woff2'); font-display:swap; }
.hero-art.hero-3d { outline:none; user-select:none; -webkit-user-select:none; touch-action:pan-y; }
/* Yannis, 2026-09-06: no panel behind the gift. The scene floats on the page; the canvas spills past the old square so nothing clips. */
.hero-art.hero-carousel.hero-3d { background:transparent !important; border-radius:0; overflow:visible; isolation:auto; }
.hero-art.hero-carousel.hero-3d .hero-photo { border-radius:clamp(40px,8vw,140px) 0 0 clamp(40px,8vw,140px); }
.hero-art.hero-3d.is-free { cursor:grab; }   /* only once the piece is out and can be turned */
.hero-art.hero-3d.is-dragging { cursor:grabbing; }
/* the focus ring is for keyboard users; a drag gives the hero focus too (for the arrow keys) and must not draw it (Yannis, 2026-09-06) */
.hero-art.hero-3d:focus-visible:not(.is-pointer) { outline:2px solid var(--ink); outline-offset:4px; }
.hero-art.hero-3d.is-pointer:focus-visible, .hero-art.hero-3d.is-pointer:focus { outline:none; }
.hero-3d-canvas { position:absolute; left:-10%; right:-10%; top:-14%; bottom:-14%; width:120%; height:128%; display:block; opacity:0; transition:opacity 900ms cubic-bezier(.45,0,.2,1); touch-action:pan-y; }
.hero-3d.is-ready .hero-3d-canvas { opacity:1; }
/* With 3D on the way the photo never paints (the boot script marks the root before the body parses). It only
   returns if the 3D gives up (is-static) or pauses on a lost context (is-paused). */
html.hero-3d-ok .hero-3d .hero-photo, .hero-3d.is-ready .hero-photo, .hero-3d.is-loading .hero-photo { opacity:0; }
html.hero-3d-ok .hero-3d.is-static .hero-photo, html.hero-3d-ok .hero-3d.is-paused .hero-photo { opacity:1; }
/* The loading bar sits above the closed box while the piece downloads into it, and goes once it is delivered. */
.hero-3d-loader { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding-top:1%; gap:8px; opacity:0; transition:opacity .5s; pointer-events:none; }
.hero-3d.is-loading .hero-3d-loader { opacity:1; }
.hero-3d.is-delivered .hero-3d-loader { opacity:0; }
.hero-3d-loader-label { font-size:11px; font-weight:550; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.hero-3d-loader-track { width:min(180px, 40%); height:2px; border-radius:2px; background:var(--line); overflow:hidden; }
.hero-3d-loader-fill { height:100%; width:0; border-radius:2px; background:var(--ink); transition:width .35s cubic-bezier(.4,0,.2,1); }
.hero-3d.is-static .hero-3d-canvas, .hero-3d.is-static .hero-3d-controls { display:none; }
.hero-3d-controls { opacity:0; pointer-events:none; transition:opacity .6s; }   /* layout comes from hero-carousel.css, phone rules included */
.hero-3d.is-ready .hero-3d-controls { opacity:1; pointer-events:auto; }
/* while the card is held up to read, the pill gets out of its way */
.hero-3d.is-reading .hero-3d-controls { opacity:0; pointer-events:none; }
.hero-3d-hint { font-size:10px; letter-spacing:.05em; text-transform:uppercase; transition:opacity .6s, max-width .6s; max-width:120px; overflow:hidden; white-space:nowrap; }
.hero-3d.is-used .hero-3d-hint { opacity:.55; }
/* Dev panel, only with ?dev=1 */
.hero-3d-dev { position:fixed; left:16px; bottom:96px; z-index:30; width:280px; max-height:70vh; overflow:auto; background:#ffffffee; color:#202126; border:1px solid #20212622; border-radius:14px; padding:12px 14px; font:11px/1.5 Arial, sans-serif; box-shadow:0 6px 24px #10131822; backdrop-filter:blur(10px); }
.hero-3d-dev strong { display:block; margin:6px 0 6px; font-size:11px; letter-spacing:.06em; text-transform:uppercase; }
.hero-3d-dev label { display:grid; grid-template-columns:78px 1fr; align-items:center; gap:6px; margin:3px 0; }
.hero-3d-dev label > span { display:flex; align-items:center; gap:6px; }
.hero-3d-dev input[type=range] { flex:1; min-width:0; }
.hero-3d-dev output { width:44px; text-align:right; font-variant-numeric:tabular-nums; }
.hero-3d-dev select, .hero-3d-dev textarea { width:100%; font:inherit; border:1px solid #20212633; border-radius:6px; padding:3px 6px; background:#fff; }
.hero-3d-dev textarea { margin-top:6px; font-size:10px; }
.hero-3d-note { margin:6px 0 2px; padding:6px 8px; border-radius:8px; background:#f0efff; color:#3b3660; font-size:11px; line-height:1.4; }
.hero-3d-fps { text-align:right; color:#65616c; }
.hero-3d-dev-toggle { display:block; width:100%; text-align:left; font:inherit; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:2px 0 6px; cursor:pointer; }
.hero-3d-dev-toggle:after { content:' ▾'; opacity:.6; }
.hero-3d-dev.is-collapsed { width:auto; padding:8px 14px; }
.hero-3d-dev.is-collapsed > :not(.hero-3d-dev-toggle) { display:none; }
.hero-3d-dev.is-collapsed .hero-3d-dev-toggle { padding:0; }
.hero-3d-dev.is-collapsed .hero-3d-dev-toggle:after { content:' ▸'; }
@media(max-width:650px){ .hero-3d-dev { left:12px; bottom:100px; width:min(280px, calc(100vw - 24px)); max-height:55vh; } }

/* The unboxing runway: the hero stays pinned while the story scrolls, then releases. */
.hero-runway { position:relative; height:calc(100svh + var(--unbox-runway, 300vh)); }
.hero-pin { position:sticky; top:0; height:100svh; display:flex; flex-direction:column; justify-content:center; }
.hero-pin > .hero { flex:0 0 auto; }
html.unbox-autoplay .hero-runway { height:auto; }
html.unbox-autoplay .hero-pin { position:static; height:auto; display:block; }
.hero-3d-dev-button { display:block; width:100%; margin:4px 0 8px; padding:6px 8px; font:inherit; border:1px solid #20212633; border-radius:8px; background:#fff; cursor:pointer; }
@media(max-width:650px){
  .hero-3d-canvas { left:-6%; right:-6%; top:-10%; bottom:-10%; width:112%; height:120%; }
  .hero-pin { justify-content:flex-start; overflow:hidden; }
  .hero-pin > .hero { padding-top:14px; }
  .hero-pin > .hero h1 { font-size:clamp(40px, 11vw, 60px); }
  .hero-pin > .hero .standfirst { font-size:14px; margin:14px 0 14px; }
  .hero-pin .hero-art.hero-3d { width:min(calc(100% + 22px), 46svh); height:auto; margin:16px -22px 0 auto; }
  .hero-pin > .hero .hero-foot { padding:12px 0 8px; }
}