/* =========================================================
   LITERVERSE // PROCEDURAL PLANET ENGINE V1
   Designed for the existing .dossier-visual panel.
   ========================================================= */

.planet-stage{
  --planet-size: min(74%, 410px);
  --planet-tilt: -8deg;
  --planet-rotation: 70s;

  position:absolute;
  inset:0;
  z-index:2;
  display:grid;
  place-items:center;
  overflow:hidden;
  perspective:1000px;
  pointer-events:auto;
}

/* HUD orbit rings */
.planet-stage::before,
.planet-stage::after{
  content:"";
  position:absolute;
  left:50%;
  top:46%;
  aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  pointer-events:none;
}

.planet-stage::before{
  width:min(78%,470px);
  border:1px solid rgba(21,208,252,.22);
  box-shadow:
    0 0 0 28px rgba(108,10,234,.07),
    0 0 0 58px rgba(217,25,247,.045),
    0 0 80px rgba(21,208,252,.06);
}

.planet-stage::after{
  width:min(90%,540px);
  border:
    1px solid rgba(217,25,247,.10);
  animation:planetHudSpin 28s linear infinite;
}

.planet-shell{
  position:absolute;
  left:50%;
  top:46%;
  width:var(--planet-size);
  aspect-ratio:1;
  transform:
    translate(-50%,-50%)
    rotate(var(--planet-tilt));
  transform-style:preserve-3d;
  transition:transform .18s ease-out;
  will-change:transform;
}

.planet{
  --planet-base-1:#0e3770;
  --planet-base-2:#26166d;
  --planet-base-3:#03040d;
  --planet-atmosphere:#15d0fc;
  --planet-energy:#d919f7;
  --planet-accent:#6c0aea;
  --planet-ocean:#087e96;
  --planet-land:#5b2ca3;

  position:absolute;
  inset:0;
  border-radius:50%;
  overflow:hidden;
  isolation:isolate;
  border:1px solid color-mix(in srgb,var(--planet-atmosphere) 55%,transparent);

  background:
    radial-gradient(circle at 32% 25%,
      rgba(255,255,255,.98) 0 1.5%,
      color-mix(in srgb,var(--planet-atmosphere) 65%,transparent) 2%,
      transparent 10%),
    radial-gradient(circle at 36% 33%,
      color-mix(in srgb,var(--planet-atmosphere) 34%,transparent),
      transparent 17%),
    radial-gradient(circle at 42% 42%,
      var(--planet-base-1) 0%,
      var(--planet-base-2) 42%,
      var(--planet-base-3) 78%);

  box-shadow:
    inset -64px -44px 88px rgba(0,0,0,.78),
    inset 26px 10px 42px color-mix(in srgb,var(--planet-atmosphere) 24%,transparent),
    0 0 1px var(--planet-atmosphere),
    0 0 30px color-mix(in srgb,var(--planet-atmosphere) 30%,transparent),
    0 0 75px color-mix(in srgb,var(--planet-accent) 20%,transparent),
    0 0 115px color-mix(in srgb,var(--planet-energy) 8%,transparent);
}

/* The rotating "map" layer */
.planet__surface{
  position:absolute;
  inset:-4% -32%;
  border-radius:48%;
  opacity:.9;
  mix-blend-mode:screen;
  background-size:50% 100%;
  animation:planetSurfaceScroll var(--planet-rotation) linear infinite;
  will-change:transform;
}

/* Secondary slow layer to stop worlds feeling flat */
.planet__surface-alt{
  position:absolute;
  inset:-8% -38%;
  opacity:.46;
  mix-blend-mode:overlay;
  filter:blur(.4px);
  background-size:44% 100%;
  animation:planetSurfaceScroll calc(var(--planet-rotation) * 1.55) linear infinite reverse;
}

/* Thin clouds / mist */
.planet__clouds{
  position:absolute;
  inset:-5% -35%;
  opacity:.26;
  mix-blend-mode:screen;
  filter:blur(1.8px);
  background:
    repeating-linear-gradient(
      103deg,
      transparent 0 24px,
      rgba(255,255,255,.05) 28px 31px,
      transparent 35px 64px
    );
  background-size:55% 100%;
  animation:planetCloudScroll 48s linear infinite;
}

/* Night-side city/energy lights */
.planet__lights{
  position:absolute;
  inset:0;
  border-radius:50%;
  opacity:.52;
  mix-blend-mode:screen;
}

