/* 연출 — 배경 움직임과 스크롤 연동 효과
   전부 prefers-reduced-motion 을 따른다. 꺼져도 내용은 그대로 읽힌다. */

/* ══ 배경: 흐르는 빛무리 ═══════════════════════════════
   덩어리 세 개가 서로 다른 주기로 천천히 떠다닌다.
   blur 를 크게 줘서 경계가 보이지 않게 한다. */
.bg-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-aurora__blob{position:absolute;border-radius:50%;filter:blur(88px);opacity:.55;
  will-change:transform}
.bg-aurora__blob:nth-child(1){width:46vw;height:46vw;min-width:380px;min-height:380px;
  top:-14%;right:-8%;background:radial-gradient(circle,var(--accent-200),transparent 70%);
  animation:drift-a 26s var(--ease-inout) infinite alternate}
.bg-aurora__blob:nth-child(2){width:38vw;height:38vw;min-width:300px;min-height:300px;
  bottom:-18%;left:-10%;background:radial-gradient(circle,var(--violet-200),transparent 70%);
  animation:drift-b 32s var(--ease-inout) infinite alternate}
.bg-aurora__blob:nth-child(3){width:30vw;height:30vw;min-width:240px;min-height:240px;
  top:34%;left:38%;background:radial-gradient(circle,var(--green-100),transparent 70%);
  animation:drift-c 38s var(--ease-inout) infinite alternate;opacity:.4}
@keyframes drift-a{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-8%,10%,0) scale(1.14)}}
@keyframes drift-b{from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(12%,-8%,0) scale(1.1)}}
@keyframes drift-c{from{transform:translate3d(0,0,0) scale(.94)}
  to{transform:translate3d(-14%,-12%,0) scale(1.18)}}
[data-theme="dark"] .bg-aurora__blob{opacity:.2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bg-aurora__blob{opacity:.2}}

/* ══ 배경: 결 ═════════════════════════════════════════
   아주 옅은 잡티를 얹어 그라데이션의 띠(banding)를 지운다. */
