/* ==========================================================================
   The 402 door — signature component (see js/door.js)
   Layers in .door__stage: frame (back) → leaf (3D, swings) → sign (front) → coin
   ========================================================================== */

.door {
  --door-w: 210px;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  max-width: 100%;
}
.door--sm { --door-w: 150px; }
.door--lg { --door-w: 280px; }

.door__stage {
  position: relative;
  width: min(var(--door-w), 100%);
  aspect-ratio: 200 / 260;
  perspective: 700px;
  perspective-origin: 30% 60%;
}

.door__frame,
.door__sign {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.door__frame { filter: drop-shadow(4px 4px 0 var(--shadow-color)); }
.door__sign { pointer-events: none; z-index: 3; }

/* ---- Frame ---------------------------------------------------------------- */
.d-ground { stroke: var(--line); stroke-width: 2.5; stroke-linecap: round; fill: none; }
.d-frame { fill: var(--surface); stroke: var(--line); stroke-width: 2.5; }
.d-hole { fill: #0D0C1F; stroke: var(--line); stroke-width: 2; }
.d-step { fill: var(--surface-2); stroke: var(--line); stroke-width: 2; }
.d-light { opacity: 0; transition: opacity var(--dur-3) var(--ease-out) 250ms; }
.d-glow { fill: var(--c-sat); }
.d-ray { stroke: var(--c-ink); stroke-width: 3; stroke-linecap: round; fill: none; opacity: 0.55; }
.d-spark { fill: var(--c-white); stroke: var(--c-ink); stroke-width: 1.5; stroke-linejoin: round; }

/* ---- Leaf (the door itself) ---------------------------------------------- */
.door__leaf {
  position: absolute;
  left: 21%;
  top: 28.4615%;
  width: 58%;
  height: 68.077%;
  transform-origin: 0 50%;
  transform-style: preserve-3d;
  transition: transform var(--dur-4) var(--ease-spring);
  z-index: 2;
}
.door__leaf-front,
.door__leaf-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.door__leaf-front svg { width: 100%; height: 100%; overflow: visible; display: block; }
.door__leaf-back {
  transform: rotateY(180deg);
  background: var(--door-panel);
  border: var(--stroke) solid var(--line);
  border-radius: 50% 50% 0 0 / 32% 32% 0 0;
}

.d-leaf { fill: var(--door); stroke: var(--line); stroke-width: 2.5; }
.d-panel { fill: var(--door-panel); stroke: var(--line); stroke-width: 2; }
.d-slot { fill: #0D0C1F; stroke: var(--line); stroke-width: 2; transition: fill var(--dur-2); }
.d-slotlabel { font: 700 8px/1 var(--font-mono); letter-spacing: 0.18em; fill: #FFFFFF; opacity: 0.9; }
.d-knob { fill: var(--c-sat); stroke: var(--line); stroke-width: 2; }
.d-knob-shine { fill: #FFFFFF; }
.d-hinge { fill: #D8D3EE; stroke: var(--line); stroke-width: 2; }

/* ---- Sign ------------------------------------------------------------------ */
.d-sign {
  transform-box: view-box;
  transform-origin: 100px 64px;
  animation: door-sway 3.6s var(--ease-in-out) infinite;
}
.d-string { stroke: var(--line); stroke-width: 2; fill: none; stroke-linecap: round; }
.d-nail { fill: var(--c-sat); stroke: var(--line); stroke-width: 2; }
.d-plaque { fill: #FFFFFF; stroke: var(--c-ink); stroke-width: 2.5; transition: fill var(--dur-2); }
.d-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 31px;
  letter-spacing: -0.02em;
  fill: var(--c-web);
  transition: fill var(--dur-2);
}
.d-plaque-g { transform-box: fill-box; transform-origin: 50% 50%; }
.d-plaque-g.is-flipping { animation: plaque-flip 380ms var(--ease-in-out); }

.d-stamp { opacity: 0; transform-box: fill-box; transform-origin: 50% 50%; transform: rotate(-9deg) scale(1.4); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.d-stamp rect { fill: #FFFFFF; stroke: #5A5775; stroke-width: 2; }
.d-stamp text { font: 700 11px/1 var(--font-mono); letter-spacing: 0.2em; fill: #5A5775; }

.d-tag-g { opacity: 0; transform-box: view-box; transform-origin: 100px 138px; transform: translateY(-8px) rotate(-8deg); transition: opacity var(--dur-2), transform var(--dur-3) var(--ease-spring); }
.d-tag { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 2; }
.d-tag-text { font: 700 11px/1 var(--font-mono); fill: var(--c-ink); }
.door.has-tag .d-tag-g { opacity: 1; transform: none; }
.door.is-challenged .d-tag-g { animation: tag-drop 600ms var(--ease-spring); }

/* ---- Coin ------------------------------------------------------------------ */
.door__coin {
  position: absolute;
  left: 50%;
  top: 64.8%;
  width: 17%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  z-index: 4;
  pointer-events: none;
}
.door__coin svg { width: 100%; height: 100%; display: block; overflow: visible; filter: drop-shadow(2px 2px 0 var(--c-ink)); }
.c-face { fill: var(--c-sat); stroke: var(--c-ink); stroke-width: 2.5; }
.c-rim { fill: none; stroke: var(--c-ink); stroke-width: 1.5; stroke-dasharray: 2 3; opacity: 0.6; }
.c-bolt { fill: var(--c-ink); }
.door__coin.is-dropping { animation: coin-drop 900ms var(--ease-out) forwards; }
.door.is-fed .d-slot { animation: slot-flash 700ms var(--ease-out); }

/* ---- Caption, status, actions, reveal ------------------------------------- */
.door__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-weight: 900;
}
.door__label:empty { display: none; }
.door__status {
  margin: 0;
  max-width: 34ch;
  min-height: 2.6em;
  font-size: var(--step--1);
  color: var(--ink-soft);
  line-height: 1.35;
}
.door__actions:empty { display: none; }

.door__reveal {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  transition: grid-template-rows var(--dur-3) var(--ease-out) 300ms;
}
.door__reveal-inner { overflow: hidden; min-height: 0; }
.door[data-state="open"] .door__reveal { grid-template-rows: 1fr; }
.door__slip:empty { display: none; }
.door__slip {
  margin: var(--space-2) 4px 8px;
  padding: var(--space-4);
  text-align: left;
  background: var(--surface);
  color: var(--ink);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  animation: slip-in var(--dur-3) var(--ease-spring) 350ms both;
}

/* ---- States ---------------------------------------------------------------- */
.door[data-state="open"] .door__leaf { transform: rotateY(-106deg); }
.door[data-state="open"] .d-light { opacity: 1; }
.door[data-state="open"] .d-plaque { fill: var(--c-mint); }
.door[data-state="open"] .d-num { fill: var(--c-ink); }
.door[data-state="open"] .d-tag-g { opacity: 0; }

.door[data-state="paying"] .door__leaf { animation: leaf-jiggle 500ms var(--ease-in-out) 700ms; }

.door[data-state="rejected"] .d-plaque { fill: var(--c-coral); }
.door[data-state="rejected"] .d-num { fill: #FFFFFF; }
.door.is-shaking .door__stage { animation: door-rattle 600ms var(--ease-in-out); }

.door[data-state="expired"] .d-plaque { fill: #DEDBEA; }
.door[data-state="expired"] .d-num { fill: #9C98B5; }
.door[data-state="expired"] .d-stamp { opacity: 1; transform: rotate(-9deg); }
.door[data-state="expired"] .d-tag { fill: #DEDBEA; }
.door[data-state="expired"] .door__leaf-front { filter: grayscale(0.85) brightness(0.95); }
.door[data-state="expired"] .d-sign { animation: none; }

/* ---- Keyframes ------------------------------------------------------------- */
@keyframes door-sway {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}
@keyframes plaque-flip {
  0% { transform: scaleX(1); }
  48% { transform: scaleX(0.02); }
  52% { transform: scaleX(0.02); }
  100% { transform: scaleX(1); }
}
@keyframes tag-drop {
  0% { opacity: 0; transform: translateY(-22px) rotate(-14deg); }
  60% { opacity: 1; transform: translateY(3px) rotate(6deg); }
  100% { transform: none; }
}
@keyframes coin-drop {
  0% { opacity: 0; transform: translate(-50%, -360%) rotate(-40deg); }
  12% { opacity: 1; }
  50% { transform: translate(-50%, -50%) rotate(0deg) scale(1); }
  60% { transform: translate(-50%, -95%) scale(1.06); }
  72% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  88% { transform: translate(-50%, -50%) scale(1, 0.22); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(0.4, 0.04); opacity: 0; }
}
@keyframes slot-flash {
  0%, 100% { fill: #0D0C1F; }
  30% { fill: var(--c-sat); }
}
@keyframes leaf-jiggle {
  0%, 100% { transform: rotateY(0); }
  40% { transform: rotateY(-9deg); }
  70% { transform: rotateY(-3deg); }
}
@keyframes door-rattle {
  0%, 100% { transform: translateX(0) rotate(0); }
  15% { transform: translateX(-7px) rotate(-1.5deg); }
  30% { transform: translateX(6px) rotate(1.2deg); }
  45% { transform: translateX(-5px) rotate(-1deg); }
  60% { transform: translateX(4px) rotate(0.6deg); }
  80% { transform: translateX(-2px); }
}
@keyframes slip-in {
  from { opacity: 0; transform: translateY(-14px) rotate(-1.5deg); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .d-sign { animation: none; }
  .door__coin.is-dropping { animation: none; opacity: 0; }
}