/* Halloway ambient scenes — one authored response per bare page.
 *
 * ambient.js feeds --hall-x / --hall-y (device tilt, [-1, 1]) onto :root; each
 * data-ambient below spends that signal differently so the small pages each
 * feel like their own room. tilt.js reports a flat 0 under prefers-reduced-
 * motion, and the media block at the end stills the rest. */

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

/* A faint pool of light that drifts with the phone — shared backdrop, but the
   foreground reactions (below) are what give each page its character. */
.hall-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    60% 45% at calc(50% + var(--hall-x) * 12%) calc(8% + var(--hall-y) * 6%),
    rgba(110, 96, 150, 0.08),
    transparent 72%
  );
  transition: background 160ms ease;
}

/* The brand crowns even the bare pages: a small keyed Halloway wordmark above
   the big numeral/word, linking back to the cover. Centered (the ambient body
   centres its column); quiet ink that lifts on hover. The key turns with the
   same --hall-x these scenes already ride. */
.ambient-brand {
  display: inline-block;
  margin-bottom: 1.6rem;
  font-size: 1rem;
  color: var(--muted);
  text-decoration: none;
}
.ambient-brand:hover,
.ambient-brand:focus-visible {
  color: var(--fg-secondary);
}

/* The profile-picture ghost (shell/ghost.css) keeps the bare pages company —
   the lost figure standing in the empty corridor, lit in each page's colour.
   ghost.js subscribes it to the same shared tilt source (HallowayTilt) these
   scenes spend as --hall-x, writing its own --ghost-* vars, so its eyes drift
   with the room. */
.ambient-ghost {
  --ghost-size: clamp(5.25rem, 26vw, 8rem);
  --ghost-float: 7px;
  margin: 0.2rem 0 1.5rem;
  /* The lost figure drifts in the empty corridor, even with no tilt sensor. */
  animation: halloway-ghost-float 6.5s ease-in-out infinite;
}
body[data-ambient="void"] .ambient-ghost {
  --ghost-accent: #a78bfa;
}
body[data-ambient="stir"] .ambient-ghost {
  --ghost-accent: #c2614c;
}
body[data-ambient="candle"] .ambient-ghost {
  --ghost-accent: #e8b34c;
}

/* Sign-in / reset / verify — a small, quiet face waits above the form. The
   utilitarian pages keep their forms perfectly usable; the ghost only greets. */
.auth-ghost {
  --ghost-size: clamp(4.25rem, 18vw, 5.75rem);
  --ghost-accent: #a78bfa;
  --ghost-float: 3px;
  display: block;
  margin: 0.2rem auto 1.5rem;
  /* A calmer, slower breath so the figure stays present without pulling focus
     from the form. */
  animation: halloway-ghost-float 9s ease-in-out infinite;
}

/* ── 404 — "this door opens onto nothing": the numerals drift apart, a void
   with nothing to hold them together. ─────────────────────────────────────── */
body[data-ambient="void"] .hall-title {
  letter-spacing: calc(0.42em + var(--hall-x) * 0.14em);
  transform: translateX(calc(var(--hall-x) * 5px));
  transition: letter-spacing 180ms ease, transform 180ms ease;
}

/* ── 500 — "something stirred in the dark": a shadow shifts at the edge and the
   word leans as if disturbed. ─────────────────────────────────────────────── */
body[data-ambient="stir"]::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    40% 60% at calc(50% - var(--hall-x) * 40%) 70%,
    rgba(0, 0, 0, 0.55),
    transparent 60%
  );
  transition: background 200ms ease;
}
body[data-ambient="stir"] .hall-stir {
  display: inline-block;
  transform: rotate(calc(var(--hall-x) * 3deg)) translateY(calc(var(--hall-y) * 1px));
  transition: transform 120ms ease;
}

/* ── offline — "the corridor is dark for a moment": a candle glow that leans on
   the draft, tying back to the Foyer's flame. ─────────────────────────────── */
body[data-ambient="candle"] .hall-title {
  text-shadow:
    calc(var(--hall-x) * 3px) -2px 14px rgba(232, 179, 76, 0.5),
    calc(var(--hall-x) * 5px) -4px 26px rgba(232, 179, 76, 0.28);
  transition: text-shadow 160ms ease;
}

/* ── login / settings / reset / verify — utilitarian, so only the title takes
   a quiet rake and the page a touch of depth; forms stay perfectly usable. ── */
body[data-ambient="page"] .shell-title {
  text-shadow:
    calc(var(--hall-x) * 1px) calc(var(--hall-y) * 1px) 1px rgba(255, 255, 255, 0.14),
    calc(var(--hall-x) * -1.2px) calc(var(--hall-y) * -1.2px) 2px rgba(0, 0, 0, 0.5);
  transition: text-shadow 160ms ease;
}
body[data-ambient="page"] .shell-head {
  transform: translate3d(calc(var(--hall-x) * 3px), calc(var(--hall-y) * 1.5px), 0);
  transition: transform 160ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hall-body::before,
  body[data-ambient="stir"]::after {
    background-position: 50% 8% !important;
  }
  body[data-ambient="void"] .hall-title,
  body[data-ambient="stir"] .hall-stir,
  body[data-ambient="page"] .shell-head {
    transform: none !important;
    transition: none !important;
  }
  /* Scoped to the 404 numerals only — grouping this with .shell-head would
     inherit the wide spacing onto the auth pages' back link + title. */
  body[data-ambient="void"] .hall-title {
    letter-spacing: 0.42em !important;
  }
  body[data-ambient="candle"] .hall-title,
  body[data-ambient="page"] .shell-title {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }
}