/* ==========================================================================
   MIRACLE AD AI — fx.css
   전 페이지 공통 인터랙션 레이어 (fx.js 와 한 쌍). html.fx 는 fx.js 가 켜졌을 때만 붙습니다.
   ========================================================================== */

/* ---------- 커서를 따라다니는 빛 ---------- */
.fx-light {
  position: fixed; left: 0; top: 0; z-index: 140; width: 760px; height: 760px; margin: -380px 0 0 -380px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .03) 34%, transparent 64%);
  mix-blend-mode: screen; pointer-events: none; opacity: 0; transition: opacity .8s; will-change: transform;
}
.fx-light.is-on { opacity: 1; }
html[data-story-mood="alert"] .fx-light { background: radial-gradient(circle, rgba(var(--danger-rgb), .14) 0%, rgba(var(--danger-rgb), .04) 34%, transparent 64%); }

/* ---------- 버튼 글자 굴림 ---------- */
.roll { display: inline-grid; overflow: hidden; vertical-align: bottom; padding-block: .18em; margin-block: -.18em; }
.roll > span { grid-area: 1 / 1; transition: transform .65s var(--ease); }
.roll__b { transform: translateY(125%); }
.btn:hover .roll__a { transform: translateY(-125%); }
.btn:hover .roll__b { transform: none; }

/* ---------- 헤더 메뉴 알약 ---------- */
.hd__nav ul.has-pill { position: relative; isolation: isolate; }
.hd__pill { position: absolute; z-index: -1; left: 0; top: 50%; height: 40px; margin-top: -20px; border-radius: 999px; background: rgba(255, 255, 255, .1); opacity: 0; pointer-events: none; transition: transform .55s var(--ease-out), width .55s var(--ease-out), opacity .3s; }
.hd__pill.is-on { opacity: 1; }
.hd__nav ul.has-pill a.is-active { background: transparent; }

/* ---------- 구분선이 그어짐 ---------- */
html.fx .sec--line { border-top-color: transparent; }
html.fx .sec--line::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, rgba(255, 255, 255, .5), var(--line) 30%, var(--line)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.8s var(--ease); }
html.fx .sec--line.is-in::before { transform: scaleX(1); }

/* ---------- 섹션 윤곽선 번호 ---------- */
.fx-ghost {
  position: absolute; z-index: 0; right: max(var(--gutter), (100vw - var(--maxw)) / 2); top: clamp(16px, 4vw, 64px);
  font-family: var(--font-display); font-size: clamp(120px, 21vw, 360px); font-weight: 700; line-height: .8; letter-spacing: -.07em;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .11); pointer-events: none; user-select: none; will-change: transform;
}
.has-ghost > .container { position: relative; z-index: 1; }
.has-ghost { overflow: hidden; overflow: clip; }
@media (max-width: 760px) { .fx-ghost { -webkit-text-stroke-color: rgba(255, 255, 255, .05); } }

/* ---------- 위젯 테두리를 도는 빛줄기 ---------- */
@property --fx-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.fx .widget { position: relative; }
html.fx .widget::before, html.fx .contact__form::before {
  content: ''; position: absolute; inset: -1px; z-index: 1; padding: 1px; border-radius: inherit; pointer-events: none;
  background: conic-gradient(from var(--fx-a), transparent 0 76%, rgba(255, 255, 255, .95) 92%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: fxBeam 5.5s linear infinite;
}
@keyframes fxBeam { to { --fx-a: 360deg; } }

/* ---------- 푸터 워드마크 : 손전등 (fx.js initWordmark) ---------- */
.ft__word.is-torch { position: relative; }
.ft__word.is-torch > span:not(.ai) { color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .17); }
.ft__word-lit {
  position: absolute; inset: 0; display: flex; justify-content: center; gap: .16em; padding-bottom: .06em; color: #fff; pointer-events: none;
  -webkit-mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 58%, transparent 100%);
  mask-image: radial-gradient(circle var(--r, 0px) at var(--mx, 50%) var(--my, 50%), #000 0%, #000 58%, transparent 100%);
}
.ft__word-lit span { display: inline-block; }

/* ---------- 흘러가는 흰 점 (지표 밴드 · 하단 CTA 카드) ---------- */
.fx-dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stats > .fx-dust { z-index: 0; }
.stats > .container { position: relative; z-index: 1; }
.cta-band__card > .fx-dust { z-index: -1; }

/* ---------- 지표 밴드 ---------- */
.stat__value strong { display: inline-block; transform-origin: 0 100%; }

@media (prefers-reduced-motion: reduce) {
  .fx-light, .fx-ghost { display: none; }
}