.bg-grain{position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ══ 배경: 흐르는 점 격자 ══════════════════════════════ */
.bg-dots{position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(var(--line-strong) 1px,transparent 1px);
  background-size:24px 24px;opacity:.5;
  -webkit-mask-image:radial-gradient(ellipse 76% 58% at 50% 0%,#000 12%,transparent 78%);
  mask-image:radial-gradient(ellipse 76% 58% at 50% 0%,#000 12%,transparent 78%);
  animation:dots-pan 44s linear infinite}
@keyframes dots-pan{from{background-position:0 0}to{background-position:240px 240px}}

/* ══ 배경: 도는 후광 ══════════════════════════════════ */
.bg-halo{position:absolute;inset:-40%;pointer-events:none;z-index:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,var(--accent-100) 70deg,
    transparent 150deg,var(--violet-100) 230deg,transparent 320deg);
  filter:blur(70px);opacity:.5;animation:halo-spin 40s linear infinite}
@keyframes halo-spin{to{transform:rotate(1turn)}}
[data-theme="dark"] .bg-halo{opacity:.16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bg-halo{opacity:.16}}

/* ══ 글자: 한 덩어리씩 켜지기 ══════════════════════════
   스크롤 진행도에 맞춰 단어가 차례로 진해진다. JS 가 --lit 을 올린다. */
.lit{--lit:0}
.lit__w{display:inline-block;color:var(--ink-disabled);
  transition:color var(--d-3) var(--ease-inout)}
.lit__w[data-on]{color:var(--ink)}
.lit--muted .lit__w[data-on]{color:var(--ink-body)}

/* ══ 붙어서 바뀌는 장면 ════════════════════════════════
   왼쪽 설명이 넘어갈 때마다 오른쪽 화면이 바뀐다. */
.scene{position:relative}
.scene__grid{display:grid;gap:40px}
@media (min-width:1000px){
  .scene__grid{grid-template-columns:minmax(0,1fr) minmax(0,460px);gap:72px;align-items:start}
}
.scene__steps{display:flex;flex-direction:column;gap:0}
.scene__step{padding-block:14vh;opacity:.32;
  transition:opacity var(--d-4) var(--ease-inout)}
.scene__step[data-on]{opacity:1}
@media (max-width:999px){.scene__step{padding-block:32px;opacity:1}}
.scene__stage{position:sticky;top:calc(var(--nav-h) + 48px);display:grid;place-items:center}
@media (max-width:999px){.scene__stage{position:static;margin-bottom:24px}}
.scene__shot{position:absolute;inset:0;display:grid;place-items:center;
  opacity:0;transform:translateY(14px) scale(.98);
  transition:opacity var(--d-4) var(--ease-out),transform var(--d-4) var(--ease-out);
  pointer-events:none}
.scene__shot[data-on]{opacity:1;transform:none;pointer-events:auto}
.scene__frame{position:relative;width:100%;aspect-ratio:9/17;max-width:300px}

/* ══ 숫자 세기 ════════════════════════════════════════ */
.count{font-variant-numeric:tabular-nums}

/* ══ 시차 ═════════════════════════════════════════════ */
[data-parallax]{will-change:transform}

/* ══ 진행도에 물린 변형 ════════════════════════════════ */
[data-scrub]{will-change:transform,opacity}

/* ══ 가로로 흐르는 띠 ══════════════════════════════════
   세로 스크롤이 가로 이동을 민다. 구역 높이만큼 움직인다. */
.hscroll{position:relative}
.hscroll__pin{position:sticky;top:0;height:100dvh;display:flex;align-items:center;overflow:hidden}
.hscroll__track{display:flex;gap:20px;padding-inline:24px;will-change:transform}
.hscroll__card{flex:none;width:min(72vw,340px)}
@media (max-width:767px){
  .hscroll__pin{height:auto;position:static;overflow:visible}
  .hscroll__track{overflow-x:auto;scroll-snap-type:x mandatory;transform:none !important;
    scrollbar-width:none}
  .hscroll__track::-webkit-scrollbar{display:none}
  .hscroll__card{scroll-snap-align:center}
}

/* ══ 쌓이는 카드 ══════════════════════════════════════
   스크롤하면 카드가 위로 겹쳐 쌓인다. 각 카드가 조금씩 작아진다. */
.stackcards{display:flex;flex-direction:column;gap:24px}
.stackcards__item{position:sticky;top:calc(var(--nav-h) + 24px);
  transform-origin:center top;will-change:transform}
@media (max-width:767px){.stackcards__item{position:static;transform:none !important}}

/* ══ 마우스를 따라오는 빛 ══════════════════════════════ */
.spotlight{position:relative;overflow:hidden;isolation:isolate}
.spotlight::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%),
    var(--accent-soft),transparent 70%);
  opacity:0;transition:opacity var(--d-3) var(--ease-inout)}
@media (hover:hover){.spotlight:hover::before{opacity:1}}

/* ══ 올렸을 때 기울기 ══════════════════════════════════ */
[data-tilt]{transition:transform var(--d-3) var(--ease-out);transform-style:preserve-3d}

/* ══ 흐르는 띠(로고·문구) ══════════════════════════════ */
.ticker{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker__track{display:flex;gap:48px;width:max-content;animation:ticker 32s linear infinite}
.ticker:hover .ticker__track{animation-play-state:paused}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ══ 모션 축소 ════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  .bg-aurora__blob,.bg-dots,.bg-halo,.ticker__track{animation:none !important}
  .lit__w{color:var(--ink) !important}
  .scene__step{opacity:1 !important}
  .scene__shot{position:relative;opacity:1 !important;transform:none !important}
  .hscroll__pin{position:static;height:auto}
  .hscroll__track{transform:none !important;overflow-x:auto}
  .stackcards__item{position:static;transform:none !important}
  [data-parallax],[data-scrub]{transform:none !important}
}