/* ============================================================
   for her — the room landing.
   Layers on top of styles.css: that sheet keeps owning the shared
   components (rows, preview modal, notify form, footer, music), this
   one only re-tunes the palette to the painting and rebuilds the hero.
   ============================================================ */

:root {
  /* pulled off the image: violet walls, candle amber, sunset rose */
  --bg:       #150e21;
  --ink:      #f4ebe0;
  --ink-2:    #b6a4c6;
  /* The dim tone has to work over a photograph, not flat near-black. At the
     inherited #7e6d90 the scroll cue and the form note landed at ~3.9:1 across
     their whole area — under AA for body text. Lifted until they clear 4.5. */
  --ink-3:    #9a8aae;
  --line:     rgba(244, 235, 224, 0.11);
  --line-2:   rgba(244, 235, 224, 0.2);

  --accent:   #ffb765;                      /* the candles and the lamp */
  --accent-2: rgba(255, 183, 101, 0.17);

  --maxw: 1020px;
}

::selection { background: var(--accent); color: #2a1a06; }

/* ---------------- the painting ----------------
   Fixed behind everything. The sections below the hero carry a solid
   background, so they slide over it as she scrolls. */
.room__bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: #150e21;                      /* matches the art, so no flash on load */
}
/* Fill the frame — no bands on any side. contain left violet letterboxing
   wherever the screen's shape did not match the painting's. */
.room__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* No wash, no grain, no tint — the painting is shown exactly as it is.
   Legibility is carried entirely by the text's own shadow, which sits on the
   glyphs and leaves every pixel of the image alone. */

/* ---------------- things in the room you can open ----------------
   Sits above the hero so clicks reach it, but under .sheet (z-index 1) so the
   content still scrolls over the top. The layer itself ignores the pointer —
   only the hit circles take it — so the chevron and music button stay clickable. */
.room__spots {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.spots { width: 100%; height: 100%; display: block; pointer-events: none; }
.spots--tall { display: none; }

.spot { cursor: pointer; }
.spot__hit { fill: transparent; pointer-events: auto; }
.spot__glow {
  pointer-events: none;
  /* screen blend adds light the way the candles in the painting do, instead of
     laying a tinted disc over the art */
  mix-blend-mode: screen;
  opacity: .62;
  transform-box: fill-box;
  transform-origin: center;
  animation: ember 5.2s ease-in-out infinite;
  transition: opacity .35s var(--ease);
}
/* an even sine reads as a UI pulse; uneven steps read as a flame */
@keyframes ember {
  0%   { opacity: .5;  transform: scale(1); }
  14%  { opacity: .78; transform: scale(1.06); }
  27%  { opacity: .44; transform: scale(.97); }
  41%  { opacity: .7;  transform: scale(1.03); }
  56%  { opacity: .52; transform: scale(.99); }
  70%  { opacity: .8;  transform: scale(1.07); }
  85%  { opacity: .48; transform: scale(.98); }
  100% { opacity: .5;  transform: scale(1); }
}
/* no two embers breathing in step */
.spot:nth-child(2) .spot__glow { animation-duration: 6.1s; animation-delay: -1.4s; }
.spot:nth-child(3) .spot__glow { animation-duration: 4.6s; animation-delay: -2.9s; }
.spot:nth-child(4) .spot__glow { animation-duration: 5.8s; animation-delay: -0.7s; }
.spot:nth-child(5) .spot__glow { animation-duration: 6.6s; animation-delay: -3.6s; }
.spot:nth-child(6) .spot__glow { animation-duration: 4.9s; animation-delay: -2.1s; }
.spot:nth-child(7) .spot__glow { animation-duration: 5.5s; animation-delay: -4.3s; }

.spot:hover .spot__glow,
.spot:focus-visible .spot__glow { opacity: 1; animation-play-state: paused; }
.spot:focus-visible .spot__hit {
  fill: rgba(255, 214, 150, 0.14);
  stroke: #ffd08a;
  stroke-width: 4;
}

@media (max-width: 760px) {
  .spots--wide { display: none; }
  .spots--tall { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .spot__glow { animation: none; opacity: .66; }
}

/* ---------------- hero: the painting, and nothing else ---------------- */
.room .hero {
  min-height: 100svh;
  /* the base .hero is a column flexbox capped at 1020px — both have to be undone
     here or the cue lands mid-image and off-centre instead of bottom-centre */
  display: flex;
  flex-direction: column;
  align-items: center;         /* cross axis: horizontal */
  justify-content: flex-end;   /* main axis: vertical */
  max-width: none;
  margin: 0;
  padding: 0 0 26px;
}

/* the only mark on the image — a chevron, so the page below is discoverable */
.scrollcue {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  color: rgba(244, 235, 224, 0.62);
  filter: drop-shadow(0 1px 3px rgba(6, 3, 12, 0.9));
  animation: cueFade 3.4s ease-in-out infinite;
  transition: color 0.3s var(--ease);
}
.scrollcue svg { width: 21px; height: auto; display: block; }
.scrollcue:hover { color: #fff; }
.scrollcue:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 50%; }
@keyframes cueFade {
  0%, 100% { opacity: 0.5; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(4px); }
}

/* ---------------- the pitch, now on the sheet ---------------- */
.room .intro {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px 22px 12px;
  text-align: center;
}
.room .kicker { color: var(--accent); }
.room .hero__title {
  font-size: clamp(2.4rem, 6.4vw, 4rem);
  line-height: 1.04;
  margin: 0 0 20px;
}
.room .hero__sub { color: #cdbdd9; }

/* ---------------- everything under the fold ----------------
   One full-bleed sheet that slides up over the fixed painting. The sections
   inside are each a different max-width, so the surface has to belong to the
   wrapper — not to them — or the art shows through in uneven strips. */
.room .sheet,
.room .footer {
  position: relative;
  z-index: 1;
  background: var(--bg);
}
.room .glimpse { padding-top: 76px; }
.room .row:hover {
  background: linear-gradient(90deg, rgba(255, 183, 101, 0.05), transparent 70%);
}

/* The switch sits top-right, over the brightest part of the painting (the mirror
   and the fairy lights). Its own backing has to carry the contrast rather than
   relying on whatever pixels happen to be behind it. */
.room .vswitch { background: rgba(11, 6, 18, 0.74); border-color: rgba(244, 235, 224, 0.24); }

/* the nav floats over the painting rather than sitting on a bar */
.room .nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: none;
  border-bottom: 0;
  /* It spans the full width but only draws at its two ends, so its empty middle
     was silently eating clicks aimed at anything in the top strip of the room —
     the lanterns were unopenable because of it. Only its children take the pointer. */
  pointer-events: none;
}
.room .nav > * { pointer-events: auto; }

@media (max-width: 760px) {
  /* Phones get their own portrait painting, so there is no landscape frame to
     rescue any more — it is already the right shape and only loses a sliver off
     each side. Centred keeps the candle, the letter and the window together. */
  .room__bg img { object-position: center; }
  .room .intro { padding: 72px 20px 8px; }
  .room .hero__sub { max-width: 32ch; }
}

@media (prefers-reduced-motion: reduce) {
  .scrollcue { animation: none; opacity: 0.8; }
}