/* ═══════════════════════════════════════════════════════ 공통 애니메이션 시스템 - reveal 스크롤 등장 (js/animations.js 와 함께 동작) - 배경 블롭(bg-blobs), 타이틀 shimmer, 펄스 링, 아이콘 float 등 모든 색상은 테마 CSS 변수에서 파생되어 테마를 따라간다. ═══════════════════════════════════════════════════════ */ /* ───── 스크롤 등장 (reveal) ───── .js 클래스는 header.php 인라인 스크립트가 에 부여. JS를 못 쓰는 환경에서는 숨김 없이 그대로 보인다. */ .js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); } .js .reveal.in { opacity: 1; transform: none; } /* reveal 시 스텝 배지가 살짝 튀어나오는 pop 효과 */ .js .reveal .step-badge { opacity: 0; transform: scale(0.4); transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s, opacity 0.3s ease 0.25s; } .js .reveal.in .step-badge { opacity: 1; transform: scale(1); } /* ───── 둥실거리는 배경 블롭 ───── */ .bg-blobs { position: relative; } .bg-blobs::before, .bg-blobs::after { content: ''; position: absolute; border-radius: 50%; filter: blur(70px); z-index: -1; pointer-events: none; } .bg-blobs::before { width: 380px; height: 380px; top: -90px; left: -110px; background: rgba(var(--accent-pink-rgb), 0.55); animation: blobFloat 14s ease-in-out infinite; } .bg-blobs::after { width: 320px; height: 320px; bottom: -70px; right: -90px; background: rgba(var(--accent-gold-rgb), 0.3); animation: blobFloat 18s ease-in-out infinite reverse; } @keyframes blobFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(26px, -22px) scale(1.06); } } @media (max-width: 980px) { .bg-blobs::before { width: 260px; height: 260px; left: -80px; } .bg-blobs::after { width: 220px; height: 220px; right: -60px; } } @media (max-width: 440px) { .bg-blobs::before { width: 160px; height: 160px; left: -50px; } .bg-blobs::after { width: 140px; height: 140px; right: -40px; } } /* ───── 타이틀 그라데이션 shimmer (물결치듯 흐르는 텍스트) ───── 그라데이션 텍스트를 쓰는 페이지 타이틀에 공통 적용 */ .hero h1, .portal-left h1, .apply-head h2, .cal-page-header h1 { background-size: 200% auto; animation: titleShimmer 7s ease-in-out infinite; } @keyframes titleShimmer { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ───── 페이지 헤더 아이콘 float ───── */ .apply-head-icon { animation: iconFloat 3.5s ease-in-out infinite; } @keyframes iconFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* ───── CTA 버튼 펄스 링 (챗봇 cbwPulse 일반화) ───── */ .portal-status-btn, .submit-btn { position: relative; } .portal-status-btn::after, .submit-btn:not(:disabled)::after { content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(var(--accent-pink-deep-rgb), 0.55); animation: pulseRing 2.8s ease-out infinite; pointer-events: none; } @keyframes pulseRing { 0% { transform: scale(1); opacity: 0.65; } 60%, 100% { transform: scale(1.22, 1.55); opacity: 0; } } /* ───── 제출 버튼 shine sweep (호버 시 빛줄기) ───── 펄스 링(::after)이 잘리지 않도록 overflow 대신 배경 레이어로 구현. style.css 의 .submit-btn 그라데이션 배경을 shine 레이어와 함께 재정의한다. */ .submit-btn { background-image: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.35) 50%, transparent 58%), linear-gradient(135deg, var(--accent-pink-deep), var(--accent-gold)); background-size: 250% 100%, 100% 100%; background-position: -150% 0, 0 0; background-repeat: no-repeat; transition: background-position 0.7s ease, transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease; } .submit-btn:hover:not(:disabled) { background-position: 250% 0, 0 0; } /* ───── 접근성: 모션 최소화 설정 존중 ───── */ @media (prefers-reduced-motion: reduce) { .js .reveal, .js .reveal .step-badge { opacity: 1; transform: none; transition: none; } .bg-blobs::before, .bg-blobs::after, .hero h1, .portal-left h1, .apply-head h2, .cal-page-header h1, .apply-head-icon, .portal-status-btn::after, .submit-btn:not(:disabled)::after { animation: none; } .submit-btn { transition: none; } }