/* Atmosphere backgrounds — the room behind the TV.
   Independent of the frame. Selected randomly on page load.
   All atmospheres are subtle enough that the TV remains the focal point.

   Selector: body[data-atmosphere="key"]
   Each .room gets a distinct background treatment.
*/

/* ---- warm-void: the default dark room ------------------------------- */
body[data-atmosphere="warm-void"] .room {
  background:
    linear-gradient(rgba(7, 5, 4, 0.1), rgba(7, 5, 4, 0.28)),
    #080604 url("../media/atmospheres/warm-void.png") center / cover no-repeat;
}

/* ---- rain-window: slow droplets on glass, streetlight through rain -- */
body[data-atmosphere="rain-window"] .room {
  background:
    radial-gradient(ellipse 60% 40% at 50% 30%, rgba(200,180,100,0.12) 0%, transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 46%, #0c1018 0%, #06080c 55%, #030405 100%);
  position: relative;
}

body[data-atmosphere="rain-window"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* streetlight glow */
    radial-gradient(ellipse 30% 20% at 20% 15%, rgba(255,180,80,0.08), transparent 60%),
    radial-gradient(ellipse 25% 18% at 75% 25%, rgba(255,180,80,0.05), transparent 50%);
}

/* rain streaks — subtle, slow */
body[data-atmosphere="rain-window"] .room::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.3;
  background:
    repeating-linear-gradient(
      4deg,
      transparent,
      transparent 3px,
      rgba(180,200,220,0.04) 3px,
      rgba(180,200,220,0.04) 4px
    );
  animation: rain-fall 3s linear infinite;
}

@keyframes rain-fall {
  from { background-position: 0 0; }
  to { background-position: 0 40px; }
}

