/* Halloway entry hall — the tactile layer.
 *
 * hall-scene.js writes two custom properties on :root from device tilt —
 * --hall-x and --hall-y, each in [-1, 1] — and these selectors turn that one
 * signal into a different authored response per door. No glyph ever changes
 * colour or weight; attention is physical (a lean, a light, a drift). Under
 * prefers-reduced-motion tilt.js reports a dead-flat 0, so every transform
 * below collapses to nothing; the explicit media block at the end also stills
 * the press-flare animations. The doors stay fully tappable throughout. */

:root {
  --hall-x: 0;
  --hall-y: 0;
}

/* ── Corridor depth ───────────────────────────────────────────────────────
   A pool of light slides with the phone; the head and the doors ride opposite
   parallax planes, so the doors sit a little further down the dark. */
.hall-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    62% 42% at calc(50% + var(--hall-x) * 14%) calc(0% + var(--hall-y) * 6%),
    rgba(124, 112, 178, 0.18),
    transparent 70%
  );
}
.hall-head {
  transform: translate3d(calc(var(--hall-x) * 4px), calc(var(--hall-y) * 2px), 0);
  transition: transform 140ms ease;
}
.hall-doors {
  transform: translate3d(calc(var(--hall-x) * -6px), calc(var(--hall-y) * -3px), 0);
  transition: transform 140ms ease;
}

/* ── The wordmark catches a raking light from the angle you hold the phone ── */
.hall-title {
  text-shadow:
    calc(var(--hall-x) * 1.2px) calc(var(--hall-y) * 1.2px) 1px rgba(255, 255, 255, 0.18),
    calc(var(--hall-x) * -1.5px) calc(var(--hall-y) * -1.5px) 2px rgba(0, 0, 0, 0.6);
  transition: text-shadow 140ms ease;
}

/* The wordmark's key (the O) turns in its bow from the same --hall-x signal;
   that lives with the rest of the lockup in shell/wordmark.css. */

/* ── A single word per line leans, instead of turning bold or coloured ───── */
.hall-keyword {
  display: inline-block;
  transform: rotate(calc(var(--hall-x) * 2.4deg)) translateY(calc(var(--hall-y) * -0.6px));
  transition: transform 160ms ease;
}

/* ── The Veil — a figure that only resolves out of the dark when you lean ── */
.hall-veil-figure {
  opacity: calc(0.05 + var(--veil-glow, 0) * 0.85);
  transform: translateX(calc(var(--hall-x) * 9px));
  transition: transform 140ms ease, opacity 220ms ease;
}
.hall-veil-form {
  fill: #d9ccff;
}
.hall-veil-sliver {
  fill: #fff4d6;
  opacity: 0;
}
/* The reveal: a sliver of light cracks first, then the figure resolves out of
   the dark and slowly sinks back into it. Played once on load and again on
   press; between reveals the figure's presence is the tilt glow above. */
.hall-door--veil.is-revealing .hall-veil-sliver {
  animation: hall-sliver 700ms ease;
}
.hall-door--veil.is-revealing .hall-veil-figure {
  animation: hall-veil-reveal 2600ms ease-in-out;
}
@keyframes hall-sliver {
  0% { opacity: 0; }
  30% { opacity: 0.9; }
  100% { opacity: 0; }
}
@keyframes hall-veil-reveal {
  0% { opacity: 0.05; }
  12% { opacity: 0.12; }
  42% { opacity: 0.95; }
  60% { opacity: 0.9; }
  100% { opacity: 0.05; }
}

