/* ===== 공용 이펙트 라이브러리 (section 10종 + text 10종) ===== */
/* 사용법: body[data-fx="fade-up"] .reveal / body[data-tx="blur"] .tx */
/* 섹션 공통 */
.reveal { will-change: opacity, transform, filter; }

/* --- 화면 전환 10종 (초기 상태) --- */
body[data-fx="fade"] .reveal { opacity: 0; transition: opacity .8s ease; }
body[data-fx="fade-up"] .reveal { opacity: 0; transform: translateY(36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="fade-down"] .reveal { opacity: 0; transform: translateY(-36px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="fade-left"] .reveal { opacity: 0; transform: translateX(48px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="fade-right"] .reveal { opacity: 0; transform: translateX(-48px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="zoom-in"] .reveal { opacity: 0; transform: scale(.92); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="zoom-out"] .reveal { opacity: 0; transform: scale(1.08); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
body[data-fx="blur"] .reveal { opacity: 0; filter: blur(12px); transform: translateY(14px); transition: opacity .8s ease, filter .8s ease, transform .8s ease; }
body[data-fx="flip"] .reveal { opacity: 0; transform: perspective(800px) rotateX(12deg) translateY(20px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
body[data-fx="slide-blur"] .reveal { opacity: 0; filter: blur(8px); transform: translateX(60px) scale(.98); transition: opacity .8s ease, filter .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
/* --- 화면 전환 도착 상태 --- */
body[data-fx] .reveal.on { opacity: 1; transform: none; filter: blur(0); }

/* --- 텍스트 10종 (hero 제목/설명 .tx) --- */
.tx { display: block; }
body[data-tx="fade-up"] .tx { opacity: 0; animation: txUp .9s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="blur"] .tx { opacity: 0; filter: blur(10px); animation: txBlur 1s ease forwards; }
body[data-tx="slide-left"] .tx { opacity: 0; transform: translateX(50px); animation: txNone .8s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="slide-right"] .tx { opacity: 0; transform: translateX(-50px); animation: txNone .8s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="zoom"] .tx { opacity: 0; transform: scale(.9); animation: txNone .8s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="flip"] .tx { opacity: 0; transform: perspective(700px) rotateX(25deg); animation: txNone .9s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="bounce"] .tx { opacity: 0; animation: txBounce 1s cubic-bezier(.2,.7,.2,1) forwards; }
body[data-tx="wave"] .tx { opacity: 0; animation: txWave 1.1s ease forwards; }
body[data-tx="shine"] .tx { background: linear-gradient(100deg, currentColor 30%, #fff 50%, currentColor 70%); background-size: 200% 100%; -webkit-background-clip: text; animation: txShine 1.6s linear forwards; }
body[data-tx="type"] .tx { overflow: hidden; white-space: nowrap; border-right: 2px solid currentColor; animation: txType 1.4s steps(40) forwards; }
@keyframes txUp { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes txBlur { to { opacity: 1; filter: blur(0); } }
@keyframes txNone { to { opacity: 1; transform: none; } }
@keyframes txBounce { 0% { opacity: 0; transform: translateY(40px); } 60% { opacity: 1; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }
@keyframes txWave { 0% { opacity: 0; transform: translateY(24px) rotate(-1.5deg); } 50% { opacity: 1; transform: translateY(-6px) rotate(1deg); } 100% { opacity: 1; transform: none; } }
@keyframes txShine { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@keyframes txType { from { width: 0; opacity: 1; } to { width: 100%; opacity: 1; } }
/* 미리보기 박스 */
.fx-preview { border: 1px dashed #98a2b3; border-radius: 10px; padding: 18px; margin-top: 10px; background: #f8fafc; overflow: hidden; }

/* 페이지 전환 도착 플래시 */
.flash { animation: secFlash 1.3s ease; border-radius: 18px; }
@keyframes secFlash {
  0% { box-shadow: 0 0 0 0 rgba(46,144,250,.55); }
  40% { box-shadow: 0 0 0 10px rgba(46,144,250,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,144,250,0); }
}

/* ===== Bridge 수집 패턴 (2026-10 수집: 377/288/356/75) ===== */
/* 1) 고정 배경 패럴랙스: 텍스트는 스크롤되고 배경은 고정 → 슬라이드처럼 보임 */
.parallax-fixed { background-attachment: fixed; background-size: cover; background-position: center; }
@media (max-width: 960px) { .parallax-fixed { background-attachment: scroll; } }
/* 2) 거대 배경 텍스트 (뮤지엄 back-text형) */
.back-text { position: relative; overflow: hidden; }
.back-text::before { content: attr(data-back); position: absolute; left: 50%; top: 8px; transform: translateX(-50%); font-size: clamp(60px, 12vw, 160px); font-weight: 900; letter-spacing: -2px; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(127,140,160,.35); pointer-events: none; }
/* 3) 메뉴 밑줄 슬라이드 (underline_dash형) */
.u-dash { position: relative; }
.u-dash::after { content: ''; position: absolute; left: 50%; bottom: -4px; width: 100%; height: 2px; background: currentColor; transform: translateX(-50%) scaleX(0); transition: transform .3s ease; }
.u-dash:hover::after, .u-dash.on::after { transform: translateX(-50%) scaleX(1); }
/* 4) 스티키 헤더 투명→불투명 (스크롤 시 .scrolled 토글, JS가 부여) */
header.sticky-trans { transition: background .35s ease, box-shadow .35s ease; }
header.sticky-trans.scrolled { background: rgba(8,12,24,.94) !important; box-shadow: 0 8px 28px rgba(0,0,0,.35); backdrop-filter: blur(12px); }
/* 5) 이미지 줌 호버 (오버레이+1.05 확대) */
.zoom-hover { overflow: hidden; position: relative; }
.zoom-hover img { transition: transform .45s ease; display: block; width: 100%; }
.zoom-hover:hover img { transform: scale(1.05); }
.zoom-hover::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,.28); opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.zoom-hover:hover::after { opacity: 1; }
/* 6) 페이지 진입 페이드 (ajax_fade형) */
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.page-fade { animation: pageIn .5s ease; }
/* 7) 맨 위로 버튼 */
#top { transition: opacity .3s ease, transform .3s ease; }
#top.show { display: block !important; }