/* ============================================================
   door.css — the homepage door ritual visuals
   Original pixel "oak-style" door built in CSS. Night scene.
   Three open directions: .dir-a swing · .dir-b seam of light ·
   .dir-c threshold dissolve. The stage is an overlay; when open
   it fades and becomes pointer-events:none so the hero beneath
   is fully interactive.
   ============================================================ */

html.door-locked { overflow: hidden; }

.door-stage {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  perspective: 1500px;
  transform-origin: 50% 46%;   /* the doorway — dolly target */
  will-change: transform, opacity;
  background:
    radial-gradient(120px 120px at 78% 22%, rgba(205,214,244,0.10), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(157,180,255,0.06), transparent 60%),
    linear-gradient(180deg, #05060c 0%, #080a14 55%, #0a0d18 100%);
  transition: opacity .6s ease, visibility .6s;
}
/* stars */
.door-stage::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(232,235,247,.9), transparent),
    radial-gradient(1.5px 1.5px at 27% 42%, rgba(205,214,244,.7), transparent),
    radial-gradient(1px 1px at 44% 12%, rgba(232,235,247,.8), transparent),
    radial-gradient(1.5px 1.5px at 63% 28%, rgba(205,214,244,.6), transparent),
    radial-gradient(1px 1px at 82% 52%, rgba(232,235,247,.7), transparent),
    radial-gradient(1px 1px at 88% 14%, rgba(205,214,244,.6), transparent),
    radial-gradient(1.5px 1.5px at 33% 66%, rgba(232,235,247,.5), transparent),
    radial-gradient(1px 1px at 8% 60%, rgba(205,214,244,.5), transparent);
  opacity: .9;
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity:.55 } to { opacity:1 } }
@media (prefers-reduced-motion: reduce){ .door-stage::before { animation: none; } }

/* a square pixel moon hung in the sky behind the door */
.door-sky-moon {
  position: absolute; top: 11%; right: 14%;
  width: 56px;
}
@media (min-width: 880px){ .door-sky-moon { width: 76px; top: 14%; right: 20%; } }

/* hint text */
.door-hint {
  position: absolute; left: 0; right: 0; bottom: calc(8% + env(safe-area-inset-bottom));
  text-align: center; color: var(--moon-soft);
  font-family: var(--font-pixel); font-size: var(--t-pixel-sm); letter-spacing: .08em;
  text-transform: uppercase; opacity: .8;
  animation: breathe 2.8s ease-in-out infinite;
}
@keyframes breathe { 0%,100%{opacity:.45} 50%{opacity:.85} }
@media (prefers-reduced-motion: reduce){ .door-hint { animation: none; } }

/* ---- THE DOOR (original pixel oak-style art) ---- */
.door {
  position: relative;
  width: min(72vw, 290px);
  aspect-ratio: 1 / 2;
  border: none;
  border-radius: 5px 5px 2px 2px;
  cursor: pointer;
  image-rendering: pixelated;
  transform-style: preserve-3d;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.28) 0 2px, transparent 2px 25%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 7px, rgba(255,255,255,.025) 7px 14px),
    linear-gradient(180deg, #7a5536 0%, #6a4a2f 50%, #5b3f28 100%);
  box-shadow:
    inset 0 0 0 7px #4a3220,
    inset 0 0 0 9px rgba(0,0,0,.45),
    inset 0 14px 30px rgba(255,236,200,.05),
    0 0 0 1px rgba(0,0,0,.5),
    0 30px 80px -20px rgba(0,0,0,.9),
    0 0 70px -8px var(--moon-glow);
  transition: transform 1.4s cubic-bezier(.7,.02,.3,1), box-shadow .5s ease, opacity .6s ease;
}
.door:focus-visible { outline: 3px solid var(--moon); outline-offset: 6px; }

