/* === TERRAFORMING PROGRESSION SYSTEM — RAIZES DE MARTE ===
   Visual stages driven by plant count. Shifts sky, ground, fog,
   mountains, clouds, and overlays from dead Mars (stage 0) to
   Earth-like Eden (stage 5). All transitions are SLOW for a
   cinematic terraforming feel. */

/* ============================================================
   STAGE-DRIVEN CSS VARIABLES
   ============================================================ */

/* Stage 0 — Marte Desolado (default, matches existing visual) */
body[data-terra-stage="0"] {
  --sky-top: #1a0a0c;
  --sky-upper: #2d1215;
  --sky-mid-upper: #4a1f1e;
  --sky-mid: #6b3328;
  --sky-mid-lower: #7a3d30;
  --sky-lower: #5c2a22;
  --sky-low: #2a1210;
  --sky-bottom: #120808;
  --ground-color: #0a0505;
  --fog-tint: rgba(180,90,60,0.08);
  --mountain-hue: 0deg;
  --mountain-saturate: 1;
  --terra-green-opacity: 0;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 1;
}

/* Stage 1 — Primeiros Brotos (10 plantas) */
body[data-terra-stage="1"] {
  --sky-top: #1d0c0e;
  --sky-upper: #30141a;
  --sky-mid-upper: #4e2220;
  --sky-mid: #703628;
  --sky-mid-lower: #7e4030;
  --sky-lower: #5e2c22;
  --sky-low: #2c1412;
  --sky-bottom: #140a08;
  --ground-color: #0c0706;
  --fog-tint: rgba(170,110,70,0.09);
  --mountain-hue: -2deg;
  --mountain-saturate: 0.97;
  --terra-green-opacity: 0.18;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 0.95;
}

/* Stage 2 — Oasis Distantes (50 plantas) */
body[data-terra-stage="2"] {
  --sky-top: #221015;
  --sky-upper: #35161c;
  --sky-mid-upper: #562522;
  --sky-mid: #7a3d30;
  --sky-mid-lower: #8a4838;
  --sky-lower: #6a3226;
  --sky-low: #301814;
  --sky-bottom: #160c0a;
  --ground-color: #0d0807;
  --fog-tint: rgba(160,130,80,0.1);
  --mountain-hue: -5deg;
  --mountain-saturate: 0.9;
  --terra-green-opacity: 0.35;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 0.85;
}

/* Stage 3 — Atmosfera Emergente (200 plantas) */
body[data-terra-stage="3"] {
  --sky-top: #2a1525;
  --sky-upper: #3a1a2a;
  --sky-mid-upper: #5a2830;
  --sky-mid: #7a4038;
  --sky-mid-lower: #85493e;
  --sky-lower: #663230;
  --sky-low: #2e1820;
  --sky-bottom: #140a12;
  --ground-color: #0e0a08;
  --fog-tint: rgba(140,130,160,0.11);
  --mountain-hue: -15deg;
  --mountain-saturate: 0.82;
  --terra-green-opacity: 0.55;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 0.7;
}

/* Stage 4 — Mundo Renascendo (500 plantas) */
body[data-terra-stage="4"] {
  --sky-top: #241838;
  --sky-upper: #2e1d3e;
  --sky-mid-upper: #4a2a48;
  --sky-mid: #6e4050;
  --sky-mid-lower: #7a4a5a;
  --sky-lower: #563045;
  --sky-low: #281830;
  --sky-bottom: #140c1a;
  --ground-color: #0e0c0a;
  --fog-tint: rgba(130,150,190,0.12);
  --mountain-hue: -30deg;
  --mountain-saturate: 0.75;
  --terra-green-opacity: 0.75;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 0.45;
}

