/* Home — planetary scroll experience */
body.home { overflow-x: hidden; }
#scroll-space { height: 440vh; position: relative; z-index: -1; }

/* ---------- loader ---------- */
#loader {
  position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  background: radial-gradient(circle at 50% 45%, #0a1226 0, #04060d 65%);
  transition: opacity 1s var(--ease) .25s, visibility 1.3s, transform 1.3s var(--ease);
}
#loader.done { opacity: 0; visibility: hidden; transform: scale(1.12); pointer-events: none; }
.ld-core { position: relative; width: 150px; height: 150px; display: grid; place-items: center; }
.ld-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ld-ring circle { fill: none; stroke-width: 1.2; }
.ld-track { stroke: rgba(238, 243, 251, .12); }
.ld-bar { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; filter: drop-shadow(0 0 6px var(--accent)); }
.ld-orbit { position: absolute; inset: 14px; border-radius: 50%; border: 1px dashed rgba(238, 243, 251, .18); animation: spin 9s linear infinite; }
.ld-orbit i { position: absolute; top: -4px; left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: #fff; box-shadow: 0 0 14px 3px var(--accent); }
.ld-pct { font: 300 38px var(--mono); letter-spacing: -.02em; }
.ld-name { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ld-name b { font: 600 20px var(--mono); letter-spacing: .55em; text-indent: .55em; }
.ld-name span { font: 400 14px var(--serif); letter-spacing: .6em; text-indent: .6em; color: var(--dim); }
.ld-sub { font: 400 10px var(--mono); letter-spacing: .5em; text-indent: .5em; color: var(--faint); animation: ldpulse 1.8s ease-in-out infinite; }
@keyframes ldpulse { 50% { opacity: .3; } }

/* ---------- overlays ---------- */
.overlay { position: fixed; z-index: 10; visibility: hidden; pointer-events: none; transition: visibility 0s linear .9s; }
.overlay.on { visibility: visible; pointer-events: auto; transition-delay: 0s; }
.overlay .kicker, .overlay .btn { opacity: 0; translate: 0 20px; transition: opacity .7s var(--ease), translate .9s var(--ease); }
.overlay.on .kicker, .overlay.on .btn { opacity: 1; translate: 0 0; transition-delay: .25s; }
.overlay .rule { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1s var(--ease); }
.overlay.on .rule { transform: scaleX(1); transition-delay: .35s; }
.overlay .desc { color: rgba(238, 243, 251, .84); }
.overlay .title, .overlay .desc { text-shadow: 0 2px 30px rgba(0, 0, 0, .55); }
.title { font-family: var(--serif); font-weight: 700; line-height: 1.1; letter-spacing: .03em; }
.desc { font-size: clamp(16px, 1.75vw, 25px); font-weight: 400; line-height: 1.75; color: var(--dim); letter-spacing: .015em; }
.desc .ch, .kicker .ch { filter: none; transition-duration: .6s; }
.ch-swap-out .ch { opacity: 0 !important; transform: translateY(-.4em) scale(.96) !important; filter: blur(8px) !important; transition-delay: 0s !important; transition-duration: .35s !important; }

/* hero */
#hero { top: 13%; left: 50%; translate: -50% 0; text-align: center; width: min(1180px, 90vw); }
#hero .kicker { justify-content: center; }
#hero .kicker::before { display: none; }
#hero .title { font-size: clamp(30px, 5.2vw, 82px); margin-top: 18px; text-shadow: 0 0 60px rgba(var(--accent-rgb), .35), 0 2px 30px rgba(0, 0, 0, .6); }
#hero .rule { margin: 30px auto 26px; width: 92px; transform-origin: 50% 50%; background: linear-gradient(90deg, transparent, var(--accent), transparent); }
#hero .desc { max-width: 880px; margin: 0 auto; }

/* detail */
#detail { top: 22%; left: 7vw; width: min(620px, 44vw); }
#detail .title { font-size: clamp(28px, 3.5vw, 56px); margin-top: 16px; }
#detail .desc { font-size: clamp(16px, 1.75vw, 25px); }

/* surface (glass card) */
#surface {
  right: 6vw; bottom: 11%; width: min(640px, 46vw); padding: clamp(24px, 2.6vw, 42px);
  border-radius: 28px; background: linear-gradient(160deg, rgba(14, 20, 40, .62), rgba(6, 9, 20, .5));
  border: 1px solid rgba(var(--accent-rgb), .28); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .55), 0 0 60px rgba(var(--accent-rgb), .12), inset 0 1px 0 rgba(255, 255, 255, .08);
  opacity: 0; translate: 0 50px; transition: opacity .9s var(--ease), translate 1.1s var(--ease), visibility 0s linear .9s;
}
#surface.on { opacity: 1; translate: 0 0; transition-delay: .1s, .1s, 0s; }
#surface .rule { margin: 20px 0; }
#surface .btn { margin-top: 28px; }

