/* ══════════════════════════════════════════════════════════
   PORTFOLIO — ANIMATIONS.CSS
   Smooth, performance-first animations
   ══════════════════════════════════════════════════════════ */

/* ─── SECTION REVEAL (via IntersectionObserver in JS) ────── */
[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays via data-delay attribute (set by JS) */
[data-reveal][data-delay="50"] {
    transition-delay: 50ms;
}

[data-reveal][data-delay="100"] {
    transition-delay: 100ms;
}

[data-reveal][data-delay="150"] {
    transition-delay: 150ms;
}

[data-reveal][data-delay="200"] {
    transition-delay: 200ms;
}

[data-reveal][data-delay="250"] {
    transition-delay: 250ms;
}

[data-reveal][data-delay="300"] {
    transition-delay: 300ms;
}

[data-reveal][data-delay="400"] {
    transition-delay: 400ms;
}

/* ─── HERO SEQUENCE ─────────────────────────────────────── */
/* hero-text children stagger in automatically */
.hero-greeting {
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

.hero-name {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

.hero-role {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.xp-badge {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.6s both;
}

.hero-tagline {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.7s both;
}

.hero-cta {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.85s both;
}

.hero-social {
    animation: fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 1s both;
}

.hero-visual {
    animation: fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s both;
}

.scroll-down {
    animation: fadeUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) 1.2s both;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ─── CODE WINDOW CURSOR BLINK ──────────────────────────── */
.code-window-body pre::after {
    content: '|';
    color: var(--accent);
    animation: blink 1s step-end infinite;
    margin-left: 2px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* ─── NAV LINK ACTIVE INDICATOR ─────────────────────────── */
.nav-link {
    position: relative;
}

/* ─── SCROLL DOWN BOUNCE ────────────────────────────────── */
/* already defined in style.css via @keyframes bounce */

/* ─── STAT CARD COUNT-UP (CSS only pulse) ───────────────── */
.stat-card:nth-child(1) {
    animation: statFadeIn 0.6s ease 0.1s both;
}

.stat-card:nth-child(2) {
    animation: statFadeIn 0.6s ease 0.2s both;
}

.stat-card:nth-child(3) {
    animation: statFadeIn 0.6s ease 0.3s both;
}

.stat-card:nth-child(4) {
    animation: statFadeIn 0.6s ease 0.4s both;
}

@keyframes statFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* only fire once stat column is revealed */
.about-stats-col[data-reveal]:not(.revealed) .stat-card {
    animation: none;
    opacity: 0;
}

/* ─── BENTO CARD HOVER SHIMMER LINE ─────────────────────── */
.bento-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.6), transparent);
    transition: left 0.5s ease;
}

.bento-card:hover::after {
    left: 150%;
}

/* ─── SKILL TAG SLIDE ────────────────────────────────────── */
.skill-tag {
    animation: none;
    /* reset — fired by JS reveal */
}

/* ─── FORM SUBMIT BUTTON LOADING ────────────────────────── */
#submit-btn.loading {
    opacity: 0.75;
    pointer-events: none;
}

#submit-btn.loading .btn-label::after {
    content: '…';
}

#submit-btn.loading i {
    display: none;
}

/* ─── GAME CARD GLOW ─────────────────────────────────────── */
.game-card:hover {
    box-shadow: 0 16px 50px rgba(124, 58, 237, 0.2);
}

/* ─── REDUCED MOTION SUPPORT ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
    }

    .scroll-down {
        animation: none;
    }

    .blob {
        animation: none;
    }
}

/* ─── RESIZE ANIMATION STOPPER ───────────────────────────── */
.resize-animation-stopper * {
    animation: none !important;
    transition: none !important;
}