/* =========================================
   VISUELS ANIMÉS CLAVIERS (Style Casques)
   ========================================= */

/* Réutilisation du container existant */
.content-section-card .visual-container {
    height: 140px;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: var(--space-4);
    background: #000;
    /* Fond sombre uni comme demandé */
    border-radius: var(--radius);
    padding: var(--space-2);
}

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

/* --- ANIMATION 1 : FPS (Vitesse de frappe) --- */

/* La touche Z/W qui clignote nerveusement */
.key-flash {
    animation: rapidFlash 0.8s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rapidFlash {
    0% {
        opacity: 0.3;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1.05);
        fill: var(--accent);
        filter: drop-shadow(0 0 5px var(--accent));
    }
}

/* Les chevrons qui montent (vitesse) */
.speed-chevron {
    animation: speedUp 1s infinite linear;
}

.c1 {
    animation-delay: 0s;
}

.c2 {
    animation-delay: 0.3s;
}

@keyframes speedUp {
    0% {
        transform: translateY(10px);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

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


/* --- ANIMATION 2 : MOBA (Séquence Macro) --- */

/* Les noeuds s'allument un par un */
.macro-node {
    transition: all 0.3s ease;
    animation: macroSequence 2s infinite;
}

.n1 {
    animation-delay: 0s;
}

.n2 {
    animation-delay: 0.4s;
}

.n3 {
    animation-delay: 0.8s;
}

/* Le dernier cercle "Ultimate" */
.n4 {
    animation: ultimatePop 2s infinite;
    animation-delay: 1.2s;
    transform-origin: 82px 50px;
    /* Centre du cercle */
}

@keyframes macroSequence {

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

    20%,
    50% {
        fill: var(--text);
        stroke: var(--text);
    }
}

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

    50% {
        transform: scale(1.2);
        opacity: 1;
    }

    70% {
        transform: scale(1);
        opacity: 1;
    }

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


/* --- ANIMATION 3 : POLYVALENT (Multimédia / Equalizer) --- */

/* Le cercle qui tourne lentement (molette volume) */
.knob-rotate {
    transform-origin: center;
    animation: smoothSpin 10s linear infinite;
}

@keyframes smoothSpin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Les barres qui bougent doucement (musique/film) */
.eq-bar {
    transform-origin: bottom;
    animation: eqBounce 1.5s infinite ease-in-out alternate;
}

.b1 {
    animation-delay: 0s;
    animation-duration: 1.2s;
}

.b2 {
    animation-delay: 0.2s;
    animation-duration: 1.5s;
}

/* La barre accentuée */
.b3 {
    animation-delay: 0.4s;
    animation-duration: 1.1s;
}

@keyframes eqBounce {
    0% {
        transform: scaleY(0.6);
    }

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

/* Responsive */
@media (max-width: 768px) {
    .content-section-card .visual-container {
        height: 120px;
    }
}

/* =========================================
   ANIMATIONS TYPES DE CLAVIERS
   ========================================= */

/* --- 1. MÉCANIQUE (Clic net et précis) --- */

.mech-stem {
    animation: mechPress 2s infinite ease-in-out;
}

/* Le ressort se comprime (effet visuel simple via translation) */
.mech-spring {
    transform-origin: 50% 60px;
    animation: springCompress 2s infinite ease-in-out;
}

/* L'étincelle à l'activation */
.mech-spark {
    animation: sparkFlash 2s infinite;
}

@keyframes mechPress {

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

    10% {
        transform: translateY(0);
    }

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

    /* Descente rapide */
    60% {
        transform: translateY(15px);
    }

    /* Maintien */
}

@keyframes springCompress {

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

    50%,
    60% {
        transform: scaleY(0.6);
    }

    /* Le ressort s'écrase */
}

@keyframes sparkFlash {

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

    50% {
        opacity: 1;
        transform: scale(1.5);
    }

    /* Flash au point bas */
    60% {
        opacity: 0;
        transform: scale(0);
    }

    100% {
        opacity: 0;
    }
}


/* --- 2. MEMBRANE (Mou et progressif) --- */

.memb-key {
    animation: membPress 2.5s infinite ease-in-out;
}

/* Le dôme s'écrase (scaleY) */
.memb-dome {
    transform-origin: 50% 75px;
    /* S'écrase vers le bas */
    animation: domeSquish 2.5s infinite ease-in-out;
}

@keyframes membPress {

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

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

@keyframes domeSquish {

    0%,
    100% {
        transform: scaleY(1);
        stroke: var(--accent);
    }

    50% {
        transform: scaleY(0.3);
        stroke: var(--muted);
    }

    /* Devient plat et gris */
}


/* --- 3. OPTO-MÉCANIQUE (Vitesse et Laser) --- */

.opto-stem {
    animation: optoFastPress 1.5s infinite cubic-bezier(0.1, 0.7, 1.0, 0.1);
}

/* Le rayon laser clignote/réagit */
.opto-beam {
    animation: beamInterrupted 1.5s infinite;
}

/* Cercle de détection "High Tech" */
.opto-detect {
    transform-origin: center;
    animation: sensorPing 1.5s infinite;
}

@keyframes optoFastPress {

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

    15% {
        transform: translateY(35px);
    }

    /* Descente très rapide */
    40% {
        transform: translateY(35px);
    }

    50% {
        transform: translateY(0);
    }
}

@keyframes beamInterrupted {

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

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

    /* Faisceau coupé */
}

@keyframes sensorPing {

    0%,
    10% {
        opacity: 0;
        transform: scale(0.5);
    }

    15% {
        opacity: 1;
        transform: scale(1.2);
        stroke-width: 3px;
    }

    /* Détection instantanée */
    30% {
        opacity: 0;
        transform: scale(1.5);
        stroke-width: 1px;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================
   ANIMATIONS SWITCHS
   ========================================= */

/* --- 1. LINEAR (Mouvement fluide constant) --- */
.stem-anim-linear {
    animation: linearPress 1.5s infinite ease-in-out;
}

/* La petite boule sur le côté qui montre que ça glisse tout seul */
.smooth-ball {
    animation: ballDrop 1.5s infinite ease-in-out;
}

@keyframes linearPress {

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

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

@keyframes ballDrop {

    0%,
    100% {
        cy: 25;
        opacity: 1;
    }

    50% {
        cy: 75;
        opacity: 1;
    }
}


/* --- 2. TACTILE (Pause sur la bosse) --- */
.stem-anim-tactile {
    animation: tactilePress 2s infinite linear;
}

.tactile-bump-effect {
    animation: bumpRipple 2s infinite linear;
}

/* Animation complexe pour simuler la résistance */
@keyframes tactilePress {
    0% {
        transform: translateY(0);
    }

    30% {
        transform: translateY(15px);
    }

    /* Arrive sur la bosse */
    45% {
        transform: translateY(15px);
    }

    /* Petite pause (résistance) */
    60% {
        transform: translateY(25px);
    }

    /* Fin de course */
    100% {
        transform: translateY(0);
    }

    /* Retour */
}

@keyframes bumpRipple {

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

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

    /* Flash au moment de la pause */
    50% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
    }
}


/* --- 3. CLICKY (Secousse + Son) --- */
.stem-anim-clicky {
    animation: clickyPress 2s infinite cubic-bezier(0.6, -0.28, 0.735, 0.045);
}

.click-sound path {
    animation: soundSnap 2s infinite;
    opacity: 0;
    transform-origin: 80px 50px;
}

/* Mouvement sec et rapide */
@keyframes clickyPress {
    0% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(15px);
    }

    /* Point de clic */
    45% {
        transform: translateY(25px);
    }

    /* Descente brutale après clic */
    55% {
        transform: translateY(25px);
    }

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

@keyframes soundSnap {

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

    42% {
        opacity: 1;
        transform: scale(1.2);
    }

    /* BOUM visuel */
    60% {
        opacity: 0;
        transform: scale(1.5);
    }

    100% {
        opacity: 0;
    }
}


/* --- 4. LOW PROFILE (Course courte et rapide) --- */
.stem-anim-low {
    animation: lowPress 1s infinite ease-in-out;
    /* Plus rapide ! */
}

@keyframes lowPress {

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

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

    /* Distance beaucoup plus courte (12px vs 25px) */
}

/* =========================================
   ANIMATIONS FORMAT & ERGONOMIE
   ========================================= */

/* --- 1. 100% (Le pavé numérique existe) --- */
.numpad-glow {
    animation: numpadPulse 2.5s infinite ease-in-out;
}

@keyframes numpadPulse {

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

    50% {
        fill: var(--muted);
        stroke: var(--text);
    }

    /* S'allume pour montrer sa présence */
}


/* --- 2. TKL (La souris prend la place) --- */
.ghost-numpad {
    animation: fadeOutPad 3s infinite;
}

.mouse-slide {
    animation: mouseIn 3s infinite ease-in-out;
}

@keyframes fadeOutPad {

    0%,
    20% {
        opacity: 0.3;
    }

    50%,
    100% {
        opacity: 0;
    }

    /* Disparition */
}

@keyframes mouseIn {

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

    50%,
    100% {
        transform: translateX(-15px);
    }

    /* La souris glisse vers la gauche (gain de place) */
}


/* --- 3. 60% (Layer FN) --- */
.key-fn {
    animation: fnPress 2s infinite steps(1);
}

.layer-dot {
    animation: layerShow 2s infinite steps(1);
}

.board-60 {
    animation: compactBorder 2s infinite ease-in-out;
}

@keyframes fnPress {

    0%,
    40% {
        fill: var(--muted);
    }

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

    /* Touche FN active */
}

@keyframes layerShow {

    0%,
    40% {
        opacity: 0;
    }

    50%,
    90% {
        opacity: 1;
    }

    /* Les fonctions cachées apparaissent */
}

@keyframes compactBorder {

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

    50% {
        stroke: var(--accent);
    }
}


/* --- 4. ERGONOMIE (Inclinaison + Repose poignet) --- */
.keyboard-profile {
    transform-origin: 80px 70px;
    /* Pivot sur l'avant du clavier */
    animation: tiltUp 3s infinite ease-in-out;
}

.tilt-leg {
    animation: legExtend 3s infinite ease-in-out;
}

.wrist-rest-anim {
    animation: restSlide 3s infinite ease-in-out;
}

@keyframes tiltUp {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(0deg);
    }

    50%,
    80% {
        transform: rotate(8deg);
    }

    /* Le clavier se lève */
    100% {
        transform: rotate(0deg);
    }
}

@keyframes legExtend {

    0%,
    20% {
        d: path("M35,70 L35,70");
    }

    /* Pied rentré */
    50%,
    80% {
        d: path("M35,70 L35,78");
    }

    /* Pied sorti */
    100% {
        d: path("M35,70 L35,70");
    }
}

@keyframes restSlide {

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

    50%,
    80% {
        opacity: 1;
        transform: translateX(-50px);
    }

    /* Le repose poignet glisse devant */
    100% {
        opacity: 0;
        transform: translateX(10px);
    }
}

/* =========================================
   ANIMATIONS CONNECTIVITÉ
   ========================================= */

/* --- 1. FILAIRE (Flux rapide et continu) --- */
.data-flow {
    /* Le dashoffset crée l'illusion du mouvement le long du câble */
    animation: flowStream 0.6s infinite linear;
}

@keyframes flowStream {
    from {
        stroke-dashoffset: 90;
    }

    to {
        stroke-dashoffset: 0;
    }
}


/* --- 2. 2.4 GHz (Tir rapide vers dongle) --- */
.wave-fast {
    opacity: 0;
    animation: wirelessShoot 1s infinite linear;
}

.w1 {
    animation-delay: 0s;
}

.w2 {
    animation-delay: 0.15s;
}

.w3 {
    animation-delay: 0.3s;
}

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

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
    }

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

    /* Le signal avance vite */
}


/* --- 3. BLUETOOTH (Pairing séquentiel) --- */

/* Animation des lignes de connexion */
.bt-link {
    animation: connectCycle 4.5s infinite;
}

/* Animation des appareils qui s'activent */
.bt-device {
    transition: stroke 0.3s;
    animation: deviceHighlight 4.5s infinite;
}

/* Séquençage temporel : PC -> Tablette -> Tel */
.link1,
.dev1 {
    animation-delay: 0s;
}

.link2,
.dev2 {
    animation-delay: 1.5s;
}

.link3,
.dev3 {
    animation-delay: 3s;
}

@keyframes connectCycle {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* Connexion active */
    30% {
        opacity: 1;
    }

    40% {
        opacity: 0;
    }

    /* Déconnexion */
    100% {
        opacity: 0;
    }
}

@keyframes deviceHighlight {
    0% {
        stroke: var(--muted);
        stroke-width: 2px;
    }

    10% {
        stroke: var(--accent);
        stroke-width: 3px;
        filter: drop-shadow(0 0 3px var(--accent));
    }

    /* L'appareil brille */
    30% {
        stroke: var(--accent);
        stroke-width: 3px;
    }

    40% {
        stroke: var(--muted);
        stroke-width: 2px;
    }

    100% {
        stroke: var(--muted);
        stroke-width: 2px;
    }
}

/* =========================================
   ANIMATIONS FONCTIONS
   ========================================= */

/* --- 1. RGB (Vague lumineuse) --- */
.rgb-key {
    animation: rgbWave 2s infinite ease-in-out;
}

/* Décalage pour créer l'effet de vague */
.k1 {
    animation-delay: 0s;
}

.k2 {
    animation-delay: 0.2s;
}

.k3 {
    animation-delay: 0.4s;
}

.k4 {
    animation-delay: 0.6s;
}

.rgb-underglow {
    animation: glowPulse 2s infinite ease-in-out;
}

@keyframes rgbWave {

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

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

@keyframes glowPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.8;
    }
}


/* --- 2. MACRO (Séquence d'apparition) --- */
.macro-btn-anim {
    animation: keyPressTrigger 2s infinite;
}

.action-block {
    animation: macroChain 2s infinite;
}

.a1 {
    animation-delay: 0.5s;
}

/* Apparaît juste après le clic */
.a2 {
    animation-delay: 0.7s;
}

.a3 {
    animation-delay: 0.9s;
}

@keyframes keyPressTrigger {

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

    20% {
        transform: translateY(3px);
    }

    /* Clic */
    40% {
        transform: translateY(0);
    }

    /* Relâche */
}

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

    20% {
        opacity: 1;
        transform: translateX(0);
    }

    /* Apparition */
    70% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    /* Disparition pour recommencer */
    100% {
        opacity: 0;
    }
}


/* --- 3. MULTIMEDIA (Rotation & Volume) --- */
.wheel-rotate {
    animation: wheelSpin 3s infinite ease-in-out alternate;
}

.vol-bar {
    transform-origin: bottom;
    animation: volLevel 3s infinite ease-in-out alternate;
}

/* Les barres montent de manière légèrement décalée mais synchronisée avec la molette */
.v1 {
    animation-delay: 0s;
}

.v2 {
    animation-delay: 0.1s;
}

.v3 {
    animation-delay: 0.2s;
}

@keyframes wheelSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@keyframes volLevel {
    0% {
        transform: scaleY(0.2);
    }

    /* Volume bas */
    100% {
        transform: scaleY(1);
    }

    /* Volume haut */
}


/* --- 4. HOT-SWAP (Extraction) --- */
.switch-lift {
    animation: swapMove 2.5s infinite ease-in-out;
}

.swap-arrows {
    animation: arrowFade 2.5s infinite ease-in-out;
}

@keyframes swapMove {

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

    /* En place */
    40%,
    60% {
        transform: translateY(-15px);
    }

    /* Soulevé (Swap) */
    90%,
    100% {
        transform: translateY(0);
    }

    /* Remis en place */
}

@keyframes arrowFade {

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

    40%,
    60% {
        opacity: 1;
        transform: translateY(-5px);
    }

    /* Flèches visibles quand le switch monte */
}