/* ═══════════════════════════════════════════════════════════
   ANIMATIONS.CSS  — Keyframes + animation utility classes
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────────────── */

@keyframes aurora {
    from { background-position: 50% 50%, 50% 50%; }
    to   { background-position: 350% 50%, 350% 50%; }
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-15px); }
}

/* Shimmer button slide (needs container-type:size on parent) */
@keyframes shimmer-slide {
    to { transform: translate(calc(100cqw - 100%), 0); }
}

@keyframes spin-around {
    0%   { transform: translateZ(0) rotate(0deg); }
    100% { transform: translateZ(0) rotate(360deg); }
}

/* Hire Me rotating conic gradient */
@property --r {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@keyframes rotate-gradient {
    to { --r: 360deg; }
}

/* General spin (for loading spinner) */
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Page transitions */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeOut {
    to { opacity: 0; }
}

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

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

/* Skill bar entrance (staggered by JS) */
@keyframes skillBarIn {
    from { transform: scaleY(0); opacity: 0; }
    to   { transform: scaleY(1); opacity: 1; }
}

/* Yellow underline path (drawn by GSAP stroke-dashoffset) */
@keyframes drawPath {
    to { stroke-dashoffset: 0; }
}

/* ── Scroll-triggered utility classes ───────────────────────── */
/* JS toggles .is-visible when element enters viewport */

.anim-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.anim-fade-in {
    opacity: 0;
    transition: opacity 0.6s ease;
}
.anim-fade-in.is-visible { opacity: 1; }

.anim-scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-scale-in.is-visible {
    opacity: 1;
    transform: scale(1);
}

.anim-slide-left {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-slide-left.is-visible { opacity: 1; transform: translateX(0); }

.anim-slide-right {
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
                transform 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.anim-slide-right.is-visible { opacity: 1; transform: translateX(0); }

/* Stagger delays for children */
.anim-stagger > *:nth-child(1) { transition-delay: 0.00s; }
.anim-stagger > *:nth-child(2) { transition-delay: 0.15s; }
.anim-stagger > *:nth-child(3) { transition-delay: 0.30s; }
.anim-stagger > *:nth-child(4) { transition-delay: 0.45s; }
.anim-stagger > *:nth-child(5) { transition-delay: 0.60s; }

/* ── Float animation ────────────────────────────────────────── */
.animate-float         { animation: float 6s ease-in-out infinite; }
.animate-float-delayed { animation: float 6s ease-in-out 3s infinite; }

/* ── Scroll group (whileInView equivalent) ──────────────── */
.scroll-group {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.scroll-group.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Header row in Works/Certs (headerVariants: blur → clear) */
.section-header-anim {
    opacity: 0;
    transform: translateY(-20px);
    filter: blur(5px);
    transition: opacity 0.6s ease, transform 0.6s ease, filter 0.6s ease;
}
.section-header-anim.is-visible {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0px);
}