/* ── The Athanor — coals breathe, and a beaker distils through the panes ──── */
.hall-ath-glow {
  fill: var(--door-accent, #e0a33c);
  filter: blur(2.5px);
  opacity: 0.14;
  animation: hall-coals 3.6s ease-in-out infinite;
}
@keyframes hall-coals {
  0%, 100% { opacity: 0.1; }
  50% { opacity: 0.2; }
}

/* The distillation, played once on load and again on press. A beaker forms
   above the door and tips to pour; the upper pane fills; the beaker tilts back
   and vanishes; the draught runs down a thread into the lower pane; and once
   that pane is full an alchemical fire-sign forms before the whole thing
   dissolves back to the resting glow. One 3.4s clock drives every part. */
.hall-ath-fill {
  fill: var(--door-accent, #e0a33c);
  opacity: 0;
  transform-box: view-box;
}
.hall-ath-beaker {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 60px 68px;
}
.hall-ath-beaker-glass,
.hall-ath-beaker-lip {
  stroke: #ffd9a0;
  fill: none;
}
.hall-ath-beaker-liquid {
  fill: var(--door-accent, #e0a33c);
  opacity: 0.85;
}
.hall-ath-stream {
  fill: var(--door-accent, #e0a33c);
  opacity: 0;
  transform-box: view-box;
  transform-origin: 60px 125px;
}
.hall-ath-sigil {
  opacity: 0;
  transform-box: view-box;
  transform-origin: 60px 160px;
}
.hall-ath-sigil-mark {
  stroke: #ffd9a0;
  fill: none;
}
.hall-door--athanor.is-revealing .hall-ath-beaker { animation: hall-ath-beaker 3400ms ease; }
.hall-door--athanor.is-revealing .hall-ath-fill-top { animation: hall-ath-fill-top 3400ms ease; }
.hall-door--athanor.is-revealing .hall-ath-fill-bot { animation: hall-ath-fill-bot 3400ms ease; }
.hall-door--athanor.is-revealing .hall-ath-stream { animation: hall-ath-stream 3400ms ease; }
.hall-door--athanor.is-revealing .hall-ath-sigil { animation: hall-ath-sigil 3400ms ease; }

@keyframes hall-ath-beaker {
  0% { opacity: 0; transform: translateY(-8px) rotate(0deg) scale(0.6); }
  8% { opacity: 0.95; transform: translateY(0) rotate(0deg) scale(1); }
  14% { opacity: 0.95; transform: translateY(0) rotate(22deg) scale(1); }
  34% { opacity: 0.95; transform: translateY(0) rotate(22deg) scale(1); }
  44% { opacity: 0; transform: translateY(-10px) rotate(-10deg) scale(0.82); }
  100% { opacity: 0; transform: translateY(-10px) rotate(-10deg) scale(0.82); }
}
@keyframes hall-ath-fill-top {
  0%, 12% { opacity: 0; transform: translateY(48px); }
  14% { opacity: 0.8; transform: translateY(48px); }
  34% { opacity: 0.8; transform: translateY(0); }
  47% { opacity: 0.8; transform: translateY(0); }
  76% { opacity: 0.8; transform: translateY(48px); }
  100% { opacity: 0; transform: translateY(48px); }
}
@keyframes hall-ath-fill-bot {
  0%, 47% { opacity: 0; transform: translateY(48px); }
  49% { opacity: 0.8; transform: translateY(48px); }
  76% { opacity: 0.8; transform: translateY(0); }
  90% { opacity: 0.8; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(0); }
}
@keyframes hall-ath-stream {
  0%, 43% { opacity: 0; transform: scaleY(0); }
  47% { opacity: 0.85; transform: scaleY(1); }
  73% { opacity: 0.85; transform: scaleY(1); }
  80% { opacity: 0; transform: scaleY(1); }
  100% { opacity: 0; transform: scaleY(1); }
}
@keyframes hall-ath-sigil {
  0%, 74% { opacity: 0; transform: scale(0.5); }
  85% { opacity: 0.95; transform: scale(1); }
  92% { opacity: 0.95; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.08); }
}

/* ── The Threshold — a veil lifts, a band of light falls, a ring catches it ─ */
.hall-thr-glow {
  fill: var(--door-accent, #c2879b);
  opacity: 0.12;
  animation: hall-thr-breathe 5s ease-in-out infinite;
}
.hall-thr-veil {
  fill: #efe6d2;
  opacity: 0.16;
  transform-box: view-box;
  transform-origin: 60px 78px;
  transform: translateX(calc(var(--hall-x) * 3px));
  transition: transform 160ms ease;
}
.hall-thr-ring {
  stroke: var(--door-accent, #c2879b);
  stroke-width: 1.4;
  opacity: 0.5;
}
.hall-thr-sliver {
  fill: #f4d9a0;
  opacity: 0.16;
}
.hall-thr-shadow {
  fill: #04030a;
  opacity: 0;
}
/* The reveal, played once on load and again on press: the warm line under the
   door breathes, the veil in the upper pane lifts and sways, a band of candle
   light falls down the door's edge, a ring on the sill catches it, and a long
   shadow leans across the threshold and withdraws — someone, about to step
   through — before it all settles back. */
.hall-door--threshold.is-revealing .hall-thr-veil {
  animation: hall-thr-part 2600ms ease;
}
.hall-door--threshold.is-revealing .hall-thr-sliver {
  animation: hall-thr-light 2400ms ease 300ms;
}
.hall-door--threshold.is-revealing .hall-thr-ring {
  animation: hall-thr-glint 1600ms ease 1200ms;
}
.hall-door--threshold.is-revealing .hall-thr-shadow {
  animation: hall-thr-cross 2600ms ease 600ms;
}
@keyframes hall-thr-breathe {
  0%, 100% { opacity: 0.10; }
  50% { opacity: 0.2; }
}
@keyframes hall-thr-part {
  0% { transform: translateX(0) scaleY(1); opacity: 0.16; }
  40% { transform: translateX(-3px) scaleY(0.86); opacity: 0.3; }
  70% { transform: translateX(2px) scaleY(0.9); opacity: 0.22; }
  100% { transform: translateX(0) scaleY(1); opacity: 0.16; }
}
@keyframes hall-thr-light {
  0% { opacity: 0; }
  30% { opacity: 0.85; }
  70% { opacity: 0.6; }
  100% { opacity: 0.16; }
}
@keyframes hall-thr-glint {
  0% { opacity: 0.5; }
  30% { opacity: 1; stroke-width: 1.8; }
  60% { opacity: 0.7; }
  100% { opacity: 0.5; }
}
@keyframes hall-thr-cross {
  0% { opacity: 0; transform: translateX(-14px); }
  35% { opacity: 0.6; transform: translateX(0); }
  65% { opacity: 0.6; transform: translateX(6px); }
  100% { opacity: 0; transform: translateX(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .hall-head,
  .hall-doors,
  .hall-title,
  .hall-keyword,
  .hall-veil-figure,
  .hall-thr-veil {
    transform: none !important;
    transition: none !important;
  }
  .hall-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; }
  .hall-body::before {
    background: radial-gradient(62% 42% at 50% 0%, rgba(124, 112, 178, 0.16), transparent 70%) !important;
  }
  .hall-veil-figure { opacity: 0.12 !important; }
  .hall-ath-glow { animation: none !important; opacity: 0.16 !important; }
  .hall-veil-figure,
  .hall-veil-sliver,
  .hall-ath-beaker,
  .hall-ath-fill,
  .hall-ath-stream,
  .hall-ath-sigil,
  .hall-thr-glow,
  .hall-thr-veil,
  .hall-thr-sliver,
  .hall-thr-ring,
  .hall-thr-shadow {
    animation: none !important;
  }
}