/* theme.css — the room takes the colour of the chosen deck.
   `body[data-theme="fiesta|familia|pareja"]` is set once in the lobby and rides
   the whole match (question, reveal, podium), so this lives above every screen.

   Direction: "the lit room". Two slow auras drift behind the stage light and a
   fine particulate tile floats through them. Three stacked layers cross-fade on
   opacity only — no gradient re-paints, no layout, nothing but transform and
   opacity on the compositor. Alphas are capped so the ink on top never drops
   below AA on any of the three moods. */

.theme-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

/* One layer per mood. Only the active one is visible, and only the active one
   animates: the other two are opacity 0 and cost nothing. */
.theme-bg__layer {
  position: absolute;
  inset: -12%;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.theme-bg__layer::before,
.theme-bg__layer::after {
  content: "";
  position: absolute;
  inset: 0;
}

/* ::before = the counter-drifting aura. ::after = the particulate tile. */
.theme-bg__layer::after {
  background-repeat: repeat;
  /* Two tile frequencies (260 and 130) so the particulate never reads as a grid;
     both divide the 260px loop, so the drift still repeats seamlessly. */
  background-size: 260px 260px;
  opacity: 0.42;
}

body[data-theme="fiesta"] .theme-bg__layer--fiesta,
body[data-theme="familia"] .theme-bg__layer--familia,
body[data-theme="pareja"] .theme-bg__layer--pareja {
  opacity: 1;
}

/* Readability floor: the top and bottom bands carry the rails, the metas and the
   seat names — the small ink. The scrim sits over the auras and keeps those two
   bands dark, so the colour lives in the middle of the frame where the display
   type is. Measured, not guessed: without it the metas drop to ~3.7:1. */
.theme-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(
    180deg,
    rgb(7 9 13 / 0.62) 0%,
    rgb(7 9 13 / 0.12) 24%,
    rgb(7 9 13 / 0.1) 54%,
    rgb(7 9 13 / 0.72) 100%
  );
  transition: opacity var(--dur-slow) var(--ease-out);
}

body[data-theme] .theme-bg::after {
  opacity: 1;
}

body[data-theme="fiesta"] .theme-bg__layer--fiesta,
body[data-theme="familia"] .theme-bg__layer--familia,
body[data-theme="pareja"] .theme-bg__layer--pareja {
  animation: th-drift-a 54s ease-in-out infinite;
}

body[data-theme="fiesta"] .theme-bg__layer--fiesta::before,
body[data-theme="familia"] .theme-bg__layer--familia::before,
body[data-theme="pareja"] .theme-bg__layer--pareja::before {
  animation: th-drift-b 41s ease-in-out infinite;
}

body[data-theme="fiesta"] .theme-bg__layer--fiesta::after {
  animation: th-motes-up 34s linear infinite;
}

body[data-theme="familia"] .theme-bg__layer--familia::after {
  animation: th-motes-down 52s linear infinite;
}

body[data-theme="pareja"] .theme-bg__layer--pareja::after {
  animation: th-motes-up 64s linear infinite;
}

/* ---------- fiesta: warm energy, amber into magenta, sparks rising ---------- */

.theme-bg__layer--fiesta {
  background-image:
    radial-gradient(40% 30% at 50% 16%, rgb(255 122 48 / 0.384) 0%, transparent 72%),
    radial-gradient(46% 42% at 24% 22%, rgb(255 138 43 / 0.44) 0%, transparent 68%),
    radial-gradient(52% 48% at 80% 84%, rgb(224 53 111 / 0.475) 0%, transparent 70%);
}

.theme-bg__layer--fiesta::before {
  background-image:
    radial-gradient(38% 34% at 68% 16%, rgb(217 201 74 / 0.6) 0%, transparent 70%),
    radial-gradient(60% 30% at 50% 104%, rgb(255 106 61 / 0.6) 0%, transparent 72%);
}

