/* ==========================================
   ANIMATION SYSTEM
   Scroll-in, page transitions, typewriter,
   3D tilt, counter animations
   ========================================== */

/* ------------------------------------------
   SCROLL-IN ANIMATIONS
   ------------------------------------------ */
.scroll-animate {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    transition-delay: calc(var(--stagger, 0) * 1ms);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------
   NAVBAR SLIDE-IN
   ------------------------------------------ */
.cyber-navbar {
    animation: navSlideIn 0.5s ease-out both;
}

@keyframes navSlideIn {
    from {
        opacity: 0;
        transform: translateY(-100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------
   PAGE CONTENT FADE-IN
   ------------------------------------------ */
.page-enter {
    animation: contentFadeIn 0.6s ease-out 0.15s both;
}

@keyframes contentFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------
   FOOTER FADE-IN
   ------------------------------------------ */
.cyber-footer {
    animation: footerFadeIn 0.6s ease-out 0.3s both;
}

@keyframes footerFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ------------------------------------------
   FULL PAGE TRANSITION
   ------------------------------------------ */
body {
    animation: pageFadeIn 0.3s ease-out both;
}

@keyframes pageFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ------------------------------------------
   TYPEWRITER CURSOR
   ------------------------------------------ */
.typewriter-cursor::after {
    content: '';
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    background: var(--neon-green);
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: cursorBlink 0.8s step-end infinite;
}

@keyframes cursorBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ------------------------------------------
   HERO TYPEWRITER SEQUENCE
   Subtitle elements hidden until JS reveals
   ------------------------------------------ */
.hero-fade-in {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.hero-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ------------------------------------------
   3D TILT EFFECT
   ------------------------------------------ */
.tilt-active {
    transition: none;
    will-change: transform;
}

.tilt-highlight {
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 5;
}

.tilt-active .tilt-highlight {
    opacity: 1;
}

/* ------------------------------------------
   COUNTER ANIMATION (placeholder styling)
   ------------------------------------------ */
.counter-animate {
    display: inline-block;
}

/* ------------------------------------------
   ACCESSIBILITY: REDUCED MOTION
   ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .scroll-animate {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .cyber-navbar,
    .page-enter,
    .cyber-footer,
    body {
        animation: none;
    }

    .typewriter-cursor::after {
        animation: none;
        opacity: 1;
    }

    .hero-fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .tilt-active {
        transform: none !important;
    }

    .tilt-highlight {
        display: none;
    }
}

/* ------------------------------------------
   LIGHT THEME OVERRIDES
   ------------------------------------------ */
html[data-theme="light"] .tilt-highlight {
    background: radial-gradient(
        circle at var(--mx, 50%) var(--my, 50%),
        rgba(0, 0, 0, 0.06),
        transparent 60%
    );
}

html[data-theme="light"] .typewriter-cursor::after {
    background: #859900;
}