/* ============================================================
   AfriSkill AI - Animations Stylesheet
   ============================================================ */

/* Scroll Reveal */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
                filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform, filter;
}
[data-reveal="fade-up"] { transform: translateY(48px); }
[data-reveal="fade-down"] { transform: translateY(-48px); }
[data-reveal="fade-left"] { transform: translateX(48px); }
[data-reveal="fade-right"] { transform: translateX(-48px); }
[data-reveal="scale"] { transform: scale(0.88); }
[data-reveal="blur"] { filter: blur(14px); transform: translateY(24px); }
[data-reveal="scale-blur"] { filter: blur(12px); transform: scale(0.92); }

[data-reveal].revealed {
    opacity: 1;
    transform: none;
    filter: none;
}

/* Hover Lift */
.hover-lift {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-lg), 0 0 40px rgba(214, 179, 106, 0.08);
}

/* Floating Cards */
.floating-card {
    animation: floatCard 6s ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
}
@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}

/* Button Ripple */
.btn-ripple { position: relative; overflow: hidden; }
.ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.35);
    transform: scale(0);
    animation: rippleEffect 0.65s ease-out;
    pointer-events: none;
}
@keyframes rippleEffect {
    to { transform: scale(4); opacity: 0; }
}

/* Typing Cursor */
.typing-cursor {
    display: inline-block;
    width: 3px;
    height: 1em;
    background: var(--accent-gold);
    margin-left: 4px;
    vertical-align: text-bottom;
    animation: blinkCursor 1s step-end infinite;
    box-shadow: 0 0 12px rgba(129, 140, 248, 0.6);
}
@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(90deg, var(--card) 25%, var(--card-hover) 50%, var(--card) 75%);
    background-size: 200% 100%;
    animation: skeletonShimmer 1.5s ease infinite;
    border-radius: var(--radius-sm);
}
@keyframes skeletonShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Project filter animation */
.project-card {
    transition: opacity 0.4s, transform 0.4s;
}
.project-card.hidden {
    opacity: 0;
    transform: scale(0.95);
    position: absolute;
    pointer-events: none;
    visibility: hidden;
}

/* Stagger children animation */
.stagger-children > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1), transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}
.stagger-children.revealed > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.revealed > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.revealed > * {
    opacity: 1;
    transform: translateY(0);
}

/* Image reveal */
.img-reveal {
    overflow: hidden;
    position: relative;
}
.img-reveal img {
    transform: scale(1.12);
    transition: transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.img-reveal.revealed img,
[data-reveal].revealed .img-reveal img,
.project-card.revealed .project-image {
    transform: scale(1);
}

/* Section sticky helper */
.sticky-section {
    position: sticky;
    top: calc(var(--nav-height) + 16px);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }
    .floating-card { animation: none !important; }
}