/* ════════════════════════════════════════════════════════════════════
   ROOMS — list + detail (dark base, paintings pop)
   The backdrop image (single or mosaic) is hugely blurred and slightly
   darkened. The flow canvas paints radial waves emanating from each
   painting on top of that. The painting itself sits crisp, slightly
   brightened, with a halo shadow so it reads as the light source.
   ──────────────────────────────────────────────────────────────────── */

/* ── Ambient backdrop (room_detail) ──────────────────────────────── */
.room-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-deeper);
}
.room-bg-img {
  position: absolute;
  left: -10%; top: -10%;
  width: 120%; height: 120%;
  object-fit: cover;
  /* Default: static blur, cheap on phones. Pages that want the live
     audio-reactive SVG displacement add the `--reactive` modifier
     (currently only room_detail). */
  filter: blur(28px) saturate(1.25) brightness(0.72);
  transform: scale(1.1);
  opacity: 1;
}
.room-bg-img--reactive {
  filter: blur(28px) saturate(1.25) brightness(0.72) url(#nr-wind) url(#nr-water);
  will-change: filter;
}
/* Touch devices + reduced-motion: drop the live SVG displacement.
   Chained feDisplacementMap over a 28px-blurred backdrop is fillrate
   murder on mobile GPUs (iOS Safari especially) — even an iPhone 11
   crawls. Static blur stays, phones handle that fine. */
@media (hover: none) and (pointer: coarse), (prefers-reduced-motion: reduce) {
  .room-bg-img--reactive {
    filter: blur(28px) saturate(1.25) brightness(0.72);
    will-change: auto;
  }
}

/* ── Ambient backdrop (room_list) — every cover stacked + blended ─
   Earlier this was a grid of columns; with the gentler blur the
   column boundaries leaked through as vertical stripes. Tiles are
   now full-viewport absolutely-positioned and overlap each other,
   each at a low opacity so all the paintings dissolve into one
   continuous wash of colour.
   ────────────────────────────────────────────────────────────── */
.rooms-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg-deeper);
}
/* The image is now ONE pre-blurred + pre-darkened composite WebP
   baked by the `composite_backdrop` management command. No runtime
   blur is needed, which is the whole point — that's what was killing
   phones. A tiny additional saturate boost is the only CSS work. */
.rooms-bg-tile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.05);
  transform: scale(1.04);
  opacity: 1;
}

/* Content sits above the canvas. */
.rooms-grid, .room { position: relative; z-index: 2; }

/* ── ROOM LIST grid ──────────────────────────────────────────────── */
.rooms-grid {
  width: 90%;
  max-width: 1100px;
  margin: 4rem auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 2rem;
}

.room-card {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  cursor: pointer;
  border-radius: 2px;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.45),
    0 24px 80px rgba(0, 0, 0, 0.50);
}

.room-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 1.2s ease, filter 1.2s ease;
  filter: brightness(1.00) saturate(1.08);
}
.room-card:hover img {
  transform: scale(1.03);
  filter: brightness(1.12) saturate(1.15);
}

.room-card-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.60) 0%, transparent 60%);
  opacity: 1;
  transition: opacity 0.6s ease;
  text-decoration: none;
}
.room-card:hover .room-card-overlay { opacity: 0; }

.room-card-title {
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  color: #fff;
}
.room-card-genre {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.6);
  margin-top: 0.3rem;
}

.room-card-link {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.unreleased { filter: brightness(0.40) !important; }

.unreleased-tag {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.6);
  z-index: 3;
}

/* ── ROOM DETAIL — painting centred on backdrop ──────────────────── */
.room {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
}

.painting-wrap {
  position: relative;
  max-width: 55vw;
  max-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.painting {
  max-width: 100%;
  max-height: 75vh;
  object-fit: contain;
  display: block;
  filter: brightness(1.06) saturate(1.08);
  box-shadow:
    0 2px 6px    rgba(0, 0, 0, 0.55),
    0 18px 48px  rgba(0, 0, 0, 0.55),
    0 48px 120px rgba(0, 0, 0, 0.55),
    0 72px 200px rgba(0, 0, 0, 0.35);
  transition: box-shadow 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}
.painting:hover {
  filter: brightness(1.12) saturate(1.12);
  transform: translateY(-2px);
  box-shadow:
    0 2px 6px    rgba(0, 0, 0, 0.55),
    0 24px 60px  rgba(0, 0, 0, 0.58),
    0 60px 140px rgba(0, 0, 0, 0.58),
    0 96px 240px rgba(0, 0, 0, 0.40);
}

.room-exit {
  position: fixed;
  top: 1.5rem;
  left: 1.75rem;
  z-index: 200;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.65;
  transition: opacity 0.4s ease;
}
.room-exit:hover { opacity: 1; }

.room-exit svg {
  width: 18px;
  height: 18px;
  stroke: var(--ink);
  fill: none;
  stroke-width: 1.5;
}
.room-exit span {
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--ink);
}

@media (max-width: 600px) {
  .painting-wrap { max-width: 90vw; max-height: 50vh; }
  .painting { max-height: 50vh; }
  .room-exit { top: 1.25rem; left: 1rem; }
}