/* ==========================================================================
   THE DOOR — the Mellon gate. An arched West-door graven in gold line-work on
   the parchment, in the illuminated house style (not literal Moria black). Two
   leaves part on the correct word; a wrong word gives a small shut-shudder.
   All motion is transform/opacity and dies under prefers-reduced-motion via the
   global kill in base.css — the open still resolves because app.js advances the
   route on a timer, not on animationend.
   ========================================================================== */
.door-wrap{
  max-width:24rem;
  margin:clamp(var(--s5),9vh,5rem) auto 0;
  text-align:center;
}
.door{
  width:min(15rem,72vw);
  margin:var(--s3) auto var(--s4);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.04));
}
.door-arch{width:100%;height:auto;display:block;overflow:visible}

/* the two closed leaves — a faint gilt panel that the graving sits over */
.door-leaf{
  fill:var(--panel-2);
  stroke:var(--rule-soft);
  stroke-width:.75;
  transform-origin:center;
  transition:transform .82s cubic-bezier(.22,.61,.19,1), opacity .82s ease;
}
.door-line{
  fill:none;
  stroke:var(--gold-deep);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.85;
}
.door-frame{stroke:var(--gold);stroke-width:2.2;opacity:.95}
.door-graven{
  transition:opacity .5s ease;
}

/* the star breathes very slightly while the door waits — a lit rune */
.door-star{
stroke:var(--gold);stroke-width:1.3
animation:door-star-glow 4.5s ease-in-out infinite}
@keyframes door-star-glow{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ---- opening: the leaves swing outward and fade, the graving dims ---- */
.door-wrap[data-state="opening"] .door-leaf--l{transform:perspective(600px) rotateY(62deg) translateX(-8%);opacity:0}
.door-wrap[data-state="opening"] .door-leaf--r{transform:perspective(600px) rotateY(-62deg) translateX(8%);opacity:0}
.door-wrap[data-state="opening"] .door-graven{opacity:.15}
.door-wrap[data-state="opening"] .door-title{color:var(--gold-deep)}
.door-wrap[data-state="opening"]{animation:door-lift .82s ease forwards}
@keyframes door-lift{
  0%{opacity:1}
  70%{opacity:1}
  100%{opacity:0;transform:translateY(-6px)}
}

/* ---- wrong word: a small, dignified shudder, then it stays shut ---- */
.door-wrap[data-state="shut"] .door{animation:door-shudder .5s ease}
@keyframes door-shudder{
  0%,100%{transform:translateX(0)}
  20%{transform:translateX(-4px)}
  45%{transform:translateX(3px)}
  70%{transform:translateX(-2px)}
}

.door-title{
  font-size:1.55rem;
  transition:color .5s ease;
}
.door-sub{
  font-style:italic;
  letter-spacing:.01em;
}
.door-row{justify-content:center}
.door-form{max-width:18rem;margin-inline:auto}
.door-form .text-in{text-align:center;letter-spacing:.18em}
.door-enter{width:100%;margin-top:var(--s1)}

/* the barred-door lockout message reuses .form-err styling but reads calmer */
.door-wrap .form-err{font-style:italic}

@media (max-width:24rem){
  .door{width:min(12rem,68vw)}
  .door-title{font-size:1.35rem}
}