/* ─────────────────────────────────────────────────────────────
   피오디맨 — 모션·글라스 레이어 (2026-10-05)
   근거: 넥소 사이트(NEXO_page) 톤 — 흰 캔버스, 애플식 유리, ease(.22,1,.36,1)
   원칙: 색은 기존 BI(네이비 #0F206F · 골드 #FCB502) 그대로. 모션만 얹는다.
         글자는 움직이는 동안에도 읽혀야 한다 — 이동 거리는 짧게, 블러는 얕게.
         prefers-reduced-motion 이면 전부 끈다(맨 아래).
   ───────────────────────────────────────────────────────────── */

:root {
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);
  --dur: .95s;
  --dur-fast: .3s;
  --rise: 52px;      /* 올라오는 거리 (예전 18px) */
  --blur: 14px;      /* 또렷해지기 전 흐림 (예전 6px) */
  --glass-bg: rgba(255, 255, 255, .72);
  --glass-line: rgba(255, 255, 255, .66);
  --glass-shadow: 0 1px 2px rgba(12, 10, 9, .04), 0 12px 32px -12px rgba(12, 10, 9, .14);
}

/* ── 1. 스크롤 등장 ──────────────────────────────────
   data-reveal 이 붙은 요소는 화면에 들어올 때 올라오며 또렷해진다. */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  filter: blur(var(--blur));
  transition:
    opacity var(--dur) var(--ease) var(--reveal-delay, 0s),
    transform var(--dur) var(--ease) var(--reveal-delay, 0s),
    filter var(--dur) var(--ease) var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
[data-reveal="right"] { transform: translate3d(-44px, 0, 0); }
[data-reveal="scale"] { transform: translate3d(0, 40px, 0) scale(.93); }
[data-reveal].in { opacity: 1; transform: none; filter: none; }

/* 제목 줄 단위 마스크 등장 — 받침·꼬리가 잘리지 않게 위아래로 여유를 준다 */
[data-reveal].is-lined { opacity: 1; transform: none; filter: none; }
.rv-line { display: block; overflow: hidden; padding-block: .26em; margin-block: -.26em; }
.rv-line > i {
  display: block;
  font-style: inherit;
  transform: translate3d(0, 104%, 0) skewY(2.5deg);
  transition: transform 1.05s var(--ease) var(--reveal-delay, 0s);
}
.in > .rv-line > i { transform: none; }
.in > .rv-line > i, .rv-line.in > i { transform: none; }

/* ── 2. 애플식 유리 ──────────────────────────────────── */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid var(--glass-line);
  box-shadow: var(--glass-shadow);
  border-radius: var(--r-card, 16px);
}
.glass-dark {
  background: rgba(18, 18, 18, .56);
  -webkit-backdrop-filter: saturate(160%) blur(18px);
  backdrop-filter: saturate(160%) blur(18px);
  border: 1px solid rgba(255, 255, 255, .14);
  color: #fff;
}

/* 헤더 — 처음엔 투명, 스크롤하면 유리 */
.site-header {
  transition: background-color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft),
              backdrop-filter var(--dur-fast) var(--ease-soft);
}
.site-header.is-glass {
  background: rgba(255, 255, 255, .78);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: rgba(230, 230, 231, .9);
  box-shadow: 0 1px 24px -16px rgba(12, 10, 9, .5);
}

/* 스크롤 진행 바 (헤더 아래 얇은 골드 선) */
.scroll-progress {
  position: fixed; inset: 0 auto auto 0;
  height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--navy, #0F206F), var(--gold, #FCB502));
  z-index: 60; pointer-events: none;
}

/* ── 3. 히어로 — 빛 번짐과 시차 ───────────────────────── */
.hero { position: relative; isolation: isolate; overflow: clip; }
.hero::before {
  content: ''; position: absolute; z-index: -1;
  inset: -22% -10% auto -18%; height: 78%;
  background:
    radial-gradient(42% 56% at 22% 32%, rgba(15, 32, 111, .14), transparent 68%),
    radial-gradient(34% 48% at 78% 18%, rgba(252, 181, 2, .16), transparent 70%);
  filter: blur(18px);
  animation: podDrift 18s var(--ease-soft) infinite alternate;
  pointer-events: none;
}
@keyframes podDrift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5%, 2%, 0) scale(1.06); }
}
[data-parallax] { will-change: transform; transform: translate3d(0, var(--py, 0px), 0); }

