/* Cinematic Wandering-Earth-inspired overlay for the 550W preview.
   Original composition; public-domain NASA planet imagery only. */

body {
  background:
    linear-gradient(90deg, rgba(1,4,8,.92) 0%, rgba(1,5,10,.65) 40%, rgba(1,4,8,.32) 72%, rgba(1,4,8,.72) 100%),
    linear-gradient(180deg, rgba(1,4,8,.22), rgba(1,4,8,.86)),
    url("deep-space.webp") center / cover fixed no-repeat,
    #02050a;
}

body::before {
  opacity: .22;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 76%);
}

body::after {
  opacity: .06;
}

.quantum-vignette {
  background:
    radial-gradient(circle at 76% 34%, transparent 0 25%, rgba(1,4,8,.10) 45%, rgba(1,4,8,.72) 90%),
    linear-gradient(90deg, rgba(1,4,8,.88), rgba(1,4,8,.22) 55%, rgba(1,4,8,.52));
}

.quantum-hero {
  min-height: 760px;
  padding-top: 105px;
  overflow: hidden;
}

.quantum-hero::before {
  content: "";
  position: absolute;
  inset: 3% -15% -25% 34%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 62% 42%, rgba(255,123,46,.10), transparent 31%),
    radial-gradient(circle at 55% 46%, rgba(48,187,225,.11), transparent 47%);
  filter: blur(28px);
}

.quantum-hero::after {
  content: "PLANETARY ENGINE ARRAY // ACTIVE";
  position: absolute;
  right: 4%;
  bottom: 25px;
  color: rgba(255,173,100,.55);
  font: 9px/1 "Cascadia Mono", Consolas, monospace;
  letter-spacing: .22em;
}

.directive-band {
  position: relative;
  min-height: 420px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 76px 0 90px;
  border-top: 1px solid rgba(255,157,91,.15);
  border-bottom: 1px solid rgba(103,232,249,.14);
  background:
    linear-gradient(90deg, rgba(2,7,12,.96), rgba(2,7,12,.64) 48%, rgba(2,7,12,.22) 82%),
    radial-gradient(circle at 75% 48%, rgba(255,125,54,.13), transparent 25%),
    url("planet-jupiter.webp") 82% 48% / 560px auto no-repeat;
}

.directive-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 79px, rgba(103,232,249,.035) 80px),
    linear-gradient(180deg, rgba(2,7,12,.16), rgba(2,7,12,.82));
}

.directive-band::after {
  content: "550W";
  position: absolute;
  right: -30px;
  bottom: -50px;
  color: transparent;
  -webkit-text-stroke: 1px rgba(103,232,249,.13);
  font: 700 210px/.8 "Bahnschrift", sans-serif;
  letter-spacing: -.035em;
  pointer-events: none;
}

.directive-inner { position: relative; z-index: 1; }

.directive-copy {
  margin: 18px 0 20px;
  color: var(--text-hi);
  font-size: clamp(40px, 6vw, 78px);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: .04em;
  text-shadow: 0 0 38px rgba(103,232,249,.18);
}

.directive-inner p {
  max-width: 620px;
  color: #98b2c0;
  font-size: 16px;
  line-height: 1.85;
}

.hero-grid {
  grid-template-columns: minmax(0, .98fr) minmax(500px, 1.02fr);
  gap: 35px;
}

.eyebrow {
  color: #ffad6e;
}
.eyebrow::before {
  background: #ff713a;
  box-shadow: 0 0 16px rgba(255,113,58,.75);
}

.hero h1 {
  max-width: 700px;
}

