/* ============================================================
   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. */

/* ---------------- 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;
}

@media (max-width: 760px) {
  /* Fills the screen here too. A portrait crop of a landscape painting has to
     lose the sides, so bias the frame onto the bed, lamp and candle rather than
     centring on empty wall. */
  .room__bg img { object-position: 60% 50%; }
  .room .intro { padding: 72px 20px 8px; }
  .room .hero__sub { max-width: 32ch; }
}

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