/* ============================================================
   미래일터 탐험대 · 애니메이션
   원칙: 모든 모션은 prefers-reduced-motion 에서 완전히 정지한다.
   ============================================================ */

@keyframes fade-up{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }
@keyframes fade-in{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pop-in{ 0%{ opacity:0; transform:scale(.86); } 60%{ transform:scale(1.04); } 100%{ opacity:1; transform:scale(1); } }
@keyframes twinkle{ 0%,100%{ opacity:.22; } 50%{ opacity:.95; } }
@keyframes float-y{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-13px); } }
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }
@keyframes orbit{ from{ transform:rotate(0) translateX(var(--r,110px)) rotate(0); }
                  to  { transform:rotate(360deg) translateX(var(--r,110px)) rotate(-360deg); } }
@keyframes pulse-ring{ 0%{ transform:scale(.82); opacity:.75; } 100%{ transform:scale(1.7); opacity:0; } }
@keyframes dash-flow{ to{ stroke-dashoffset:-220; } }
@keyframes node-blink{ 0%,72%,100%{ opacity:.25; transform:scale(1); }
                       82%{ opacity:1; transform:scale(1.45); } }
@keyframes wave-x{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes shimmer{ to{ background-position:200% 0; } }
@keyframes bob-tilt{ 0%,100%{ transform:rotate(-3deg) translateY(0); } 50%{ transform:rotate(3deg) translateY(-8px); } }
@keyframes count-pop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.13); } 100%{ transform:scale(1); } }

/* ── 스크롤 등장 (JS IntersectionObserver 가 .is-in 부착) ── */
[data-reveal]{ opacity:0; transform:translateY(20px); transition:opacity 620ms var(--ease),transform 620ms var(--ease); }
[data-reveal].is-in{ opacity:1; transform:none; }
[data-reveal][data-reveal="scale"]{ transform:scale(.94); }
[data-reveal][data-reveal="scale"].is-in{ transform:none; }
[data-reveal][data-reveal="left"]{ transform:translateX(-26px); }
[data-reveal][data-reveal="right"]{ transform:translateX(26px); }
[data-reveal][data-reveal="left"].is-in,[data-reveal][data-reveal="right"].is-in{ transform:none; }
/* 자식 순차 등장 */
[data-reveal-stagger]>*{ opacity:0; transform:translateY(18px);
  transition:opacity 560ms var(--ease),transform 560ms var(--ease); }
[data-reveal-stagger].is-in>*{ opacity:1; transform:none; }
[data-reveal-stagger].is-in>*:nth-child(1){ transition-delay:0ms; }
[data-reveal-stagger].is-in>*:nth-child(2){ transition-delay:70ms; }
[data-reveal-stagger].is-in>*:nth-child(3){ transition-delay:140ms; }
[data-reveal-stagger].is-in>*:nth-child(4){ transition-delay:210ms; }
[data-reveal-stagger].is-in>*:nth-child(5){ transition-delay:280ms; }
[data-reveal-stagger].is-in>*:nth-child(6){ transition-delay:350ms; }
[data-reveal-stagger].is-in>*:nth-child(7){ transition-delay:420ms; }
[data-reveal-stagger].is-in>*:nth-child(8){ transition-delay:490ms; }
[data-reveal-stagger].is-in>*:nth-child(n+9){ transition-delay:560ms; }

/* ── 유틸 애니메이션 클래스 ───────────────────────────── */
.a-float{ animation:float-y 6s ease-in-out infinite; }
.a-bob{ animation:bob-tilt 7s ease-in-out infinite; }
.a-spin{ animation:spin-slow 26s linear infinite; transform-origin:50% 50%; }
.a-spin-rev{ animation:spin-rev 34s linear infinite; transform-origin:50% 50%; }
.a-pop{ animation:pop-in 480ms var(--ease) both; }

/* ── 히어로 행성 SVG 씬 ───────────────────────────────── */
.scene{ width:100%; height:100%; overflow:visible; }
.scene .orbit-ring{ fill:none; stroke:rgba(255,255,255,.17); stroke-width:1.2; }
.scene .orbit-ring--dash{ stroke-dasharray:5 8; }
.scene .core{ transform-origin:center; animation:spin-slow 34s linear infinite; }
.scene .core-inner{ transform-origin:center; animation:spin-rev 22s linear infinite; }
.scene .sat{ transform-origin:center; }
.scene .flow{ stroke-dasharray:9 13; animation:dash-flow 3.4s linear infinite; }
.scene .blip{ animation:node-blink 3s ease-in-out infinite; }
.scene .blip:nth-of-type(2){ animation-delay:.25s; }
.scene .blip:nth-of-type(3){ animation-delay:.5s; }
.scene .blip:nth-of-type(4){ animation-delay:.75s; }
.scene .blip:nth-of-type(5){ animation-delay:1s; }
.scene .blip:nth-of-type(6){ animation-delay:1.25s; }
.scene .glow{ filter:blur(16px); opacity:.55; }
.scene .pulse{ transform-origin:center; animation:pulse-ring 3.2s ease-out infinite; }
.scene .pulse--2{ animation-delay:1.1s; }
.scene .pulse--3{ animation-delay:2.2s; }

/* 궤도 위성 (CSS 배치) */
.orbiter{ position:absolute; top:50%; left:50%; width:0; height:0; }
.orbiter>i{ position:absolute; display:grid; place-items:center; width:44px; height:44px;
  margin:-22px 0 0 -22px; border-radius:50%; font-size:21px; font-style:normal;
  background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(6px); animation:orbit var(--dur,26s) linear infinite; }

/* ── 카운트업 숫자 ────────────────────────────────────── */
.countup.is-done{ animation:count-pop 480ms var(--ease); }

/* ── 로딩 스켈레톤 ────────────────────────────────────── */
.skeleton{ background:linear-gradient(90deg,var(--surface-2) 25%,var(--surface) 50%,var(--surface-2) 75%);
  background-size:200% 100%; animation:shimmer 1.4s linear infinite; border-radius:var(--radius); }

/* ── 그라데이션 흐름 텍스트 ───────────────────────────── */
.grad-text{ background:linear-gradient(96deg,var(--planet),var(--planet-2) 45%,var(--planet));
  background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:shimmer 5.5s linear infinite; }

/* ── 접근성: 모션 최소화 ──────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  [data-reveal],[data-reveal-stagger]>*{ opacity:1 !important; transform:none !important; }
  .starfield i{ opacity:.6 !important; }
  /* 궤도 아이콘의 위치는 keyframes(translateX(var(--r))) 안에만 있다.
     위 전역 규칙으로 애니메이션을 끝내 버리면 transform 이 none 으로 돌아가
     4개가 히어로 중앙 한 점에 겹쳐 쌓인다. 재생만 멈춰 각자 위치에 고정한다
     (인라인 animation-delay 가 -0s/-5s/-11s/-16s 로 달라서 각도가 흩어진다). */
  .orbiter>i{
    animation-duration:var(--dur,26s) !important;
    animation-iteration-count:infinite !important;
    animation-play-state:paused !important;
  }
}