/* ============================================================ Premium FX — 공유 인터랙션 레이어 (의존성 0) 각 사이트 에 이 CSS + premium-fx.js 두 줄만 추가하면 적용. 대부분 opt-in(data-fx 속성) + 안전한 전역(진행바·헤더그림자·라이브프리뷰). ============================================================ */ /* 스크롤 진행바 */ .pfx-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:9999; background:linear-gradient(90deg,#C1121F,#E0483F);box-shadow:0 0 12px rgba(193,18,31,.45); transition:width .1s linear;pointer-events:none} /* 헤더 스크롤 그림자(높이변경은 사이트별 CSS에 위임) */ header{transition:box-shadow .3s ease,background-color .3s ease} header.pfx-scrolled{box-shadow:0 6px 24px rgba(0,0,0,.10)} /* 리빌(블러업) — opt-in */ [data-fx="reveal"]{opacity:0;transform:translateY(24px);filter:blur(8px); transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1),filter .8s cubic-bezier(.22,.61,.36,1)} [data-fx="reveal"].pfx-in{opacity:1;transform:none;filter:none} /* 타이핑 캐럿 */ .pfx-caret{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px; background:currentColor;animation:pfx-blink 1s steps(2) infinite} @keyframes pfx-blink{0%,50%{opacity:1}50.1%,100%{opacity:0}} /* 카드 3D 틸트 — opt-in */ [data-fx="tilt"]{transition:transform .25s cubic-bezier(.22,.61,.36,1);transform-style:preserve-3d} /* 히어로 패럴랙스 — opt-in */ [data-fx-parallax]{will-change:transform} /* 마퀴(롤링 리본) */ .pfx-marquee{overflow:hidden} .pfx-marquee-track{display:flex;align-items:center;width:max-content; animation:pfx-marquee 30s linear infinite;will-change:transform} .pfx-marquee:hover .pfx-marquee-track{animation-play-state:paused} @keyframes pfx-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* 포트폴리오 라이브 프리뷰(실배포 페이지 축소 iframe) */ .port-wrap{overflow:hidden} .port-live{position:absolute;top:0;left:0;width:400%;height:400%; transform:scale(.25);transform-origin:0 0;border:0;pointer-events:none;background:#f4f0ea} .port-live.pfx-loaded{animation:pfx-fadein .6s ease} @keyframes pfx-fadein{from{opacity:0}to{opacity:1}} /* 하이브리드: webp(img) 위에 라이브 iframe. 로드 성공(같은출처·미차단) 시에만 페이드인, 아니면 webp 유지 */ .port-live-frame{position:absolute;top:0;left:0;width:400%;height:400%; transform:scale(.25);transform-origin:0 0;border:0;pointer-events:none; opacity:0;transition:opacity .55s ease;background:transparent} .port-live-frame.pfx-live{opacity:1} @media (prefers-reduced-motion:reduce){ [data-fx="reveal"]{opacity:1;transform:none;filter:none;transition:none} .pfx-progress,.pfx-caret{display:none} .pfx-marquee-track{animation:none} [data-fx="tilt"],[data-fx-parallax]{transform:none !important} }