/* ========================================================
   LIONS SITE UI — HERO ANIMATED BACKGROUND (INSTITUTIONAL)
   Solidarité · Connexion · Action · Impact Communautaire
   ======================================================== */

.lions-hero-premium {
    position: relative;
    overflow: hidden;
}

/* Layer Hierarchy:
   - Photo Background & Overlay: z-index 0
   - Animated Decorative Canvas / SVGs: z-index 1
   - Hero Inner Content: z-index 2
*/

.lions-hero-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    will-change: transform;
}

/* 1. SOLIDARITY NETWORK & CONNECTION ARCS (SVG) */
.lions-hero-network-svg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%;
    height: 100%;
    opacity: 0.85;
    mix-blend-mode: screen;
}

.lions-arc-line {
    fill: none;
    stroke-linecap: round;
    stroke-dasharray: 6 12;
    animation: lionsArcFlow 28s linear infinite;
}

.lions-arc-gold {
    stroke: rgba(255, 218, 58, 0.16);
    stroke-width: 1.5;
}

.lions-arc-blue {
    stroke: rgba(100, 165, 255, 0.12);
    stroke-width: 1.2;
    animation-duration: 38s;
    animation-direction: reverse;
}

@keyframes lionsArcFlow {
    from {
        stroke-dashoffset: 0;
    }
    to {
        stroke-dashoffset: 400;
    }
}

/* 2. CONCENTRIC IMPACT RIPPLES */
.lions-impact-ripple-wrap {
    position: absolute;
    top: 45%;
    right: 28%;
    width: 200px;
    height: 200px;
    transform: translate(50%, -50%);
}

.lions-impact-ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 218, 58, 0.22);
    box-shadow: 0 0 20px rgba(255, 218, 58, 0.12);
    opacity: 0;
    transform: scale(0.4);
    animation: lionsImpactPulse 12s cubic-bezier(0.1, 0.8, 0.3, 1) infinite;
}

.lions-impact-ripple-2 {
    animation-delay: 4s;
    border-color: rgba(100, 170, 255, 0.18);
    box-shadow: 0 0 25px rgba(100, 170, 255, 0.08);
}

.lions-impact-ripple-3 {
    animation-delay: 8s;
    border-color: rgba(255, 218, 58, 0.15);
}

@keyframes lionsImpactPulse {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }
    20% {
        opacity: 0.28;
    }
    70% {
        opacity: 0.10;
    }
    100% {
        transform: scale(4.2);
        opacity: 0;
    }
}

/* 3. GOLD IMPACT NODES (8-12 FLOATING PULSE POINTS) */
.lions-hero-nodes-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.lions-hero-node {
    position: absolute;
    border-radius: 50%;
    background: #ffda3a;
    box-shadow: 0 0 10px rgba(255, 218, 58, 0.6), 0 0 20px rgba(255, 218, 58, 0.3);
    animation: lionsNodeFloat 6s ease-in-out infinite;
}

/* Individual node positions and timing */
.lions-hero-node:nth-child(1)  { top: 22%; left: 52%; width: 4px; height: 4px; animation-duration: 7s; animation-delay: 0s; }
.lions-hero-node:nth-child(2)  { top: 38%; left: 68%; width: 5px; height: 5px; animation-duration: 8.5s; animation-delay: 1.5s; }
.lions-hero-node:nth-child(3)  { top: 62%; left: 78%; width: 4px; height: 4px; animation-duration: 6.5s; animation-delay: 3s; }
.lions-hero-node:nth-child(4)  { top: 28%; left: 84%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0.8s; }
.lions-hero-node:nth-child(5)  { top: 75%; left: 60%; width: 3.5px; height: 3.5px; animation-duration: 7.8s; animation-delay: 2.2s; }
.lions-hero-node:nth-child(6)  { top: 18%; left: 74%; width: 4px; height: 4px; animation-duration: 8s; animation-delay: 4s; }
.lions-hero-node:nth-child(7)  { top: 54%; left: 88%; width: 4.5px; height: 4.5px; animation-duration: 6.8s; animation-delay: 2.7s; }
.lions-hero-node:nth-child(8)  { top: 82%; left: 82%; width: 4px; height: 4px; animation-duration: 7.2s; animation-delay: 1.1s; }
.lions-hero-node:nth-child(9)  { top: 42%; left: 58%; width: 3.5px; height: 3.5px; animation-duration: 9.5s; animation-delay: 3.5s; }
.lions-hero-node:nth-child(10) { top: 68%; left: 48%; width: 4px; height: 4px; animation-duration: 8.2s; animation-delay: 0.4s; }

@keyframes lionsNodeFloat {
    0%, 100% {
        opacity: 0.25;
        transform: translateY(0) scale(0.9);
    }
    50% {
        opacity: 0.85;
        transform: translateY(-8px) scale(1.15);
    }
}

/* 4. DISCRETE ROTATING GLOBE RINGS */
.lions-globe-rings {
    position: absolute;
    top: 15%;
    right: 8%;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    border: 1px dashed rgba(255, 255, 255, 0.06);
    animation: lionsGlobeRotate 70s linear infinite;
}

.lions-globe-rings::before {
    content: '';
    position: absolute;
    top: 12%;
    left: 12%;
    right: 12%;
    bottom: 12%;
    border-radius: 50%;
    border: 1px solid rgba(100, 160, 255, 0.05);
}

.lions-globe-rings::after {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    right: 25%;
    bottom: 25%;
    border-radius: 50%;
    border: 1px dashed rgba(255, 218, 58, 0.05);
}

@keyframes lionsGlobeRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* 5. SUBTLE HUMANITARIAN PILLARS LINE-ART (HEART, EYE, BOOK, SOLIDARITY) */
.lions-hero-symbol {
    position: absolute;
    opacity: 0.06;
    stroke: #ffda3a;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: lionsSymbolBreathe 10s ease-in-out infinite;
}

.lions-symbol-heart { top: 20%; right: 24%; width: 42px; height: 42px; animation-delay: 0s; }
.lions-symbol-eye   { top: 68%; right: 18%; width: 44px; height: 44px; animation-delay: 3s; }
.lions-symbol-book  { top: 32%; right: 8%; width: 38px; height: 38px; animation-delay: 6s; }

@keyframes lionsSymbolBreathe {
    0%, 100% {
        opacity: 0.04;
        transform: scale(0.96);
    }
    50% {
        opacity: 0.08;
        transform: scale(1.04);
    }
}

/* 6. ACCESSIBILITY — PREFERS-REDUCED-MOTION */
@media (prefers-reduced-motion: reduce) {
    .lions-arc-line,
    .lions-impact-ripple,
    .lions-hero-node,
    .lions-globe-rings,
    .lions-hero-symbol {
        animation: none !important;
        opacity: 0.05 !important;
    }
}

/* 7. MOBILE OPTIMIZATIONS (< 768px) */
@media (max-width: 768px) {
    .lions-hero-network-svg,
    .lions-globe-rings,
    .lions-hero-symbol {
        display: none !important;
    }
    .lions-impact-ripple-wrap {
        top: 50%;
        right: 15%;
        width: 140px;
        height: 140px;
    }
    .lions-impact-ripple {
        width: 60px;
        height: 60px;
        margin: -30px 0 0 -30px;
        animation-duration: 14s;
    }
    .lions-hero-node:nth-child(n+6) {
        display: none !important; /* Keep only 5 nodes on mobile */
    }
}