/* ============================================================
   LAUREL & LANTERN INN — door.css (v21c, 2026-10-19)
   The door into every room. Each time a room page loads, the gold
   key slides into the painted door's keyhole, turns, and the door
   swings open on its hinges with a few sparkles (about 2 s).
   - The door is Erica's painting, cut into frame, door and key
     (img/door/*.webp, about 165 KB together, kept by the browser
     after the first room). No video, no sound.
   - The scene waits until the pictures are ready (html.door-ready,
     set by js/door.js). If they take too long it steps aside, and a
     CSS failsafe hides it even if the script never runs.
   - Tap, click or press any key to skip.
   - It never plays when "Still the house" is on or the device asks
     for reduced motion (the <head> script decides before first paint).
   - Rooms still "opening soon": the key won't turn; the door stays
     shut with a gentle note (shown still, without motion, too).
   - Nothing flashes: sparkles fade in and out once, slowly.
   ============================================================ */

.door-scene { display: none; }

html.door-play .door-scene,
html.door-shut .door-scene {
  display: flex; position: fixed; inset: 0; z-index: 90;
  align-items: center; justify-content: center; flex-direction: column;
  background: radial-gradient(ellipse at 50% 55%, #2D0B2C 0%, #160016 55%, #0C000D 100%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
/* failsafe: if the pictures or the script never arrive, step aside after 3 s */
html.door-play .door-scene { animation: door-failsafe 0.3s ease-in 3s forwards; }
html.door-play.door-ready .door-scene { animation: door-leave 0.45s ease-in 1.6s forwards; }
html.door-shut .door-scene { cursor: default; }
html.door-done .door-scene,
html.is-still.door-play .door-scene { display: none !important; }
@keyframes door-failsafe { to { opacity: 0; visibility: hidden; } }
@keyframes door-leave { to { opacity: 0; visibility: hidden; } }

/* until the pictures are ready, nothing inside moves or shows */
html.door-play:not(.door-ready) .door-frame,
html.door-shut:not(.door-ready) .door-frame { visibility: hidden; }
html.door-play:not(.door-ready) .door-frame *,
html.door-shut:not(.door-ready) .door-frame * { animation-play-state: paused !important; }
html.door-ready .door-frame { animation: frame-in 0.25s ease-out both; }
@keyframes frame-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- the doorway (the painting is 1024 x 1536) ---------- */
.door-frame {
  position: relative;
  width: min(70vw, 52vh);
  aspect-ratio: 1024 / 1536;
  perspective: 1600px;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.6));
}
.door-pic { display: block; width: 100%; height: 100%; }
.door-frame-pic { position: absolute; inset: 0; }
/* the door itself, in % of the painting: x 163..866, y 25..1510 */
.door-opening {
  position: absolute; left: 15.92%; right: 15.43%; top: 1.63%; bottom: 1.69%;
  transform-style: preserve-3d;
}
.door-light {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, rgba(255, 220, 160, 0.98) 0%, rgba(255, 153, 51, 0.6) 40%, rgba(51, 0, 51, 0.92) 100%);
  opacity: 0.2;
}
/* one door, hinged on the right (where the painted hinges are) */
.leaf {
  position: absolute; inset: 0;
  transform-origin: 100% 50%;
  backface-visibility: hidden;
}
html.door-play .leaf { animation: leaf-open 0.85s cubic-bezier(.55, .05, .35, 1) 0.85s forwards; }
html.door-play .door-light { animation: light-up 0.85s ease-out 0.85s forwards; }
@keyframes leaf-open { to { transform: rotateY(100deg); filter: brightness(0.5); } }
@keyframes light-up { to { opacity: 1; } }

/* ---------- the key ---------- */
/* The keyhole is on the brass plate at x 19.5%, y 58.9% of the painting.
   The key lies on its side, tip to the left, and slides in from the right. */
