/* ============================================================
   KROMA — escenas atmosféricas (placeholders provisionales)
   Construidas por capas en CSS. Pensadas para sustituirse
   por foto/vídeo real. Cada escena se tematiza con variables.
   ============================================================ */

.scene {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--sky-top), transparent 60%),
    linear-gradient(to bottom, var(--sky-mid) 0%, var(--sky-bot) 100%);
  isolation: isolate;
}

/* — Resplandor del escenario / horizonte — */
.scene__glow {
  position: absolute;
  left: 50%; bottom: -6%;
  width: 120%; height: 60%;
  translate: -50% 0;
  background: radial-gradient(60% 100% at 50% 100%, var(--glow) 0%, transparent 70%);
  filter: blur(8px);
  opacity: 0.9;
  z-index: 1;
}

/* — Haces de luz (focos) — color multicolor — */
.scene__beams { position: absolute; inset: 0; z-index: 2; mix-blend-mode: screen; }
.beam {
  position: absolute;
  bottom: 8%;
  left: var(--x, 50%);
  width: 40vmax;
  height: 95%;
  transform-origin: 50% 100%;
  background: linear-gradient(to top, var(--bc, #fff) 0%, transparent 72%);
  clip-path: polygon(46% 100%, 54% 100%, 100% 0, 0 0);
  filter: blur(6px);
  opacity: var(--bo, 0.4);
  rotate: var(--r, 0deg);
  animation: beamSway calc(9s / (0.4 + var(--motion))) ease-in-out infinite alternate;
  animation-delay: var(--bd, 0s);
}
@keyframes beamSway {
  from { rotate: calc(var(--r) - 7deg * var(--motion)); opacity: calc(var(--bo) * 0.6); }
  to   { rotate: calc(var(--r) + 7deg * var(--motion)); opacity: var(--bo); }
}

/* — Niebla / humo — */
.scene__haze {
  position: absolute;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(60% 40% at 30% 80%, rgba(255,255,255,0.08), transparent 70%),
    radial-gradient(50% 35% at 75% 85%, rgba(255,255,255,0.06), transparent 70%);
  filter: blur(2px);
}

/* — Mar de luces del público (móviles) — */
.scene__sparks {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 42%;
  z-index: 4;
  background:
    radial-gradient(circle at 50% 50%, var(--spark, #ffd9a0) 0.8px, transparent 1.6px) 0 0 / 26px 30px,
    radial-gradient(circle at 50% 50%, var(--spark, #ffd9a0) 0.7px, transparent 1.6px) 13px 15px / 34px 38px;
  -webkit-mask: linear-gradient(to top, #000 5%, rgba(0,0,0,0.5) 45%, transparent 85%);
          mask: linear-gradient(to top, #000 5%, rgba(0,0,0,0.5) 45%, transparent 85%);
  opacity: 0.85;
  animation: sparkTwinkle calc(4s / (0.4 + var(--motion))) steps(2, end) infinite;
}
@keyframes sparkTwinkle { 50% { opacity: 0.55; } }

/* — Silueta del público (cabezas) — */
.scene__crowd { position: absolute; left: 0; right: 0; bottom: 0; height: 34%; z-index: 6; }
.scene__crowd::before,
.scene__crowd::after {
  content: "";
  position: absolute;
  left: -5%; right: -5%;
  background-repeat: repeat-x;
}
/* fila lejana */
.scene__crowd::before {
  bottom: 0; height: 60%;
  background:
    linear-gradient(to top, var(--crowd) 55%, transparent),
    radial-gradient(circle at 9px 100%, var(--crowd) 8px, transparent 9px) 0 0 / 22px 26px;
  opacity: 0.7;
  filter: blur(0.4px);
}
/* fila cercana */
.scene__crowd::after {
  bottom: 0; height: 78%;
  background:
    linear-gradient(to top, #000 60%, transparent),
    radial-gradient(circle at 15px 100%, #000 12px, transparent 13px) 0 0 / 34px 40px;
}

/* — Viñeta para legibilidad del texto — */
.scene__veil {
  position: absolute;
  inset: 0;
  z-index: 7;
  background:
    linear-gradient(to bottom, rgba(8,7,9,0.55) 0%, transparent 22%, transparent 55%, rgba(8,7,9,0.72) 100%),
    radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(8,7,9,0.55) 100%);
}

/* Grano sutil */
.scene__grain {
  position: absolute; inset: 0; z-index: 8; pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   TEMAS
   ============================================================ */

/* HERO — plaza de toros / festival de noche (croma verde) */
.scene--hero {
  --sky-top: #07210f;
  --sky-mid: #0a160e;
  --sky-bot: #070b08;
  --glow: rgba(46, 204, 64, 0.42);
  --spark: #b8ffc4;
  --crowd: #08120a;
}

/* CASO — gastronómico (cheesecake) — verde de feria */
.scene--food {
  --sky-top: #0a2414;
  --sky-mid: #0c1810;
  --sky-bot: #080d09;
  --glow: rgba(92, 255, 114, 0.4);
  --spark: #d6ffdd;
  --crowd: #0a120c;
}

/* CASO — motor (meet & cars) — asfalto, faros verdes */
.scene--motor {
  --sky-top: #06231a;
  --sky-mid: #08160f;
  --sky-bot: #070b09;
  --glow: rgba(46, 204, 110, 0.4);
  --spark: #cfffe6;
  --crowd: #07110c;
}
/* estela de faros para motor */
.scene--motor .scene__glow {
  background:
    radial-gradient(50% 70% at 50% 100%, rgba(255,255,255,0.5), transparent 60%),
    radial-gradient(70% 100% at 50% 100%, var(--glow), transparent 70%);
}

/* CASO — feria (Mallorca, Parc de la Mar) — mercado nocturno, branding verde */
.scene--fair {
  --sky-top: #0a2414;
  --sky-mid: #0c1810;
  --sky-bot: #080d09;
  --glow: rgba(46, 204, 64, 0.4);
  --spark: #d6ffdd;
  --crowd: #0a120c;
}
.scene--fair .scene__beams { display: none; }
.scene--fair .scene__veil {
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, transparent 30%, transparent 52%, rgba(0,0,0,0.74) 100%);
}
/* resplandor verde de fondo */
.scene--fair .scene__glow {
  left: 50%; bottom: -6%; width: 120%; height: 52%; translate: -50% 0;
  background: radial-gradient(60% 100% at 50% 100%, var(--glow) 0%, transparent 70%);
  filter: blur(8px); border-radius: 0;
}
/* carpas (triángulos) del mercado, en verde oscuro */
.scene--fair .scene__crowd { height: 42%; }
.scene--fair .scene__crowd::after {
  height: 60%;
  background:
    linear-gradient(to top, #14241a 45%, transparent),
    repeating-linear-gradient(90deg, #1b3325 0 28px, #112318 28px 56px);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 8px, transparent 8px 14px),
          linear-gradient(to top, #000 30%, transparent);
}
.scene--fair .scene__crowd::before {
  height: 46%; opacity: 1;
  background:
    radial-gradient(20px 26px at 30px 100%, #1d3526 0 19px, transparent 20px) 0 0 / 70px 30px repeat-x;
}

/* ============================================================
   Variante en card — escala las capas
   ============================================================ */
.scene--card .beam { width: 70vmax; filter: blur(10px); }
.scene--card .scene__crowd { height: 30%; }