/* 메인 첫 화면 움직임 (2026-11-05) — motion.js 가 html 에 .fx 를 붙였을 때만 적용 */
.fx .hero { position: relative; isolation: isolate; }
.fx main { overflow-x: clip; }
.hero-fx { position: absolute; top: -69px; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none; }
.hero-glow { position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(60px); opacity: .55;
  background: radial-gradient(circle, rgba(34,184,207,.55), rgba(11,116,146,.15) 55%, transparent 70%); animation: glow 7s ease-in-out infinite; }
@keyframes glow { 0%,100% { transform: scale(.9); opacity: .45; } 50% { transform: scale(1.12); opacity: .7; } }

/* 등장 */
.fx .rise { opacity: 0; transform: translateY(22px); animation: rise .9s cubic-bezier(.2,.75,.2,1) forwards; }
@keyframes rise { to { opacity: 1; transform: none; } }

/* 강조 문구: 흐르는 그라데이션 */
.fx h1 em { background: linear-gradient(90deg, var(--teal), var(--cyan), #7FE3F0, var(--cyan), var(--teal));
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; }
@keyframes shine { to { background-position: -250% 0; } }

/* 로고: 등장 후 천천히 떠 있기 + 마우스 기울임 */
.fx .hero-mark { transition: transform .25s ease-out; will-change: transform; }
.fx .hero-mark.float { animation: knot 1.6s cubic-bezier(.2,.8,.2,1) both, bob 6s ease-in-out 1.6s infinite; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }

/* 스크롤 등장 */
.fx .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.75,.2,1); }
.fx .reveal.on { opacity: 1; transform: none; }

/* 카드 위 빛 */
.fx .c-card { position: relative; overflow: hidden; }
.fx .c-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(34,184,207,.16), transparent 60%); }
.fx .c-card:hover::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .fx .rise, .fx .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .fx h1 em, .hero-glow, .fx .hero-mark.float { animation: none !important; }
  .hero-fx { display: none; }
}