/* ============================================================
   THE WORLDS OF NORAA — rotating orbit
   ============================================================ */

.worlds-hero{padding:140px 0 30px;text-align:center}
.worlds-hero .quote{
  font-family:var(--font-d);font-weight:200;font-size:clamp(1.3rem,3vw,2rem);
  letter-spacing:.06em;margin:26px auto 0;color:var(--ink);
}
.worlds-hero .quote span{color:var(--amber)}

/* ---- stage ---- */
.stage-shell{
  position:relative;height:min(78vh,700px);min-height:520px;
  max-width:1140px;margin:10px auto 0;border-radius:30px;
  display:flex;align-items:center;justify-content:center;
  perspective:1500px;perspective-origin:50% 42%;
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 18%, #221912, #0d0a08 72%);
  box-shadow:0 40px 90px -50px rgba(40,20,5,.6), inset 0 0 0 1px rgba(255,150,70,.08);
}
.stage-shell::before{ /* floor glow */
  content:"";position:absolute;bottom:8%;left:50%;transform:translateX(-50%);
  width:560px;height:160px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(255,138,30,.28),transparent 70%);
  filter:blur(18px);
}

.ring{
  position:relative;width:1px;height:1px;
  transform-style:preserve-3d;
  transform:translateZ(-460px) rotateY(0deg);
}
.ring.spin{animation:orbit 46s linear infinite}
.stage-shell:hover .ring.spin{animation-play-state:paused}
@keyframes orbit{from{transform:translateZ(-460px) rotateY(0deg)}
  to{transform:translateZ(-460px) rotateY(360deg)}}

/* center character */
.noraa-core{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-52%);
  width:clamp(180px,22vw,260px);z-index:5;pointer-events:none;
  filter:drop-shadow(0 30px 50px rgba(0,0,0,.7));
}
.noraa-core img{width:100%;animation:floatY 6s ease-in-out infinite}
.noraa-core::after{ /* eye pulse */
  content:"";position:absolute;left:50%;top:34%;transform:translate(-50%,-50%);
  width:46%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,150,40,.5),transparent 65%);
  filter:blur(8px);animation:pulse 3.4s ease-in-out infinite;
}
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes pulse{0%,100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.9;transform:translate(-50%,-50%) scale(1.12)}}

/* ---- world card ---- */
.world{
  position:absolute;left:50%;top:50%;
  width:200px;height:300px;margin:-150px 0 0 -100px;
  transform-origin:50% 50%;
  cursor:pointer;
  transition:filter .5s var(--ease);
}
.portal{
  position:relative;width:100%;height:100%;
  border-radius:120px 120px 26px 26px;
  overflow:hidden;
  border:1.5px solid color-mix(in srgb,var(--wc) 55%,transparent);
  background:
    radial-gradient(120% 80% at 50% 18%, color-mix(in srgb,var(--wc) 55%,transparent), transparent 60%),
    radial-gradient(90% 70% at 50% 100%, color-mix(in srgb,var(--wc) 28%,transparent), #0b0807 75%),
    #0b0807;
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 38px -10px var(--wc);
  transition:.5s var(--ease);
}
.portal .scene{position:absolute;inset:0;opacity:.9;mix-blend-mode:screen}
.portal .glint{position:absolute;inset:0;
  background:linear-gradient(160deg,rgba(255,255,255,.16),transparent 40%)}
.portal .num{
  position:absolute;top:14px;left:0;right:0;text-align:center;
  font-family:var(--font-d);font-size:.7rem;letter-spacing:.3em;color:rgba(255,255,255,.6)}
.portal .wicon{position:absolute;top:36px;left:50%;transform:translateX(-50%);width:30px;height:30px}
.portal .wicon svg{width:100%;height:100%;stroke:var(--wc);fill:none;stroke-width:1.4}
.world .label{
  position:absolute;bottom:18px;left:0;right:0;text-align:center;
}
.world .label .name{
  font-family:var(--font-d);letter-spacing:.18em;text-transform:uppercase;
  font-size:.92rem;color:#fff;display:block}
.world .label .energy{font-size:.66rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--wc);margin-top:4px;display:block}

.world.active .portal{
  border-color:var(--wc);
  box-shadow:0 0 0 1px rgba(0,0,0,.4) inset, 0 0 70px -6px var(--wc), 0 0 120px -20px var(--wc);
  transform:scale(1.04);
}
.world:not(.active){filter:brightness(.62) saturate(.85)}
.world:not(.active):hover{filter:brightness(.9)}

/* ---- controls ---- */
.orbit-ctrl{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.orbit-ctrl button{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--panel-line);
  background:rgba(255,138,30,.06);color:var(--ink);cursor:pointer;font-size:1.1rem;
  display:flex;align-items:center;justify-content:center;transition:.35s var(--ease)}
.orbit-ctrl button:hover{border-color:var(--amber);box-shadow:0 0 24px -8px var(--glow);transform:scale(1.07)}
.orbit-ctrl .play{width:56px;height:56px;font-size:1rem;letter-spacing:.05em;
  font-family:var(--font-d);}

/* ---- detail panel ---- */
.world-detail{
  max-width:760px;margin:30px auto 0;text-align:center;min-height:170px;
  transition:opacity .4s var(--ease);
}
.world-detail .wd-energy{font-family:var(--font-d);letter-spacing:.34em;text-transform:uppercase;
  font-size:.74rem;color:var(--wc-cur,var(--amber))}
.world-detail .wd-name{font-family:var(--font-d);font-size:clamp(1.8rem,4vw,2.8rem);
  letter-spacing:.12em;text-transform:uppercase;margin:8px 0 14px}
.world-detail .wd-desc{color:var(--ink-soft);font-weight:300;max-width:46ch;margin:0 auto}
.world-detail .wd-dot{display:inline-flex;gap:10px;margin-top:18px;justify-content:center}
.world-detail .wd-dot i{width:9px;height:9px;border-radius:50%;background:var(--ink-dim);
  cursor:pointer;transition:.3s;font-style:normal}
.world-detail .wd-dot i.on{background:var(--wc-cur,var(--amber));box-shadow:0 0 10px var(--wc-cur,var(--amber));transform:scale(1.25)}

/* activation row */
.activation{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;margin-top:64px}
.activation .a-item{display:flex;flex-direction:column;align-items:center;gap:10px;
  width:130px;text-align:center}
.activation .a-item svg{width:30px;height:30px;stroke:var(--amber);fill:none;stroke-width:1.3}
.activation .a-item span{font-size:.72rem;letter-spacing:.12em;color:var(--ink-soft);text-transform:uppercase}

/* ---------- MOBILE: flatten ring into swipe carousel ---------- */
@media(max-width:820px){
  .stage-shell{perspective:none;height:auto;min-height:0;display:block;overflow:visible;padding:10px 0}
  .stage-shell::before{display:none}
  .noraa-core{position:relative;left:auto;top:auto;transform:none;margin:0 auto 30px;
    width:160px}
  .noraa-core img{animation:floatY 6s ease-in-out infinite}
  .ring{
    position:relative;width:auto;height:auto;transform:none!important;
    transform-style:flat;animation:none!important;
    display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
    padding:10px 16px 24px;-webkit-overflow-scrolling:touch;
  }
  .ring::-webkit-scrollbar{display:none}
  .world{
    position:relative;left:auto;top:auto;margin:0;
    flex:0 0 200px;scroll-snap-align:center;transform:none!important;
    filter:none!important;
  }
  .world:not(.active){filter:brightness(.78)!important}
  .orbit-ctrl .play{display:none}
}