/* ── FOUC 방지 ── */
html, body { font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif; }
body {
    word-break: keep-all;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.loaded { opacity: 1; }

/* ── 포커스 표시 ── */
:focus-visible {
    outline: 2px solid #00FFA3;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── 애니메이션: 그라데이션 흐름 ── */
@keyframes gradient-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 0% 200%; }
}

/* ── 애니메이션: Live 도트 ── */
@keyframes live-dot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.65); }
    50%      { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
}
.live-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #ef4444;
    margin-right: 6px;
    animation: live-dot 1.6s ease-in-out infinite;
}

/* ── 애니메이션: 등장 ── */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
.scroll-content { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.scroll-content.animate { opacity: 1; transform: translateY(0); }

/* ── 토스트 알림 ── */
.toast {
    position: fixed; bottom: 2rem; left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: #231F35;
    border: 1px solid rgba(255,255,255,0.12);
    color: #E0E3FF;
    padding: 0.875rem 1.5rem;
    border-radius: 10px;
    font-size: 0.9rem;
    z-index: 100;
    opacity: 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.4);
    transition: all 0.3s ease;
    pointer-events: none;
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }

/* Tailwind가 data URL을 생성하지 않으므로 background-image는 인라인 style로 처리 */

/* ── 히어로 스파클 ── */
#sparkleCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* ── 히어로 타이핑 커서 (브랜드 그라데이션) ── */
.type-cursor {
    display: inline-block;
    margin-left: 0.05em;
    font-weight: 300;
    background: linear-gradient(135deg, #5865F2 0%, #7C3AED 50%, #00FFA3 100%);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: type-blink 0.9s steps(1) infinite, type-gradient-shift 4s ease-in-out infinite;
}
.type-cursor.hide { display: none; }
@keyframes type-blink {
    50% { opacity: 0; }
}
@keyframes type-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ── 히어로 리빌 (타이핑 끝난 후 표시) ── */
.hero-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    pointer-events: none;
}
.hero-reveal.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}