/* Stage 5 — Novo Eden (1000 plantas) */
body[data-terra-stage="5"] {
  --sky-top: #1a3a6a;
  --sky-upper: #2e5486;
  --sky-mid-upper: #4672a2;
  --sky-mid: #5a88bb;
  --sky-mid-lower: #78a0cc;
  --sky-lower: #a8c4de;
  --sky-low: #c8d8e4;
  --sky-bottom: #d8e0e0;
  --ground-color: #0c1a0c;
  --fog-tint: rgba(220,235,255,0.12);
  --mountain-hue: -45deg;
  --mountain-saturate: 0.7;
  --terra-green-opacity: 1;
  --terra-cloud-opacity: 1;
  --terra-star-opacity: 0;
}

/* ============================================================
   SMOOTH TRANSITIONS
   ============================================================ */
body {
  transition: background 3s ease;
}

/* Make stars fade out as atmosphere thickens */
.stars, .star {
  opacity: var(--terra-star-opacity, 1);
  transition: opacity 4s ease;
}

/* Fog tint shifts across stages */
.fog-layer.fog1 {
  background: radial-gradient(ellipse 80% 30% at 50% 65%, var(--fog-tint, rgba(180,90,60,0.08)) 0%, transparent 70%);
  transition: background 3s ease;
}
.fog-layer.fog2 {
  background: radial-gradient(ellipse 60% 20% at 30% 60%, var(--fog-tint, rgba(200,120,80,0.06)) 0%, transparent 60%);
  transition: background 3s ease;
}
.fog-layer.fog3 {
  background: radial-gradient(ellipse 70% 25% at 70% 55%, var(--fog-tint, rgba(160,80,50,0.07)) 0%, transparent 65%);
  transition: background 3s ease;
}

/* ============================================================
   TERRA GROUND GREEN OVERLAY
   Scattered green patches painted over the ground, opacity
   driven by stage variable.
   ============================================================ */
.terra-ground-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 28vh;
  pointer-events: none;
  z-index: 11;
  opacity: var(--terra-green-opacity, 0);
  transition: opacity 4s ease;
  background-image:
    radial-gradient(ellipse 40px 10px at 8% 92%, rgba(80,140,60,0.55), transparent 70%),
    radial-gradient(ellipse 60px 12px at 17% 96%, rgba(70,130,50,0.45), transparent 70%),
    radial-gradient(ellipse 30px 8px at 25% 90%, rgba(90,150,70,0.6), transparent 70%),
    radial-gradient(ellipse 80px 14px at 34% 95%, rgba(60,120,40,0.5), transparent 70%),
    radial-gradient(ellipse 50px 11px at 43% 93%, rgba(85,145,65,0.55), transparent 70%),
    radial-gradient(ellipse 70px 12px at 55% 97%, rgba(70,130,50,0.5), transparent 70%),
    radial-gradient(ellipse 40px 9px at 63% 91%, rgba(95,155,75,0.6), transparent 70%),
    radial-gradient(ellipse 90px 15px at 73% 95%, rgba(65,125,45,0.5), transparent 70%),
    radial-gradient(ellipse 50px 10px at 82% 93%, rgba(80,140,60,0.55), transparent 70%),
    radial-gradient(ellipse 60px 12px at 92% 96%, rgba(75,135,55,0.5), transparent 70%);
  background-repeat: no-repeat;
  mix-blend-mode: screen;
}

/* Full-coverage grass layer that emerges at higher stages */
.terra-grass-layer {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 22vh;
  pointer-events: none;
  z-index: 10;
  opacity: calc(var(--terra-green-opacity, 0) * 0.85);
  transition: opacity 4s ease;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(60,110,40,0.25) 40%,
    rgba(50,100,30,0.55) 80%,
    rgba(40,85,25,0.7) 100%
  );
  mix-blend-mode: multiply;
}

/* ============================================================
   TERRA CLOUDS — Earth-like white clouds fade in at higher stages
   ============================================================ */