.door-key {
  position: absolute; width: 30%; left: 18.9%; top: 54.85%;
  transform-origin: 0% 50%;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.6));
}
.door-key .door-pic { height: auto; }
html.door-play .door-key {
  opacity: 0; transform: translateX(80%);
  animation: key-in 0.5s cubic-bezier(.2, .7, .3, 1) 0.05s forwards,
             key-turn 0.3s ease-in-out 0.55s forwards,
             key-away 0.25s ease-in 0.85s forwards;
}
@keyframes key-in { from { opacity: 0; transform: translateX(80%); } to { opacity: 1; transform: translateX(0); } }
@keyframes key-turn { from { opacity: 1; transform: translateX(0) rotateX(0deg); } to { opacity: 1; transform: translateX(0) rotateX(78deg); } }
@keyframes key-away { from { opacity: 1; transform: rotateX(78deg); } to { opacity: 0; transform: rotateX(78deg); } }

/* shut door (opening soon): the key goes in, tries, and will not turn */
html.door-shut .door-key {
  opacity: 0; transform: translateX(80%);
  animation: key-in 0.5s cubic-bezier(.2, .7, .3, 1) 0.05s forwards,
             key-try 0.5s ease-in-out 0.6s forwards;
}
@keyframes key-try {
  0% { opacity: 1; transform: rotateX(0); } 30% { opacity: 1; transform: rotateX(22deg); }
  55% { opacity: 1; transform: rotateX(0); } 80% { opacity: 1; transform: rotateX(16deg); }
  100% { opacity: 1; transform: rotateX(0); }
}
html.door-shut .leaf { animation: door-shake 0.45s ease-in-out 0.65s 1; }
@keyframes door-shake {
  0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); } 75% { transform: translateX(-2px); }
}

/* ---------- sparkles (spawned by js/door.js) ---------- */
.door-sparkles { position: absolute; inset: -8% -14%; pointer-events: none; }
.door-sparkles i {
  position: absolute; width: var(--sz, 6px); height: var(--sz, 6px);
  left: var(--x); top: var(--y); opacity: 0;
  background: radial-gradient(circle, #FFF6DC 0%, #F1C77A 35%, rgba(255, 153, 51, 0) 70%);
  border-radius: 50%;
  animation: sparkle 1.1s ease-out var(--d, 0.9s) forwards;
}
@keyframes sparkle {
  0% { opacity: 0; transform: translate(0, 0) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -30px)) scale(1); }
}

/* ---------- words ---------- */
.door-hint {
  margin-top: 22px; font-family: var(--serif-caps); font-size: 0.66rem;
  letter-spacing: 0.24em; text-transform: uppercase; color: var(--parchment-dim);
}
html.door-shut .door-hint { display: none; }
.door-note { display: none; }
html.door-shut .door-note {
  display: block; margin-top: 24px; text-align: center; max-width: 30ch;
  font-family: var(--serif-display); font-size: 1.25rem; line-height: 1.4; color: var(--parchment);
  opacity: 0; animation: note-in 0.6s ease-out 1.15s forwards;
}
html.door-shut.is-still .door-note,
html.door-shut .door-note.is-shown { opacity: 1; animation: none; }
@keyframes note-in { to { opacity: 1; } }
.door-note .door-actions { display: flex; gap: 18px; justify-content: center; margin-top: 16px; flex-wrap: wrap; }
.door-note a, .door-note button {
  font-family: var(--serif-caps); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--amber); background: none; border: 1px solid rgba(255, 153, 51, 0.45);
  border-radius: 999px; padding: 10px 18px; cursor: pointer; text-decoration: none;
}
.door-note button { color: var(--parchment-dim); border-color: var(--parchment-faint); }
.door-note a:hover, .door-note a:focus-visible,
.door-note button:hover, .door-note button:focus-visible { color: var(--parchment); border-color: var(--amber); }

/* keep the rest of the page from scrolling behind a shut door */
html.door-shut body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html.door-shut .door-key { opacity: 1; transform: none; }
  html.door-shut .door-note { opacity: 1; }
}
html.door-shut.is-still .door-key { opacity: 1; transform: none; }

/* a room page may show its whole painting ("heroFull" in rooms.json), so no innkeeper is cropped (v21i: here, since every room page loads this file) */
.room-hero.is-full { max-height: none; }