/* ══════════════════════════════════════════════════════════════════════
   ANIMATIONS.CSS  —  All keyframes, entrance effects, visual FX
   ══════════════════════════════════════════════════════════════════════ */

/* ── Keyframes ───────────────────────────────────────────────────────── */
@keyframes pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%       { transform: scale(1.15); opacity: 0.8; }
}
@keyframes blobFloat {
    0%, 100% { transform: translate(0,0) scale(1); }
    33%       { transform: translate(30px,-20px) scale(1.05); }
    66%       { transform: translate(-15px,25px) scale(0.95); }
}
@keyframes floatIcon {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%       { transform: translateY(-14px) rotate(5deg); }
}
@keyframes cardFloat {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}
@keyframes ringPulse {
    0%   { transform: scale(0.9); opacity: 0.6; }
    50%  { transform: scale(1.02); opacity: 0.3; }
    100% { transform: scale(0.9); opacity: 0.6; }
}
@keyframes scrollWheel {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(12px); opacity: 0; }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    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 slideDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heartbeat {
    0%,100% { transform: scale(1); }
    14%      { transform: scale(1.2); }
    28%      { transform: scale(1); }
    42%      { transform: scale(1.15); }
    70%      { transform: scale(1); }
}
@keyframes dnaRotate {
    from { transform: rotateY(0deg); }
    to   { transform: rotateY(360deg); }
}
@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
    0%, 100% { box-shadow: var(--shadow-mint); }
    50%       { box-shadow: 0 0 50px rgba(45,212,191,0.5), var(--shadow-mint); }
}
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes counterUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── AOS overrides ────────────────────────────────────────────────────── */
[data-aos] { transition-property: opacity, transform !important; }

/* ── Utility Animation Classes ───────────────────────────────────────── */
.animate-fadeInUp    { animation: fadeInUp  0.7s var(--ease) both; }
.animate-fadeInLeft  { animation: fadeInLeft  0.7s var(--ease) both; }
.animate-fadeInRight { animation: fadeInRight 0.7s var(--ease) both; }
.animate-scaleIn     { animation: scaleIn   0.6s var(--ease-spring) both; }
.animate-pulse       { animation: pulse 2s ease-in-out infinite; }
.animate-heartbeat   { animation: heartbeat 1.4s ease infinite; }
.animate-spin        { animation: spin 2s linear infinite; }
.animate-glow        { animation: glowPulse 2.5s ease-in-out infinite; }

.delay-100  { animation-delay: 0.1s; }
.delay-200  { animation-delay: 0.2s; }
.delay-300  { animation-delay: 0.3s; }
.delay-400  { animation-delay: 0.4s; }
.delay-500  { animation-delay: 0.5s; }
.delay-600  { animation-delay: 0.6s; }
.delay-700  { animation-delay: 0.7s; }
.delay-800  { animation-delay: 0.8s; }

/* ── Medical DNA Decoration ──────────────────────────────────────────── */
.dna-decoration {
    position: absolute;
    pointer-events: none;
    opacity: 0.06;
    z-index: 0;
}
.dna-svg { animation: dnaRotate 20s linear infinite; transform-origin: center; }

/* ── Gradient animated border ────────────────────────────────────────── */
.grad-border {
    position: relative;
    border-radius: var(--radius-lg);
    background: white;
}
.grad-border::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mint-400), var(--blue-400), var(--pink-400), var(--mint-400));
    background-size: 300% 100%;
    animation: gradientShift 4s ease infinite;
    z-index: -1;
}

/* ── Glowing card on hover ───────────────────────────────────────────── */
.glow-on-hover { transition: var(--tr-spring); }
.glow-on-hover:hover { box-shadow: 0 0 30px rgba(45,212,191,0.3), var(--shadow-lg); }

/* ── Shimmer (skeleton loading) ──────────────────────────────────────── */
.shimmer {
    background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-50) 50%, var(--gray-100) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* ── Tilt card ───────────────────────────────────────────────────────── */
.tilt-card { transform-style: preserve-3d; }

/* ── Particle container decorative ──────────────────────────────────── */
.particle-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

/* ── Medical heartbeat line SVG animation ────────────────────────────── */
.heartbeat-line {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 60px;
    opacity: 0.08;
    overflow: hidden;
}
.heartbeat-line svg path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 3s ease forwards infinite;
}
@keyframes drawLine {
    to { stroke-dashoffset: 0; }
}

/* ── Animated gradient button ────────────────────────────────────────── */
.btn-animated-grad {
    background: linear-gradient(270deg, var(--mint-500), var(--blue-500), var(--pink-500));
    background-size: 300% 300%;
    animation: gradientShift 4s ease infinite;
    color: white;
    border: none;
    border-radius: var(--radius-full);
    padding: 13px 32px;
    font-weight: 600;
    font-family: var(--font-sans);
    cursor: pointer;
    transition: var(--tr);
}
.btn-animated-grad:hover { transform: translateY(-3px); filter: brightness(1.1); }

/* ── Count-up number animation ───────────────────────────────────────── */
.count-up { animation: counterUp 0.5s ease both; }

/* ── Floating medical particles (CSS-only fallback) ──────────────────── */
.medical-particle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--mint-300);
    animation: floatIcon 4s ease-in-out infinite;
    pointer-events: none;
    opacity: 0.4;
}

/* ── Reveal on scroll (without AOS) ─────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal.revealed { opacity: 1; transform: translateY(0); }
.reveal-left  { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-right { opacity: 0; transform: translateX(40px);  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.reveal-left.revealed, .reveal-right.revealed { opacity: 1; transform: translateX(0); }