/* Halloway title page — the house at night, full-screen.
 *
 * Shell-only (path absent in City Seekers). The page is the cover of the whole
 * game: a tall house standing on the ground with the night above it, the three
 * quest doors set into its front. The symbols themselves (and their load/press
 * reveals) are styled by shell/hall.css, which this page also loads; this file
 * lays out the house full-screen, draws the night around it, and spends device
 * tilt on the one effect no other room uses — a moon that rakes the facade.
 * Everything is namespaced under body.title-body so it never leaks. Mobile-first;
 * dead-flat and still under prefers-reduced-motion. */

body.title-body {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(120% 60% at 50% 4%, rgba(34, 30, 54, 0.55), transparent 70%),
    #08070e;
  color: #efe9ff;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.title-root {
  position: fixed;
  inset: 0;
  display: block;
}

.title-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* The house stands on the ground: it fills the width on a tall phone (the night
   shows above it) and fits the height on a short/wide screen. */
.title-house-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.title-house {
  position: relative;
  z-index: 1;
  display: block;
  height: min(100svh, 150vw);
  width: auto;
  max-width: none;
}

/* Inner door SVGs are sized by their x/y/width/height attributes inside the
   house — keep shell.css's fixed door width off them. */
.title-house .title-door-svg {
  width: auto;
  height: auto;
  overflow: visible;
}
/* currentColor in the door art (frame, knob, panes) resolves to the accent. */
.title-door {
  color: var(--door-accent, #c8d0e7);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.title-door-svg {
  filter: drop-shadow(0 0 7px color-mix(in srgb, var(--door-accent, #888) 40%, transparent));
}

/* A pool of the door's colour on the facade — the light the moon wakes. */
.title-door-light {
  fill: var(--door-accent, #888);
  opacity: 0;
  filter: blur(10px);
  transition: opacity 200ms ease;
}
.title-door[data-slug="the-veil"] .title-door-light {
  opacity: calc(0.05 + var(--wake-veil, 0) * 0.5);
}
.title-door[data-slug="the-threshold"] .title-door-light {
  opacity: calc(0.05 + var(--wake-threshold, 0) * 0.5);
}
.title-door[data-slug="athanor"] .title-door-light {
  opacity: calc(0.05 + var(--wake-ath, 0) * 0.5);
}
.title-door:focus-visible {
  outline: none;
}
.title-door:focus-visible .title-door-light {
  opacity: 0.55;
}

/* The moon rides against the lean; the gable + lamp catch a little of it. */
.title-moon {
  transform: translate(calc(var(--moon-x, 0) * 1px), calc(var(--moon-y, 0) * 1px));
  transition: transform 220ms ease;
}

/* The rake: moonlight washing across the facade, positioned by the tilt. */
.title-rake {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
  /* The light's position is driven by --rake-x/--rake-y inside the gradient,
     which CSS can't transition; the smoothing already lives in HallowayTilt's
     rAF damping, so no CSS transition is needed (and one here would be a no-op). */
  background: radial-gradient(
    46% 40% at calc(var(--rake-x, 50) * 1%) calc(var(--rake-y, 38) * 1%),
    rgba(233, 226, 255, 0.16),
    rgba(233, 226, 255, 0.05) 38%,
    transparent 64%
  );
}

/* The wordmark + tagline ride the night above the roof. */
.title-banner {
  position: absolute;
  z-index: 3;
  top: calc(env(safe-area-inset-top, 0px) + clamp(1.5rem, 6vh, 3.5rem));
  left: 0;
  right: 0;
  padding: 0 1.25rem;
  text-align: center;
  pointer-events: none;
}
/* The wordmark lockup (shared component) sized + lit for the hero. It's an
   inline element; the banner centres it. The key turns with --hall-x via
   wordmark.css, so it catches the same lean as the house. */
body.title-body .title-wordmark {
  margin: 0;
  display: inline-block;
  font-size: clamp(1.85rem, 8vw, 2.8rem);
  color: #efe9ff;
  text-shadow:
    calc(var(--hall-x, 0) * 1.2px) calc(var(--hall-y, 0) * 1.2px) 1px rgba(255, 255, 255, 0.2),
    calc(var(--hall-x, 0) * -1.6px) calc(var(--hall-y, 0) * -1.6px) 2px rgba(0, 0, 0, 0.6);
}
.title-tagline {
  margin: 0.7rem 0 0;
  color: #c8d0e7;
  font-size: clamp(0.85rem, 3.6vw, 1rem);
  letter-spacing: 0.06em;
}
.title-cue {
  margin: 0.5rem 0 0;
  color: #8a83a8;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.title-noscript {
  position: relative;
  z-index: 4;
  max-width: 32rem;
  margin: 4rem auto;
  padding: 0 1.5rem;
  text-align: center;
  color: #c8d0e7;
}

@media (prefers-reduced-motion: reduce) {
  .title-moon,
  .title-rake,
  .title-door-light,
  body.title-body .title-wordmark {
    transition: none !important;
  }
  /* Rest the light dead-centre and let each door sit faintly lit. */
  .title-rake {
    background: radial-gradient(46% 40% at 50% 38%, rgba(233, 226, 255, 0.12), transparent 64%) !important;
  }
  .title-door-light {
    opacity: 0.08 !important;
  }
  .title-moon {
    transform: none !important;
  }
}