/* window — moonlit lattice near the top */
.door__window {
  position: absolute; top: 12%; left: 50%; transform: translateX(-50%);
  width: 52%; aspect-ratio: 1.05 / 1;
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  gap: 4px; padding: 5px;
  background: #3c2817;
  border-radius: 2px;
  box-shadow: inset 0 0 0 2px #2c1d11;
}
.door__window i {
  background:
    radial-gradient(circle at 60% 30%, rgba(232,235,247,.95), rgba(157,180,255,.55) 60%, rgba(80,98,150,.4));
  box-shadow: 0 0 12px var(--moon-glow), inset 0 0 6px rgba(255,255,255,.35);
  border-radius: 1px;
}
/* iron hinges on the hinge edge */
.door__hinge { position: absolute; left: 6%; width: 11%; height: 5%; background: #2a2a33; border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.6); }
.door__hinge.top { top: 18%; }
.door__hinge.bot { bottom: 18%; }
.door__hinge i { position:absolute; width:3px; height:3px; background:#54545f; border-radius:1px; top:50%; transform:translateY(-50%); }
.door__hinge i:first-child { left: 18%; }
.door__hinge i:last-child { right: 18%; }
/* handle */
.door__handle { position: absolute; right: 12%; top: 56%; width: 10px; height: 10px; background: radial-gradient(circle at 35% 35%, #d9dce8, #8a8fa6); border-radius: 50%; box-shadow: 0 0 8px rgba(205,214,244,.4), inset 0 0 0 1px rgba(0,0,0,.3); }

/* knock graphic */
.knock-mark {
  position: absolute; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  pointer-events: none; z-index: 5;
  background:
    conic-gradient(from 0deg, transparent 0 18deg, var(--moon) 18deg 22deg, transparent 22deg 63deg,
      var(--moon) 63deg 67deg, transparent 67deg 108deg, var(--moon) 108deg 112deg, transparent 112deg 153deg,
      var(--moon) 153deg 157deg, transparent 157deg 360deg);
  filter: drop-shadow(0 0 6px var(--moon-glow));
  animation: knockpop .6s ease-out forwards;
}
@keyframes knockpop {
  0% { transform: scale(.2); opacity: 0; }
  30% { transform: scale(1.1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ---- CLOSED ---- */
.door-stage.is-closed { opacity: 1; visibility: visible; }

/* shudder on knock */
.door-stage.is-knocking .door { animation: shudder .42s ease; }
@keyframes shudder {
  0%,100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-3px) rotate(-.4deg); }
  45% { transform: translateX(3px) rotate(.4deg); }
  70% { transform: translateX(-2px) rotate(-.2deg); }
}
@media (prefers-reduced-motion: reduce){ .door-stage.is-knocking .door { animation: none; } }

/* ---- OPENING — direction-specific ---- */
/* A · Moonlit Swing (LOCKED): hinge on the left, door swings inward,
   moonlight spills through the doorway, then the camera steps through. */
.door-stage.dir-a .door { transform-origin: left center; position: relative; z-index: 2; }
.door-stage.dir-a.is-opening .door { transform: rotateY(-116deg) translateZ(0); box-shadow: 0 30px 80px -20px rgba(0,0,0,.9), 0 0 120px -4px var(--moon-glow); }

/* moonlight spilling through the open doorway */
.door-stage.dir-a.is-opening::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: min(72vw, 290px); aspect-ratio: 1 / 2;
  transform: translate(-50%, -50%);
  border-radius: 5px 5px 2px 2px;
  background: radial-gradient(85% 70% at 50% 38%, rgba(232,235,247,.55), rgba(157,180,255,.18) 62%, transparent 85%);
  box-shadow: 0 0 90px 36px var(--moon-glow), 0 0 220px 90px var(--moon-glow-2);
  opacity: 0;
  z-index: 1;
  animation: doorwaylight 1.1s ease forwards .25s;
}
@keyframes doorwaylight { to { opacity: 1; } }

/* the step through — dolly the whole night scene forward and fade */
.door-stage.dir-a.is-entering {
  transform: scale(5.2);
  opacity: 0;
  transition:
    transform 1.25s cubic-bezier(.45, 0, .85, .55),
    opacity .65s ease .55s,
    visibility .6s;
}

/* B · Seam of Light: door narrows to a bright vertical blade, then blooms */
.door-stage.dir-b .door { transform-origin: center center; }
.door-stage.dir-b.is-opening .door { transform: scaleX(.02); filter: brightness(3) blur(1px); }
.door-stage.dir-b.is-opening::after {
  content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; transform: translateX(-50%);
  background: linear-gradient(180deg, transparent, var(--moon), transparent);
  box-shadow: 0 0 40px 20px var(--moon-glow), 0 0 120px 60px var(--moon-glow-2);
  animation: seambloom 1.4s ease-out forwards;
}
@keyframes seambloom { 0%{opacity:0} 30%{opacity:1; width:3px} 100%{opacity:0; width:60vw} }

/* C · The Threshold: dissolve into pixel motes, drift up */
.door-stage.dir-c .door { transform-origin: center bottom; }
.door-stage.dir-c.is-opening .door {
  transform: translateY(-3%) scale(1.03);
  opacity: 0;
  filter: blur(2px) contrast(1.4);
  -webkit-mask-image: radial-gradient(circle at 50% 60%, #000 0%, transparent 78%);
          mask-image: radial-gradient(circle at 50% 60%, #000 0%, transparent 78%);
  transition: transform 1.4s ease, opacity 1.2s ease .15s, filter 1.4s ease;
}
.door-stage.dir-c.is-opening .door::after {
  content:""; position:absolute; inset:-10%;
  background-image:
    radial-gradient(2px 2px at 20% 30%, var(--moon), transparent),
    radial-gradient(2px 2px at 70% 20%, var(--moon-soft), transparent),
    radial-gradient(2px 2px at 40% 70%, var(--moon), transparent),
    radial-gradient(2px 2px at 85% 60%, var(--moon-soft), transparent),
    radial-gradient(2px 2px at 55% 45%, var(--moon), transparent);
  animation: motes 1.3s ease-out forwards;
}
@keyframes motes { 0%{opacity:0; transform:translateY(0)} 40%{opacity:1} 100%{opacity:0; transform:translateY(-40px)} }

/* ---- OPEN (final) ---- */
.door-stage.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.door-stage.no-anim, .door-stage.no-anim .door { transition: none !important; animation: none !important; }
.door-stage.no-anim { opacity: 0; visibility: hidden; pointer-events: none; }
/* transition kill-switch for clean state resets (replay) */
.door-stage.no-trans, .door-stage.no-trans .door { transition: none !important; }

/* ---- prototype controls (direction switcher) ---- */
.door-devbar {
  position: fixed; left: 12px; bottom: calc(var(--tab-h) + 14px); z-index: 90;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 8px; backdrop-filter: blur(12px);
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em;
  opacity: .55; transition: opacity .2s ease;
}
.door-devbar:hover, .door-devbar:focus-within { opacity: 1; }
@media (min-width:880px){ .door-devbar { bottom: 14px; left: 14px; } }
.door-devbar__title { color: var(--text-faint); text-transform: uppercase; padding: 2px 4px 4px; }
.door-devbar__row { display: flex; gap: 6px; }
.door-devbar button {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing:.04em;
  padding: 7px 9px; border-radius: 5px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim); text-transform: uppercase;
}
.door-devbar button[aria-pressed="true"] { background: var(--moon); color:#11131d; border-color: var(--moon); }
.door-devbar button:hover { color: var(--text); }
.door-devbar .replay { width:100%; justify-content:center; color: var(--moon-soft); }

/* ---- moon preview control (prototype) ---- */
.moon-devbar {
  position: fixed; right: 12px; bottom: calc(var(--tab-h) + 14px); z-index: 90;
  display: flex; flex-direction: column; gap: 6px;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  padding: 8px; backdrop-filter: blur(12px);
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em;
}
@media (min-width: 880px) { .moon-devbar { bottom: 14px; right: 14px; } }
.moon-devbar .door-devbar__title { color: var(--text-faint); text-transform: uppercase; padding: 2px 4px 4px; }
.moon-devbar__row { display: flex; gap: 6px; align-items: center; }
.moon-devbar__now {
  flex: 1; text-align: center; min-width: 96px;
  color: var(--moon-soft); text-transform: uppercase;
  padding: 7px 6px; border: 1px solid var(--line); border-radius: 5px; background: var(--surface-2);
}
.moon-devbar button {
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .04em;
  padding: 7px 9px; border-radius: 5px; border: 1px solid var(--line);
  background: var(--surface-2); color: var(--text-dim); text-transform: uppercase;
}
.moon-devbar__events button { flex: 1; }
.moon-devbar button:hover { color: var(--text); }
.moon-devbar button[aria-pressed="true"] { background: var(--moon); color: #11131d; border-color: var(--moon); }
.moon-devbar__events button[data-moon-event="blood"][aria-pressed="true"]   { background: var(--blood);   border-color: var(--blood); }
.moon-devbar__events button[data-moon-event="meow"][aria-pressed="true"]    { background: var(--meow);    border-color: var(--meow); }
.moon-devbar__events button[data-moon-event="harvest"][aria-pressed="true"] { background: var(--harvest); border-color: var(--harvest); }
.moon-devbar__events button[data-server-demo="offline"][aria-pressed="true"] { background: var(--blood); border-color: var(--blood); color: #fff; }
.moon-devbar__events button[data-server-demo="live"][aria-pressed="true"]    { background: var(--online); border-color: var(--online); }