/* ============================================
   ANIMATIONS — Keyframes, Scroll Reveals, Effects
   ============================================ */

/* ---- Hero Title Letter Stagger ---- */
@keyframes letterReveal {
    from {
        opacity: 0;
        transform: translateY(30px) rotateX(40deg);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0) rotateX(0deg);
        filter: blur(0);
    }
}

/* Letters stay hidden until .ready is added by JS after preloader */
.hero__title .letter {
    display: inline-block;
    opacity: 0;
}

.hero__content.ready .hero__title .letter {
    animation: letterReveal 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Generate staggered delays for up to 15 letters */
.hero__content.ready .hero__title .letter:nth-child(1) {
    animation-delay: 0.05s;
}

.hero__content.ready .hero__title .letter:nth-child(2) {
    animation-delay: 0.1s;
}

.hero__content.ready .hero__title .letter:nth-child(3) {
    animation-delay: 0.15s;
}

.hero__content.ready .hero__title .letter:nth-child(4) {
    animation-delay: 0.2s;
}

.hero__content.ready .hero__title .letter:nth-child(5) {
    animation-delay: 0.25s;
}

.hero__content.ready .hero__title .letter:nth-child(6) {
    animation-delay: 0.3s;
}

.hero__content.ready .hero__title .letter:nth-child(7) {
    animation-delay: 0.35s;
}

.hero__content.ready .hero__title .letter:nth-child(8) {
    animation-delay: 0.4s;
}

.hero__content.ready .hero__title .letter:nth-child(9) {
    animation-delay: 0.45s;
}

.hero__content.ready .hero__title .letter:nth-child(10) {
    animation-delay: 0.5s;
}

.hero__content.ready .hero__title .letter:nth-child(11) {
    animation-delay: 0.55s;
}

.hero__content.ready .hero__title .letter:nth-child(12) {
    animation-delay: 0.6s;
}

.hero__content.ready .hero__title .letter:nth-child(13) {
    animation-delay: 0.65s;
}

.hero__content.ready .hero__title .letter:nth-child(14) {
    animation-delay: 0.7s;
}

.hero__content.ready .hero__title .letter:nth-child(15) {
    animation-delay: 0.75s;
}

/* Subtitle and CTA stay hidden until .ready */
.hero__subtitle {
    opacity: 0;
}

.hero__content.ready .hero__subtitle {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 0.8s;
}

.hero__cta {
    opacity: 0;
}

.hero__content.ready .hero__cta {
    animation: fadeInUp 0.8s ease forwards;
    animation-delay: 1s;
}

/* ---- Scroll Reveal (applied by JS via Intersection Observer) ---- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

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

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.reveal {
    opacity: 0;
    transform: translateY(24px);
    transition:
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children: add .reveal-stagger to parent */
.reveal-stagger>.reveal:nth-child(1) {
    transition-delay: 0ms;
}

.reveal-stagger>.reveal:nth-child(2) {
    transition-delay: 100ms;
}

.reveal-stagger>.reveal:nth-child(3) {
    transition-delay: 200ms;
}

.reveal-stagger>.reveal:nth-child(4) {
    transition-delay: 300ms;
}

.reveal-stagger>.reveal:nth-child(5) {
    transition-delay: 400ms;
}

.reveal-stagger>.reveal:nth-child(6) {
    transition-delay: 500ms;
}

.reveal-stagger>.reveal:nth-child(7) {
    transition-delay: 600ms;
}

.reveal-stagger>.reveal:nth-child(8) {
    transition-delay: 700ms;
}

/* ---- Subtle Pulse for Hover Glows ---- */
@keyframes subtlePulse {

    0%,
    100% {
        box-shadow: var(--shadow-glow);
    }

    50% {
        box-shadow: 0 0 40px rgba(167, 139, 250, 0.25);
    }
}

.project-card:hover {
    animation: subtlePulse 2s ease-in-out infinite;
}

/* ---- Background Ambient Grid ---- */
.bg-grid {
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(var(--border-default) 1px, transparent 1px),
        linear-gradient(90deg, var(--border-default) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.4;
    pointer-events: none;
    transition: opacity var(--transition-smooth);
}

[data-theme="dark"] .bg-grid {
    opacity: 0.15;
}

/* ---- Nav scroll transition ---- */
.nav {
    transition:
        background-color var(--transition-smooth),
        border-color var(--transition-smooth),
        box-shadow var(--transition-base),
        height var(--transition-base);
}

/* ---- Typing Cursor ---- */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--purple-vivid);
    margin-left: 2px;
    vertical-align: text-bottom;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* ---- Reduced Motion ---- */
@media (prefers-reduced-motion: reduce) {

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

    .reveal {
        opacity: 1;
        transform: none;
    }

    .hero__title .letter {
        opacity: 1;
        transform: none;
    }

    .hero__subtitle,
    .hero__cta {
        opacity: 1;
    }
}