/* ════════════════════════════════════════════════════════════
   NetSuite Hero — ORBIT (loader + astronaut canvas)
   ════════════════════════════════════════════════════════════ */

/* ── the loader ── */
#loader{
  position:fixed;inset:0;z-index:3000;background:#070B10;color:#fff;
  overflow:hidden;opacity:1;transition:opacity 1s ease 1.3s;
}
#loader[hidden]{display:none}
#loader.leave{opacity:0;pointer-events:none}
#loader::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(1100px 700px at 70% 30%,rgba(28,107,181,0.18),transparent 60%),
    radial-gradient(800px 600px at 15% 85%,rgba(74,143,212,0.10),transparent 60%);
}
#loader canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
#loader.holding canvas{cursor:grabbing}
/* a slow nebula behind the field, so the dark isn't flat */
.ld-nebula{position:absolute;left:50%;top:50%;width:160vmax;height:160vmax;margin:-80vmax 0 0 -80vmax;pointer-events:none;will-change:transform}
.ld-nebula.a{
  background:
    radial-gradient(closest-side at 62% 44%,rgba(28,107,181,0.22),transparent 60%),
    radial-gradient(closest-side at 30% 65%,rgba(74,143,212,0.10),transparent 55%);
  animation:nebA 46s ease-in-out infinite alternate;
}
.ld-nebula.b{
  background:
    radial-gradient(closest-side at 45% 55%,rgba(127,179,227,0.09),transparent 50%),
    radial-gradient(closest-side at 70% 70%,rgba(20,60,110,0.28),transparent 58%);
  animation:nebB 61s ease-in-out infinite alternate;
}
@keyframes nebA{from{transform:rotate(0deg) scale(1)}to{transform:rotate(28deg) scale(1.12)}}
@keyframes nebB{from{transform:rotate(0deg) scale(1.08)}to{transform:rotate(-34deg) scale(0.96)}}
/* the hyperspace flash on Enter */
.ld-flash{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,rgba(255,255,255,0.95),rgba(191,220,255,0.55) 35%,rgba(28,107,181,0) 70%);opacity:0}
#loader.leave .ld-flash{animation:ldFlash 1.6s ease-out .6s forwards}
@keyframes ldFlash{0%{opacity:0}18%{opacity:1}100%{opacity:0}}
#loader.leave{transition-delay:1.3s}
.ld-ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:28px 32px}
.ld-ui>*{pointer-events:none}
.ld-brand{font-family:var(--display);font-size:14px;font-weight:800;letter-spacing:-0.3px;display:flex;align-items:center;gap:10px}
.ld-brand img{width:24px;height:24px}
.ld-brand span{color:#4A8FD4}
.ld-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;position:relative}
.ld-count{font-family:var(--display);font-size:clamp(44px,8vw,96px);font-weight:800;letter-spacing:-0.05em;line-height:.9;color:#fff}
.ld-count small{font-size:.4em;color:#4A8FD4;margin-left:2px;letter-spacing:0}
.ld-line{
  margin-top:12px;font-size:11px;letter-spacing:2.2px;text-transform:uppercase;font-weight:600;
  color:rgba(255,255,255,0.45);min-height:16px;transition:color .3s;
}
#loader.ready .ld-line{color:#7FB3E3}
.ld-right{position:absolute;left:50%;bottom:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:16px}
.ld-hint{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,0.3);font-weight:600;text-align:center;white-space:nowrap}
.ld-choices{display:flex;gap:12px;align-items:stretch}
.ld-choice{
  pointer-events:auto;cursor:pointer;position:relative;
  width:150px;padding:22px 12px 20px;border-radius:22px;text-align:center;
  background:rgba(10,15,22,0.55);border:1.5px solid rgba(255,255,255,0.14);color:#fff;
  font-family:var(--sans);display:flex;flex-direction:column;align-items:center;gap:5px;
  backdrop-filter:blur(10px);
  opacity:0;transform:translateY(18px) scale(.9);
  transition:opacity .5s,transform .5s cubic-bezier(.2,1.3,.4,1),background .25s,border-color .25s,box-shadow .25s;
}
#loader.ready .ld-choice{opacity:1;transform:none}
#loader.ready .ld-choice:nth-child(2){transition-delay:.08s}
#loader.ready .ld-choice:nth-child(3){transition-delay:.16s}
#loader.ready .ld-choice:nth-child(4){transition-delay:.24s}
#loader.ready .ld-choice:nth-child(5){transition-delay:.32s}
.ld-choice i{font-style:normal;font-size:26px;line-height:1;color:#7FB3E3;margin-bottom:6px}
.ld-choice b{font-family:var(--display);font-size:16px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.ld-choice span{font-size:11px;color:rgba(255,255,255,0.45);line-height:1.3}
.ld-choice:hover,.ld-choice:focus-visible{background:rgba(28,107,181,0.45);border-color:#7FB3E3;box-shadow:0 14px 44px rgba(28,107,181,0.35);transform:translateY(-4px)!important;outline:none}
.ld-choice:hover i{color:#fff}
.ld-choice[data-go="flight"]::after{
  content:'';position:absolute;inset:-1px;border-radius:22px;border:1.5px solid rgba(74,143,212,0.6);
  animation:enterPulse 2.4s ease-out infinite;pointer-events:none;opacity:0;
}
#loader.ready .ld-choice[data-go="flight"]::after{opacity:1}
/* the choice the field is pointing at right now */
.ld-choice.cue{border-color:#7FB3E3;box-shadow:0 14px 44px rgba(28,107,181,0.35);background:rgba(28,107,181,0.3)}
.ld-choice.cue i{color:#fff}
#loader.ready .ld-hint{color:rgba(127,179,227,0.8)}
.ld-bar{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,0.06)}
.ld-bar i{position:absolute;left:0;top:0;bottom:0;width:0;background:linear-gradient(90deg,#1C6BB5,#7FB3E3);transition:width .25s}

/* ── the astronaut canvas: fixed over the home page, never in the way ── */
#orbit-canvas{
  position:fixed;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;
  opacity:1;transition:opacity .5s ease;
}
#orbit-canvas.off{opacity:0}
body.orbit-hover{cursor:grab}
body.orbit-grabbing,body.orbit-grabbing *{cursor:grabbing!important;user-select:none;-webkit-user-select:none}

/* hero: the astronaut's home is the empty right-hand column */
.hero-stage{min-height:360px;position:relative}
.hero-stage-ring{
  position:absolute;left:50%;top:50%;width:300px;height:300px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px dashed rgba(74,143,212,0.22);
  animation:stageSpin 40s linear infinite;pointer-events:none;
}
.hero-stage-ring::after{
  content:'';position:absolute;left:50%;top:-4px;width:7px;height:7px;border-radius:50%;
  background:#4A8FD4;box-shadow:0 0 12px #4A8FD4;transform:translateX(-50%);
}
.hero-stage-lbl{
  position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);white-space:nowrap;
  font-size:10px;letter-spacing:2.4px;text-transform:uppercase;color:rgba(255,255,255,0.3);font-weight:600;
}
.hero-ways{font-size:12.5px;color:rgba(255,255,255,0.38);margin-top:-26px;margin-bottom:40px}
.hero-ways a{color:rgba(255,255,255,0.6);cursor:pointer;text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.18);transition:color .15s,border-color .15s}
.hero-ways a:hover{color:#fff;border-color:#fff}

@media (max-width:960px){
  .hero-stage{display:none}
  .ld-ui{padding:20px 20px}
  .ld-bottom{flex-direction:column;align-items:flex-start;gap:18px}
  .ld-right{position:static;transform:none;align-items:stretch;width:100%;gap:12px}
  .ld-hint{text-align:left;white-space:normal}
  .ld-choices{gap:8px;width:100%;flex-wrap:wrap}
  .ld-choice{flex:1 1 calc(33.333% - 6px);width:auto;padding:14px 6px 12px;border-radius:16px;gap:4px}
  .ld-choice i{font-size:20px;margin-bottom:3px}
  .ld-choice b{font-size:12px;letter-spacing:.8px}
  .ld-choice span{font-size:9px}
  .ld-choice[data-go="flight"]::after{border-radius:16px}
}
@media (prefers-reduced-motion:reduce){
  .hero-stage-ring,.ld-choice::after{animation:none}
}