.theme-bg__layer--fiesta::after {
  background-image:
    radial-gradient(circle at 18% 12%, rgb(255 196 120 / 0.55) 0 2.2px, transparent 3px),
    radial-gradient(circle at 62% 38%, rgb(255 138 43 / 0.6) 0 1.6px, transparent 2.4px),
    radial-gradient(circle at 84% 70%, rgb(240 96 140 / 0.6) 0 2px, transparent 2.8px),
    radial-gradient(circle at 34% 82%, rgb(255 224 170 / 0.6) 0 1.4px, transparent 2.2px);
  background-size: 260px 260px, 130px 130px, 260px 260px, 130px 130px;
}

/* ---------- familia: golden hearth, warm gold into soft green ---------- */

.theme-bg__layer--familia {
  background-image:
    radial-gradient(40% 30% at 50% 16%, rgb(226 176 90 / 0.384) 0%, transparent 72%),
    radial-gradient(48% 44% at 22% 26%, rgb(230 178 78 / 0.387) 0%, transparent 68%),
    radial-gradient(54% 48% at 80% 82%, rgb(107 194 107 / 0.37) 0%, transparent 70%);
}

.theme-bg__layer--familia::before {
  background-image:
    radial-gradient(40% 34% at 62% 12%, rgb(255 214 140 / 0.6) 0%, transparent 70%),
    radial-gradient(64% 28% at 50% 102%, rgb(176 141 87 / 0.6) 0%, transparent 74%);
}

.theme-bg__layer--familia::after {
  background-image:
    radial-gradient(circle at 22% 20%, rgb(255 224 168 / 0.6) 0 2.6px, transparent 3.6px),
    radial-gradient(circle at 70% 52%, rgb(214 230 180 / 0.48) 0 2.2px, transparent 3.2px),
    radial-gradient(circle at 44% 86%, rgb(255 206 132 / 0.448) 0 1.8px, transparent 2.6px);
  background-size: 260px 260px, 130px 130px, 260px 260px;
}

/* ---------- pareja: intimate, deep rose into violet, slow glints ---------- */

.theme-bg__layer--pareja {
  background-image:
    radial-gradient(42% 32% at 50% 16%, rgb(150 88 220 / 0.493) 0%, transparent 72%),
    radial-gradient(46% 44% at 26% 24%, rgb(232 90 140 / 0.475) 0%, transparent 68%),
    radial-gradient(56% 50% at 78% 84%, rgb(138 92 216 / 0.528) 0%, transparent 72%);
}

.theme-bg__layer--pareja::before {
  background-image:
    radial-gradient(38% 32% at 70% 14%, rgb(196 120 220 / 0.6) 0%, transparent 70%),
    radial-gradient(66% 30% at 50% 104%, rgb(120 70 180 / 0.384) 0%, transparent 74%);
}

.theme-bg__layer--pareja::after {
  background-image:
    radial-gradient(circle at 26% 16%, rgb(255 176 208 / 0.6) 0 2px, transparent 2.8px),
    radial-gradient(circle at 74% 46%, rgb(196 150 255 / 0.576) 0 2.4px, transparent 3.2px),
    radial-gradient(circle at 48% 88%, rgb(255 200 226 / 0.48) 0 1.6px, transparent 2.4px);
  background-size: 260px 260px, 130px 130px, 260px 260px;
}

/* ---------- Ambient motion ---------- */

@keyframes th-drift-a {
  0%,
  100% {
    transform: translate3d(-1.6%, -1%, 0) scale(1.04);
  }
  50% {
    transform: translate3d(2%, 1.4%, 0) scale(1.12);
  }
}

@keyframes th-drift-b {
  0%,
  100% {
    transform: translate3d(2.2%, 1.2%, 0) scale(1.1);
  }
  50% {
    transform: translate3d(-2%, -1.6%, 0) scale(1.02);
  }
}

/* The tile is 260px, so a 260px shift loops seamlessly. */
@keyframes th-motes-up {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(0, -260px, 0);
  }
}