/* ---------- HUD ---------- */
.hud-note { position: fixed; z-index: 11; left: clamp(18px, 3.4vw, 52px); bottom: 72px; display: flex; flex-direction: column; gap: 4px; font: 400 10px var(--mono); letter-spacing: .3em; color: var(--faint); }
.hud-note span:first-child { color: rgba(var(--accent-rgb), .9); }
#hud-chapter { display: none !important; position: fixed; z-index: 11; left: clamp(18px, 3.4vw, 52px); top: 50%; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; gap: 12px; font: 500 12px var(--mono); letter-spacing: .2em; color: var(--dim); }
#hud-chapter i { width: 1px; height: 64px; background: linear-gradient(var(--accent), transparent); }
#hud-no { font-size: 22px; color: #fff; text-shadow: 0 0 18px var(--accent); }
#stage-rail { position: fixed; z-index: 11; right: clamp(16px, 2.4vw, 40px); top: 24%; display: flex; flex-direction: column; gap: 22px; align-items: flex-end; }
#stage-rail button { display: flex; align-items: center; gap: 14px; background: none; border: 0; color: var(--faint); font: 400 10px var(--mono); letter-spacing: .2em; cursor: pointer; transition: color .3s; }
#stage-rail button span { opacity: 0; translate: 10px 0; transition: opacity .35s, translate .5s var(--ease); white-space: nowrap; }
#stage-rail button:hover span, #stage-rail button.on span { opacity: 1; translate: 0 0; }
#stage-rail button i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; transition: all .4s var(--ease); }
#stage-rail button.on { color: #fff; }
#stage-rail button.on i { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 14px var(--accent), 0 0 0 5px rgba(var(--accent-rgb), .2); }

/* side click zones */
.side-btn { position: fixed; z-index: 11; background: none; border: 0; border-radius: 50%; padding: 0; transition: opacity .3s, visibility .3s; }
.side-btn.hidden { opacity: 0; visibility: hidden; pointer-events: none; }

/* scroll hint */
#scroll-hint { position: fixed; z-index: 11; right: clamp(16px, 2.4vw, 40px); bottom: 70px; display: flex; flex-direction: column; align-items: center; gap: 12px; background: none; border: 0; color: var(--dim); cursor: pointer; transition: opacity .4s, visibility .4s; }
#scroll-hint.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
#scroll-hint .txt { font: 400 10px var(--mono); letter-spacing: .4em; writing-mode: vertical-rl; }
#scroll-hint .mouse { width: 24px; height: 40px; border: 1px solid rgba(238, 243, 251, .5); border-radius: 14px; position: relative; }
#scroll-hint .mouse i { position: absolute; left: 50%; top: 8px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent); animation: wheel 1.8s var(--ease) infinite; }
@keyframes wheel { 0% { opacity: 0; translate: 0 -4px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 0 14px; } }