.terra-clouds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: calc(var(--terra-green-opacity, 0));
  transition: opacity 5s ease;
}
.terra-cloud {
  position: absolute;
  background: radial-gradient(ellipse at center,
    rgba(255,255,255,0.85) 0%,
    rgba(255,255,255,0.5) 45%,
    rgba(255,255,255,0) 75%);
  border-radius: 50%;
  filter: blur(1.5px);
}
@keyframes terraCloudDriftA {
  0%   { transform: translateX(-10%); }
  100% { transform: translateX(110vw); }
}
@keyframes terraCloudDriftB {
  0%   { transform: translateX(-20%); }
  100% { transform: translateX(110vw); }
}
.terra-cloud.a { animation: terraCloudDriftA 90s linear infinite; }
.terra-cloud.b { animation: terraCloudDriftB 120s linear infinite; }

/* ============================================================
   BIRDS — tiny silhouettes that appear in the Eden stage
   ============================================================ */
.terra-birds {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6;
  opacity: 0;
  transition: opacity 4s ease;
}
body[data-terra-stage="5"] .terra-birds {
  opacity: 0.75;
}
.terra-bird {
  position: absolute;
  width: 14px;
  height: 8px;
  opacity: 0;
}
.terra-bird::before,
.terra-bird::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 7px;
  height: 2px;
  background: rgba(20,30,40,0.85);
  border-radius: 50%;
  transform-origin: 100% 50%;
  animation: birdFlap 0.5s ease-in-out infinite;
}
.terra-bird::before { left: 0; transform: rotate(-20deg); }
.terra-bird::after  { right: 0; transform: rotate(20deg); transform-origin: 0% 50%; }
@keyframes birdFlap {
  0%, 100% { transform: rotate(-20deg) scaleY(1); }
  50%      { transform: rotate(-45deg) scaleY(0.6); }
}
@keyframes birdFly {
  0%   { transform: translate(-5vw, 0); opacity: 0; }
  10%  { opacity: 0.8; }
  90%  { opacity: 0.8; }
  100% { transform: translate(110vw, -30px); opacity: 0; }
}
.terra-bird.flying {
  animation: birdFly 28s linear infinite;
}

/* ============================================================
   TERRA STAGE BADGE (top-right HUD)
   ============================================================ */
.terra-stage-badge {
  position: fixed;
  top: 16px;
  right: 16px;
  width: 240px;
  background: rgba(10, 6, 4, 0.78);
  border: 1px solid rgba(255, 180, 100, 0.2);
  border-radius: 10px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  padding: 10px 14px;
  font-family: 'Courier New', monospace;
  color: #e8b878;
  z-index: 23;
  pointer-events: none;
  box-shadow: 0 4px 22px rgba(0, 0, 0, 0.45), inset 0 0 0 1px rgba(255, 200, 140, 0.04);
}
.terra-badge-label {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.6;
}
.terra-badge-stage {
  font-size: 12px;
  margin-top: 4px;
  color: #ffcc88;
  letter-spacing: 0.5px;
}
.terra-badge-progress {
  margin-top: 6px;
  height: 4px;
  background: rgba(255,180,100,0.1);
  border-radius: 2px;
  overflow: hidden;
}
.terra-badge-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #8a4a1c, #ffcc88);
  transition: width 1s ease;
  box-shadow: 0 0 8px rgba(255, 180, 80, 0.35);
}
.terra-badge-count {
  font-size: 9px;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
  letter-spacing: 0.5px;
}

/* ============================================================
   STAGE TOAST — cinematic announcement on stage-up
   ============================================================ */
.terra-stage-toast {
  position: fixed;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  z-index: 40;
  padding: 24px 40px;
  background: rgba(10, 6, 4, 0.92);
  border: 2px solid rgba(255, 200, 100, 0.4);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 0 60px rgba(255, 180, 80, 0.4), 0 10px 40px rgba(0,0,0,0.55);
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease, transform 1s ease;
  pointer-events: none;
}
.terra-stage-toast.visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
.terra-toast-title {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255, 200, 130, 0.7);
}
.terra-toast-name {
  font-family: 'Courier New', monospace;
  font-size: 20px;
  font-weight: bold;
  color: #ffcc88;
  margin-top: 6px;
  text-shadow: 0 0 12px rgba(255, 180, 60, 0.6);
}