/* Halloway epigraph — a quote, framed on the wall.
 *
 * The house quotes Bachelard's "The Poetics of Space" in a handful of calm
 * rooms (the Grand Room, a pause in the Foyer, the Coat Room, the Athanor and
 * Threshold entry rooms). Every one of those cards wears this one look, on purpose:
 * like the wordmark, it is a deliberate repeated motif, so a player learns the
 * frame at a glance and can linger on it or skip past it. The markup is owned
 * by epigraph.js; this file owns the look.
 *
 * One knob: --hw-epigraph-accent tints only the inner fillet, the hook, and the
 * caption rule — never the body text, which keeps the surface's own ink for
 * legibility. Each room sets the accent; absent, it falls back to a muted ink.
 * Shell-only; no hunt engine ever references it.
 */

.hw-epigraph {
  --hw-epigraph-accent: var(--muted, #9aa3c7);
  position: relative;
  display: block;
  box-sizing: border-box;
  max-width: 34rem;
  margin: 2.4rem auto;
  padding: clamp(1.5rem, 5.5vw, 2.3rem) clamp(1.3rem, 5.5vw, 2.5rem);
  text-align: center;
  color: var(--fg, #f2f5ff);
  /* A faint matte, lit a touch from the top and pooled warm at its centre, like
     a framed thing on a wall catching the light of the room it hangs in. */
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06), transparent 58%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
  /* Picture frames sit squarer than the app's 16px cards. */
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 3px;
  /* A beaded inner bevel (the mat board) above a soft cast shadow on the wall. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 0 0 1px rgba(0, 0, 0, 0.28) inset,
    0 26px 44px -30px rgba(0, 0, 0, 0.9);
}

.hw-epigraph[hidden] {
  display: none;
}

/* The inner mat line — the second rule that makes the frame read as a frame.
   Tinted with the room's accent, dimmed so it stays a fillet, not a highlight. */
.hw-epigraph::before {
  content: "";
  position: absolute;
  inset: 0.5rem;
  border: 1px solid var(--hw-epigraph-accent);
  border-radius: 1px;
  opacity: 0.55;
  pointer-events: none;
  /* A hair of depth where the mat meets the picture. */
  box-shadow: 0 0 0.6rem rgba(0, 0, 0, 0.18) inset;
}

/* The brass pin it hangs from — a small bead lit from the upper-left. */
.hw-epigraph::after {
  content: "";
  position: absolute;
  top: -0.5rem;
  left: 50%;
  width: 0.5rem;
  height: 0.5rem;
  margin-left: -0.25rem;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    color-mix(in srgb, var(--hw-epigraph-accent) 92%, #fff),
    var(--hw-epigraph-accent) 70%
  );
  opacity: 0.65;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.hw-epigraph__quote {
  position: relative;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-size: clamp(1.02rem, 3.6vw, 1.2rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
  text-wrap: pretty;
}

/* Each word is its own touch target. The quote reads as plain framed text —
   no underline, no colour, nothing to "learn" — until a finger lands on a word,
   which then lifts a hair, brightens toward the room's accent, and settles.
   A player can wake one word, or light up a whole line. Flavor, never a hint. */
.hw-epigraph__w {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 85%;
  transition: color 260ms ease, text-shadow 260ms ease;
}

/* Lit: stays awake until tapped again. The glow leans on the room's accent so
   each card warms toward its own colour, not a flat white. */
.hw-epigraph__w.is-awake {
  color: var(--hw-epigraph-accent);
  text-shadow:
    0 0 0.4rem rgba(255, 255, 255, 0.45),
    0 0 1rem color-mix(in srgb, var(--hw-epigraph-accent) 60%, transparent);
}

/* The one-shot wake replays on every tap — a small lift and wobble that ends
   exactly where it began, so nothing drifts out of place. */
.hw-epigraph__w.is-waking {
  animation: hw-epigraph-wake 520ms ease;
}

@keyframes hw-epigraph-wake {
  0% { transform: translateY(0) rotate(0); }
  28% { transform: translateY(-0.16em) rotate(-2.4deg); }
  60% { transform: translateY(-0.04em) rotate(1.4deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* The opening and closing marks sit large and faint in the corners, tinted with
   the room's accent — a framed pull-quote, not inline punctuation. Purely
   decorative: kept low in opacity and tucked into the corner gaps, off the
   words, so they read as part of the frame and never get in a finger's way. */
.hw-epigraph__quote::before,
.hw-epigraph__quote::after {
  position: absolute;
  font-family: Georgia, "Times New Roman", serif;
  font-style: normal;
  font-size: clamp(2.4rem, 11vw, 3.6rem);
  line-height: 1;
  color: var(--hw-epigraph-accent);
  opacity: 0.22;
  pointer-events: none;
}

.hw-epigraph__quote::before {
  content: "\201C";
  top: -1.1rem;
  left: -0.3rem;
}

.hw-epigraph__quote::after {
  content: "\201D";
  bottom: -1.4rem;
  right: -0.3rem;
}

.hw-epigraph__cite {
  display: block;
  margin-top: 0.95rem;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hw-epigraph-accent);
  opacity: 0.9;
}

/* A short centered rule lifts the attribution off the quote. */
.hw-epigraph__cite::before {
  content: "";
  display: block;
  width: 1.7rem;
  height: 1px;
  margin: 0 auto 0.75rem;
  background: var(--hw-epigraph-accent);
  opacity: 0.7;
}

/* Inline within a page section (Grand Room, Foyer, Coat Room). */
.hw-epigraph--flow {
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* The band the entry-room shim drops below an Athanor/Threshold entry room. */
.hw-epigraph--entry {
  width: calc(100% - 2rem);
  margin-top: 1.6rem;
  margin-bottom: 2.4rem;
}

/* The transient card the house murmurs after a wrong answer (quote-drop.js).
   It floats over the puzzle, low and out of the way, opaque enough to read over
   anything, and dismisses on a tap or by itself. Clearly one of "those quotes,"
   so a player reads it as flavor, not a hint. */
.hw-epigraph--drop {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: max(1rem, env(safe-area-inset-bottom));
  margin: 0 auto;
  max-width: 30rem;
  z-index: 2000;
  cursor: pointer;
  /* Opaque backing so it reads over any puzzle art. */
  background: linear-gradient(180deg, rgba(20, 16, 28, 0.96), rgba(10, 8, 16, 0.96));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -20px rgba(0, 0, 0, 0.9);
  /* Settle in gently; reset for the entrance below. */
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 280ms ease, transform 280ms ease;
}

.hw-epigraph--drop.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* When the soft keyboard overlays the page, the bottom of the layout viewport
   is hidden. Move the transient quote to the visible top so it never lands
   under the keyboard or over the answer entry/hint cluster. */
body.hw-kb-open .hw-epigraph--drop {
  top: max(
    0.75rem,
    env(safe-area-inset-top),
    calc(var(--hw-kb-offset-top, 0px) + 0.75rem)
  );
  bottom: auto;
  max-height: calc(100vh - var(--hw-kb-inset, 0px) - 1.5rem);
  overflow: auto;
}

/* The drop's keyboard-focusable dismiss control. */
.hw-epigraph-dismiss {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 1.15rem;
  line-height: 1;
  color: var(--hw-epigraph-accent);
  background: transparent;
  border: 0;
  border-radius: 50%;
  opacity: 0.65;
  cursor: pointer;
}

.hw-epigraph-dismiss:hover {
  opacity: 1;
}

.hw-epigraph-dismiss:focus-visible {
  outline: 2px solid var(--hw-epigraph-accent);
  outline-offset: 2px;
  opacity: 1;
}

/* The frame holds still by design — no motion to learn. Stated explicitly so
   the intent survives future edits. */
@media (prefers-reduced-motion: reduce) {
  .hw-epigraph--drop {
    transition: none;
    transform: none;
  }
  .hw-epigraph,
  .hw-epigraph::before,
  .hw-epigraph::after {
    transition: none;
    animation: none;
  }
  /* The word still brightens on a tap (colour is not motion), but never moves. */
  .hw-epigraph__w.is-waking {
    animation: none;
  }
}