/* ==========================================================================
   CONIVA LUXURY AUTO-PLAYING ANIMATED ICONS ENGINE
   Flaticon & Lordicon-Inspired 60fps Motion System (Pure Vector & CSS3)
   ========================================================================== */

/* ----------------------------------------------------------
   1. CORE ANIMATION KEYFRAMES
   ---------------------------------------------------------- */

/* Continuous 360° Smooth Rotation (Gears, Globes, Infinity, Stars) */
@keyframes conivaRotateClockwise {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

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

/* Gentle Vertical Floating (Avatars, Skyscrapers, Landmarks) */
@keyframes conivaGentleFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-5px); }
}

/* Organic Pulse & Aura Glow (Bullseye, Hearts, Beacons) */
@keyframes conivaPulseGlow {
    0%, 100% {
        transform: scale(1);
        filter: drop-shadow(0 0 2px rgba(212, 175, 55, 0.4));
    }
    50% {
        transform: scale(1.1);
        filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.85));
    }
}

/* Physics-Based Scale Balancing Sway (Justice, Amanah, Qiyas) */
@keyframes conivaScaleBalance {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(6deg); }
    75% { transform: rotate(-6deg); }
}

@keyframes conivaScalePanLeft {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(-4px); }
    75% { transform: translateY(4px); }
}

@keyframes conivaScalePanRight {
    0%, 100% { transform: translateY(0px); }
    25% { transform: translateY(4px); }
    75% { transform: translateY(-4px); }
}

/* Illuminated Sacred Page Turning (Qur'an, Documents) */
@keyframes conivaPageTurn {
    0%, 100% { transform: scaleX(1) skewY(0deg); opacity: 0.95; }
    50% { transform: scaleX(0.7) skewY(-3deg); opacity: 0.75; }
}

/* Radar Ripple Ring Waves (Pins, Bullseye, Targets) */
@keyframes conivaRadarRipple {
    0% {
        r: 6;
        opacity: 0.9;
    }
    100% {
        r: 18;
        opacity: 0;
    }
}

/* Rhythmic Stitching & Needle Movement (Apparel, Textiles) */
@keyframes conivaNeedleStitch {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    30% { transform: translateY(5px) rotate(-1deg); }
    60% { transform: translateY(-3px) rotate(1deg); }
}

/* Ascending Trend Arrow & Growing Bars (Impact, Growth, Assets) */
@keyframes conivaBarGrow1 {
    0%, 100% { transform: scaleY(0.4); }
    50% { transform: scaleY(0.9); }
}

@keyframes conivaBarGrow2 {
    0%, 100% { transform: scaleY(0.6); }
    50% { transform: scaleY(1); }
}

@keyframes conivaBarGrow3 {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1.1); }
}

@keyframes conivaArrowRise {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(2px, -3px); }
}

/* Phone Ringer Vibrations (Contact, Hotline) */
@keyframes conivaPhoneRing {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50% { transform: rotate(-8deg); }
    20%, 40% { transform: rotate(8deg); }
    60% { transform: rotate(0deg); }
}

@keyframes conivaSoundWave {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.15); }
}

/* Envelope & Flying Paper Plane (Newsletter, Email) */
@keyframes conivaPaperPlaneGlide {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    50% { transform: translate(4px, -4px) rotate(-5deg); }
}

/* Bouncing GPS Location Pin (Map, Offices) */
@keyframes conivaPinBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes conivaPinShadow {
    0%, 100% { transform: scale(1); opacity: 0.4; }
    50% { transform: scale(0.65); opacity: 0.15; }
}

/* Metallic Gold Light Sweep (Vault, Coins, Badges) */
@keyframes conivaGoldSheen {
    0% { transform: translateX(-100%) rotate(25deg); }
    100% { transform: translateX(200%) rotate(25deg); }
}

/* Hourglass Flow / Particle Trickle (Experience, Milestones) */
@keyframes conivaSandFlow {
    0%, 100% { opacity: 0.4; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(4px); }
}

/* ----------------------------------------------------------
   2. REUSABLE ANIMATED SVG CONTAINER & SIZING SYSTEM
   ---------------------------------------------------------- */

.coniva-anim-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    vertical-align: middle;
    flex-shrink: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.coniva-anim-icon svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Size Utilities */
.icon-anim--xs { width: 18px; height: 18px; }
.icon-anim--sm { width: 24px; height: 24px; }
.icon-anim--md { width: 32px; height: 32px; }
.icon-anim--lg { width: 44px; height: 44px; }
.icon-anim--xl { width: 56px; height: 56px; }
.icon-anim--2xl { width: 72px; height: 72px; }

