/**
 * 섹션 업그레이드 실험판 - 연출 공용층(fx) 1/3: 색 토큰 · 등장 · 사진 · 빛 쓸림.
 *
 * 기준 사이트(www.iadplus.kr · 99752)의 움직임과 빛을 한 벌로 옮긴 것이다.
 *  · 모든 클래스는 `nxfx-` 로 시작한다. 래퍼 밖으로는 아무 효과도 내지 않는다.
 *  · 색은 사이트 토큰(--foreground · --background · --accent · --card · --muted · --cta-ink)을
 *    color-mix() 로 섞어서만 만든다. 흰색 · 검정 · 임의 hex 를 박지 않는다(마스크의 #000 은 색이 아니라 가림값).
 *  · 숨김 · 무한 반복은 전부 `html.nx-js` 일 때만 걸린다.
 *    → still=1 · 동작 줄이기 · 스크립트 실패면 곧바로 '끝 상태'가 보인다.
 *  · 밝은 테마 = 색 띤 면 · 테두리 색 변화 · 색 그림자 · 움직임 / 어두운 테마 = 빛(광채 · 스크린 블렌드).
 *    값은 아래 토큰 한 자리에서만 가른다.
 */

/* ── 색 · 세기 토큰(밝은 테마 기본) ─────────────────────────────── */
.nx-root {
  --nxfx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --nxfx-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --nxfx-c: var(--accent);

  --nxfx-surface: var(--card, var(--background));
  --nxfx-border: color-mix(in srgb, var(--foreground) 10%, transparent);
  --nxfx-sheen-c: color-mix(in srgb, var(--accent) 8%, transparent);
  --nxfx-rest-shadow-p: 34%;

  --nxfx-aura-o: 0.3;
  --nxfx-aura-o-h: 0.66;
  --nxfx-aura-inset: -34px;
  --nxfx-aura-blur: 38px;

  --nxfx-fill-p: 11%;
  --nxfx-fill-blend: normal;
  --nxfx-edge-p: 64%;
  --nxfx-halo-p: 36%;

  --nxfx-sweep-photo: color-mix(in srgb, var(--background) 58%, transparent);
  --nxfx-sweep-surface: color-mix(in srgb, var(--accent) 17%, transparent);

  --nxfx-grid-c: color-mix(in srgb, var(--foreground) 6%, transparent);
  --nxfx-bd-aura-p: 16%;
  --nxfx-ptr-c: color-mix(in srgb, var(--accent) 12%, transparent);
  --nxfx-star: color-mix(in srgb, var(--accent) 72%, transparent);
  --nxfx-cosmic-p: 14%;

  --nxfx-title-on: color-mix(in srgb, var(--accent) 84%, var(--foreground));
  --nxfx-title-glow: 0 0 0 transparent;

  --nxfx-line: color-mix(in srgb, var(--foreground) 14%, transparent);
  --nxfx-light: var(--accent);
  --nxfx-light-glow: 0 0 0 transparent;

  --nxfx-btn-glow-o: 0.42;
  --nxfx-btn-sheen: color-mix(in srgb, var(--background) 24%, transparent);

  --nxfx-grad-a: var(--accent);
  --nxfx-grad-b: color-mix(in srgb, var(--accent) 52%, var(--foreground));
}