/* Dynamic illuminated rim */
.planet__atmosphere{
  position:absolute;
  inset:0;
  z-index:8;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,
      transparent 64%,
      color-mix(in srgb,var(--planet-atmosphere) 8%,transparent) 79%,
      color-mix(in srgb,var(--planet-atmosphere) 38%,transparent) 98%,
      color-mix(in srgb,var(--planet-atmosphere) 60%,transparent) 100%);
  box-shadow:
    inset 0 0 21px color-mix(in srgb,var(--planet-atmosphere) 46%,transparent),
    inset 10px 4px 24px color-mix(in srgb,var(--planet-atmosphere) 14%,transparent);
}

/* Lighting terminator */
.planet__shadow{
  position:absolute;
  inset:-2%;
  z-index:7;
  border-radius:50%;
  pointer-events:none;
  background:
    radial-gradient(circle at 24% 22%,
      transparent 0 27%,
      rgba(0,0,0,.08) 44%,
      rgba(0,0,0,.42) 72%,
      rgba(0,0,0,.83) 101%);
}

/* Specular star reflection */
.planet__specular{
  position:absolute;
  z-index:9;
  left:28%;
  top:21%;
  width:10%;
  aspect-ratio:1;
  border-radius:50%;
  pointer-events:none;
  background:rgba(255,255,255,.88);
  filter:blur(3px);
  box-shadow:
    0 0 18px 5px color-mix(in srgb,var(--planet-atmosphere) 46%,transparent),
    0 0 48px 12px color-mix(in srgb,var(--planet-atmosphere) 20%,transparent);
  opacity:.62;
}

.planet__scan{
  position:absolute;
  z-index:10;
  left:-20%;
  right:-20%;
  height:1px;
  top:50%;
  opacity:.0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      transparent,
      color-mix(in srgb,var(--planet-atmosphere) 85%,white),
      transparent
    );
  box-shadow:
    0 0 9px var(--planet-atmosphere),
    0 0 24px color-mix(in srgb,var(--planet-energy) 40%,transparent);
}

.planet-stage:hover .planet__scan{
  animation:planetScan 2.4s ease-out;
}

/* -------------------------
   SONARA // RESONANCE WORLD
   ------------------------- */

.planet--sonara{
  --planet-base-1:#086f8c;
  --planet-base-2:#24156d;
  --planet-base-3:#02030c;
  --planet-atmosphere:#15d0fc;
  --planet-energy:#d919f7;
  --planet-accent:#6c0aea;
  --planet-ocean:#0787a2;
  --planet-land:#6730b6;
}

.planet--sonara .planet__surface{
  background-image:
    radial-gradient(ellipse at 14% 36%,rgba(74,226,235,.54) 0 4%,transparent 4.6%),
    radial-gradient(ellipse at 25% 68%,rgba(93,55,182,.74) 0 7%,transparent 7.6%),
    radial-gradient(ellipse at 36% 45%,rgba(130,75,224,.66) 0 8%,transparent 8.8%),
    radial-gradient(ellipse at 47% 76%,rgba(45,199,218,.48) 0 5%,transparent 5.7%),
    radial-gradient(ellipse at 57% 24%,rgba(98,41,177,.78) 0 9%,transparent 9.8%),
    radial-gradient(ellipse at 69% 57%,rgba(46,185,215,.46) 0 6%,transparent 6.8%),
    radial-gradient(ellipse at 80% 39%,rgba(118,59,207,.70) 0 8%,transparent 8.7%),
    radial-gradient(ellipse at 91% 73%,rgba(52,218,222,.44) 0 5%,transparent 5.8%),
    repeating-linear-gradient(
      117deg,
      transparent 0 19px,
      rgba(98,255,246,.075) 20px 21px,
      transparent 22px 42px
    );
}

.planet--sonara .planet__surface-alt{
  background-image:
    linear-gradient(72deg,transparent 42%,rgba(21,208,252,.18) 43%,transparent 44%),
    linear-gradient(118deg,transparent 53%,rgba(217,25,247,.14) 54%,transparent 55%),
    linear-gradient(154deg,transparent 59%,rgba(108,10,234,.17) 60%,transparent 61%);
}

