/* ============================================
   DELETE THINGS FROM EARTH — Cinematic Intro
   ============================================ */

#cinematic-overlay{
  position:fixed;inset:0;z-index:9999;background:#000;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#cinematic-overlay.fade-out{
  transition:opacity 0.6s ease;opacity:0;pointer-events:none;
}

/* Skip button */
.cin-skip{
  position:fixed;bottom:20px;right:20px;z-index:10000;
  background:none;border:1px solid rgba(255,255,255,0.15);
  color:rgba(255,255,255,0.3);font-size:12px;font-family:var(--font-mono);
  padding:6px 14px;border-radius:4px;cursor:pointer;
  transition:all 0.3s ease;letter-spacing:0.1em;
}
.cin-skip:hover{color:rgba(255,255,255,0.8);border-color:rgba(255,255,255,0.4)}

/* Transmission text */
.cin-transmission{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,0.25);
  letter-spacing:0.15em;opacity:0;
}
.cin-transmission.visible{opacity:1;transition:opacity 0.4s ease}
.cin-transmission.blink{animation:cinBlink 0.3s steps(1) 2}
@keyframes cinBlink{0%,100%{opacity:1}50%{opacity:0}}

/* Title screen glitch text */
@keyframes cinGlitchText{
  0%,92%,100%{text-shadow:none}
  93%{text-shadow:-2px 0 #ff3366,2px 0 #00ff88}
  95%{text-shadow:2px 0 #ff3366,-2px 0 #00ff88;transform:translateX(2px)}
  97%{text-shadow:-1px 0 #ff3366,1px 0 #00ff88;transform:translateX(-1px)}
  99%{text-shadow:none;transform:none}
}

/* Glitch overlay */
.cin-glitch{
  position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
}
.cin-glitch.active{opacity:1;animation:cinGlitchAnim 0.5s steps(3)}
@keyframes cinGlitchAnim{
  0%{background:transparent;clip-path:none}
  10%{background:rgba(255,0,0,0.05);clip-path:inset(20% 0 60% 0)}
  20%{background:rgba(0,255,255,0.05);clip-path:inset(50% 0 10% 0)}
  30%{background:transparent;clip-path:inset(10% 0 80% 0)}
  40%{background:rgba(255,0,0,0.08);clip-path:inset(70% 0 5% 0)}
  50%{clip-path:none;background:rgba(255,255,255,0.6)}
  55%{background:transparent}
  100%{opacity:0}
}

/* Scanlines during glitch */
.cin-scanlines{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.15) 2px,rgba(0,0,0,0.15) 4px);
}
.cin-scanlines.active{opacity:1;animation:cinScanFade 0.8s ease forwards}
@keyframes cinScanFade{0%{opacity:1}100%{opacity:0}}

/* Earth in cinematic (simplified SVG) */
.cin-earth-wrap{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.01);
  opacity:0;transition:none;
}
.cin-earth-wrap.growing{
  opacity:1;
  transition:transform 6s cubic-bezier(0.16,1,0.3,1),opacity 1s ease;
}
.cin-earth-svg{
  width:500px;height:500px;
  filter:drop-shadow(0 0 40px rgba(60,140,255,0.15));
}

/* Starfield */
.cin-stars{
  position:absolute;inset:0;opacity:0;
  transition:opacity 2s ease;
}
.cin-stars.visible{opacity:1}
.cin-star{
  position:absolute;width:1px;height:1px;background:#fff;border-radius:50%;
}
.cin-star.bright{width:2px;height:2px;box-shadow:0 0 3px rgba(255,255,255,0.5)}

/* City lights on earth */
.cin-city{
  position:absolute;width:2px;height:2px;background:#ffcc00;border-radius:50%;
  box-shadow:0 0 4px rgba(255,200,0,0.5);
  animation:cinCityPulse 2s ease infinite;
}
.cin-city.alert{background:#ff3333;box-shadow:0 0 6px rgba(255,0,0,0.6);animation:cinCityAlert 0.5s ease infinite}
@keyframes cinCityPulse{0%,100%{opacity:0.6}50%{opacity:1}}
@keyframes cinCityAlert{0%,100%{opacity:1}50%{opacity:0.3}}

/* Crisis lines */
.cin-crisis-line{
  stroke:rgba(255,50,50,0.2);stroke-width:0.5;
  animation:cinLineFade 2s ease forwards;
}
@keyframes cinLineFade{0%{opacity:0;stroke-dashoffset:100}100%{opacity:1;stroke-dashoffset:0}}

/* Holographic data readouts */
.cin-data{
  position:absolute;font-family:var(--font-mono);font-size:11px;
  color:rgba(0,255,136,0.7);letter-spacing:0.08em;
  text-shadow:0 0 8px rgba(0,255,136,0.3),0 0 20px rgba(0,255,136,0.1);
  opacity:0;transform:translateY(5px);
  transition:opacity 0.6s ease,transform 0.6s ease;
}
.cin-data.visible{opacity:1;transform:translateY(0)}
.cin-data.flicker{animation:cinDataFlicker 3s ease infinite}
@keyframes cinDataFlicker{0%,97%,100%{opacity:1}98%{opacity:0.5}99%{opacity:0.8}}

/* Cockpit frame reveal */
.cin-frame-top,.cin-frame-bottom,.cin-frame-left,.cin-frame-right{
  position:absolute;background:#0c1018;z-index:4;
}
.cin-frame-top{top:-100%;left:0;right:0;height:12%;transition:top 0.8s cubic-bezier(0.16,1,0.3,1)}
.cin-frame-top.in{top:0}
.cin-frame-bottom{bottom:-100%;left:0;right:0;height:30%;transition:bottom 0.5s cubic-bezier(0.16,1,0.3,1)}
.cin-frame-bottom.in{bottom:0}
.cin-frame-left{left:-100%;top:0;bottom:0;width:12%;transition:left 0.8s cubic-bezier(0.16,1,0.3,1)}
.cin-frame-left.in{left:0}
.cin-frame-right{right:-100%;top:0;bottom:0;width:12%;transition:right 0.8s cubic-bezier(0.16,1,0.3,1)}
.cin-frame-right.in{right:0}

/* Console terminal text */
.cin-terminal{
  position:absolute;bottom:32%;left:50%;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:11px;color:rgba(0,255,136,0.6);
  text-align:left;white-space:pre;line-height:1.6;
  opacity:0;z-index:5;
}
.cin-terminal.visible{opacity:1}
.cin-terminal .cursor{animation:blink 0.6s step-end infinite;color:rgba(0,255,136,0.8)}

/* LED indicators */
.cin-led{
  position:absolute;width:4px;height:4px;border-radius:50%;
  opacity:0;transition:opacity 0.2s ease;z-index:5;
}
.cin-led.on{opacity:1;box-shadow:0 0 6px currentColor}

/* Plague entrance */
.cin-plague-wrap{
  position:absolute;bottom:16%;left:50%;transform:translateX(-50%) translateY(100%);
  z-index:6;transition:transform 1.5s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none;
}
.cin-plague-wrap.in{transform:translateX(-50%) translateY(0)}
.cin-plague-wrap img{
  width:min(18%,180px);width:160px;height:auto;
  filter:drop-shadow(0 5px 8px rgba(0,0,0,0.8)) drop-shadow(0 20px 30px rgba(0,0,0,0.5));
}