/* =========================================
   GUIDE D'ACHAT MICROS
   ========================================= */

/* Réutilisation du style de container (Standardisé) */
.content-section-card .visual-container {
    height: 200px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-4);
    background: #000;
    border-radius: var(--radius);
    padding: var(--space-2);
}

.visual-container svg {
    height: 100%;
    width: auto;
    max-width: 100%;
    overflow: visible;
}


/* --- 1. GAMING (Chat vocal) --- */
.voice-bar {
    transform-origin: center;
    animation: voiceModulation 1.5s infinite ease-in-out;
}

.v1 {
    animation-delay: 0s;
}

.v2 {
    animation-delay: 0.2s;
}

.v3 {
    animation-delay: 0.4s;
}

@keyframes voiceModulation {

    0%,
    100% {
        transform: scaleY(1);
    }

    50% {
        transform: scaleY(1.8);
    }

    /* L'onde grandit */
}


/* --- 2. STREAMING (Diffusion Live) --- */
.live-dot {
    animation: recBlink 2s infinite;
}

.broadcast-wave {
    opacity: 0;
    animation: waveBroadcast 2s infinite linear;
}

.w2 {
    animation-delay: 0.5s;
}

@keyframes recBlink {

    0%,
    100% {
        fill: #550000;
    }

    50% {
        fill: #ff0000;
        filter: drop-shadow(0 0 3px #ff0000);
    }
}

@keyframes waveBroadcast {
    0% {
        opacity: 0;
        transform: translateY(5px) scale(0.9);
        transform-origin: 50px 30px;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: translateY(-5px) scale(1.1);
        transform-origin: 50px 30px;
    }

    100% {
        opacity: 0;
    }
}


/* --- 3. PODCAST (Connexion XLR) --- */
.xlr-cable {
    animation: plugXlr 3s infinite ease-in-out;
}

@keyframes plugXlr {

    0%,
    20% {
        transform: translateX(15px);
        opacity: 0;
    }

    /* Câble débranché */
    30%,
    80% {
        transform: translateX(0);
        opacity: 1;
    }

    /* Câble branché */
    100% {
        transform: translateX(15px);
        opacity: 0;
    }
}

/* =========================================
   TYPE DE MICRO
   ========================================= */

/* --- 1. USB (Plug & Play) --- */
.usb-plug-anim {
    animation: usbInsert 3s infinite ease-in-out;
}

.usb-signal {
    animation: signalPop 3s infinite ease-in-out;
}

@keyframes usbInsert {

    0%,
    20% {
        transform: translateX(0);
    }

    /* Débranché */
    30%,
    80% {
        transform: translateX(15px);
    }

    /* Branché */
    100% {
        transform: translateX(0);
    }

    /* Retour */
}

@keyframes signalPop {

    0%,
    30% {
        opacity: 0;
        transform: translateY(5px);
    }

    35%,
    75% {
        opacity: 1;
        transform: translateY(0);
    }

    /* Signal vert */
    80%,
    100% {
        opacity: 0;
    }
}


/* --- 2. XLR (Flux Audio) --- */
.xlr-wire {
    stroke-dasharray: 4;
    animation: audioFlow 1s infinite linear;
}

.vu-meter {
    transform-origin: bottom;
    animation: vuBounce 0.5s infinite ease-in-out alternate;
}

@keyframes audioFlow {
    to {
        stroke-dashoffset: -8;
    }
}

@keyframes vuBounce {
    0% {
        height: 2px;
    }

    100% {
        height: 8px;
    }

    /* Le niveau monte et descend */
}


/* --- 3. DYNAMIQUE (Rejet Bruit) --- */
.noise-wave {
    animation: noiseBounce 2s infinite ease-in-out;
    opacity: 0.5;
}

.voice-direct {
    animation: voiceEntry 2s infinite linear;
}

@keyframes noiseBounce {

    0%,
    100% {
        transform: translateX(0);
        opacity: 0.3;
    }

    50% {
        transform: translateX(5px);
        opacity: 0.6;
    }

    /* Bruit rebondit sur le côté */
}

@keyframes voiceEntry {
    0% {
        transform: translateX(10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(-5px);
        opacity: 0;
    }

    /* La voix rentre droit dedans */
}


/* --- 4. CONDENSATEUR (Vibration Membrane) --- */
.diaphragm {
    animation: sensitiveVibe 01s infinite ease-in-out;
}

.tiny-sounds circle {
    animation: soundFloat 3s infinite linear;
}

@keyframes sensitiveVibe {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }

    /* Vibre très vite */
    100% {
        transform: scale(1);
        opacity: 0.3;
    }
}

@keyframes soundFloat {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: translate(10px, -10px);
        opacity: 0;
    }

    /* Les petits détails sont captés */
}