@keyframes th-motes-down {
  from {
    transform: translate3d(0, -260px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

/* ---------- Budget: 1 GB sticks drop the particulate and all drift ---------- */

:root[data-perf="lite"] .theme-bg__layer,
:root[data-perf="lite"] .theme-bg__layer::before {
  animation: none !important;
  transform: none !important;
}

:root[data-perf="lite"] .theme-bg__layer::after {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .theme-bg__layer,
  .theme-bg__layer::before,
  .theme-bg__layer::after {
    animation: none !important;
  }

  .theme-bg__layer::after {
    display: none;
  }
}

/* ---------- Motivos de sala flotando en el fondo ----------
   Cada sala se reconoce sin leer: chispas en fiesta, casas en familia,
   corazones en pareja. CSS puro (mask + gradientes), sin imagenes, y
   animados solo con transform para no costar frames en el stick. */

.theme-motifs {
  position: absolute;
  inset: -10%;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out);
  background-repeat: repeat;
  background-size: 26rem 26rem;
  animation: motif-drift 90s linear infinite;
}

body[data-theme='fiesta'] .theme-motifs--fiesta,
body[data-theme='familia'] .theme-motifs--familia,
body[data-theme='pareja'] .theme-motifs--pareja {
  opacity: 0.75;
}

/* fiesta: destellos de cuatro puntas */
.theme-motifs--fiesta {
  background-image:
    radial-gradient(circle at 20% 25%, rgb(255 138 43 / 0.5) 0 0.28rem, transparent 0.32rem),
    radial-gradient(ellipse 0.35rem 3.2rem at 62% 62%, rgb(255 170 90 / 0.512) 0%, transparent 70%),
    radial-gradient(ellipse 3.2rem 0.35rem at 62% 62%, rgb(255 170 90 / 0.512) 0%, transparent 70%),
    radial-gradient(ellipse 0.25rem 2rem at 85% 20%, rgb(224 53 111 / 0.48) 0%, transparent 70%),
    radial-gradient(ellipse 2rem 0.25rem at 85% 20%, rgb(224 53 111 / 0.48) 0%, transparent 70%);
}

/* familia: ventanas encendidas (hogar) */
.theme-motifs--familia {
  background-image:
    radial-gradient(ellipse 1.6rem 1.1rem at 24% 30%, rgb(226 176 90 / 0.544) 0%, transparent 72%),
    radial-gradient(ellipse 1.1rem 1.6rem at 68% 64%, rgb(107 194 107 / 0.448) 0%, transparent 72%),
    radial-gradient(circle at 86% 22%, rgb(255 214 140 / 0.48) 0 0.3rem, transparent 0.36rem);
}

/* pareja: corazones (dos lobulos) */
.theme-motifs--pareja {
  background-image:
    radial-gradient(circle at 30% 34%, rgb(232 90 140 / 0.544) 0 0.8rem, transparent 0.9rem),
    radial-gradient(circle at 38% 34%, rgb(232 90 140 / 0.544) 0 0.8rem, transparent 0.9rem),
    radial-gradient(circle at 74% 70%, rgb(138 92 216 / 0.48) 0 0.55rem, transparent 0.62rem),
    radial-gradient(circle at 80% 70%, rgb(138 92 216 / 0.48) 0 0.55rem, transparent 0.62rem);
}

@keyframes motif-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-26rem, -26rem, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .theme-motifs { animation: none; }
}

:root[data-perf='lite'] .theme-motifs { display: none; }


/* Fondo estatico en aparatos flojos: las auras a la deriva y las motas son
   repintados a pantalla completa, carisimos en un stick. El color del tema se
   mantiene (la sala se sigue reconociendo), pero sin movimiento. */
:root[data-perf="lite"] .theme-bg__layer,
:root[data-perf="lite"] .theme-bg__layer::before,
:root[data-perf="lite"] .theme-bg__layer::after,
:root[data-perf="lite"] .theme-motifs {
  animation: none !important;
  transition: none !important;
}

:root[data-perf="lite"] .theme-bg__layer::after {
  display: none;
}