/**
 * 연출 공용층(fx) 3/3: 흐름 - 패럴랙스 · 첫 화면 배경 · 단계 연결선 빛 · 스크롤 진행선 · 맥박 · 마키 · 숫자 · 입장 막
 *  + 화면 밖 멈춤 · 폰 규칙 · 동작 줄이기.
 */

/* ── 패럴랙스(FxParallax): 구동기가 --nxfx-py 를 넣는다(PC 만) ────── */
.nxfx-plx {
  transform: translate3d(0, var(--nxfx-py, 0px), 0);
  will-change: transform;
}

/* ── 첫 화면 배경(FxHeroBg): 느린 확대 + 패럴랙스 + 어두운 층 두 겹 ── */
.nxfx-hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background-color: var(--nx-deep, var(--foreground));
}
.nxfx-hero-bg__plx {
  position: absolute;
  inset: -9% 0;
  transform: translate3d(0, var(--nxfx-py, 0px), 0);
  will-change: transform;
}
.nxfx-hero-bg__zoom {
  position: absolute;
  inset: 0;
}
.nxfx-hero-bg__zoom > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--nxfx-focal, 50% 50%);
}
html.nx-js .nxfx-hero-bg--drift .nxfx-hero-bg__zoom {
  animation: nxfxKen 24s ease-in-out infinite alternate;
}
@keyframes nxfxKen {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to { transform: scale(1.12) translate3d(-1.4%, -1.2%, 0); }
}
.nxfx-hero-bg__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--nx-deep, var(--foreground)) 62%, transparent) 0%,
    color-mix(in srgb, var(--nx-deep, var(--foreground)) 34%, transparent) 42%,
    color-mix(in srgb, var(--nx-deep, var(--foreground)) 82%, transparent) 100%
  );
}
.nxfx-hero-bg__scrim--b {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, color-mix(in srgb, var(--nx-deep, var(--foreground)) 70%, transparent) 100%),
    radial-gradient(60% 50% at 18% 90%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%);
  opacity: 0.85;
}
html.nx-js .nxfx-hero-bg--drift .nxfx-hero-bg__scrim--b {
  animation: nxfxScrim 10s ease-in-out infinite;
}
@keyframes nxfxScrim {
  0%, 100% { opacity: 0.62; }
  50% { opacity: 1; }
}

/* ── 단계 연결선(FxSteps): 칸 사이 선을 따라 빛이 달린다 ──────────── */
.nxfx-steps {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.nxfx-steps__item {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.nxfx-steps__item > * {
  flex: 1 1 auto;
}
.nxfx-link {
  position: relative;
  flex: none;
  align-self: center;
  width: 1px;
  height: 30px;
  background: var(--nxfx-line);
}
.nxfx-link::before,
.nxfx-link::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--nxfx-light);
  box-shadow: var(--nxfx-light-glow);
}
.nxfx-link::before { top: -2.5px; }
.nxfx-link::after { bottom: -2.5px; }
.nxfx-link > i {
  position: absolute;
  inset: 0 -1px;
  overflow: hidden;
}
.nxfx-link > i::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(180deg, transparent, var(--nxfx-light), transparent);
  opacity: 0;
}
html.nx-js .nxfx-link > i::after {
  opacity: 1;
  animation: nxfxLinkY 2.8s linear infinite;
  animation-delay: calc(var(--nxfx-i, 0) * 0.7s);
}
@keyframes nxfxLinkY {
  0% { transform: translate3d(0, -110%, 0); }
  60%, 100% { transform: translate3d(0, 160%, 0); }
}
@keyframes nxfxLinkX {
  0% { transform: translate3d(-110%, 0, 0); }
  60%, 100% { transform: translate3d(160%, 0, 0); }
}
@media (min-width: 768px) {
  .nxfx-steps {
    flex-direction: row;
  }
  .nxfx-steps__item {
    flex: 1 1 0;
  }
  .nxfx-link {
    width: clamp(26px, 4vw, 56px);
    height: 1px;
  }
  .nxfx-link::before,
  .nxfx-link::after {
    left: auto;
    top: 50%;
    margin-left: 0;
    margin-top: -2.5px;
  }
  .nxfx-link::before { left: -2.5px; }
  .nxfx-link::after { right: -2.5px; bottom: auto; }
  .nxfx-link > i {
    inset: -1px 0;
  }
  .nxfx-link > i::after {
    width: 70%;
    height: 100%;
    background: linear-gradient(90deg, transparent, var(--nxfx-light), transparent);
  }
  html.nx-js .nxfx-link > i::after {
    animation-name: nxfxLinkX;
  }
}