/* planet dock */
#planet-menu {
  position: fixed; left: 50%; bottom: 62px; translate: -50% 0; z-index: 12; display: flex; gap: 6px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: rgba(8, 12, 26, .5);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transition: opacity .4s, visibility .4s, translate .6s var(--ease);
}
#planet-menu.hidden { opacity: 0; visibility: hidden; pointer-events: none; translate: -50% 20px; }
#planet-menu button { position: relative; display: flex; align-items: center; gap: 0; padding: 4px; border: 0; border-radius: 999px; background: none; cursor: pointer; color: var(--dim); font: 500 13px var(--serif); letter-spacing: .12em; transition: background .4s, color .3s, gap .5s var(--ease), padding .5s var(--ease); }
#planet-menu button .lbl { max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .6s var(--ease), opacity .4s; }
#planet-menu button:hover { color: #fff; }
#planet-menu button.active { color: #fff; gap: 10px; padding-right: 18px; background: rgba(var(--accent-rgb), .18); box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 26px rgba(var(--accent-rgb), .25); }
#planet-menu button.active .lbl, #planet-menu button:hover .lbl { max-width: 220px; opacity: 1; }
#planet-menu button:not(.active):hover { gap: 8px; padding-right: 14px; }
.orb {
  position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--tex) 0 0 / auto 100% repeat-x;
  animation: orbspin 24s linear infinite;
  box-shadow: inset -9px -5px 12px rgba(0, 0, 0, .85), inset 3px 2px 6px rgba(255, 255, 255, .28), 0 0 12px rgba(var(--c), .55);
}
.orb::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; box-shadow: inset 0 0 8px rgba(var(--c), .9); opacity: .55; }
@keyframes orbspin { to { background-position: -68px 0; } }

/* ---------- responsive ---------- */
@media (max-width: 1100px) { #hud-chapter, .hud-note { display: none; } }
@media (max-width: 900px) {
  #hero { top: 15%; }
  #detail { left: 6vw; right: 6vw; width: auto; top: auto; bottom: 18%; }
  #surface { right: 5vw; left: 5vw; width: auto; bottom: 16%; padding: 22px; }
  #stage-rail, .side-btn { display: none; }
  #scroll-hint { right: 14px; bottom: 120px; }
  #scroll-hint .txt { display: none; }
  #planet-menu { bottom: 74px; max-width: 96vw; }
  #planet-menu button.active .lbl { max-width: 100px; font-size: 12px; }
}
@media (max-width: 520px) { #planet-menu button.active .lbl { max-width: 0; } #planet-menu button.active { padding-right: 4px; } }
/* phone landscape: very little height, so shrink type and put text beside the planet like desktop */
@media (orientation: landscape) and (max-height: 560px) {
  #hero { top: calc(54px + env(safe-area-inset-top, 0px)); width: min(980px, 84vw); }
  #hero .title { font-size: clamp(22px, 4.2vw, 36px); margin-top: 8px; }
  #hero .rule { margin: 12px auto 12px; }
  #hero .desc { font-size: 13px; line-height: 1.65; }
  #detail { left: 6vw; right: auto; width: min(480px, 46vw); top: 22%; bottom: auto; }
  #surface { left: auto; right: 4vw; width: min(520px, 54vw); bottom: 52px; padding: 18px 20px; border-radius: 20px; }
  #surface .rule { margin: 10px 0; } #surface .btn { margin-top: 14px; }
  #detail .title { font-size: clamp(20px, 3.4vw, 30px); margin-top: 8px; }
  .overlay .desc { font-size: 13px; line-height: 1.65; }
  .overlay .rule { margin: 10px 0 12px; }
  #planet-menu { bottom: 46px; padding: 5px 7px; }
  #planet-menu .orb { width: 26px; height: 26px; }
  #scroll-hint { display: none; }
}

/* ---------- state helpers ---------- */
.overlay:not(.on) .ch { transition-delay: 0s !important; transition-duration: .3s !important; }
#hero.swapping .kicker { opacity: 0; translate: 0 -10px; transition-delay: 0s; }
body.no-webgl { background: radial-gradient(ellipse at 50% 120%, #1b3a6b 0, #04060d 60%); }
body.no-webgl #loader { display: none; }
body.no-webgl .overlay { position: absolute; }