/* ═══════════════════════════════════════════════════════════════════════
   스크롤 효과 — ContentsDoc/03-스크롤-효과.md 구현

   세 겹으로 되어 있고, 아래로 갈수록 안전한 쪽이다.

     1. CSS 스크롤 연동 (animation-timeline)  — 가장 부드럽다. JS 0줄
     2. IntersectionObserver                  — 1이 안 되는 브라우저에서 (Firefox 등)
     3. 아무것도 안 함                         — JS 가 안 돌면 내용이 그냥 다 보인다

   🔴 지켜야 할 것
     · 움직임은 transform 과 opacity 로만 만든다.
       top·width·height 를 건드리면 브라우저가 화면을 다시 계산해 끊긴다.
     · prefers-reduced-motion 이면 전부 끄고 최종 상태로 즉시 보여 준다.
       멀미·전정기관 질환이 있는 분에게는 실제 피해가 간다.
     · 스크롤을 가로채지 않는다. 뒤로가기·페이지 내 검색이 망가진다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 기본값 ───────────────────────────────────────────────────────────
   숫자를 여기 모아 둔다. 효과의 세기를 바꿀 때 이 값만 고치면 된다. */
:root{
  --gl-rise: 24px;                              /* 아래에서 올라오는 거리 */
  --gl-slide: 40px;                             /* 옆에서 들어오는 거리 */
  --gl-zoom: 0.94;                              /* 커지며 나타날 때 시작 배율 */
  --gl-dur: 0.7s;                               /* 지속 시간 */
  --gl-ease: cubic-bezier(0.16, 1, 0.3, 1);     /* 감속 곡선 — 현 사이트와 같은 값 */
}

/* ── 등장 효과 ────────────────────────────────────────────────────────
   .js 가 붙었을 때만 숨긴다. 자바스크립트가 안 돌면 처음부터 다 보인다 —
   화면이 비어 버리는 것이 애니메이션이 없는 것보다 훨씬 나쁘다. */
.js [data-gl]{
  opacity: 0;
  transition: opacity var(--gl-dur) var(--gl-ease),
              transform var(--gl-dur) var(--gl-ease);
  transition-delay: var(--gl-delay, 0s);
  will-change: opacity, transform;
}

.js [data-gl="rise"]  { transform: translateY(var(--gl-rise)); }
.js [data-gl="fall"]  { transform: translateY(calc(var(--gl-rise) * -1)); }
.js [data-gl="left"]  { transform: translateX(calc(var(--gl-slide) * -1)); }
.js [data-gl="right"] { transform: translateX(var(--gl-slide)); }
.js [data-gl="zoom"]  { transform: scale(var(--gl-zoom)); }
.js [data-gl="fade"]  { transform: none; }

/* 화면에 들어오면 제자리로 */
.js [data-gl].gl-in{
  opacity: 1;
  transform: none;
  /* 다 끝난 요소까지 계속 준비 상태로 두면 메모리를 붙잡는다 */
  will-change: auto;
}

/* ── 패럴랙스 ─────────────────────────────────────────────────────────
   스크롤보다 느리게 따라오는 요소. 세기는 data-gl-parallax 로 준다. */
.js [data-gl-parallax]{
  will-change: transform;
  transform: translate3d(0, var(--gl-shift, 0px), 0);
}

/* ── 읽는 진행바 ──────────────────────────────────────────────────── */
.gl-progress{
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  background: transparent; z-index: 200; pointer-events: none;
}
.gl-progress > i{
  display: block; height: 100%; width: 0;
  background: var(--accent, #ff5a1f);
  transform-origin: 0 50%;
}

/* ── 숫자 세기 ────────────────────────────────────────────────────────
   자리수가 바뀔 때 글자가 들썩이지 않게 폭을 고정한다. */
.gl-count{ font-variant-numeric: tabular-nums; }

/* ═══ CSS 스크롤 연동이 되는 브라우저 ═══════════════════════════════
   Chrome/Edge 115+ · Safari 26+ 에서 동작한다. Firefox 는 아직 플래그 뒤라
   위의 IntersectionObserver 경로로 내려간다 (2026-09 기준).

   여기서는 "화면에 들어오는 동안" 진행되는 애니메이션을 브라우저가
   직접 돌린다. 스크롤 이벤트를 받지 않으므로 훨씬 부드럽다. */
@supports (animation-timeline: view()) {
  .js.gl-css-timeline [data-gl]{
    /* JS 가 켜 준 클래스가 붙었을 때만 넘어간다 —
       두 경로가 같은 요소에 동시에 걸리면 서로 값을 덮어쓴다. */
    opacity: 1;
    transform: none;
    transition: none;
    animation: gl-appear linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  .js.gl-css-timeline [data-gl="rise"] { --gl-from-y: var(--gl-rise); }
  .js.gl-css-timeline [data-gl="fall"] { --gl-from-y: calc(var(--gl-rise) * -1); }
  .js.gl-css-timeline [data-gl="left"] { --gl-from-x: calc(var(--gl-slide) * -1); }
  .js.gl-css-timeline [data-gl="right"]{ --gl-from-x: var(--gl-slide); }
  .js.gl-css-timeline [data-gl="zoom"] { --gl-from-s: var(--gl-zoom); }

  @keyframes gl-appear{
    from{
      opacity: 0;
      transform: translate3d(var(--gl-from-x, 0), var(--gl-from-y, 0), 0)
                 scale(var(--gl-from-s, 1));
    }
    to{ opacity: 1; transform: none; }
  }
}

/* ═══ 움직임을 원하지 않는 분 ═══════════════════════════════════════
   가장 마지막에 두어 위의 모든 규칙을 덮는다. */
@media (prefers-reduced-motion: reduce){
  .js [data-gl],
  .js.gl-css-timeline [data-gl]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .js [data-gl-parallax]{ transform: none !important; }
  .gl-progress{ display: none; }
  /* 사이트 전체의 나머지 움직임도 함께 줄인다 */
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}