/* =========================================
   DIRECTIVITÉ
   ========================================= */

/* --- 1. CARDIOÏDE (Battement Cœur) --- */
.pickup-zone {
    transform-origin: 50px 65px;
    animation: cardioPulse 2s infinite ease-in-out;
}

.sound-in {
    animation: soundEnter 2s infinite ease-in-out;
}

@keyframes cardioPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}

@keyframes soundEnter {
    0% {
        stroke-dasharray: 20;
        stroke-dashoffset: 20;
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        stroke-dasharray: 20;
        stroke-dashoffset: 0;
        opacity: 0;
    }
}


/* --- 2. OMNI (Radar) --- */
.omni-wave {
    opacity: 0;
    animation: sonarWave 3s infinite linear;
    transform-origin: 50px 50px;
}

.o1 {
    animation-delay: 0s;
}

.o2 {
    animation-delay: 1s;
}

.o3 {
    animation-delay: 2s;
}

.arrows-360 {
    animation: rotateSlow 10s infinite linear;
    transform-origin: 50px 50px;
}

@keyframes sonarWave {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        transform: scale(1.2);
        opacity: 0;
    }
}

@keyframes rotateSlow {
    to {
        transform: rotate(360deg);
    }
}


/* --- 3. BIDIRECTIONNEL (Ping Pong) --- */
.bi-lobe {
    transform-origin: center;
    animation: lobePulse 2s infinite alternate;
}

.lobe-back {
    animation-delay: 1s;
    /* Décalage pour faire un effet avant/arrière */
}

@keyframes lobePulse {
    0% {
        transform: scaleY(0.9);
        opacity: 0.2;
    }

    100% {
        transform: scaleY(1.1);
        opacity: 0.6;
    }
}


/* --- 4. MULTI-PATTERN (Switching) --- */
.knob-line {
    animation: switchMode 4s infinite ease-in-out;
}

.shape-omni {
    animation: fadeOmni 4s infinite ease-in-out;
}

.shape-cardio {
    animation: fadeCardio 4s infinite ease-in-out;
}

/* Le bouton tourne */
@keyframes switchMode {

    0%,
    45% {
        transform: rotate(-45deg);
    }

    /* Position 1 */
    50%,
    95% {
        transform: rotate(45deg);
    }

    /* Position 2 */
    100% {
        transform: rotate(-45deg);
    }
}

/* Le rond apparaît puis disparaît */
@keyframes fadeOmni {

    0%,
    40% {
        opacity: 1;
        transform: scale(1);
        transform-origin: 50px 50px;
    }

    45%,
    95% {
        opacity: 0;
        transform: scale(0.5);
        transform-origin: 50px 50px;
    }

    100% {
        opacity: 1;
        transform: scale(1);
        transform-origin: 50px 50px;
    }
}

/* Le cœur apparaît puis disparaît (inverse) */
@keyframes fadeCardio {

    0%,
    40% {
        opacity: 0;
        transform: scale(0.5);
        transform-origin: 50px 50px;
    }

    45%,
    95% {
        opacity: 1;
        transform: scale(1);
        transform-origin: 50px 50px;
    }

    100% {
        opacity: 0;
        transform: scale(0.5);
        transform-origin: 50px 50px;
    }
}

/* =========================================
   CONNECTIVITÉ & LATENCE
   ========================================= */

/* --- 1. USB (Branchement et Flux) --- */
.usb-head-anim {
    animation: usbPlugIn 3s infinite ease-in-out;
}

.usb-data-flow {
    animation: usbData 3s infinite linear;
}

@keyframes usbPlugIn {

    0%,
    20% {
        transform: translateX(0);
    }

    30%,
    80% {
        transform: translateX(10px);
    }

    /* Connecté */
    100% {
        transform: translateX(0);
    }
}

