/**
 * animated-svgs.css — SVG décoratifs animés pour le thème ADIMED SARL
 * Apporte vie et dynamisme aux sections hero, cards et sections d'introduction
 */

/* ====================================================
   1. PULSE CIRCULAIRE — badge "médical" animé
   ==================================================== */
.adimed-pulse-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(214, 40, 40, 0.3);
    animation: adimed-pulse-ring 2.6s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    pointer-events: none;
}
.adimed-pulse-ring:nth-child(2) { animation-delay: 0.85s; }
.adimed-pulse-ring:nth-child(3) { animation-delay: 1.7s;  }

@keyframes adimed-pulse-ring {
    0%   { transform: scale(0.7);  opacity: 0.9; }
    70%  { transform: scale(1.6);  opacity: 0;   }
    100% { opacity: 0; }
}

/* ====================================================
   2. FLOATING BLOBS — formes organiques flottantes en hero
   ==================================================== */
.hero-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.08;
    pointer-events: none;
    animation: adimed-float 8s ease-in-out infinite;
}
.hero-blob--1 {
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, #D62828 0%, transparent 70%);
    top: -100px;
    right: -80px;
    animation-duration: 9s;
}
.hero-blob--2 {
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, #4FC3F7 0%, transparent 70%);
    bottom: -80px;
    left: 5%;
    animation-duration: 11s;
    animation-delay: -4s;
}
.hero-blob--3 {
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, #002B5C 0%, transparent 70%);
    top: 40%;
    left: 30%;
    animation-duration: 7s;
    animation-delay: -2s;
}

@keyframes adimed-float {
    0%, 100% { transform: translateY(0px) scale(1); }
    50%       { transform: translateY(-30px) scale(1.07); }
}

/* ====================================================
   3. PARTICLES — petites particules médicales flottantes
   ==================================================== */
.adimed-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.adimed-particle {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(214, 40, 40, 0.25);
    animation: adimed-particle-float linear infinite;
}
.adimed-particle:nth-child(1)  { left:  8%; animation-duration: 14s; animation-delay:  0s;   width: 5px;  height: 5px;  }
.adimed-particle:nth-child(2)  { left: 22%; animation-duration: 11s; animation-delay: -3s;   width: 4px;  height: 4px;  background:rgba(0,43,92,0.2); }
.adimed-particle:nth-child(3)  { left: 38%; animation-duration: 16s; animation-delay: -7s;   }
.adimed-particle:nth-child(4)  { left: 55%; animation-duration: 12s; animation-delay: -2s;   width: 8px;  height: 8px;  opacity: 0.15; }
.adimed-particle:nth-child(5)  { left: 70%; animation-duration: 18s; animation-delay: -9s;   width: 4px;  height: 4px;  background:rgba(79,195,247,0.3); }
.adimed-particle:nth-child(6)  { left: 85%; animation-duration: 13s; animation-delay: -5s;   }
.adimed-particle:nth-child(7)  { left: 15%; animation-duration: 20s; animation-delay: -12s;  width: 7px;  height: 7px;  background:rgba(0,43,92,0.15); }
.adimed-particle:nth-child(8)  { left: 48%; animation-duration: 15s; animation-delay: -6s;   width: 5px;  height: 5px;  background:rgba(214,40,40,0.2); }

@keyframes adimed-particle-float {
    0%   { transform: translateY(110vh) rotate(0deg);   opacity: 0;   }
    10%  { opacity: 1; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(-10vh) rotate(360deg); opacity: 0;   }
}

/* ====================================================
   4. SVG CROSS MÉDICAL — décoration de section
   ==================================================== */
.svg-medcross {
    display: inline-block;
    animation: adimed-spin-slow 20s linear infinite;
    opacity: 0.07;
}
@keyframes adimed-spin-slow {
    to { transform: rotate(360deg); }
}

/* ====================================================
   5. WAVE DÉCORATIF — séparateur de section hero/content
   ==================================================== */
.hero-wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    overflow: hidden;
    line-height: 0;
    pointer-events: none;
}
.hero-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ====================================================
   6. ICON BADGE ANIMÉ — icône avec halo pulsant
   ==================================================== */
.icon-badge-animated {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.icon-badge-animated::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.12;
    animation: adimed-badge-pulse 2.4s ease-in-out infinite;
}
@keyframes adimed-badge-pulse {
    0%, 100% { transform: scale(1);    opacity: 0.12; }
    50%       { transform: scale(1.25); opacity: 0.05; }
}

/* ====================================================
   7. SVG DÉCORATIF HÉRO — croix + cercles animés (inline)
   ==================================================== */
.hero-svg-deco {
    position: absolute;
    right: 8%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.06;
    pointer-events: none;
    animation: adimed-hero-rotate 30s linear infinite;
    display: none;
}
@media (min-width: 1024px) { .hero-svg-deco { display: block; } }

@keyframes adimed-hero-rotate {
    to { transform: translateY(-50%) rotate(360deg); }
}

/* ====================================================
   8. CARD HOVER GLOW
   ==================================================== */
.solution-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.solution-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 50% 0%, rgba(214,40,40,0.06) 0%, transparent 65%);
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
    z-index: 0;
}
.solution-card:hover::before { opacity: 1; }
.solution-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(0, 43, 92, 0.14);
}
.solution-card > * { position: relative; z-index: 1; }

/* ====================================================
   9. LINE DRAW — trait animé sous les titres de section
   ==================================================== */
.section-title-underline {
    position: relative;
    display: inline-block;
}
.section-title-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, var(--color-red) 0%, transparent 100%);
    border-radius: 2px;
    transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.section-title-underline.is-visible::after { width: 100%; }

/* ====================================================
   10. FA ICON SPIN — utilitaire d'animation
   ==================================================== */
.fa-spin-slow { animation: fa-spin 4s linear infinite; }
.fa-bounce-soft {
    animation: adimed-bounce-soft 2s ease-in-out infinite;
}
@keyframes adimed-bounce-soft {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-4px); }
}

/* ====================================================
   11. AMBIENT MESH GRADIENT — Apple-style dynamic BG
   ==================================================== */
.ambient-mesh-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
    opacity: 0.4;
    background: radial-gradient(circle at 10% 20%, rgba(214, 40, 40, 0.03) 0%, transparent 40%),
                radial-gradient(circle at 90% 80%, rgba(0, 43, 92, 0.04) 0%, transparent 50%),
                radial-gradient(circle at 50% 50%, rgba(79, 195, 247, 0.03) 0%, transparent 60%);
    animation: adimed-mesh-breathe 15s ease-in-out infinite alternate;
}
@keyframes adimed-mesh-breathe {
    0% { transform: scale(1); opacity: 0.3; }
    100% { transform: scale(1.1); opacity: 0.5; }
}

/* Update for particles to look more organic */
.adimed-particle {
    filter: blur(1px); /* slight depth of field effect */
}