.hero h1 .hero-word {
  font-size: 1.18em;
  letter-spacing: .055em;
  background: linear-gradient(102deg, #f4fbff 0%, #c8eafa 26%, #78dff6 62%, #f4a261 108%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 27px rgba(113,215,246,.25));
}

.hero h1 .hero-sub {
  color: #dcecf2;
  letter-spacing: .20em;
}

.hero .sub {
  color: #a4bbc7;
}

.hero .tag.ok { color: #91ffd5; }
.hero .tag.am { color: #ffbd7b; border-color: #7d421f; }

.quantum-stage {
  width: min(610px, 100%);
  aspect-ratio: 1 / 1;
}

.quantum-stage::before {
  inset: 9%;
  background:
    radial-gradient(circle at 57% 52%, rgba(84,192,229,.22), rgba(12,79,107,.10) 35%, transparent 66%),
    radial-gradient(circle at 58% 88%, rgba(255,106,45,.20), transparent 34%);
  filter: blur(28px);
}

.quantum-stage::after {
  inset: 4%;
  border-color: rgba(105,214,242,.16);
}

.planet-earth {
  position: absolute;
  left: 4%;
  top: 5%;
  width: 92%;
  height: 92%;
  object-fit: contain;
  filter:
    brightness(.90)
    saturate(1.08)
    drop-shadow(0 0 30px rgba(87,197,230,.26))
    drop-shadow(0 32px 60px rgba(0,0,0,.55));
  animation: planetFloat 10s ease-in-out infinite;
}

.planet-jupiter {
  position: absolute;
  top: -3%;
  right: -5%;
  width: 43%;
  height: 43%;
  object-fit: cover;
  opacity: .84;
  filter: brightness(.72) saturate(.92) drop-shadow(0 0 30px rgba(255,161,82,.20));
  animation: planetDrift 14s ease-in-out infinite;
}

.planet-moon {
  position: absolute;
  left: 4%;
  bottom: 8%;
  z-index: 2;
  width: 24%;
  height: 24%;
  object-fit: contain;
  opacity: .84;
  filter: brightness(.75) drop-shadow(0 0 18px rgba(210,230,238,.18));
  animation: planetDrift 11s ease-in-out infinite reverse;
}

.earth-shade {
  position: absolute;
  inset: 13%;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 37% 33%, transparent 0 30%, rgba(0,4,8,.12) 55%, rgba(0,3,7,.78) 100%);
  mix-blend-mode: multiply;
}

.engine-vent {
  position: absolute;
  height: 2px;
  width: 31%;
  transform-origin: left center;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255,130,56,.95), rgba(255,189,108,.22), transparent);
  box-shadow: 0 0 14px rgba(255,108,44,.65);
  opacity: .74;
}

.engine-vent.e1 { left: 52%; top: 73%; transform: rotate(21deg); }
.engine-vent.e2 { left: 48%; top: 79%; width: 23%; transform: rotate(38deg); opacity: .52; }
.engine-vent.e3 { left: 61%; top: 67%; width: 19%; transform: rotate(10deg); opacity: .38; }

.q-ring { border-color: rgba(134,224,243,.28); }
.q-ring.ring-a { inset: -1%; animation: quantumSpin 34s linear infinite; }
.q-ring.ring-b { inset: 9%; animation-direction: reverse; animation-duration: 25s; }
.q-ring.ring-c { inset: 19%; animation-duration: 18s; }

.q-axis {
  inset: 11%;
  border-color: rgba(131,234,255,.16);
  transform: rotate(-22deg) scaleY(.52);
}

.q-core {
  display: none;
}

.q-hud {
  z-index: 3;
  color: #b4d4df;
  background: rgba(2,9,15,.72);
  border-left-color: rgba(255,156,91,.72);
}
.q-hud b { color: #ffc18b; }
.q-hud.h1 { left: 2%; top: 12%; }
.q-hud.h2 { right: 0; top: 47%; }
.q-hud.h3 { right: 5%; bottom: 9%; }

.q-hud.h2::before { content: "JUPITER APPROACH\A"; color: var(--cyan); white-space: pre; }
.q-hud.h3::before { content: "ENGINE ARRAY\A"; color: #ff9b61; white-space: pre; }

.plan-archive {
  padding-top: 66px;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 28px;
}

.plan-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  padding: 28px 28px 24px;
  border: 1px solid rgba(103,232,249,.17);
  background:
    linear-gradient(115deg, rgba(2,10,17,.96), rgba(3,15,24,.78));
  box-shadow: 0 22px 55px rgba(0,0,0,.32);
}

.plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .28;
  background-position: center;
  background-size: cover;
  mask-image: linear-gradient(90deg, transparent 0, transparent 38%, #000 100%);
}

.plan-card.move::before {
  background-image: url("planet-earth-engine.webp");
  background-size: 310px;
  background-position: 112% 52%;
  opacity: .20;
}

.plan-card.lunar::before {
  background-image: url("planet-moon.webp");
  background-size: 270px;
  background-position: 110% 48%;
  opacity: .20;
}

.plan-card.ark::before {
  background:
    radial-gradient(circle at 88% 47%, transparent 0 19%, rgba(103,232,249,.32) 19.5% 20%, transparent 20.5%),
    radial-gradient(circle at 88% 47%, transparent 0 28%, rgba(255,170,92,.22) 28.3% 28.8%, transparent 29.2%),
    linear-gradient(135deg, transparent, rgba(38,138,166,.14));
}

.plan-card.digital::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 21px, rgba(103,232,249,.12) 22px),
    repeating-linear-gradient(0deg, transparent 0 21px, rgba(143,255,208,.09) 22px);
  mask-image: linear-gradient(90deg, transparent 0, transparent 25%, #000 100%);
}

