/* ============================================================
 * 아이동월드 위키 · 공유 FX 레이어 (홈·웰컴 공용)
 * WebGL 오로라 · 커스텀 커서 · 3D 틸트 글레어 · 인트로 리빌
 * 모두 prefers-reduced-motion / 모바일 폴백 안전
 * ============================================================ */

/* WebGL 오로라 캔버스 — 배경 최하단(불투명), body 그라데이션을 덮음 */
#fx-canvas{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  width:100%; height:100%; display:block; opacity:0; transition:opacity 1.1s ease;
}
body.fx-gl-on #fx-canvas{ opacity:1; }
body.fx-gl-on .skyfx .blob{ opacity:0 !important; }   /* 홈: WebGL이 배경 그라데이션을 맡음 */
body.fx-gl-on .sky .aurora{ opacity:0 !important; }   /* 웰컴: 무거운 CSS 오로라 블롭 대신 WebGL이 담당 */

/* 커스텀 커서 (데스크톱 포인터 전용) */
.fx-cursor-dot,.fx-cursor-ring{
  position:fixed; top:0; left:0; z-index:9999; pointer-events:none;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0; transition:opacity .35s ease;
}
.fx-cursor-dot{ width:7px; height:7px; background:#8b6df0; }
.fx-cursor-ring{
  width:34px; height:34px; border:1.6px solid rgba(139,109,240,.7);
  transition:width .22s ease,height .22s ease,border-color .22s ease,background .22s ease,opacity .35s ease;
}
html.fx-cursor-on, html.fx-cursor-on a, html.fx-cursor-on button{ cursor:none; }
html.fx-cursor-on .fx-cursor-dot, html.fx-cursor-on .fx-cursor-ring{ opacity:1; }
.fx-cursor-ring.is-hover{ width:58px; height:58px; border-color:rgba(139,109,240,1); background:rgba(139,109,240,.08); }

/* 3D 틸트 카드 글레어 */
[data-tilt]{ will-change:transform; }
[data-tilt].is-tilting{ transition:transform .1s ease-out; }
.fx-glare{
  position:absolute; inset:0; z-index:4; pointer-events:none; opacity:0; transition:opacity .35s ease;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.55), transparent 56%);
  mix-blend-mode:soft-light;
}
.is-tilting .fx-glare{ opacity:1; }

/* 인트로 리빌 — JS 없이 CSS만으로도 자동 사라짐(안전) */
.fx-intro{
  position:fixed; inset:0; z-index:10000; display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 40%,#2a1a4a,#170e2c 70%,#0e0820);
  animation:fxIntroOut 1.5s cubic-bezier(.7,0,.25,1) .55s forwards;
}
.fx-intro__mark{
  font-family:"Noto Sans KR","Apple SD Gothic Neo",system-ui,sans-serif;
  font-size:clamp(2rem,7vw,3.4rem); font-weight:900; letter-spacing:.06em; color:#fff;
  opacity:0; animation:fxIntroMark 1.05s cubic-bezier(.2,.8,.2,1) .12s forwards;
  text-shadow:0 0 34px rgba(180,140,255,.75);
}
.fx-intro__mark .spk{ background:linear-gradient(90deg,#ffd98a,#ff9ecb); -webkit-background-clip:text; background-clip:text; color:transparent; }
@keyframes fxIntroMark{
  0%{ opacity:0; transform:translateY(16px) scale(.94); letter-spacing:.34em; filter:blur(6px); }
  55%{ opacity:1; transform:none; letter-spacing:.06em; filter:blur(0); }
  100%{ opacity:1; }
}
@keyframes fxIntroOut{
  0%,52%{ opacity:1; visibility:visible; clip-path:inset(0 0 0 0); }
  100%{ opacity:0; visibility:hidden; pointer-events:none; clip-path:inset(0 0 100% 0); }
}

/* 접근성·모바일 폴백 */
@media (prefers-reduced-motion:reduce){
  .fx-intro{ display:none; }
  #fx-canvas{ display:none; }
  .fx-cursor-dot,.fx-cursor-ring{ display:none; }
}
@media (max-width:820px), (hover:none){
  .fx-cursor-dot,.fx-cursor-ring{ display:none; }
  html.fx-cursor-on{ cursor:auto; }
}

/* 등장은 GSAP(fx.js)가 담당 → 인라인 <style>의 CSS rise 무력화 (welcomeGlow 펄스는 유지).
   fx.css가 인라인 <style> 뒤에 로드되어야 적용됨(</head> 직전 삽입). */
.masthead,.hero-banner,.book,.foot{ animation-name:none !important; }
.hero-banner.welcome{ animation:welcomeGlow 2.1s ease-in-out infinite !important; }
@media (prefers-reduced-motion:reduce){
  .hero-banner.welcome{ animation:none !important; }
}