/* ── 4. 카드 — 들어올리기 + 포인터 스포트라이트 ────────── */
.card, .case-card, .t-card, .g-card, .opt-card, .q-card {
  position: relative;
  transition: transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.card::after, .case-card::after, .t-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(15, 32, 111, .08), transparent 62%);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-soft); pointer-events: none;
}
@media (hover: hover) {
  .card:hover, .case-card:hover, .t-card:hover, .g-card:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 2px 4px rgba(12, 10, 9, .04), 0 18px 40px -22px rgba(12, 10, 9, .4);
    border-color: rgba(15, 32, 111, .28);
  }
  .card:hover::after, .case-card:hover::after, .t-card:hover::after { opacity: 1; }
  /* 카드 안 사진은 아주 조금만 — 글자는 그대로 둔다 */
  .card img, .case-card img, .t-card img { transition: transform .7s var(--ease); }
  .card:hover img, .case-card:hover img, .t-card:hover img { transform: scale(1.035); }
}

/* ── 5. 버튼 — 빛 스침 ───────────────────────────────── */
.btn { position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease-soft); }
.btn::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: -120%; width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg); pointer-events: none;
}
@media (hover: hover) {
  .btn:hover { transform: translate3d(0, -1px, 0); }
  .btn-primary:hover::before, .btn-dark:hover::before { animation: podShine .78s var(--ease) 1; }
}
.btn:active { transform: translate3d(0, 0, 0) scale(.99); }
@keyframes podShine { to { left: 130%; } }

/* 밑줄 쓸기 — 텍스트 링크 */
@media (hover: hover) {
  .lnk, .sec-more { background-image: linear-gradient(var(--navy, #0F206F), var(--navy, #0F206F));
    background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size .36s var(--ease); }
  .lnk:hover, .sec-more:hover { background-size: 100% 1px; }
}

/* ── 6. 숫자 올라오기 ────────────────────────────────── */
[data-count] { font-variant-numeric: tabular-nums; }

/* ── 7. 다크 밴드 안의 유리 패널 ──────────────────────── */
.band-dark .glass, .pkg-band .glass { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #fff; }

/* ── 8. 모션 줄이기 설정이면 전부 정지 ─────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], .rv-line > i { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .hero::before { animation: none; }
  .card:hover, .case-card:hover, .t-card:hover, .g-card:hover, .btn:hover { transform: none; }
  .btn::before { display: none; }
  [data-parallax] { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ── 9. 유리 패널 미세 조정 ──────────────────────────── */
.pod-facts { padding: 18px 20px; margin-top: 28px; }
.hero .facts.glass > div { border-color: rgba(230, 230, 231, .7); }
.pkg-band .pkg-steps-grid > div.glass, .band-dark .pkg-steps-grid > div.glass { padding: 18px; }
.hero .media img { border-radius: var(--r-card, 16px); }

/* ── 10. 사진 등장 — 가림막이 걷히면서 살짝 줄어든다 (2026-10-05 세기 상향) ──
   글보다 사진이 느리게 자리를 잡아야 화면이 차분하게 읽힌다. */
[data-img] {
  opacity: 0;
  transform: scale(1.09);
  clip-path: inset(0 0 100% 0);
  transition:
    opacity 1.15s var(--ease) var(--reveal-delay, 0s),
    transform 1.45s var(--ease) var(--reveal-delay, 0s),
    clip-path 1.15s var(--ease) var(--reveal-delay, 0s);
  will-change: transform, clip-path;
}
[data-img].in { opacity: 1; transform: none; clip-path: inset(0 0 0 0); }
[data-img="side"] { clip-path: inset(0 100% 0 0); transform: scale(1.06); }
[data-img="side"].in { clip-path: inset(0 0 0 0); }
picture[data-img], figure[data-img] { display: block; }

/* 히어로 빛 번짐도 크게 */
.hero::before { filter: blur(26px); animation-duration: 13s; }
@keyframes podDrift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(5%, 4%, 0) scale(1.14); }
}

/* 카드 들어올리기 강화 */
@media (hover: hover) {
  .card:hover, .case-card:hover, .t-card:hover, .g-card:hover {
    transform: translate3d(0, -10px, 0);
    box-shadow: 0 4px 10px rgba(12, 10, 9, .05), 0 32px 60px -28px rgba(12, 10, 9, .5);
  }
  .card:hover img, .case-card:hover img, .t-card:hover img { transform: scale(1.07); }
}

@media (prefers-reduced-motion: reduce) {
  [data-img] { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
}