.plan-card h3 {
  position: relative;
  z-index: 1;
  margin: 20px 0 9px;
  color: var(--text-hi);
  font-size: 34px;
  letter-spacing: .06em;
}

.plan-card p {
  position: relative;
  z-index: 1;
  max-width: 70%;
  color: #91a8b6;
  font-size: 14px;
  line-height: 1.8;
}

.plan-index, .plan-state {
  position: relative;
  z-index: 1;
  font: 9px/1.4 "Cascadia Mono", Consolas, monospace;
  letter-spacing: .14em;
}

.plan-index { color: var(--cyan); }
.plan-state {
  position: absolute;
  left: 28px;
  bottom: 24px;
  color: #ffae72;
}

.plan-card::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 12px;
  width: 24px;
  height: 24px;
  border-top: 1px solid rgba(103,232,249,.42);
  border-right: 1px solid rgba(103,232,249,.42);
}

.btn.primary {
  background:
    linear-gradient(112deg, rgba(15,92,116,.95), rgba(9,39,58,.92) 55%, rgba(115,49,20,.70));
  border-color: rgba(103,232,249,.60);
}

.btn.primary:hover {
  border-color: rgba(255,174,108,.68);
}

.card {
  background:
    linear-gradient(145deg, rgba(8,27,39,.84), rgba(2,11,19,.88));
}

.card:nth-child(1),
.card:nth-child(2) {
  box-shadow:
    0 18px 44px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,170,101,.06);
}

.tl .item.latest::before {
  background: #ff8e50;
  border-color: #ffb174;
  box-shadow: 0 0 14px rgba(255,126,64,.72);
}

footer::after {
  content: "Fan-themed presentation. Film images belong to their respective copyright holders. Not an official movie website.";
  display: block;
  max-width: 1180px;
  margin: 18px auto 0;
  padding: 0 24px;
  color: rgba(120,148,163,.56);
  font: 9px/1.6 "Cascadia Mono", Consolas, monospace;
  letter-spacing: .12em;
}

@keyframes planetFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); }
  50% { transform: translate3d(-7px, -9px, 0) rotate(1deg); }
}

@keyframes planetDrift {
  0%, 100% { transform: translate3d(0, 5px, 0); }
  50% { transform: translate3d(7px, -7px, 0); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .quantum-stage { width: min(580px, 94vw); margin: 10px auto 0; }
  .quantum-hero { min-height: auto; }
}

@media (max-width: 640px) {
  .quantum-hero { padding-top: 52px; }
  .hero h1 .hero-word { font-size: 1.08em; }
  .planet-earth { left: 0; width: 100%; height: 100%; }
  .planet-jupiter { width: 38%; height: 38%; right: -1%; }
  .planet-moon { width: 27%; height: 27%; left: 1%; bottom: 4%; }
  .q-hud { padding: 6px 8px; }
  .quantum-hero::after { display: none; }
  .directive-band {
    min-height: 360px;
    padding: 56px 0 68px;
    background:
      linear-gradient(180deg, rgba(2,7,12,.62), rgba(2,7,12,.94)),
      url("planet-jupiter.webp") 80% 42% / 330px auto no-repeat;
  }
  .directive-copy { font-size: 43px; }
  .directive-band::after { font-size: 120px; right: -10px; bottom: -20px; }
  .plan-grid { grid-template-columns: 1fr; }
  .plan-card { min-height: 260px; }
  .plan-card p { max-width: 78%; }
  footer::after { padding: 0 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .planet-earth, .planet-jupiter { animation: none !important; }
}