@keyframes usbData {

    0%,
    30% {
        opacity: 0;
        stroke-dashoffset: 20;
    }

    35% {
        opacity: 1;
    }

    /* Le flux apparaît quand c'est branché */
    80% {
        opacity: 1;
        stroke-dashoffset: -40;
    }

    /* Flux rapide */
    85%,
    100% {
        opacity: 0;
    }
}


/* --- 2. XLR (Interface Control) --- */
.xlr-plug-anim {
    animation: xlrConnect 4s infinite ease-in-out;
}

.knob-anim {
    animation: knobTwist 4s infinite ease-in-out;
}

.led-signal {
    animation: ledBlink 4s infinite;
}

@keyframes xlrConnect {

    0%,
    10% {
        transform: translateX(0);
    }

    20%,
    90% {
        transform: translateX(10px);
    }

    /* Connecté */
    100% {
        transform: translateX(0);
    }
}

@keyframes knobTwist {

    0%,
    25% {
        transform: translate(75px, 50px) rotate(-45deg);
    }

    40%,
    80% {
        transform: translate(75px, 50px) rotate(45deg);
    }

    /* On tourne le bouton */
    100% {
        transform: translate(75px, 50px) rotate(-45deg);
    }
}

@keyframes ledBlink {

    0%,
    25% {
        opacity: 0.2;
        fill: #0f0;
    }

    30% {
        opacity: 1;
        fill: #0f0;
    }

    /* Signal Vert */
    50% {
        opacity: 1;
        fill: #ff0;
    }

    /* Signal Jaune (gain monte) */
    70% {
        opacity: 1;
        fill: #f00;
    }

    /* Signal Rouge (clip) */
    100% {
        opacity: 0.2;
        fill: #0f0;
    }
}


/* --- 3. MONITORING (Direct Path) --- */
.audio-dot {
    /* Le signal part du micro vers le casque */
    offset-path: path("M27,65 L27,75 L80,75 L80,60");
    animation: directPath 1.5s infinite linear;
}

.arrow-direct {
    animation: arrowPulse 1.5s infinite ease-in-out;
}