.planet--sonara .planet__lights{
  background:
    radial-gradient(circle at 68% 60%,rgba(21,208,252,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 73% 57%,rgba(217,25,247,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 64% 66%,rgba(21,208,252,.72) 0 1px,transparent 2px),
    radial-gradient(circle at 77% 68%,rgba(217,25,247,.62) 0 1px,transparent 2px),
    radial-gradient(circle at 58% 71%,rgba(21,208,252,.55) 0 1px,transparent 2px),
    radial-gradient(circle at 82% 48%,rgba(21,208,252,.64) 0 1px,transparent 2px);
}

/* Resonance rings sweep across Sonara */
.planet--sonara::after{
  content:"";
  position:absolute;
  z-index:6;
  inset:17%;
  border:1px solid rgba(21,208,252,.0);
  border-radius:50%;
  pointer-events:none;
  animation:sonaraResonance 6.8s ease-out infinite;
}

/* Generic presets for upcoming worlds */
.planet--ocean{
  --planet-base-1:#0b78a3;
  --planet-base-2:#07395d;
  --planet-base-3:#01060c;
  --planet-atmosphere:#42e7ff;
  --planet-energy:#0e87ff;
  --planet-accent:#0546b6;
}

.planet--volcanic{
  --planet-base-1:#4d160b;
  --planet-base-2:#200805;
  --planet-base-3:#050100;
  --planet-atmosphere:#ff6a28;
  --planet-energy:#ffba37;
  --planet-accent:#c9280b;
}

.planet--ice{
  --planet-base-1:#82c8e8;
  --planet-base-2:#254d80;
  --planet-base-3:#07101e;
  --planet-atmosphere:#bdefff;
  --planet-energy:#7c91ff;
  --planet-accent:#536ad8;
}

.planet--desert{
  --planet-base-1:#c47a35;
  --planet-base-2:#7a381e;
  --planet-base-3:#160904;
  --planet-atmosphere:#f4b66c;
  --planet-energy:#e66d31;
  --planet-accent:#9a3f1d;
}

.planet--artificial{
  --planet-base-1:#182840;
  --planet-base-2:#071322;
  --planet-base-3:#01040a;
  --planet-atmosphere:#15d0fc;
  --planet-energy:#d919f7;
  --planet-accent:#6c0aea;
}

/* Stage diagnostics */
.planet-label{
  position:absolute;
  z-index:13;
  left:22px;
  top:20px;
  color:rgba(21,208,252,.66);
  font:800 9px/1.4 var(--mono);
  letter-spacing:.12em;
  text-transform:uppercase;
  pointer-events:none;
}

.planet-label b{
  color:#f2f4ff;
  font-weight:900;
}

.planet-axis{
  position:absolute;
  z-index:1;
  left:50%;
  top:46%;
  width:min(88%,525px);
  height:1px;
  transform:translate(-50%,-50%) rotate(var(--planet-tilt));
  background:linear-gradient(90deg,transparent,rgba(217,25,247,.22),transparent);
  pointer-events:none;
}

@keyframes planetSurfaceScroll{
  from{transform:translateX(0)}
  to{transform:translateX(25%)}
}

@keyframes planetCloudScroll{
  from{transform:translateX(0)}
  to{transform:translateX(28%)}
}

@keyframes planetHudSpin{
  to{transform:translate(-50%,-50%) rotate(360deg)}
}

@keyframes planetScan{
  0%{top:18%;opacity:0}
  16%{opacity:.85}
  85%{opacity:.55}
  100%{top:80%;opacity:0}
}

@keyframes sonaraResonance{
  0%{
    inset:43%;
    opacity:0;
    border-color:rgba(21,208,252,.0);
  }
  18%{
    opacity:.72;
    border-color:rgba(21,208,252,.48);
  }
  62%{
    opacity:.15;
    border-color:rgba(217,25,247,.28);
  }
  100%{
    inset:3%;
    opacity:0;
    border-color:rgba(217,25,247,.0);
  }
}

@media(max-width:900px){
  .planet-stage{
    --planet-size:min(68vw,390px);
  }
}

@media(max-width:560px){
  .planet-stage{
    --planet-size:min(72vw,330px);
  }

  .planet-label{
    left:14px;
    top:14px;
    font-size:8px;
  }

  .planet-stage::before{
    width:min(86%,390px);
  }

  .planet-stage::after{
    width:min(98%,440px);
  }
}

@media(prefers-reduced-motion:reduce){
  .planet__surface,
  .planet__surface-alt,
  .planet__clouds,
  .planet-stage::after,
  .planet--sonara::after{
    animation:none!important;
  }

  .planet-shell{
    transition:none;
  }
}