/* $SEED — THE DOOR IN 3D (fx/three.css)
   A cinematic steel band right under the hero: a WebGL vault door (three.js) with an HTML caption on top.
   The CSS owns the plate, the hazard strip, the caption + bolt badge, and a pure-CSS door that stands in
   while three.js loads — and stays for good when the CDN or WebGL is missing (.t3-flat). Nothing in here
   is required for the core page to work.
   State classes on .t3: t3-live (WebGL is drawing) · t3-flat (CSS door only) · t3-open · t3-empty */

.t3{
  position:relative;height:520px;margin:4px 0 30px;overflow:hidden;
  border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);
  /* brushed steel wall: fine vertical grain over a cool plate tone — matches the 3D wall so the swap is seamless */
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.2) 0 1px,transparent 1px 3px),
    linear-gradient(180deg,#d8dbd7,#bcc0bc);
  container-type:inline-size;
}
/* hazard strip across the top, same as the other plates on the page */
.t3::before{
  content:"";position:absolute;left:0;right:0;top:0;height:12px;z-index:3;border-bottom:3px solid var(--ink);
  background:repeating-linear-gradient(-45deg,var(--ink) 0 10px,var(--yellow) 10px 20px);
}
.t3-rivet{
  position:absolute;z-index:4;width:11px;height:11px;border-radius:50%;background:#9ea39f;border:2px solid var(--ink);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.55);pointer-events:none;
}
.t3-rivet:nth-of-type(1){left:7px;top:19px}
.t3-rivet:nth-of-type(2){right:7px;top:19px}
.t3-rivet:nth-of-type(3){left:7px;bottom:7px}
.t3-rivet:nth-of-type(4){right:7px;bottom:7px}

/* ---------- the stage: canvas + the CSS stand-in door ---------- */
.t3-stage{position:absolute;left:0;right:0;top:15px;bottom:0;overflow:hidden}
.t3-canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  touch-action:pan-y;              /* the band must never eat a vertical swipe on a phone */
  opacity:0;transition:opacity .7s ease;
}
.t3-live .t3-canvas{opacity:1}

/* The stand-in: a real-looking vault door in nothing but gradients. Shown until the first WebGL frame
   lands, and permanently when there is no WebGL to land. */