/* ── 스크롤 진행선(FxTimeline): 내려가면 선이 차고 점이 켜진다 ─────── */
.nxfx-tl {
  position: relative;
  --nxfx-p: 1;
}
html.nx-js .nxfx-tl {
  --nxfx-p: 0;
}
.nxfx-tl__rail {
  position: absolute;
  left: 7px;
  top: 10px;
  bottom: 10px;
  width: 2px;
  border-radius: 2px;
  background: var(--nxfx-line);
}
.nxfx-tl__fill {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 55%, transparent), var(--accent));
  box-shadow: var(--nxfx-light-glow);
  transform-origin: 50% 0;
  transform: scaleY(var(--nxfx-p));
  will-change: transform;
}
.nxfx-tl__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nxfx-tl__item {
  position: relative;
  padding: 0 0 clamp(28px, 4vw, 52px) 44px;
}
.nxfx-tl__item:last-child {
  padding-bottom: 0;
}
.nxfx-tl__dot {
  position: absolute;
  left: 0;
  top: 0.3em;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: var(--accent);
  transition:
    transform 0.45s var(--nxfx-ease),
    background-color 0.35s var(--nxfx-ease-out),
    border-color 0.35s var(--nxfx-ease-out),
    box-shadow 0.45s var(--nxfx-ease-out);
}
html.nx-js .nxfx-tl__item:not(.nxfx-on) > .nxfx-tl__dot {
  border-color: color-mix(in srgb, var(--foreground) 26%, transparent);
  background: var(--background);
}
html.nx-js .nxfx-tl__item.nxfx-cur > .nxfx-tl__dot {
  transform: scale(1.28);
  box-shadow:
    0 0 0 5px color-mix(in srgb, var(--accent) 22%, transparent),
    0 0 20px color-mix(in srgb, var(--accent) 55%, transparent);
}
html.nx-js .nxfx-tl__body {
  transition:
    opacity 0.6s var(--nxfx-ease-out),
    transform 0.6s var(--nxfx-ease-out);
}
html.nx-js .nxfx-tl__item:not(.nxfx-seen) > .nxfx-tl__body {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.nx-js .nxfx-tl__item:not(.nxfx-on) > .nxfx-tl__body .nxfx-title {
  color: var(--nx-ink-3, inherit);
}

/* ── 맥박(FxPulse): 라벨 · 따옴표 · 점이 천천히 숨 쉰다 ───────────── */
html.nx-js .nxfx-pulse {
  animation: nxfxPulse 3.8s ease-in-out infinite;
}
@keyframes nxfxPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
.nxfx-pulse--dot {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
html.nx-js .nxfx-pulse--dot {
  animation: none;
}
.nxfx-pulse--dot::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}
html.nx-js .nxfx-pulse--dot::before {
  animation: nxfxPing 2.6s var(--nxfx-ease-out) infinite;
}
@keyframes nxfxPing {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70%, 100% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ── 마키(FxMarquee): 가게 글이 옆으로 흐른다 ───────────────────── */
.nxfx-mq {
  position: relative;
  overflow: hidden;
}
.nxfx-mq__track {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.nxfx-mq__set {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nxfx-mq__item {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: clamp(1.375rem, 3.6vw, 2.75rem);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--nx-ink-3, inherit);
  transition: color 0.4s var(--nxfx-ease-out);
}
.nxfx-mq__item::after {
  content: "";
  flex: none;
  width: 0.26em;
  height: 0.26em;
  margin: 0 0.9em;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.85;
}
.nxfx-mq--sm .nxfx-mq__item {
  font-size: clamp(1rem, 2vw, 1.25rem);
  font-weight: 600;
}
/* 스크립트가 없으면(끝 상태): 한 벌만 가운데 정렬로 */
.nxfx-mq__set[aria-hidden="true"],
.nxfx-mq__item[data-rep] {
  display: none;
}
html.nx-js .nxfx-mq {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
html.nx-js .nxfx-mq__track {
  flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  animation: nxfxMarquee var(--nxfx-speed, 34s) linear infinite;
}
html.nx-js .nxfx-mq--rev .nxfx-mq__track {
  animation-direction: reverse;
}
html.nx-js .nxfx-mq__set,
html.nx-js .nxfx-mq__set[aria-hidden="true"] {
  display: flex;
  flex-wrap: nowrap;
  flex: none;
}
html.nx-js .nxfx-mq__item[data-rep] {
  display: inline-flex;
}
@supports (-webkit-text-stroke: 1px red) {
  html.nx-js .nxfx-mq--ghost .nxfx-mq__item {
    color: transparent;
    -webkit-text-stroke: 1px color-mix(in srgb, var(--foreground) 34%, transparent);
  }
}
@media (hover: hover) {
  .nxfx-mq:hover .nxfx-mq__track {
    animation-play-state: paused;
  }
  html.nx-js .nxfx-mq .nxfx-mq__item:hover {
    color: var(--accent);
    -webkit-text-stroke-color: transparent;
  }
}
@keyframes nxfxMarquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

/* ── 숫자(FxCount): 올라간 뒤 도착 탄성 ─────────────────────────── */
.nxfx-count {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.nxfx-count.nxfx-bounce {
  animation: nxfxBounce 0.36s ease-out 1;
}
@keyframes nxfxBounce {
  0% { transform: scale(1); }
  34% { transform: scale(1.055); }
  70% { transform: scale(0.992); }
  100% { transform: scale(1); }
}

/* ── 입장 막(FxVeil): 내용 위에 얹혀 0.6초 안에 걷힌다(막지 않는다) ── */
.nxfx-veil {
  display: none;
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-veil--load,
html.nx-js .nxfx-veil--view {
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background-color: var(--background);
  color: var(--foreground);
}
html.nx-js:not(.nxfx-veil-seen) .nxfx-veil--load {
  position: fixed;
  inset: 0;
  z-index: 80;
  animation: nxfxVeil 0.6s var(--nxfx-ease-out) 1 both;
}
html.nx-js .nxfx-veil--view {
  position: absolute;
  inset: 0;
  z-index: 5;
}
html.nx-js .nxfx-veil--view.nxfx-in {
  animation: nxfxVeil 0.6s var(--nxfx-ease-out) 1 both;
}
.nxfx-veil__mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
  font-weight: 800;
  letter-spacing: 0.02em;
}
.nxfx-veil__mark::after {
  content: "";
  width: 72px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform-origin: 0 50%;
}
html.nx-js .nxfx-veil--load .nxfx-veil__mark::after,
html.nx-js .nxfx-veil--view.nxfx-in .nxfx-veil__mark::after {
  animation: nxfxVeilLine 0.34s var(--nxfx-ease-out) 1 both;
}
@keyframes nxfxVeil {
  0%, 40% { clip-path: inset(0 0 0 0); opacity: 1; }
  100% { clip-path: inset(0 0 100% 0); opacity: 0.96; visibility: hidden; }
}
@keyframes nxfxVeilLine {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ── 화면 밖 멈춤: data-nxfx-loop 가 붙은 덩어리는 보일 때만 돈다 ───── */
html.nx-js [data-nxfx-loop]:not(.nxfx-play),
html.nx-js [data-nxfx-loop]:not(.nxfx-play) *,
html.nx-js [data-nxfx-loop]:not(.nxfx-play)::before,
html.nx-js [data-nxfx-loop]:not(.nxfx-play)::after,
html.nx-js [data-nxfx-loop]:not(.nxfx-play) *::before,
html.nx-js [data-nxfx-loop]:not(.nxfx-play) *::after {
  animation-play-state: paused !important;
}

/* ── 폰(≤640px): 늘 도는 장식은 멈추고(정지 상태로 남는다) 등장 · 넘김 · 누름 반응은 남긴다 ── */
@media (max-width: 640px) {
  html.nx-js .nxfx-glow--breathe .nxfx-glow__aura::before,
  html.nx-js .nxfx-bd__aura,
  html.nx-js .nxfx-bd__cosmic,
  html.nx-js .nxfx-bd__cosmic::after,
  html.nx-js .nxfx-hero-bg--drift .nxfx-hero-bg__scrim--b,
  html.nx-js .nxfx-grad--shine,
  html.nx-js .nxfx-photo--drift .nxfx-photo__mv {
    animation: none;
  }
  .nxfx-bd__streak {
    display: none;
  }
  .nx-root {
    --nxfx-aura-inset: -22px;
    --nxfx-aura-blur: 28px;
  }
  .nx-root[data-nx-tone="dark"] {
    --nxfx-aura-inset: -30px;
    --nxfx-aura-blur: 34px;
  }
  .nxfx-bd__grid {
    background-size: 48px 48px;
  }
  .nxfx-plx,
  .nxfx-hero-bg__plx {
    transform: none;
  }
}

/* ── 동작 줄이기: 구동기가 숨기지 않지만(관문), 반복 · 호버 변형도 끈다 ─ */
@media (prefers-reduced-motion: reduce) {
  .nxfx-glow,
  .nxfx-btn,
  .nxfx-photo__mv,
  .nxfx-live--hover .hm-pcard,
  .nxfx-live--slider [data-review-card] {
    transition: none;
    transform: none !important;
  }
  .nxfx-sweep::after,
  .nxfx-live--sweep .hm-pcard::before {
    animation: none !important;
  }
  .nxfx-plx,
  .nxfx-hero-bg__plx {
    transform: none;
  }
}