@keyframes directPath {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes arrowPulse {

    0%,
    100% {
        transform: scaleX(0.8);
        opacity: 0.5;
        transform-origin: center;
    }

    50% {
        transform: scaleX(1.1);
        opacity: 1;
        transform-origin: center;
    }
}

/* =========================================
   ACCESSOIRES & FONCTIONNALITÉS
   ========================================= */

/* --- 1. ANTI-POP (Impact) --- */
.plosive-wind {
    animation: windBlow 2s infinite ease-in;
}

.impact-particles circle {
    animation: particleSplash 2s infinite ease-out;
    opacity: 0;
}

@keyframes windBlow {
    0% {
        transform: translateX(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        transform: translateX(35px);
        opacity: 1;
    }

    /* Touche le filtre */
    51% {
        transform: translateX(35px);
        opacity: 0;
    }

    /* Disparaît à l'impact */
    100% {
        transform: translateX(35px);
        opacity: 0;
    }
}

@keyframes particleSplash {

    0%,
    49% {
        transform: translate(0, 0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    80% {
        opacity: 0;
        transform: translate(5px, -5px) scale(0.5);
    }

    /* Éclaboussure */
    100% {
        opacity: 0;
    }
}


/* --- 2. BRAS ARTICULÉ (Déploiement) --- */
.boom-arm-anim {
    animation: armUnfold 4s infinite ease-in-out;
    transform-origin: 90px 80px;
}

/* On anime la rotation du bras entier */
@keyframes armUnfold {
    0% {
        transform: rotate(0deg);
    }

    /* Position basse */
    50% {
        transform: rotate(-20deg);
    }

    /* Position haute */
    100% {
        transform: rotate(0deg);
    }
}


/* --- 3. SHOCK MOUNT (Isolation) --- */
.shock-outer {
    animation: vibrate 0.2s infinite linear;
}

.shock-inner {
    /* Le micro intérieur reste stable ou bouge très peu */
    animation: stabilize 0.2s infinite linear;
}

.vibration-waves {
    animation: shockwave 1s infinite linear;
}

@keyframes vibrate {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1px, 1px);
    }

    50% {
        transform: translate(-1px, -1px);
    }

    75% {
        transform: translate(-1px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes stabilize {

    /* Mouvement inverse très léger pour simuler l'inertie */
    0%,
    100% {
        transform: translate(0, 0);
    }
}

@keyframes shockwave {
    0% {
        opacity: 0;
        transform: translateY(5px);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}


/* --- 4. MUTE / GAIN (Action) --- */
.btn-body {
    animation: btnPress 3s infinite;
}

.mic-slash {
    animation: slashAppear 3s infinite;
}

.sound-signal {
    animation: signalCut 3s infinite;
}

.gain-marker {
    animation: gainTurn 3s infinite ease-in-out;
}

/* Séquence : Son actif -> Clic -> Son coupé -> Clic -> Son actif */

@keyframes btnPress {

    0%,
    45% {
        fill: #333;
    }

    50%,
    90% {
        fill: #222;
        stroke: var(--accent);
    }

    /* État pressé/Mute */
    100% {
        fill: #333;
    }
}

@keyframes slashAppear {

    0%,
    45% {
        opacity: 0;
    }

    50%,
    90% {
        opacity: 1;
    }

    /* Barre rouge visible */
    100% {
        opacity: 0;
    }
}

@keyframes signalCut {

    0%,
    45% {
        d: path("M10,30 Q20,10 30,30 T50,30 T70,30 T90,30");
        opacity: 1;
        stroke: var(--accent);
    }

    /* Onde normale */
    50%,
    90% {
        d: path("M10,30 L90,30");
        opacity: 0.5;
        stroke: var(--muted);
    }

    /* Ligne plate */
    100% {
        d: path("M10,30 Q20,10 30,30 T50,30 T70,30 T90,30");
        opacity: 1;
        stroke: var(--accent);
    }
}

@keyframes gainTurn {
    0% {
        transform: rotate(-45deg);
    }

    50% {
        transform: rotate(45deg);
    }

    /* Le bouton tourne */
    100% {
        transform: rotate(-45deg);
    }
}

/* =========================================
   QUALITÉ AUDIO & SPÉCIFICATIONS
   ========================================= */

/* --- 1. ÉCHANTILLONNAGE (Resolution Switch) --- */

.wave-stepped {
    animation: fadeOutStep 4s infinite ease-in-out;
}

.wave-smooth {
    animation: fadeInSmooth 4s infinite ease-in-out;
}

.label-16 {
    animation: fadeOutText 4s infinite ease-in-out;
}

.label-24 {
    animation: fadeInText 4s infinite ease-in-out;
}

/* On alterne entre la vue "escalier" (moche) et "lisse" (belle) */
@keyframes fadeOutStep {

    0%,
    45% {
        opacity: 1;
        stroke-width: 2px;
    }

    50%,
    95% {
        opacity: 0;
        stroke-width: 0;
    }

    100% {
        opacity: 1;
        stroke-width: 2px;
    }
}

@keyframes fadeInSmooth {

    0%,
    45% {
        opacity: 0;
        stroke-width: 0;
    }

    50%,
    95% {
        opacity: 1;
        stroke-width: 3px;
    }

    100% {
        opacity: 0;
        stroke-width: 0;
    }
}

@keyframes fadeOutText {

    0%,
    45% {
        opacity: 1;
    }

    50%,
    100% {
        opacity: 0;
    }
}

@keyframes fadeInText {

    0%,
    45% {
        opacity: 0;
    }

    50%,
    95% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}


/* --- 2. BRUIT PROPRE (Noise Floor Drop) --- */

.noise-floor {
    animation: lowerNoise 3s infinite ease-in-out;
}

.noise-arrow {
    animation: arrowShow 3s infinite ease-in-out;
}

/* Le bruit descend vers le bas (disparaît) */
@keyframes lowerNoise {

    0%,
    20% {
        transform: translateY(-20px);
        opacity: 1;
    }

    /* Bruit élevé */
    50%,
    80% {
        transform: translateY(10px);
        opacity: 0.2;
    }

    /* Bruit bas (Clean) */
    100% {
        transform: translateY(-20px);
        opacity: 1;
    }
}

@keyframes arrowShow {

    0%,
    20% {
        opacity: 0;
        transform: translateY(-10px);
    }

    50%,
    80% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}


/* --- 3. SPL MAX (Clipping Simulation) --- */

.spl-wave {
    /* Le scaling se fait depuis le centre vertical */
    transform-origin: 50px 50px;
    animation: clipEffect 3s infinite ease-in-out;
}

.clip-text {
    animation: clipAlert 3s infinite;
}

@keyframes clipEffect {
    0% {
        transform: scaleY(0.5);
        stroke: var(--accent);
    }

    /* Normal */

    40% {
        transform: scaleY(1.4);
        stroke: #f00;
    }

    /* Trop fort (Dépasse les lignes) -> Rouge */

    45% {
        transform: scaleY(1.4);
        stroke: #f00;
    }

    /* Maintien saturation */

    60% {
        transform: scaleY(0.9);
        stroke: var(--accent);
    }

    /* Réduit pour rentrer (Limiter) */

    100% {
        transform: scaleY(0.5);
        stroke: var(--accent);
    }
}

@keyframes clipAlert {

    0%,
    35% {
        opacity: 0;
        transform: scale(1);
    }

    40%,
    45% {
        opacity: 1;
        transform: scale(1.2);
        transform-origin: 80px 15px;
    }

    /* Flash CLIP! */
    50%,
    100% {
        opacity: 0;
        transform: scale(1);
    }
}

/* =========================================
   TRAITEMENTS & LOGICIEL
   ========================================= */

/* --- 1. EQ / COMP (Scan Process) --- */
.scan-mask {
    animation: maskExpand 3s infinite linear;
}

.scan-bar {
    animation: barMove 3s infinite linear;
}

@keyframes maskExpand {
    0% {
        width: 0;
    }

    50% {
        width: 100px;
    }

    /* Révèle tout le signal propre */
    80% {
        width: 100px;
    }

    /* Pause */
    100% {
        width: 0;
    }

    /* Reset */
}

@keyframes barMove {
    0% {
        x1: 0;
        x2: 0;
        opacity: 1;
    }

    50% {
        x1: 100;
        x2: 100;
        opacity: 1;
    }

    55% {
        x1: 100;
        x2: 100;
        opacity: 0;
    }

    /* Disparaît à la fin */
    90% {
        x1: 0;
        x2: 0;
        opacity: 0;
    }

    100% {
        x1: 0;
        x2: 0;
        opacity: 1;
    }
}


/* --- 2. DE-ESSER (Squash) --- */
.sibilance-spike {
    animation: spikeReduce 2s infinite ease-in-out;
    transform-origin: 70px 80px;
    /* Bas du pic */
}

.deesser-bar {
    animation: barPress 2s infinite ease-in-out;
}

.arrow-crush {
    animation: arrowFlash 2s infinite;
}

@keyframes spikeReduce {

    0%,
    30% {
        transform: scaleY(1);
        stroke: var(--text);
    }

    /* Pic haut */
    50% {
        transform: scaleY(0.4);
        stroke: var(--accent);
    }

    /* Pic écrasé */
    80% {
        transform: scaleY(0.4);
        stroke: var(--accent);
    }

    100% {
        transform: scaleY(1);
        stroke: var(--text);
    }
}

@keyframes barPress {

    0%,
    30% {
        transform: translateY(0);
        opacity: 0.5;
    }

    50% {
        transform: translateY(25px);
        opacity: 1;
    }

    /* La barre descend */
    80% {
        transform: translateY(25px);
        opacity: 1;
    }

    100% {
        transform: translateY(0);
        opacity: 0.5;
    }
}

@keyframes arrowFlash {

    0%,
    30% {
        opacity: 0;
        transform: translateY(0);
    }

    40% {
        opacity: 1;
        transform: translateY(10px);
    }

    60% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* --- 3. MONITORING (Loopback) --- */
.signal-return {
    offset-path: path("M35,65 C10,65 10,50 65,54");
    animation: returnTravel 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
}

.ear-wave path {
    animation: earPulse 2s infinite;
    opacity: 0;
}

.ear-wave path:nth-child(2) {
    animation-delay: 0.2s;
}

@keyframes returnTravel {
    0% {
        offset-distance: 0%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }

    /* Arrive au casque */
}

@keyframes earPulse {

    0%,
    80% {
        opacity: 0;
        transform: scale(0.8);
    }

    85% {
        opacity: 1;
        transform: scale(1.1);
    }

    /* Onde visible à l'arrivée */
    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* =========================================
   PLACEMENT & TECHNIQUE
   ========================================= */

/* --- 1. ANGLE (Rotation 45°) --- */
.mic-position-anim {
    /* Le micro tourne autour de la tête (pivot en bas au centre) */
    transform-origin: 50px 85px;
    animation: angleSwitch 4s infinite ease-in-out;
}

.angle-arc,
.angle-text {
    animation: angleShow 4s infinite ease-in-out;
}

.dist-arrow {
    animation: distShow 4s infinite ease-in-out;
}

@keyframes angleSwitch {

    0%,
    30% {
        transform: rotate(0deg);
    }

    /* Face (Mauvais pour plosives) */
    50%,
    80% {
        transform: rotate(-45deg);
    }

    /* 45 degrés (Bon) */
    100% {
        transform: rotate(0deg);
    }
}

@keyframes angleShow {

    0%,
    30% {
        opacity: 0;
    }

    50%,
    80% {
        opacity: 1;
    }

    /* Affiche "45°" quand le micro est en place */
    100% {
        opacity: 0;
    }
}

@keyframes distShow {

    0%,
    30% {
        opacity: 0;
        transform: translate(0, 0);
    }

    50%,
    80% {
        opacity: 1;
        transform: translate(-25px, -15px);
    }

    /* La flèche suit le mouvement */
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }
}


/* --- 2. PROXIMITÉ (Bass Boost) --- */
.mic-move-prox {
    animation: moveClose 3s infinite ease-in-out;
}

.eq-bar.bass {
    transform-origin: bottom;
    animation: boostBass 3s infinite ease-in-out;
}

@keyframes moveClose {

    0%,
    10% {
        transform: translate(50px, 50px) rotate(90deg);
    }

    /* Loin */
    50%,
    60% {
        transform: translate(25px, 50px) rotate(90deg);
    }

    /* Près */
    100% {
        transform: translate(50px, 50px) rotate(90deg);
    }
}

@keyframes boostBass {

    0%,
    10% {
        transform: scaleY(1);
        fill: var(--muted);
    }

    /* Basse normale */
    50%,
    60% {
        transform: scaleY(1.1);
        fill: var(--accent);
    }

    /* Basse boostée (Proximité) */
    100% {
        transform: scaleY(1);
        fill: var(--muted);
    }
}


/* --- 3. BRUITS (Shielding) --- */
.bad-vibe {
    animation: vibeAttack 1s infinite linear;
}

.bad-air {
    animation: airAttack 1s infinite linear;
}

.shield-pulse {
    animation: shieldGlow 2s infinite ease-out;
}

@keyframes vibeAttack {
    0% {
        transform: translateY(5px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-5px);
        opacity: 0;
    }

    /* Monte vers le micro mais s'arrête visuellement au trait */
}

@keyframes airAttack {
    0% {
        transform: translateX(-5px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateX(5px);
        opacity: 0;
    }

    /* Avance vers le filtre */
}

@keyframes shieldGlow {
    0% {
        opacity: 0.5;
        transform: scale(0.9);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
        stroke-width: 0;
    }

    /* Onde de protection */
}

/* =========================================
   ACOUSTIQUE DE LA PIÈCE
   ========================================= */

/* --- 1. RÉVERBÉRATION (Bounce vs Absorb) --- */

.panels-anim {
    animation: panelsShow 4s infinite;
}

.wave-echo {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: echoTravel 4s infinite linear;
}

.wave-absorb {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
    animation: absorbTravel 4s infinite linear;
}

/* Phase 1 : Pas de panneaux, onde rouge rebondit */
/* Phase 2 : Panneaux là, onde jaune s'arrête net */

@keyframes panelsShow {

    0%,
    45% {
        opacity: 0;
    }

    50%,
    95% {
        opacity: 1;
    }

    /* Panneaux visibles */
    100% {
        opacity: 0;
    }
}

@keyframes echoTravel {
    0% {
        opacity: 1;
        stroke-dashoffset: 100;
    }

    20% {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    /* Rebondit partout */
    40% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes absorbTravel {

    0%,
    50% {
        opacity: 0;
        stroke-dashoffset: 30;
    }

    55% {
        opacity: 1;
        stroke-dashoffset: 30;
    }

    70% {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    /* Touche le panneau */
    80% {
        opacity: 0;
    }

    /* Disparaît (Absorbé) */
    100% {
        opacity: 0;
    }
}


/* --- 2. BRUIT (Distance) --- */

.noise-source-move {
    /* Le groupe contient le ventilateur centré en 0,0 */
    animation: moveAway 4s infinite ease-in-out;
    transform-origin: center;
}

.fan-spin {
    animation: spinFan 0.5s infinite linear;
}

.noise-lines {
    animation: noiseEmit 0.5s infinite linear;
}

@keyframes moveAway {

    0%,
    20% {
        transform: translate(50px, 50px);
    }

    /* Près du micro */
    50%,
    80% {
        transform: translate(80px, 50px);
    }

    /* Loin */
    100% {
        transform: translate(50px, 50px);
    }
}

@keyframes spinFan {
    to {
        transform: rotate(360deg);
    }
}

@keyframes noiseEmit {
    0% {
        opacity: 1;
        transform: translateX(0);
    }

    100% {
        opacity: 0;
        transform: translateX(-10px);
    }
}

/* =========================================
   COMPATIBILITÉ & ÉCOSYSTÈME
   ========================================= */

/* --- 1. MULTI-PLATEFORME (Cycle d'activation) --- */

.device-icon {
    transition: all 0.3s ease;
}

/* Séquence d'allumage */
.dev-pc {
    animation: deviceCycle 6s infinite;
    animation-delay: 0s;
}

.dev-console {
    animation: deviceCycle 6s infinite;
    animation-delay: 2s;
}

.dev-app {
    animation: deviceCycle 6s infinite;
    animation-delay: 4s;
}

/* Les câbles s'allument avec le device */
.c1 {
    animation: cableCycle 6s infinite;
    animation-delay: 0s;
}

.c2 {
    animation: cableCycle 6s infinite;
    animation-delay: 2s;
}

.c3 {
    animation: cableCycle 6s infinite;
    animation-delay: 4s;
}

@keyframes deviceCycle {

    0%,
    5% {
        opacity: 0.3;
        stroke: var(--muted);
    }

    10%,
    30% {
        opacity: 1;
        stroke: var(--accent);
        transform: scale(1.1);
    }

    /* Actif */
    35%,
    100% {
        opacity: 0.3;
        stroke: var(--muted);
        transform: scale(1);
    }
}

@keyframes cableCycle {

    0%,
    5% {
        stroke: var(--muted);
    }

    10%,
    30% {
        stroke: var(--accent);
    }

    35%,
    100% {
        stroke: var(--muted);
    }
}


/* --- 2. ALIMENTATION 48V (Energy Flow) --- */

.power-bolt {
    offset-path: path("M70,67 C50,70 22.5,70 22.5,50");
    animation: voltTravel 2.5s infinite ease-in;
    opacity: 0;
}

.mic-condenser {
    animation: micPowerUp 2.5s infinite step-end;
}

@keyframes voltTravel {
    0% {
        offset-distance: 0%;
        opacity: 1;
    }

    80% {
        offset-distance: 100%;
        opacity: 1;
    }

    /* Arrive au micro */
    81%,
    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

@keyframes micPowerUp {

    0%,
    79% {
        fill: var(--surface);
        stroke: var(--text);
        filter: none;
    }

    80%,
    100% {
        fill: var(--accent);
        stroke: #FFF;
        filter: drop-shadow(0 0 5px var(--accent));
    }

    /* S'allume à l'impact */
}


/* --- 3. INLINE PREAMP (Boost Signal) --- */

.weak-signal {
    stroke-dasharray: 30;
    animation: signalMove 1.5s infinite linear;
}

.strong-signal {
    stroke-dasharray: 30;
    animation: signalMove 1.5s infinite linear;
}

@keyframes signalMove {
    from {
        stroke-dashoffset: 30;
    }

    to {
        stroke-dashoffset: 0;
    }
}