.t3-flatdoor{
  position:absolute;left:50%;top:50%;width:min(400px,80cqw);aspect-ratio:1;border-radius:50%;
  transform:translate(-50%,-52%);transition:opacity .7s ease;
  background:radial-gradient(circle at 36% 30%,#f6f7f5,#c6cac6 55%,#979c98 100%);
  border:6px solid #a8ada8;
  box-shadow:
    0 0 0 10px #7d827e,
    0 0 0 16px var(--ink),
    0 0 0 24px var(--orange),
    0 0 0 28px var(--ink),
    18px 22px 34px rgba(0,0,0,.28),
    inset 0 0 0 3px rgba(0,0,0,.12),
    inset -10px -14px 30px rgba(0,0,0,.14);
}
.t3-live .t3-flatdoor{opacity:0;pointer-events:none}
/* tick ring: the combination graduations */
.t3-flatdoor::before{
  content:"";position:absolute;inset:11%;border-radius:50%;border:3px solid var(--ink);
  background:repeating-conic-gradient(var(--ink) 0 1deg,transparent 1deg 7.5deg);
  -webkit-mask:radial-gradient(circle,transparent 80%,#000 81%);mask:radial-gradient(circle,transparent 80%,#000 81%);
}
/* the handwheel: hub + 6 spokes + rim, drawn with conic + radial gradients */
.t3-flatdoor::after{
  content:"";position:absolute;inset:30%;border-radius:50%;border:9px solid #6f746f;
  box-shadow:0 0 0 3px var(--ink),inset 0 0 0 3px var(--ink),6px 8px 14px rgba(0,0,0,.25);
  background:
    radial-gradient(circle,var(--orange) 0 9%,var(--ink) 9.5% 12%,#5d625e 12.5% 20%,transparent 20.5%),
    repeating-conic-gradient(from -4deg,#5d625e 0 8deg,transparent 8deg 60deg);
}
/* 24 bolt heads around the rim: one element per bolt would be noise, so one gradient does the lot */
.t3-fd-bolts{
  position:absolute;inset:-1%;border-radius:50%;
  background:repeating-conic-gradient(from 7.5deg,var(--ink) 0 2.4deg,transparent 2.4deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 90%,#000 90.5% 97%,transparent 97.5%);
  mask:radial-gradient(circle,transparent 90%,#000 90.5% 97%,transparent 97.5%);
  opacity:.75;
}
/* stencil on the stand-in slab */
.t3-fd-stamp{
  position:absolute;left:50%;top:69%;transform:translate(-50%,-50%);
  font-family:var(--stencil);font-weight:900;font-size:clamp(34px,10cqw,52px);line-height:1;letter-spacing:.04em;color:var(--ink);opacity:.86;
}

/* ---------- caption, bottom-left ---------- */
.t3-cap{position:absolute;left:14px;bottom:14px;z-index:5;max-width:min(80%,440px);pointer-events:none}
.t3-title{
  display:inline-block;font-family:var(--stencil);font-weight:900;font-size:clamp(34px,5cqw,58px);line-height:.9;letter-spacing:.02em;
  background:var(--ink);color:#fff;padding:8px 12px 3px;transform:rotate(-1deg);transform-origin:left bottom;
}
.t3-line{
  display:inline-block;margin:6px 0 0;max-width:100%;
  font-size:13px;font-weight:600;color:var(--ink);background:rgba(233,235,231,.94);border:2px solid var(--ink);padding:5px 9px;
}
.t3-sol{
  display:inline-flex;align-items:baseline;gap:8px;margin-top:8px;
  background:var(--orange);color:#fff;border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);padding:6px 12px;
}
.t3-sol span{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#ffe0d6}
.t3-sol b{font-family:var(--stencil);font-weight:900;font-size:clamp(28px,4cqw,44px);line-height:1;font-variant-numeric:tabular-nums}
.t3-sol em{font-style:normal;font-size:12px;font-weight:800;letter-spacing:.2em}
.t3-sol.t3-bump b{animation:t3-bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes t3-bump{0%{transform:scale(1.25) translateY(-2px)}100%{transform:scale(1)}}
.t3-empty .t3-sol{background:var(--won)}
.t3-empty .t3-sol span{color:#cfe0ff}

/* ---------- bolt badge, top-right ---------- */
.t3-badge{
  position:absolute;right:14px;top:27px;z-index:5;display:inline-flex;align-items:center;gap:8px;pointer-events:none;
  background:var(--plate);color:var(--ink);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);padding:5px 9px;
  font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
}
.t3-badge i{width:10px;height:10px;border-radius:50%;background:var(--orange);border:2px solid var(--ink);flex:none}
.t3-open .t3-badge{background:var(--orange);color:#fff}
.t3-open .t3-badge i{background:var(--yellow);animation:t3-blink 1s steps(2) infinite}
.t3-empty .t3-badge{background:var(--won);color:#fff;border-color:var(--won)}
.t3-empty .t3-badge i{background:#fff;animation:none}
@keyframes t3-blink{50%{opacity:.35}}

/* screen-reader copy of what the door is doing */
.t3-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .t3{height:380px}
  .t3-flatdoor{width:min(270px,78cqw);transform:translate(-50%,-58%)}
  .t3-cap{left:10px;bottom:10px;max-width:calc(100% - 20px)}
  .t3-title{padding:6px 10px 2px}
  .t3-line{font-size:12px;padding:4px 8px}
  .t3-sol{padding:4px 10px;gap:6px}
  .t3-badge{top:23px;right:10px;font-size:10px;padding:4px 7px}
}
@media (max-width:420px){
  .t3-badge{letter-spacing:.06em}
  .t3-sol span{display:none}
}
@media (prefers-reduced-motion:reduce){
  /* style.css kills animation site-wide; the fades here are harmless but go too, so the swap is instant */
  .t3-canvas,.t3-flatdoor{transition:none}
}