/* =========================================
   GUIDE D'ACHAT ACCESSOIRES
   ========================================= */

/* Réutilisation du style container */
.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. CONFORT (Fauteuil bascule) --- */
.chair-back-anim {
    /* Pivot en bas du dossier pour l'inclinaison */
    transform-origin: 35px 55px;
    animation: chairRecline 4s infinite ease-in-out;
}

@keyframes chairRecline {

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

    /* Droit */
    50% {
        transform: rotate(-15deg);
    }

    /* Incliné confort */
}


/* --- 2. IMMERSION (RGB Pulse) --- */
.hex-light {
    animation: hexPulse 3s infinite ease-in-out;
}

/* Décalage pour effet de vague */
.h1 {
    animation-delay: 0s;
}

.h2 {
    animation-delay: 1s;
}

.h3 {
    animation-delay: 2s;
}

@keyframes hexPulse {

    0%,
    100% {
        fill: transparent;
        stroke: var(--muted);
    }

    50% {
        fill: var(--accent);
        stroke: var(--text);
        filter: drop-shadow(0 0 5px var(--accent));
    }
}


/* --- 3. STREAMING (Button Action) --- */
.deck-btn-active {
    animation: btnPush 3s infinite;
}

.on-air-sign,
.on-air-text {
    animation: signFlash 3s infinite;
}

@keyframes btnPush {

    0%,
    40% {
        fill: #444;
    }

    45% {
        fill: var(--accent);
        transform-origin: center;
    }

    /* Clic */
    50%,
    90% {
        fill: var(--accent);
    }

    /* Reste allumé */
    100% {
        fill: #444;
    }
}

@keyframes signFlash {

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

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

    /* Apparaît après le clic */
    100% {
        opacity: 0;
    }
}

/* =========================================
   ERGONOMIE & CONFORT
   ========================================= */

/* --- 1. FAUTEUIL (Hauteur + Inclinaison) --- */

.chair-lift-anim {
    animation: chairHeight 4s infinite ease-in-out;
}

.chair-tilt-anim {
    /* Le pivot est le bas du dossier */
    transform-origin: 35px 60px;
    animation: chairRecline 4s infinite ease-in-out;
}

.arrow-height {
    animation: arrowFloat 2s infinite ease-in-out;
}

@keyframes chairHeight {

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

    40%,
    60% {
        transform: translateY(-10px);
    }

    /* Monte */
    90%,
    100% {
        transform: translateY(0);
    }
}

@keyframes chairRecline {

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

    50%,
    70% {
        transform: rotate(-15deg);
    }

    /* S'incline en arrière */
    100% {
        transform: rotate(0deg);
    }
}