/* ── 어두운 테마: 같은 효과를 '빛'으로 ─────────────────────────── */
.nx-root[data-nx-tone="dark"] {
  --nxfx-surface: color-mix(in srgb, var(--foreground) 4%, var(--card, var(--background)));
  --nxfx-border: color-mix(in srgb, var(--foreground) 11%, transparent);
  --nxfx-sheen-c: color-mix(in srgb, var(--foreground) 11%, transparent);
  --nxfx-rest-shadow-p: 0%;

  --nxfx-aura-o: 0.26;
  --nxfx-aura-o-h: 0.95;
  --nxfx-aura-inset: -62px;
  --nxfx-aura-blur: 55px;

  --nxfx-fill-p: 24%;
  --nxfx-fill-blend: screen;
  --nxfx-edge-p: 78%;
  --nxfx-halo-p: 56%;

  --nxfx-sweep-photo: color-mix(in srgb, var(--foreground) 26%, transparent);
  --nxfx-sweep-surface: color-mix(in srgb, var(--foreground) 13%, transparent);

  --nxfx-grid-c: color-mix(in srgb, var(--foreground) 5.5%, transparent);
  --nxfx-bd-aura-p: 20%;
  --nxfx-ptr-c: color-mix(in srgb, var(--accent) 9%, transparent);
  --nxfx-star: color-mix(in srgb, var(--foreground) 88%, transparent);
  --nxfx-cosmic-p: 20%;

  --nxfx-title-on: var(--foreground);
  --nxfx-title-glow: 0 0 22px color-mix(in srgb, var(--accent) 46%, transparent);

  --nxfx-line: color-mix(in srgb, var(--foreground) 16%, transparent);
  --nxfx-light-glow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent);

  --nxfx-btn-glow-o: 0.5;
  --nxfx-btn-sheen: color-mix(in srgb, var(--foreground) 34%, transparent);

  --nxfx-grad-a: var(--foreground);
  --nxfx-grad-b: color-mix(in srgb, var(--accent) 58%, var(--background));
}

/* ── 등장(FxReveal) ─────────────────────────────────────────────
   숨김은 :not(.nxfx-in), 전환은 :not(.nxfx-done) 에만 건다.
   → 등장이 끝나면(.nxfx-done) 그 요소 자신의 호버 전환 · 변형이 그대로 산다. */
html.nx-js .nxfx-rv:not(.nxfx-done) {
  transition:
    opacity 0.55s var(--nxfx-ease-out) min(var(--nxfx-d, 0ms), 320ms),
    transform 0.55s var(--nxfx-ease-out) min(var(--nxfx-d, 0ms), 320ms),
    filter 0.45s var(--nxfx-ease-out) min(var(--nxfx-d, 0ms), 320ms);
  /* 차례 지연은 최대 0.32초 - 긴 목록의 끝 칸이 한참 비어 있지 않게(2026-11-12 V2) */
  will-change: opacity, transform;
}
html.nx-js .nxfx-rv:not(.nxfx-in) {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
}
html.nx-js .nxfx-rv[data-nxfx-kind="blur"]:not(.nxfx-in) {
  transform: translate3d(0, 18px, 0);
  filter: blur(10px);
}
html.nx-js .nxfx-rv[data-nxfx-kind="left"]:not(.nxfx-in) {
  transform: translate3d(-32px, 0, 0);
}
html.nx-js .nxfx-rv[data-nxfx-kind="right"]:not(.nxfx-in) {
  transform: translate3d(32px, 0, 0);
}
html.nx-js .nxfx-rv[data-nxfx-kind="scale"]:not(.nxfx-in) {
  transform: scale(0.94);
}
html.nx-js .nxfx-rv[data-nxfx-kind="fade"]:not(.nxfx-in) {
  transform: none;
}

/* ── 차례 등장(FxStagger): 직계 자식이 순서대로 ─────────────────── */
.nxfx-stag > :nth-child(1) { --nxfx-i: 0; }
.nxfx-stag > :nth-child(2) { --nxfx-i: 1; }
.nxfx-stag > :nth-child(3) { --nxfx-i: 2; }
.nxfx-stag > :nth-child(4) { --nxfx-i: 3; }
.nxfx-stag > :nth-child(5) { --nxfx-i: 4; }
.nxfx-stag > :nth-child(6) { --nxfx-i: 5; }
.nxfx-stag > :nth-child(7) { --nxfx-i: 6; }
.nxfx-stag > :nth-child(8) { --nxfx-i: 7; }
.nxfx-stag > :nth-child(9) { --nxfx-i: 8; }
.nxfx-stag > :nth-child(10) { --nxfx-i: 9; }
.nxfx-stag > :nth-child(11) { --nxfx-i: 10; }
.nxfx-stag > :nth-child(n + 12) { --nxfx-i: 11; }
html.nx-js .nxfx-stag:not(.nxfx-done) > * {
  transition:
    opacity 0.9s var(--nxfx-ease-out) calc(var(--nxfx-i, 0) * var(--nxfx-step, 110ms)),
    transform 0.9s var(--nxfx-ease-out) calc(var(--nxfx-i, 0) * var(--nxfx-step, 110ms)),
    filter 0.7s var(--nxfx-ease-out) calc(var(--nxfx-i, 0) * var(--nxfx-step, 110ms));
  will-change: opacity, transform;
}
html.nx-js .nxfx-stag:not(.nxfx-in) > * {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}
html.nx-js .nxfx-stag[data-nxfx-kind="blur"]:not(.nxfx-in) > * {
  transform: translate3d(0, 18px, 0);
  filter: blur(10px);
}
html.nx-js .nxfx-stag[data-nxfx-kind="scale"]:not(.nxfx-in) > * {
  transform: scale(0.94);
}
html.nx-js .nxfx-stag[data-nxfx-kind="left"]:not(.nxfx-in) > * {
  transform: translate3d(-32px, 0, 0);
}
html.nx-js .nxfx-stag[data-nxfx-kind="fade"]:not(.nxfx-in) > * {
  transform: none;
}

