/* NUBE — fondo inmersivo + temas (data-theme en html) */

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

.atmosphere__base,
.atmosphere__glow,
.atmosphere__horizon,
.atmosphere__stars,
.atmosphere__grain {
  position: absolute;
  inset: 0;
  transition: opacity var(--transition-theme), background var(--transition-theme);
}

.atmosphere__base {
  background: linear-gradient(
    165deg,
    var(--bg-base-1) 0%,
    var(--bg-base-2) 42%,
    var(--bg-base-3) 100%
  );
}

.atmosphere__glow {
  opacity: 0.9;
  background:
    radial-gradient(42vw 36vh at 18% 22%, var(--bg-glow-1), transparent 72%),
    radial-gradient(38vw 32vh at 82% 18%, var(--bg-glow-2), transparent 74%),
    radial-gradient(50vw 40vh at 50% 88%, var(--bg-glow-3), transparent 78%);
}

.atmosphere__horizon {
  opacity: 0.55;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 42%
  );
}

.atmosphere__stars {
  opacity: 0;
  background-image:
    radial-gradient(circle at 8% 12%, rgba(255, 255, 255, 0.9) 0 1px, transparent 2px),
    radial-gradient(circle at 22% 8%, rgba(255, 255, 255, 0.55) 0 1px, transparent 2px),
    radial-gradient(circle at 38% 16%, rgba(255, 255, 255, 0.75) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 10%, rgba(255, 255, 255, 0.5) 0 1px, transparent 2px),
    radial-gradient(circle at 74% 14%, rgba(255, 255, 255, 0.8) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 20%, rgba(255, 255, 255, 0.45) 0 1px, transparent 2px),
    radial-gradient(circle at 16% 28%, rgba(255, 255, 255, 0.4) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 32%, rgba(255, 255, 255, 0.6) 0 1px, transparent 2px);
}

html[data-theme="deep-blue"] .atmosphere__stars,
html[data-theme="electric-calm"] .atmosphere__stars {
  opacity: 0.55;
}

.atmosphere__grain {
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* —— Golden Horizon —— */
html[data-theme="golden-horizon"] {
  --accent: #e8c88a;
  --accent-soft: rgba(232, 200, 138, 0.16);
  --accent-hover: #f2d9a8;
  --bg-base-1: #1a1528;
  --bg-base-2: #3d2848;
  --bg-base-3: #6b4538;
  --bg-glow-1: rgba(232, 190, 120, 0.32);
  --bg-glow-2: rgba(180, 120, 160, 0.2);
  --bg-glow-3: rgba(100, 140, 200, 0.14);
  --glow: rgba(232, 200, 138, 0.4);
  --panel-border: rgba(232, 200, 138, 0.28);
}

/* —— Deep Blue —— */
html[data-theme="deep-blue"] {
  --accent: #9ec4e8;
  --accent-soft: rgba(158, 196, 232, 0.14);
  --accent-hover: #b8d4f0;
  --bg-base-1: #060d1a;
  --bg-base-2: #0c1e38;
  --bg-base-3: #122848;
  --bg-glow-1: rgba(140, 190, 240, 0.2);
  --bg-glow-2: rgba(80, 120, 200, 0.16);
  --bg-glow-3: rgba(40, 70, 120, 0.22);
  --glow: rgba(158, 196, 232, 0.35);
  --panel-border: rgba(158, 196, 232, 0.22);
}

/* —— Dream Mist —— */
html[data-theme="dream-mist"] {
  --accent: #c8d4e4;
  --accent-soft: rgba(200, 212, 228, 0.14);
  --accent-hover: #dce6f2;
  --bg-base-1: #1a2230;
  --bg-base-2: #2a3548;
  --bg-base-3: #3a4558;
  --bg-glow-1: rgba(220, 228, 240, 0.18);
  --bg-glow-2: rgba(180, 195, 215, 0.14);
  --bg-glow-3: rgba(150, 170, 195, 0.1);
  --glow: rgba(200, 212, 228, 0.3);
  --panel-border: rgba(200, 212, 228, 0.2);
  --text-main: #f2f4f8;
  --text-muted: rgba(242, 244, 248, 0.7);
}

/* —— Sunrise Air —— */
html[data-theme="sunrise-air"] {
  --accent: #e8c4a0;
  --accent-soft: rgba(232, 196, 160, 0.16);
  --accent-hover: #f0d4b8;
  --bg-base-1: #2a3048;
  --bg-base-2: #4a5880;
  --bg-base-3: #6a7898;
  --bg-glow-1: rgba(255, 220, 180, 0.22);
  --bg-glow-2: rgba(180, 210, 240, 0.2);
  --bg-glow-3: rgba(140, 170, 210, 0.14);
  --glow: rgba(232, 196, 160, 0.32);
  --panel-border: rgba(232, 196, 160, 0.24);
}

/* —— Electric Calm —— */
html[data-theme="electric-calm"] {
  --accent: #7ee0d8;
  --accent-soft: rgba(126, 224, 216, 0.14);
  --accent-hover: #9ef0e8;
  --bg-base-1: #0e1028;
  --bg-base-2: #1a1848;
  --bg-base-3: #281858;
  --bg-glow-1: rgba(126, 224, 216, 0.2);
  --bg-glow-2: rgba(160, 120, 240, 0.22);
  --bg-glow-3: rgba(80, 60, 180, 0.18);
  --glow: rgba(126, 224, 216, 0.38);
  --panel-border: rgba(126, 224, 216, 0.22);
}

/* Selector de atmósfera */
.atmosphere-picker {
  padding-top: 8px;
}

.atmosphere-picker__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.atmosphere-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: var(--text-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}

.atmosphere-chip:hover {
  border-color: var(--accent);
  color: var(--text-main);
}

.atmosphere-chip[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--text-main);
  box-shadow: 0 0 0 1px var(--accent-soft), 0 0 24px var(--glow);
}