@keyframes arrowFloat {

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

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


/* --- 2. BRAS ARTICULÉ (Liberté de mouvement) --- */

.monitor-arm-anim {
    /* Pivot au niveau du pied fixé au bureau */
    transform-origin: 80px 85px;
    animation: armFloat 5s infinite ease-in-out;
}

@keyframes armFloat {
    0% {
        transform: rotate(0deg) translate(0, 0);
    }

    25% {
        transform: rotate(-5deg) translate(-5px, -10px);
    }

    /* Haut Gauche */
    50% {
        transform: rotate(5deg) translate(5px, -5px);
    }

    /* Droite */
    75% {
        transform: rotate(0deg) translate(0, -15px);
    }

    /* Haut */
    100% {
        transform: rotate(0deg) translate(0, 0);
    }
}


/* --- 3. REPOSE-POIGNET (Moelleux) --- */

.hand-press {
    animation: handPush 2s infinite ease-in-out;
}

.wrist-pad {
    transform-origin: bottom;
    animation: padSquish 2s infinite ease-in-out;
}

.comfort-particles circle {
    animation: particleFloat 2s infinite ease-in;
    opacity: 0;
}

.comfort-particles circle:nth-child(2) {
    animation-delay: 0.2s;
}

.comfort-particles circle:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes handPush {

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

    50% {
        transform: translateY(5px);
    }

    /* La main appuie */
}

@keyframes padSquish {

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

    50% {
        transform: scaleY(0.7);
    }

    /* Le coussin s'écrase */
}

@keyframes particleFloat {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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

    /* Bulles de confort */
}

/* =========================================
   AUDIO & IMMERSION
   ========================================= */

/* --- 1. ENCEINTES (Bass Thump) --- */

.speaker-cone {
    transform-origin: center;
    transform-box: fill-box;
    animation: speakerBoom 0.8s infinite cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

.music-wave {
    animation: waveSpread 0.8s infinite ease-out;
    opacity: 0;
}

@keyframes speakerBoom {

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

    15% {
        transform: scale(1.15);
    }

    /* Boum ! */
    30% {
        transform: scale(1);
    }
}

@keyframes waveSpread {
    0% {
        transform: scale(0.8);
        opacity: 0;
        stroke-width: 3px;
        transform-origin: center;
        transform-box: fill-box;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        stroke-width: 0px;
        transform-origin: center;
        transform-box: fill-box;
    }
}


/* --- 2. ÉCOUTEURS (Lévitation) --- */

.earbud-float {
    animation: floatBuds 3s infinite ease-in-out;
}

.right-bud {
    animation-delay: 1.5s;
    /* Décalage pour mouvement asynchrone */
}

.wireless-sig {
    animation: signalPing 2s infinite ease-out;
    opacity: 0;
    transform-origin: 50px 30px;
}

@keyframes floatBuds {

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

    50% {
        transform: translateY(-8px);
    }

    /* Flotte vers le haut */
}

@keyframes signalPing {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }

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


/* --- 3. ÉCLAIRAGE (RGB Cycle) --- */

.light-bar {
    animation: barColorCycle 6s infinite linear;
}

.wall-glow stop:first-child {
    /* On anime la couleur du stop du dégradé SVG via CSS */
    animation: glowColorCycle 6s infinite linear;
}

@keyframes barColorCycle {
    0% {
        fill: #ff0000;
        filter: drop-shadow(0 0 5px #ff0000);
    }

    33% {
        fill: #00ff00;
        filter: drop-shadow(0 0 5px #00ff00);
    }

    66% {
        fill: #0000ff;
        filter: drop-shadow(0 0 5px #0000ff);
    }

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

@keyframes glowColorCycle {
    0% {
        stop-color: #ff0000;
    }

    33% {
        stop-color: #00ff00;
    }

    66% {
        stop-color: #0000ff;
    }

    100% {
        stop-color: #ff0000;
    }
}

/* =========================================
   STREAMING & CONTRÔLE
   ========================================= */

/* --- 1. WEBCAM (Focus & Rec) --- */
.cam-iris {
    animation: autoFocus 4s infinite ease-in-out;
    transform-origin: 50px 45px;
}

.cam-rec {
    animation: recLight 1s infinite;
}

@keyframes autoFocus {

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

    50% {
        transform: scale(0.6);
    }

    /* L'iris se ferme et s'ouvre */
}

@keyframes recLight {

    0%,
    50% {
        opacity: 1;
    }

    51%,
    100% {
        opacity: 0.3;
    }
}


/* --- 2. CONTRÔLEUR (Scene Switch) --- */
.active-btn {
    animation: btnPressAction 4s infinite;
}

.scene-a {
    animation: sceneSwapA 4s infinite;
}

.scene-b {
    animation: sceneSwapB 4s infinite;
}

.signal-path {
    animation: signalSend 4s infinite;
}

/* Séquence : Clic -> Signal -> Changement d'écran */

@keyframes btnPressAction {

    0%,
    35% {
        fill: #444;
    }

    40%,
    45% {
        fill: var(--accent);
    }

    /* Clic */
    50%,
    100% {
        fill: #444;
    }
}

@keyframes signalSend {

    0%,
    40% {
        opacity: 0;
        stroke-dashoffset: 10;
    }

    45%,
    60% {
        opacity: 1;
        stroke-dashoffset: 0;
    }

    /* Le signal voyage */
    100% {
        opacity: 0;
    }
}

@keyframes sceneSwapA {

    0%,
    50% {
        opacity: 1;
    }

    55%,
    100% {
        opacity: 0;
    }

    /* Disparaît */
}

@keyframes sceneSwapB {

    0%,
    50% {
        opacity: 0;
    }

    55%,
    100% {
        opacity: 1;
    }

    /* Apparaît (Changement de couleur) */
}


/* --- 3. BRAS MICRO (Mise en place) --- */
.arm-move-action {
    transform-origin: 20px 20px;
    animation: armDeploy 5s infinite ease-in-out;
}

@keyframes armDeploy {
    0% {
        transform: rotate(-20deg);
    }

    /* Haut */
    40%,
    70% {
        transform: rotate(10deg);
    }

    /* Bas (devant la bouche) */
    100% {
        transform: rotate(-20deg);
    }

    /* Retour */
}

/* =========================================
   COMPATIBILITÉ & CONNECTIVITÉ
   ========================================= */

/* --- 1. MULTIPLATEFORME (Cycle rotatif) --- */

.device-node,
.link-line {
    transition: all 0.3s ease;
}

/* Séquence d'activation : PC -> Console -> Mobile */
.d-pc,
.l-pc {
    animation: platCycle 6s infinite;
    animation-delay: 0s;
}

.d-console,
.l-console {
    animation: platCycle 6s infinite;
    animation-delay: 2s;
}

.d-mobile,
.l-mobile {
    animation: platCycle 6s infinite;
    animation-delay: 4s;
}

@keyframes platCycle {

    0%,
    10% {
        opacity: 0.3;
        stroke: var(--muted);
        fill: #222;
    }

    15%,
    35% {
        opacity: 1;
        stroke: var(--accent);
        fill: var(--surface);
        transform: scale(1.1);
    }

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


/* --- 2. SANS FIL (Lent vs Rapide) --- */

.wave-bt {
    stroke-dasharray: 5;
    animation: slowSignal 2s infinite linear;
    opacity: 0.5;
}

.wave-rf {
    stroke-dasharray: 20 50;
    /* Un trait court qui file */
    animation: fastSignal 0.5s infinite linear;
    /* Très rapide */
}

@keyframes slowSignal {
    to {
        stroke-dashoffset: -20;
    }
}

@keyframes fastSignal {
    to {
        stroke-dashoffset: -70;
    }
}


/* --- 3. ÉCOSYSTÈMES (Sync Pulse) --- */

.hub-center {
    animation: hubBeat 2s infinite ease-in-out;
    transform-origin: 50px 50px;
}

.sync-line {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: lineFlow 2s infinite ease-out;
}

.eco-device {
    animation: deviceGlow 2s infinite ease-out;
}

/* Séquence : Hub bat -> Lignes coulent -> Devices s'allument */

@keyframes hubBeat {

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

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

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

    30% {
        opacity: 1;
    }

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

    /* Arrive aux devices */
    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

@keyframes deviceGlow {

    0%,
    50% {
        stroke: var(--muted);
        filter: none;
    }

    60%,
    80% {
        stroke: var(--accent);
        filter: drop-shadow(0 0 3px var(--accent));
    }

    /* Synchro ! */
    100% {
        stroke: var(--muted);
        filter: none;
    }
}