/* ── 제목 커튼(FxCurtain): 가림막이 걷히며 글이 올라온다 ─────────── */
.nxfx-curtain__in {
  position: relative;
  display: inline-block;
  max-width: 100%;
}
.nxfx-curtain__txt {
  display: block;
}
html.nx-js .nxfx-curtain:not(.nxfx-done) .nxfx-curtain__txt {
  clip-path: inset(-0.2em -0.5em -0.35em -0.5em);
  transition:
    clip-path 1s var(--nxfx-ease-out) var(--nxfx-d, 0ms),
    transform 1s var(--nxfx-ease-out) var(--nxfx-d, 0ms),
    opacity 0.5s linear var(--nxfx-d, 0ms);
  will-change: clip-path, transform;
}
html.nx-js .nxfx-curtain:not(.nxfx-in) .nxfx-curtain__txt {
  clip-path: inset(-0.2em -0.5em 100% -0.5em);
  transform: translate3d(0, 0.42em, 0);
  opacity: 0.2;
}
/* 옆으로 걷히는 판 + 그 가장자리를 따라가는 빛 줄 */
html.nx-js .nxfx-curtain[data-nxfx-wipe="side"]:not(.nxfx-in) .nxfx-curtain__txt {
  clip-path: inset(-0.2em 100% -0.35em -0.5em);
  transform: none;
  opacity: 1;
}
.nxfx-curtain__bar {
  display: none;
}
html.nx-js .nxfx-curtain[data-nxfx-wipe="side"] .nxfx-curtain__bar {
  display: block;
  position: absolute;
  inset: -0.08em 0 -0.18em 0;
  pointer-events: none;
  transform: translate3d(-100%, 0, 0);
  opacity: 0;
}
/* 빛 줄은 판의 오른쪽 끝에 선 하나로만 둔다(판 전체에 그림자를 주면 네모가 비친다). */
html.nx-js .nxfx-curtain[data-nxfx-wipe="side"] .nxfx-curtain__bar::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: -1px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(to bottom, transparent, var(--nxfx-light) 18%, var(--nxfx-light) 82%, transparent);
  box-shadow: 0 0 18px 2px color-mix(in srgb, var(--accent) 55%, transparent);
}
html.nx-js .nxfx-curtain[data-nxfx-wipe="side"].nxfx-in:not(.nxfx-done) .nxfx-curtain__bar {
  animation: nxfxWipeBar 1s var(--nxfx-ease-out) var(--nxfx-d, 0ms) 1 both;
}
@keyframes nxfxWipeBar {
  0% { transform: translate3d(-100%, 0, 0); opacity: 0; }
  12% { opacity: 1; }
  82% { opacity: 1; }
  100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

/* ── 줄별 등장(FxLines): 첫 화면 제목이 한 줄씩 올라온다 ─────────── */
.nxfx-line {
  display: block;
}
.nxfx-line__in {
  display: block;
}
html.nx-js .nxfx-lines:not(.nxfx-done) .nxfx-line {
  overflow: hidden;
  padding: 0.14em 0.06em 0.18em;
  margin: -0.14em -0.06em -0.18em;
}
html.nx-js .nxfx-lines:not(.nxfx-done) .nxfx-line__in {
  transition:
    transform 1.05s var(--nxfx-ease) calc(var(--nxfx-d, 0ms) + var(--nxfx-i, 0) * var(--nxfx-step, 130ms)),
    opacity 0.7s var(--nxfx-ease-out) calc(var(--nxfx-d, 0ms) + var(--nxfx-i, 0) * var(--nxfx-step, 130ms)),
    filter 0.8s var(--nxfx-ease-out) calc(var(--nxfx-d, 0ms) + var(--nxfx-i, 0) * var(--nxfx-step, 130ms));
  will-change: transform, opacity;
}
html.nx-js .nxfx-lines:not(.nxfx-in) .nxfx-line__in {
  transform: translate3d(0, 108%, 0);
  opacity: 0;
  filter: blur(6px);
}

/* ── 사진(FxPhoto): 로드 페이드 · 호버 확대 · 느린 움직임 ─────────── */
.nxfx-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  aspect-ratio: var(--nxfx-ratio, 4 / 3);
  border-radius: var(--nx-radius-sm, 16px);
  background-color: color-mix(in srgb, var(--foreground) 7%, var(--background));
}
.nxfx-photo--flush {
  border-radius: 0;
}
.nxfx-photo__mv {
  position: absolute;
  inset: 0;
  transition: transform 0.9s var(--nxfx-ease);
}
.nxfx-photo__mv > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nxfx-focal, 50% 50%);
}
html.nx-js .nxfx-photo[data-nxfx-img] .nxfx-photo__mv > img {
  transition:
    opacity 0.8s var(--nxfx-ease-out),
    transform 1.3s var(--nxfx-ease),
    filter 0.8s var(--nxfx-ease-out);
}
html.nx-js .nxfx-photo[data-nxfx-img]:not(.nxfx-loaded) .nxfx-photo__mv > img {
  opacity: 0;
  transform: scale(1.05);
  filter: blur(10px);
}
html.nx-js .nxfx-photo--drift .nxfx-photo__mv {
  animation: nxfxDrift 18s ease-in-out infinite alternate;
}
@keyframes nxfxDrift {
  from { transform: scale(1.01) translate3d(0, 0, 0); }
  to { transform: scale(1.09) translate3d(-1.2%, -1%, 0); }
}
@media (hover: hover) {
  .nxfx-photo--zoom:hover .nxfx-photo__mv,
  .nxfx-glow:hover .nxfx-photo__mv {
    transform: scale(1.055);
  }
}
.nxfx-glow:focus-within .nxfx-photo__mv {
  transform: scale(1.055);
}

