*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#020202}
body{font-family:Georgia,"Times New Roman",serif;color:#f3dfb8}
button{font:inherit}
.stage{position:relative;width:100vw;height:100dvh;min-height:620px;overflow:hidden;background:#020202;isolation:isolate}
.cosmic-bg{position:absolute;inset:-8%;z-index:-2;background:radial-gradient(circle at 50% 42%,rgba(148,77,22,.12),transparent 34%),#020202}
.hero{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;z-index:1;user-select:none;-webkit-user-drag:none}
.ambient{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.35;mix-blend-mode:screen}
.orbit{position:absolute;left:50%;top:51%;border:1px solid rgba(238,177,92,.17);border-radius:50%;transform:translate(-50%,-50%) rotate(25deg)}
.o1{width:72vw;height:22vw;animation:spin 26s linear infinite}
.o2{width:88vw;height:30vw;transform:translate(-50%,-50%) rotate(-38deg);animation:spinR 33s linear infinite}
.o3{width:58vw;height:18vw;transform:translate(-50%,-50%) rotate(68deg);animation:spin2 21s linear infinite}
.spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#eab76a;box-shadow:0 0 9px #eab76a}
.s1{left:18%;top:40%;animation:f1 7s ease-in-out infinite}.s2{left:79%;top:46%;animation:f2 9s ease-in-out infinite}.s3{left:31%;top:72%;animation:f3 8s ease-in-out infinite}.s4{left:68%;top:29%;animation:f4 10s ease-in-out infinite}

.planet-system{position:absolute;inset:0;z-index:6;pointer-events:none}
.planet{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;pointer-events:auto;opacity:1;transform:translate(-50%,-50%) scale(1);transition:opacity .55s ease,transform .7s cubic-bezier(.18,.8,.18,1),filter .35s ease;filter:drop-shadow(0 0 12px rgba(239,167,73,.22));-webkit-tap-highlight-color:transparent}
.planet img{display:block;width:100%;height:100%;object-fit:contain}
.planet::after{content:"";position:absolute;inset:23%;border-radius:50%;background:radial-gradient(circle,rgba(8,5,2,.72) 0%,rgba(8,5,2,.52) 58%,rgba(8,5,2,0) 72%);pointer-events:none}
.planet-top{left:50%;top:12.2%;width:148px;height:148px}
.planet-left{left:14.3%;top:43%;width:132px;height:132px}
.planet-right{left:85.7%;top:43%;width:132px;height:132px}
.planet-bottom{left:50%;top:71%;width:148px;height:148px}

.planet-system.is-hidden .planet{opacity:0;transform:translate(-50%,-50%) scale(.25);pointer-events:none}
.planet-system.is-hidden .planet-top{transition-delay:.00s}.planet-system.is-hidden .planet-left{transition-delay:.04s}.planet-system.is-hidden .planet-right{transition-delay:.08s}.planet-system.is-hidden .planet-bottom{transition-delay:.12s}
.planet-system:not(.is-hidden) .planet-top{transition-delay:.05s}.planet-system:not(.is-hidden) .planet-left{transition-delay:.12s}.planet-system:not(.is-hidden) .planet-right{transition-delay:.19s}.planet-system:not(.is-hidden) .planet-bottom{transition-delay:.26s}
.planet:hover,.planet:focus-visible{filter:drop-shadow(0 0 22px rgba(255,187,77,.65));transform:translate(-50%,-50%) scale(1.045)}
.planet:focus-visible{outline:1px solid rgba(246,201,121,.7);outline-offset:5px;border-radius:50%}

.core{position:absolute;z-index:8;left:50%;top:34.1%;width:78px;height:78px;transform:translate(-50%,-50%);border:0;border-radius:50%;background:transparent;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.core span{position:absolute;inset:20%;border-radius:50%;box-shadow:0 0 12px 4px rgba(255,73,20,.38);animation:pulse 1.55s ease-in-out infinite}
.core::before{content:"";position:absolute;inset:34%;border-radius:50%;background:#ff5a1f;box-shadow:0 0 15px 7px rgba(255,69,20,.8),0 0 36px 15px rgba(255,61,16,.28)}
.core:focus-visible{outline:1px solid rgba(255,182,82,.7);outline-offset:6px}


.panel{
  position:absolute;inset:0;z-index:30;
  display:flex;align-items:center;justify-content:center;
  padding:12px;background:rgba(0,0,0,.18);
  backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease;
  perspective:1200px;
}
.panel.open{opacity:1;visibility:visible;pointer-events:auto}

/*
   Popup is deliberately built as a 3D object, not as a flat image card.
   The approved Earth+DNA artwork remains the texture. CSS supplies depth,
   perspective, lighting, bevel and a subtle floating motion.
*/
.popup-exact{
  position:relative;
  width:min(86vw,370px);
  aspect-ratio:1;
  transform-style:preserve-3d;
  transform:translateZ(-80px) rotateY(55deg) rotateX(7deg) scale(.76);
  transition:transform .72s cubic-bezier(.16,.82,.2,1), filter .5s ease;
  filter:drop-shadow(0 30px 42px rgba(0,0,0,.82));
  overflow:visible;
}
.panel.open .popup-exact{
  transform:translateZ(0) rotateY(-7deg) rotateX(3deg) scale(1);
  animation:popupFloat 6s ease-in-out .72s infinite;
}

.popup-depth{
  position:absolute;inset:2.2%;
  border-radius:50%;
  transform:translateZ(-22px) scale(.985);
  background:
    radial-gradient(circle at 35% 28%,rgba(255,193,91,.20),transparent 28%),
    radial-gradient(circle at 65% 70%,rgba(0,0,0,.94),rgba(14,8,2,.98) 70%);
  box-shadow:
    0 0 0 2px rgba(224,157,60,.18),
    0 25px 45px rgba(0,0,0,.62),
    0 0 42px rgba(231,159,52,.16);
  pointer-events:none;
}

.popup-3d-sphere{
  position:absolute;inset:0;
  border-radius:50%;
  overflow:hidden;
  transform-style:preserve-3d;
  background:#090704;
  box-shadow:
    inset 18px 14px 30px rgba(255,205,124,.13),
    inset -22px -24px 42px rgba(0,0,0,.76),
    0 0 0 1px rgba(247,190,90,.42),
    0 0 28px rgba(238,161,54,.22);
}

.popup-exact-image{
  position:absolute;inset:-1.2%;
  width:102.4%;height:102.4%;
  object-fit:cover;
  border-radius:50%;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  transform:translateZ(1px) scale(1.012);
}

/* Curved lighting makes the circular artwork read as a sphere. */
.popup-light{
  position:absolute;inset:0;
  border-radius:50%;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(ellipse 54% 38% at 27% 20%,rgba(255,232,176,.30),transparent 68%),
    radial-gradient(ellipse 72% 82% at 82% 84%,rgba(0,0,0,.68),transparent 64%),
    linear-gradient(104deg,rgba(255,238,196,.10) 0%,transparent 29%,rgba(0,0,0,.18) 72%,rgba(0,0,0,.44) 100%);
  mix-blend-mode:screen;
  opacity:.72;
}

.popup-text-veil{
  position:absolute;
  z-index:3;
  left:22%;top:25%;
  width:56%;height:25%;
  border-radius:50%;
  background:radial-gradient(ellipse at center,
    rgba(5,4,2,.84) 0%,
    rgba(5,4,2,.64) 53%,
    rgba(5,4,2,.10) 88%,
    transparent 100%);
  box-shadow:0 0 25px rgba(0,0,0,.14);
  pointer-events:none;
}

.popup-live-content{
  position:absolute;
  z-index:6;
  left:18%;right:18%;
  top:19%;bottom:50%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:translateZ(18px);
  pointer-events:none;
}

.popup-live-mark{
  width:28px;height:28px;
  border-radius:50%;
  border:1px solid rgba(241,191,101,.72);
  box-shadow:0 0 13px rgba(236,165,58,.18),inset 0 0 8px rgba(239,174,74,.12);
  margin-bottom:7px;
  pointer-events:none;
}

.popup-live-title{
  color:#f5dfb7;
  font-family:Georgia,"Times New Roman",serif;
  font-size:22px;
  line-height:1.08;
  font-weight:500;
  text-decoration:none;
  text-shadow:0 0 12px rgba(237,176,75,.34),0 2px 10px rgba(0,0,0,.85);
  cursor:pointer;
  pointer-events:auto;
}
.popup-live-title:hover{color:#ffe7b2;text-shadow:0 0 16px rgba(255,192,76,.5)}

.popup-rule{
  width:72px;height:1px;margin:7px 0;
  background:linear-gradient(90deg,transparent,rgba(239,190,102,.86),transparent);
  pointer-events:none;
}

.popup-live-subtitle{
  max-width:175px;
  color:rgba(245,233,210,.88);
  font:10px/1.4 Arial,sans-serif;
  text-decoration:none;
  cursor:pointer;
  pointer-events:auto;
}
.popup-live-subtitle:hover{color:#ffe0a0}
.popup-live-subtitle[hidden],.popup-rule[hidden]{display:none}

.popup-close{
  position:absolute;z-index:12;
  top:10%;right:8%;
  width:34px;height:34px;
  border-radius:50%;
  border:1px solid rgba(239,192,106,.8);
  background:rgba(7,5,2,.90);
  color:#f4d59a;
  font:400 21px/30px Arial,sans-serif;
  text-align:center;
  padding:0;
  cursor:pointer;
  box-shadow:0 0 12px rgba(230,160,54,.22),0 5px 12px rgba(0,0,0,.45);
  transform:translateZ(35px);
}
.popup-close:hover{box-shadow:0 0 17px rgba(255,192,82,.42);transform:translateZ(35px) scale(1.04)}

@keyframes popupFloat{
  0%,100%{transform:translateZ(0) rotateY(-7deg) rotateX(3deg) translateY(0) scale(1)}
  50%{transform:translateZ(8px) rotateY(5deg) rotateX(-2deg) translateY(-7px) scale(1.012)}
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(385deg)}}@keyframes spinR{to{transform:translate(-50%,-50%) rotate(-395deg)}}@keyframes spin2{to{transform:translate(-50%,-50%) rotate(428deg)}}
@keyframes pulse{0%,100%{transform:scale(.82);opacity:.5}50%{transform:scale(1.16);opacity:1}}
@keyframes f1{50%{transform:translate(7px,-10px)}}@keyframes f2{50%{transform:translate(-8px,8px)}}@keyframes f3{50%{transform:translate(10px,-6px)}}@keyframes f4{50%{transform:translate(-7px,9px)}}
@media (min-width:700px){.stage{width:min(520px,100vw);margin:auto}}