/* ----------------------------------------------------------
   3. ANIMATION TRIGGER CLASSES (CONTINUOUS AUTO-PLAY)
   ---------------------------------------------------------- */

.anim-spin-cw {
    animation: conivaRotateClockwise 8s linear infinite;
    transform-origin: center;
}

.anim-spin-cw-fast {
    animation: conivaRotateClockwise 4s linear infinite;
    transform-origin: center;
}

.anim-spin-ccw {
    animation: conivaRotateCounter 8s linear infinite;
    transform-origin: center;
}

.anim-float {
    animation: conivaGentleFloat 3.2s ease-in-out infinite;
}

.anim-pulse {
    animation: conivaPulseGlow 2.5s ease-in-out infinite;
    transform-origin: center;
}

.anim-sway {
    animation: conivaScaleBalance 4s ease-in-out infinite;
    transform-origin: 50% 15%;
}

.anim-scale-left {
    animation: conivaScalePanLeft 4s ease-in-out infinite;
}

.anim-scale-right {
    animation: conivaScalePanRight 4s ease-in-out infinite;
}

.anim-page-turn {
    animation: conivaPageTurn 3s ease-in-out infinite;
    transform-origin: left center;
}

.anim-ripple {
    animation: conivaRadarRipple 2.2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
    transform-origin: center;
}

.anim-needle {
    animation: conivaNeedleStitch 1.8s ease-in-out infinite;
}

.anim-bar-1 {
    animation: conivaBarGrow1 2s ease-in-out infinite;
    transform-origin: bottom;
}

.anim-bar-2 {
    animation: conivaBarGrow2 2s ease-in-out infinite 0.3s;
    transform-origin: bottom;
}

.anim-bar-3 {
    animation: conivaBarGrow3 2s ease-in-out infinite 0.6s;
    transform-origin: bottom;
}

.anim-arrow-rise {
    animation: conivaArrowRise 2s ease-in-out infinite;
}

.anim-ring {
    animation: conivaPhoneRing 2.8s ease-in-out infinite;
    transform-origin: center;
}

.anim-wave-1 {
    animation: conivaSoundWave 1.6s ease-in-out infinite;
}

.anim-wave-2 {
    animation: conivaSoundWave 1.6s ease-in-out infinite 0.3s;
}

.anim-plane {
    animation: conivaPaperPlaneGlide 2.8s ease-in-out infinite;
}

.anim-pin {
    animation: conivaPinBounce 2s ease-in-out infinite;
}

.anim-pin-shadow {
    animation: conivaPinShadow 2s ease-in-out infinite;
    transform-origin: center;
}

.anim-sand {
    animation: conivaSandFlow 2s ease-in-out infinite;
}

/* ----------------------------------------------------------
   4. JEWEL-TONE LUXURY COLOR STYLING
   ---------------------------------------------------------- */

.fill-gold { fill: #D4AF37; }
.fill-gold-light { fill: #FFF0B8; }
.fill-gold-dark { fill: #9A7B38; }

.stroke-gold { stroke: #D4AF37; }
.stroke-gold-light { stroke: #FFF0B8; }

.fill-emerald { fill: #10B981; }
.fill-emerald-light { fill: #34D399; }
.stroke-emerald { stroke: #10B981; }

.fill-sapphire { fill: #38BDF8; }
.fill-sapphire-light { fill: #7DD3FC; }
.stroke-sapphire { stroke: #38BDF8; }

.fill-amber { fill: #F59E0B; }
.fill-amber-light { fill: #FDE68A; }
.stroke-amber { stroke: #F59E0B; }

.fill-ruby { fill: #F43F5E; }
.fill-ruby-light { fill: #FDA4AF; }
.stroke-ruby { stroke: #F43F5E; }

.fill-violet { fill: #8B5CF6; }
.fill-violet-light { fill: #C4B5FD; }
.stroke-violet { stroke: #8B5CF6; }

/* ----------------------------------------------------------
   5. HOVER ACCELERATION & INTERACTION DELIGHT
   ---------------------------------------------------------- */

.coniva-pillar-card:hover .coniva-anim-icon,
.coniva-business-card:hover .coniva-anim-icon,
.coniva-pillar-col:hover .coniva-anim-icon,
.coniva-topbar__item:hover .coniva-anim-icon,
.coniva-stat-box:hover .coniva-anim-icon {
    transform: scale(1.12);
}

.coniva-business-card:hover .anim-spin-cw {
    animation-duration: 3s;
}

.coniva-business-card:hover .anim-spin-ccw {
    animation-duration: 3s;
}