/* ── 빛 쓸림(FxSweep): 빛 띠가 한 번 지나간다 ───────────────────── */
.nxfx-sweep {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  border-radius: inherit;
}
.nxfx-sweep::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 42%;
  background: linear-gradient(90deg, transparent, var(--nxfx-sweep-photo), transparent);
  transform: translate3d(-140%, 0, 0) skewX(-14deg);
  opacity: 0;
}
.nxfx-sweep--surface::after {
  background: linear-gradient(90deg, transparent, var(--nxfx-sweep-surface), transparent);
}
@media (hover: hover) {
  .nxfx-photo:hover > .nxfx-sweep::after,
  .nxfx-glow:hover .nxfx-sweep::after,
  .nxfx-btn:hover .nxfx-sweep::after,
  .nxfx-sweep-host:hover > .nxfx-sweep::after {
    animation: nxfxSweep 0.9s var(--nxfx-ease-out) 1;
  }
}
html.nx-js .nxfx-sweep--in.nxfx-in::after {
  animation: nxfxSweep 1.1s var(--nxfx-ease-out) 0.35s 1;
}
@keyframes nxfxSweep {
  0% { transform: translate3d(-140%, 0, 0) skewX(-14deg); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate3d(360%, 0, 0) skewX(-14deg); opacity: 0; }
}