.atmosphere-chip__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.atmosphere-chip[data-atmosphere="auto"] .atmosphere-chip__dot {
  background: conic-gradient(#e8c88a, #9ec4e8, #7ee0d8, #c8d4e4, #e8c88a);
}

.atmosphere-chip[data-atmosphere="golden-horizon"] .atmosphere-chip__dot {
  background: linear-gradient(135deg, #e8c88a, #6b4538);
}

.atmosphere-chip[data-atmosphere="deep-blue"] .atmosphere-chip__dot {
  background: linear-gradient(135deg, #0c1e38, #9ec4e8);
}

.atmosphere-chip[data-atmosphere="dream-mist"] .atmosphere-chip__dot {
  background: linear-gradient(135deg, #c8d4e4, #3a4558);
}

.atmosphere-chip[data-atmosphere="sunrise-air"] .atmosphere-chip__dot {
  background: linear-gradient(135deg, #e8c4a0, #6a7898);
}

.atmosphere-chip[data-atmosphere="electric-calm"] .atmosphere-chip__dot {
  background: linear-gradient(135deg, #7ee0d8, #281858);
}


/* Etapa 1 — escena NUBE más inmersiva: nube, horizonte y reflejo */
.atmosphere::before,
.atmosphere::after {
  content: "";
  position: absolute;
  pointer-events: none;
  transition: opacity var(--transition-theme), transform var(--transition-theme), filter var(--transition-theme);
}

.atmosphere::before {
  left: 50%;
  top: clamp(110px, 18vh, 220px);
  width: min(980px, 92vw);
  height: min(460px, 46vh);
  transform: translateX(-50%) translateY(var(--cloud-y, 0));
  background: url('/assets/img/back_cloud_transp.webp') center / contain no-repeat;
  opacity: var(--cloud-opacity, .72);
  filter: drop-shadow(0 0 46px var(--glow));
  z-index: 1;
}

.atmosphere::after {
  left: 50%;
  right: auto;
  bottom: -12vh;
  width: min(1150px, 108vw);
  height: 42vh;
  transform: translateX(-50%);
  opacity: var(--sea-opacity, .58);
  background:
    radial-gradient(ellipse at 50% 0%, var(--reflection-strong, rgba(255,255,255,.18)), transparent 58%),
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.055) 0px,
      rgba(255,255,255,.055) 1px,
      transparent 8px,
      transparent 17px
    ),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.34) 62%, rgba(0,0,0,.62) 100%);
  filter: blur(.25px);
  z-index: 2;
}

.atmosphere__base { z-index: 0; }
.atmosphere__glow { z-index: 3; mix-blend-mode: screen; }
.atmosphere__horizon {
  z-index: 4;
  background:
    linear-gradient(to top, rgba(0, 0, 0, 0.48) 0%, transparent 45%),
    radial-gradient(ellipse at 50% 72%, var(--horizon-glow, rgba(255,255,255,.09)), transparent 50%);
}
.atmosphere__stars { z-index: 5; }
.atmosphere__grain { z-index: 6; }

html[data-theme="golden-horizon"] {
  --cloud-opacity: .78;
  --sea-opacity: .70;
  --cloud-y: 1vh;
  --reflection-strong: rgba(232, 200, 138, .34);
  --horizon-glow: rgba(232, 200, 138, .24);
}
html[data-theme="deep-blue"] {
  --cloud-opacity: .82;
  --sea-opacity: .58;
  --cloud-y: 0;
  --reflection-strong: rgba(158, 196, 232, .22);
  --horizon-glow: rgba(158, 196, 232, .14);
}
html[data-theme="dream-mist"] {
  --cloud-opacity: .62;
  --sea-opacity: .42;
  --cloud-y: -1vh;
  --reflection-strong: rgba(220, 228, 240, .18);
  --horizon-glow: rgba(220, 228, 240, .12);
}
html[data-theme="sunrise-air"] {
  --cloud-opacity: .66;
  --sea-opacity: .50;
  --cloud-y: -2vh;
  --reflection-strong: rgba(255, 220, 180, .23);
  --horizon-glow: rgba(255, 220, 180, .17);
}
html[data-theme="electric-calm"] {
  --cloud-opacity: .76;
  --sea-opacity: .64;
  --cloud-y: 0;
  --reflection-strong: rgba(126, 224, 216, .26);
  --horizon-glow: rgba(160, 120, 240, .18);
}

.atmosphere-chip {
  position: relative;
  overflow: hidden;
}