/* ========================================================
   ANIMATIONS — Keyframes & AOS overrides
   ======================================================== */

/* ── Glow Pulse ────────────────────────────────────────── */
@keyframes pulse-glow {
    from { text-shadow: 0 0 10px rgba(0,212,255,0.4), 0 0 30px rgba(185,213,216,0.2); }
    to   { text-shadow: 0 0 30px rgba(0,212,255,0.8), 0 0 60px rgba(185,213,216,0.5); }
}

/* ── Slide-in variants ─────────────────────────────────── */
@keyframes slideUp   { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideDown { from { opacity:0; transform:translateY(-40px);} to { opacity:1; transform:translateY(0); } }
@keyframes slideLeft { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }
@keyframes slideRight{ from { opacity:0; transform:translateX(-40px);} to { opacity:1; transform:translateX(0); } }
@keyframes fadeIn    { from { opacity:0; } to { opacity:1; } }
@keyframes scaleIn   { from { opacity:0; transform:scale(0.85); } to { opacity:1; transform:scale(1); } }
@keyframes rotateIn  { from { opacity:0; transform:rotate(-6deg) scale(0.9); } to { opacity:1; transform:rotate(0) scale(1); } }

/* ── Spin ──────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Shimmer on cards ──────────────────────────────────── */
@keyframes shimmer {
    0%   { background-position: -400px 0; }
    100% { background-position:  400px 0; }
}
.shimmer-line {
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* ── Gradient border animation ─────────────────────────── */
@keyframes borderGlow {
    0%,100% { border-color: rgba(0,212,255,0.3); }
    50%      { border-color: rgba(185,213,216,0.6); }
}
.animated-border { animation: borderGlow 3s ease-in-out infinite; }

/* ── Particle trails ───────────────────────────────────── */
@keyframes particleRise {
    0%   { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-100px) scale(0); opacity: 0; }
}

/* ── Tilt (CSS fallback) ───────────────────────────────── */
.tilt-card { transition: transform 0.15s ease; transform-style: preserve-3d; }

/* ── Number flip ───────────────────────────────────────── */
@keyframes numFlip {
    0%   { transform: rotateX(90deg); opacity: 0; }
    100% { transform: rotateX(0deg);  opacity: 1; }
}
.num-flip { animation: numFlip 0.4s ease forwards; }

/* ── Typing cursor blink ───────────────────────────────── */
@keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.typed-cursor { animation: cursorBlink 0.7s ease-in-out infinite; }

/* ── Neon glow on hover for headings ──────────────────── */
.neon-text {
    transition: text-shadow 0.3s ease;
}
.neon-text:hover {
    text-shadow: 0 0 8px var(--cyan), 0 0 20px var(--cyan), 0 0 40px rgba(0,212,255,0.5);
}

/* ── Ripple on btn click ───────────────────────────────── */
.ripple {
    position: absolute; border-radius: 50%;
    background: rgba(255,255,255,0.25);
    transform: scale(0); animation: rippleEffect 0.6s linear;
    pointer-events: none;
}
@keyframes rippleEffect { to { transform: scale(4); opacity: 0; } }

/* ── Gradient animated background ─────────────────────── */
.grad-bg-animate {
    background-size: 400% 400%;
    animation: gradMove 8s ease infinite;
}
@keyframes gradMove {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Magnetic element (hover transform) ───────────────── */
.magnetic { transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1); }

/* ── Page transition overlay ───────────────────────────── */
.page-transition {
    position: fixed; inset: 0; z-index: 9990;
    background: var(--bg-primary);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1);
    pointer-events: none;
}
.page-transition.enter { transform: scaleY(1); transform-origin: bottom; }
.page-transition.exit  { transform: scaleY(0); transform-origin: top; }

/* ── Hero entrance ─────────────────────────────────────── */
.hero-badge   { animation: slideDown 0.6s ease 0.2s both; }
.hero-name    { animation: slideUp   0.7s ease 0.4s both; }
.hero-typed-wrap { animation: slideUp 0.7s ease 0.55s both; }
.hero-desc    { animation: slideUp   0.7s ease 0.7s both; }
.hero-cta     { animation: slideUp   0.7s ease 0.85s both; }
.hero-stats   { animation: fadeIn    0.8s ease 1.1s both; }
.hero-card    { animation: slideLeft 0.8s ease 0.5s both; }

/* ── Section reveal via AOS ────────────────────────────── */
[data-aos="fade-up-custom"] {
    opacity: 0; transform: translateY(30px);
    transition-property: opacity, transform;
}
[data-aos="fade-up-custom"].aos-animate { opacity: 1; transform: translateY(0); }

/* ── Skill bar animated fill ───────────────────────────── */
.skill-fill.animate { /* width set via JS */ }

/* ── Card sparkle on hover ─────────────────────────────── */
.project-card::after {
    content: '';
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(0,212,255,0.06), transparent 60%);
    border-radius: inherit; opacity: 0; transition: opacity 0.3s;
}
.project-card:hover::after { opacity: 1; }

/* ── Stagger children ──────────────────────────────────── */
.stagger-children > *:nth-child(1)  { transition-delay: 0.05s; }
.stagger-children > *:nth-child(2)  { transition-delay: 0.10s; }
.stagger-children > *:nth-child(3)  { transition-delay: 0.15s; }
.stagger-children > *:nth-child(4)  { transition-delay: 0.20s; }
.stagger-children > *:nth-child(5)  { transition-delay: 0.25s; }
.stagger-children > *:nth-child(6)  { transition-delay: 0.30s; }

/* ── Floating social pills on hero card ────────────────── */
.ping-ring {
    position: absolute; inset: -8px; border-radius: 50%;
    border: 1px solid rgba(0,212,255,0.35);
    animation: pingDot 2.5s ease-in-out infinite;
}

/* ── Section transition line ───────────────────────────── */
.section-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--cyan), transparent);
    opacity: 0.3; margin: 0;
}

/* ── Code snippet decoration ───────────────────────────── */
.code-line {
    font-family: var(--font-mono); font-size: 0.8rem;
    color: var(--text-muted); opacity: 0.6;
}
.code-line .kw  { color: var(--purple); }
.code-line .fn  { color: var(--cyan); }
.code-line .str { color: var(--green); }
.code-line .num { color: var(--orange); }