/* ---- dust-motes: particles drifting in light ------------------------ */
body[data-atmosphere="dust-motes"] .room {
  background: radial-gradient(ellipse 90% 70% at 50% 46%, #1a1610 0%, #0c0a06 55%, #060503 100%);
}

/* light beam from upper left */
body[data-atmosphere="dust-motes"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(155deg, rgba(255,220,160,0.06) 0%, transparent 35%),
    radial-gradient(ellipse 40% 60% at 15% 20%, rgba(200,180,140,0.04), transparent 60%);
}

/* ---- distant-city: tiny warm dots of light, high-rise at night ------ */
body[data-atmosphere="distant-city"] .room {
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, #0e1018 0%, #06080c 55%, #020304 100%);
}

body[data-atmosphere="distant-city"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    /* scattered warm dots simulating distant windows */
    radial-gradient(1px 1px at 15% 20%, rgba(255,200,100,0.6) 100%, transparent),
    radial-gradient(1px 1px at 18% 22%, rgba(255,180,80,0.5) 100%, transparent),
    radial-gradient(1px 1px at 22% 18%, rgba(255,200,100,0.4) 100%, transparent),
    radial-gradient(1px 1px at 25% 24%, rgba(255,180,80,0.6) 100%, transparent),
    radial-gradient(1px 1px at 30% 20%, rgba(255,160,60,0.4) 100%, transparent),
    radial-gradient(1px 1px at 35% 22%, rgba(255,180,80,0.5) 100%, transparent),
    radial-gradient(1px 1px at 40% 18%, rgba(255,200,100,0.3) 100%, transparent),
    radial-gradient(1px 1px at 45% 24%, rgba(255,180,80,0.5) 100%, transparent),
    radial-gradient(1px 1px at 55% 20%, rgba(255,160,60,0.4) 100%, transparent),
    radial-gradient(1px 1px at 60% 22%, rgba(255,200,100,0.5) 100%, transparent),
    radial-gradient(1px 1px at 65% 18%, rgba(255,180,80,0.3) 100%, transparent),
    radial-gradient(1px 1px at 70% 24%, rgba(255,200,100,0.6) 100%, transparent),
    radial-gradient(1px 1px at 75% 20%, rgba(255,180,80,0.4) 100%, transparent),
    radial-gradient(1px 1px at 80% 22%, rgba(255,160,60,0.5) 100%, transparent),
    radial-gradient(1px 1px at 85% 18%, rgba(255,200,100,0.3) 100%, transparent),
    /* a few brighter windows */
    radial-gradient(1.5px 1.5px at 20% 21%, rgba(255,220,140,0.8) 100%, transparent),
    radial-gradient(1.5px 1.5px at 50% 20%, rgba(255,220,140,0.7) 100%, transparent),
    radial-gradient(1.5px 1.5px at 72% 22%, rgba(255,220,140,0.8) 100%, transparent);
}

/* ---- wallpaper: faint repeating pattern, someone's living room ------ */
body[data-atmosphere="wallpaper"] .room {
  background:
    repeating-linear-gradient(
      0deg,
      rgba(80,60,40,0.04) 0px,
      rgba(80,60,40,0.04) 1px,
      transparent 1px,
      transparent 20px
    ),
    repeating-linear-gradient(
      90deg,
      rgba(80,60,40,0.04) 0px,
      rgba(80,60,40,0.04) 1px,
      transparent 1px,
      transparent 20px
    ),
    radial-gradient(ellipse 90% 70% at 50% 46%, #1a1410 0%, #0e0a06 55%, #070503 100%);
}

/* subtle damask-like center motif */
body[data-atmosphere="wallpaper"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.15;
  background:
    radial-gradient(ellipse 30% 40% at 50% 40%, rgba(120,90,60,0.3), transparent 70%);
}

/* ---- bookshelf: dark shapes, shelves, spines ------------------------ */
body[data-atmosphere="bookshelf"] .room {
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, #100e0c 0%, #080604 55%, #040302 100%);
}

body[data-atmosphere="bookshelf"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.4;
  background:
    /* horizontal shelf lines */
    repeating-linear-gradient(0deg, transparent 0px, transparent 48px, rgba(80,50,30,0.3) 48px, rgba(80,50,30,0.3) 50px),
    /* vertical book spines */
    linear-gradient(90deg,
      transparent 18%, rgba(60,30,20,0.3) 18%, rgba(60,30,20,0.3) 19%, transparent 19%,
      transparent 28%, rgba(40,20,40,0.3) 28%, rgba(40,20,40,0.3) 29%, transparent 29%,
      transparent 42%, rgba(30,40,30,0.3) 42%, rgba(30,40,30,0.3) 43%, transparent 43%,
      transparent 55%, rgba(50,20,20,0.3) 55%, rgba(50,20,20,0.3) 56%, transparent 56%,
      transparent 68%, rgba(20,30,50,0.3) 68%, rgba(20,30,50,0.3) 69%, transparent 69%,
      transparent 80%, rgba(40,20,30,0.3) 80%, rgba(40,20,30,0.3) 81%, transparent 81%
    );
}

/* ---- concrete: industrial, exposed concrete texture ----------------- */
body[data-atmosphere="concrete"] .room {
  background:
    radial-gradient(ellipse 90% 70% at 50% 46%, #141414 0%, #0a0a0a 55%, #050505 100%);
}

body[data-atmosphere="concrete"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.25;
  background-image:
    radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.08) 100%, transparent),
    radial-gradient(1px 1px at 30% 25%, rgba(255,255,255,0.06) 100%, transparent),
    radial-gradient(1px 1px at 50% 35%, rgba(255,255,255,0.07) 100%, transparent),
    radial-gradient(1px 1px at 70% 20%, rgba(255,255,255,0.05) 100%, transparent),
    radial-gradient(1px 1px at 85% 40%, rgba(255,255,255,0.08) 100%, transparent),
    radial-gradient(1px 1px at 20% 50%, rgba(255,255,255,0.06) 100%, transparent),
    radial-gradient(1px 1px at 45% 55%, rgba(255,255,255,0.07) 100%, transparent),
    radial-gradient(1px 1px at 65% 45%, rgba(255,255,255,0.05) 100%, transparent),
    radial-gradient(1px 1px at 80% 60%, rgba(255,255,255,0.06) 100%, transparent),
    radial-gradient(1px 1px at 15% 65%, rgba(255,255,255,0.07) 100%, transparent),
    radial-gradient(1px 1px at 35% 70%, rgba(255,255,255,0.05) 100%, transparent),
    radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.08) 100%, transparent);
}

/* ---- torchlight: warm flickering, stone chamber --------------------- */
body[data-atmosphere="torchlight"] .room {
  background: radial-gradient(ellipse 90% 70% at 50% 46%, #0e0c08 0%, #080604 55%, #040302 100%);
}

body[data-atmosphere="torchlight"] .room::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    /* warm torch glow from upper left */
    radial-gradient(ellipse 50% 60% at 10% 25%, rgba(255,150,40,0.06) 0%, transparent 60%),
    /* cooler torch from upper right */
    radial-gradient(ellipse 40% 50% at 85% 20%, rgba(255,180,60,0.04) 0%, transparent 55%);
  animation: torch-flicker 4s ease-in-out infinite alternate;
}

@keyframes torch-flicker {
  0%   { opacity: 0.7; }
  25%  { opacity: 1.0; }
  50%  { opacity: 0.8; }
  75%  { opacity: 0.9; }
  100% { opacity: 0.75; }
}