/* =========================================
   GUIDE D'ACHAT ÉCRANS - VISUELS
   ========================================= */

/* Réutilisation du style de conteneur (identique aux autres guides) */
.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);
    /* Légère bordure pour la finition */
}

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

/* --- 1. FPS / E-SPORT (Tracking rapide) --- */

.target-fast {
    animation: targetMove 2s infinite ease-in-out;
}

.crosshair-anim {
    animation: crosshairTrack 2s infinite ease-in-out;
    transform-origin: 50px 50px;
}

/* La cible bouge rapidement de gauche à droite */
@keyframes targetMove {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    25% {
        transform: translate(30px, -10px);
    }

    /* Mouvement brusque */
    50% {
        transform: translate(60px, 10px);
    }

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

    90% {
        opacity: 1;
    }

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

/* Le viseur suit la cible avec précision */
@keyframes crosshairTrack {
    0% {
        transform: translate(-30px, 0);
        opacity: 0.5;
        scale: 1.2;
    }

    25% {
        transform: translate(0px, -10px);
        opacity: 1;
        scale: 1;
    }

    /* Lock */
    50% {
        transform: translate(30px, 10px);
    }

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

    100% {
        transform: translate(-30px, 0);
        opacity: 0.5;
        scale: 1.2;
    }
}


/* --- 2. IMMERSION (Onde enveloppante) --- */

.immersion-ray {
    stroke-dasharray: 4;
    animation: rayFlow 1.5s infinite linear;
}

.immersion-wave {
    animation: waveExpand 3s infinite ease-out;
    transform-origin: 50px 30px;
    /* Centre de l'arc */
}

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

    /* Effet de flux vers les yeux */
}

@keyframes waveExpand {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
        stroke-width: 3px;
    }

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


/* --- 3. POLYVALENT (Cycle d'icônes) --- */

.poly-icon {
    animation: iconCycle 6s infinite;
}

/* Décalage des apparitions */
.i-game {
    animation-delay: 0s;
}

.i-work {
    animation-delay: 2s;
}

.i-movie {
    animation-delay: 4s;
}

@keyframes iconCycle {

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

    10%,
    25% {
        opacity: 1;
        transform: scale(1);
    }

    /* Visible */
    30%,
    100% {
        opacity: 0;
        transform: scale(1.1);
    }

    /* Disparaît */
}

/* =========================================
   RÉSOLUTION & TAILLE
   ========================================= */

/* --- 1. 1080p (Graphique FPS) --- */
.fps-bar {
    animation: barRise 2s infinite ease-out;
}

/* Décalage pour effet "escalier" */
.b1 {
    animation-delay: 0s;
    height: 10px;
}

.b2 {
    animation-delay: 0.1s;
    height: 15px;
}

.b3 {
    animation-delay: 0.2s;
    height: 22px;
}

.b4 {
    animation-delay: 0.3s;
    height: 28px;
}

@keyframes barRise {
    0% {
        height: 0;
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }

    /* Atteint la hauteur définie dans le CSS */
    80% {
        opacity: 1;
    }

    100% {
        height: 0;
        opacity: 0.5;
    }
}


/* --- 2. 1440p (Blur to Sharp) --- */
.pixel-shape {
    animation: pixelFadeOut 3s infinite ease-in-out;
}

.sharp-shape {
    animation: sharpFadeIn 3s infinite ease-in-out;
}

@keyframes pixelFadeOut {

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

    50%,
    90% {
        opacity: 0;
        transform: scale(0.8) rotate(45deg);
    }

    /* Devient invisible */
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes sharpFadeIn {

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

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

    /* Apparaît net */
    100% {
        opacity: 0;
        transform: scale(0.5);
    }
}


/* --- 3. 4K (Grid Density) --- */
.fine-line {
    animation: gridDensify 3s infinite ease-in-out;
}

.v1,
.h1 {
    animation-delay: 0s;
}

.v2,
.h2 {
    animation-delay: 0.5s;
}

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

    30%,
    80% {
        opacity: 1;
        stroke-width: 1px;
    }

    /* La grille apparaît */
    100% {
        opacity: 0;
    }
}


/* --- 4. ULTRAWIDE (Expansion) --- */
.panel-left {
    animation: expandLeft 3s infinite ease-in-out;
}

.panel-right {
    animation: expandRight 3s infinite ease-in-out;
}

.frame-stretch {
    animation: expandFrame 3s infinite ease-in-out;
}

.ratio-text {
    animation: textFade 3s infinite;
}

@keyframes expandLeft {
    0% {
        width: 0;
        x: 35;
    }

    50%,
    80% {
        width: 15px;
        x: 20;
    }

    /* S'étend vers la gauche */
    100% {
        width: 0;
        x: 35;
    }
}

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

    50%,
    80% {
        width: 15px;
    }

    /* S'étend vers la droite */
    100% {
        width: 0;
    }
}

@keyframes expandFrame {
    0% {
        x: 35;
        width: 30px;
    }

    50%,
    80% {
        x: 20;
        width: 60px;
    }

    /* Le cadre suit l'agrandissement */
    100% {
        x: 35;
        width: 30px;
    }
}

@keyframes textFade {

    0%,
    20% {
        opacity: 0;
    }

    50%,
    80% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* =========================================
   FRÉQUENCE & TEMPS DE RÉPONSE
   ========================================= */

/* --- Configuration commune pour les 3 balles --- */
.ball-common {
    /* Définit le chemin sinusoïdal que la balle doit suivre */
    offset-path: path("M10,50 Q30,20 50,50 T90,50");
    offset-rotate: 0deg;
    /* La balle ne tourne pas sur elle-même */
}

/* 1. 60Hz : Très saccadé (steps(5) = 5 sauts brusques) */
.ball-60 {
    animation: moveAlongPath 2s infinite steps(10);
}

/* 2. 144Hz : Moins saccadé (steps(20) = sauts plus petits, semble plus doux) */
.ball-144 {
    animation: moveAlongPath 2s infinite steps(25);
}

/* 3. 240Hz : Parfaitement fluide (linear) */
.ball-240 {
    animation: moveAlongPath 2s infinite linear;
}

/* L'animation unique qui fait avancer la balle sur le chemin */
@keyframes moveAlongPath {
    0% {
        offset-distance: 0%;
    }

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


/* --- 4. TEMPS DE RÉPONSE (Comparaison Split) --- */

.motion-group {
    animation: compareMove 2s infinite ease-in-out alternate;
}

@keyframes compareMove {
    0% {
        transform: translateX(20px);
    }

    100% {
        transform: translateX(85px);
    }
}

/* =========================================
   TYPE DE DALLE
   ========================================= */

/* --- 1. IPS (Wide Viewing Angles) --- */
.ips-beam {
    transform-origin: 0 0;
    animation: beamPulse 3s infinite ease-in-out;
}

/* L'œil se déplace pour regarder sous tous les angles */
.ips-eye {
    animation: lookAround 4s infinite ease-in-out;
}

@keyframes beamPulse {

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

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

@keyframes lookAround {
    0% {
        transform: translate(50px, 40px) rotate(0deg);
    }

    /* Centre */
    25% {
        transform: translate(20px, 50px) rotate(-30deg);
    }

    /* Gauche */
    50% {
        transform: translate(50px, 40px) rotate(0deg);
    }

    /* Centre */
    75% {
        transform: translate(80px, 50px) rotate(30deg);
    }

    /* Droite */
    100% {
        transform: translate(50px, 40px) rotate(0deg);
    }
}


/* --- 2. VA (Deep Contrast) --- */
/* La barre glisse sur l'écran */
.contrast-slider {
    animation: sliderScan 4s infinite linear;
}

/* Le fond devient noir pur après le passage de la barre */
/* On utilise clip-path pour révéler le noir progressivement */
/* Note: Simulation simplifiée via animation de couleur pour compatibilité SVG/CSS simple */
.va-background {
    animation: deepenBlack 4s infinite linear;
}

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

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

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

@keyframes deepenBlack {
    0% {
        fill: #444;
    }

    /* Gris foncé (IPS-like black) */
    100% {
        fill: #000;
    }

    /* Noir absolu (VA black) */
}


/* --- 3. OLED (Pixel individuel) --- */
.oled-pixel {
    transition: fill 0.1s;
    animation: pixelSwitch 3s infinite;
}

/* Allumage aléatoire pour montrer l'indépendance */
.p1 {
    animation-delay: 0.0s;
}

.p3 {
    animation-delay: 0.5s;
}

.p5 {
    animation-delay: 1.0s;
}

/* Centre */
.p7 {
    animation-delay: 1.5s;
}

.p9 {
    animation-delay: 2.0s;
}

.p2,
.p4,
.p6,
.p8 {
    animation-delay: 0.2s;
    animation-direction: reverse;
}

@keyframes pixelSwitch {
    0% {
        fill: #111;
        stroke: #333;
    }

    /* Éteint (Noir) */
    5% {
        fill: var(--accent);
        stroke: var(--text);
        filter: drop-shadow(0 0 4px var(--accent));
    }

    /* Allumé (Brillant) */
    20% {
        fill: var(--accent);
        stroke: var(--text);
        filter: drop-shadow(0 0 4px var(--accent));
    }

    25% {
        fill: #111;
        stroke: #333;
        filter: none;
    }

    /* Retour noir immédiat */
    100% {
        fill: #111;
        stroke: #333;
        filter: none;
    }
}

/* =========================================
   SYNCHRONISATION & CONNECTIQUE
   ========================================= */

/* --- 1. G-SYNC (Tearing Fix) --- */

.tear-top {
    animation: tearShiftTop 3s infinite ease-in-out;
}

.tear-bottom {
    animation: tearShiftBottom 3s infinite ease-in-out;
    /* On décale la boule du bas pour qu'elle suive le rectangle du bas */
    transform-origin: center;
}

.obj-bottom {
    /* L'objet suit la déchirure */
    animation: tearShiftBottom 3s infinite ease-in-out;
}

.sync-scanline {
    animation: scanFix 3s infinite linear;
}

@keyframes tearShiftTop {

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

    15%,
    35% {
        transform: translateX(-5px);
    }

    /* Déchirure gauche */
    40%,
    100% {
        transform: translateX(0);
    }

    /* Réparé */
}

@keyframes tearShiftBottom {

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

    15%,
    35% {
        transform: translateX(5px);
    }

    /* Déchirure droite */
    40%,
    100% {
        transform: translateX(0);
    }

    /* Réparé */
}

@keyframes scanFix {

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

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

    /* La ligne apparaît */
    60% {
        transform: translateY(60px);
        opacity: 1;
    }

    /* Elle scanne vers le bas */
    65% {
        transform: translateY(60px);
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}


/* --- 2. HDMI 2.1 (Massive Flow) --- */

.high-flow {
    /* On simule un flux rapide en changeant la largeur ou le dashoffset */
    animation: flowPulse 0.5s infinite linear alternate;
}

.signal-badge {
    animation: badgeFlash 2s infinite ease-in-out;
}

@keyframes flowPulse {
    0% {
        opacity: 0.6;
        width: 35px;
        x: 35;
    }

    100% {
        opacity: 1;
        width: 40px;
        x: 35;
    }

    /* Pulsation de puissance */
}

@keyframes badgeFlash {

    0%,
    20% {
        opacity: 0.3;
        fill: var(--muted);
    }

    30%,
    80% {
        opacity: 1;
        fill: var(--accent);
        filter: drop-shadow(0 0 5px var(--accent));
    }

    /* 4K Allumé */
    100% {
        opacity: 0.3;
        fill: var(--muted);
    }
}


/* --- 3. USB-C (Fusion) --- */

.stream {
    stroke-dasharray: 5;
    animation: streamFlow 1s infinite linear;
}

.connector-head {
    animation: plugIn 3s infinite ease-in-out;
}

.unified-flow {
    animation: streamFlow 0.5s infinite linear;
    /* Plus rapide une fois unifié */
    opacity: 0;
}

/* Séquence : Les flux arrivent -> Connecteur avance -> Flux unifié part */

@keyframes streamFlow {
    to {
        stroke-dashoffset: -10;
    }
}

@keyframes plugIn {

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

    30% {
        transform: translateX(5px);
    }

    /* Connexion */
    80% {
        transform: translateX(5px);
    }

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

    /* Déconnexion */
}

/* Le flux unifié apparaît seulement quand c'est branché */
.unified-flow {
    animation: flowUnifiedShow 3s infinite;
}

@keyframes flowUnifiedShow {

    0%,
    30% {
        opacity: 0;
    }

    35%,
    80% {
        opacity: 1;
        stroke-dashoffset: -20;
    }

    /* Ça circule */
    85%,
    100% {
        opacity: 0;
    }
}

/* =========================================
   FONCTIONS SUPPLÉMENTAIRES
   ========================================= */

/* --- 1. HDR (Scan Reveal) --- */

.scan-rect {
    animation: scanReveal 4s infinite ease-in-out;
}

.scan-line {
    animation: scanMove 4s infinite ease-in-out;
}

.hdr-label {
    animation: textPop 4s infinite;
}

@keyframes scanReveal {

    0%,
    20% {
        width: 0;
    }

    50%,
    80% {
        width: 80px;
    }

    /* Révèle toute la largeur */
    100% {
        width: 0;
    }
}

@keyframes scanMove {

    0%,
    20% {
        x1: 10;
        x2: 10;
        opacity: 1;
    }

    50%,
    80% {
        x1: 90;
        x2: 90;
        opacity: 1;
    }

    /* La ligne bouge avec le masque */
    90%,
    100% {
        x1: 10;
        x2: 10;
        opacity: 0;
    }

    /* Retour invisible */
}

@keyframes textPop {

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

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

    100% {
        opacity: 0;
    }
}


/* --- 2. ERGONOMIE (Gymnastique) --- */

.screen-move {
    /* Le groupe est centré en (0,0) dans le SVG pour faciliter la rotation */
    transform-origin: center;
    transform-box: fill-box;
    /* Important pour que la rotation se fasse sur l'objet */
    animation: ergoGym 4s infinite ease-in-out;
    x: 50;
    y: 50;
    /* Position initiale */
}

.arrow-updown {
    animation: arrowFadeInOut 4s infinite;
}

@keyframes ergoGym {
    0% {
        transform: translate(50px, 50px) rotate(0deg);
    }

    /* Centre */
    25% {
        transform: translate(50px, 35px) rotate(0deg);
    }

    /* Monte (Hauteur) */
    50% {
        transform: translate(50px, 50px) rotate(90deg) scale(0.8);
    }

    /* Rotation (Pivot) + petit zoom out pour pas dépasser */
    75% {
        transform: translate(50px, 65px) rotate(0deg);
    }

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

@keyframes arrowFadeInOut {

    0%,
    100% {
        opacity: 0.2;
    }

    50% {
        opacity: 1;
    }
}


/* --- 3. RGB (Breathing Light) --- */

.rgb-aura {
    animation: rgbBreath 3s infinite ease-in-out;
}

.led-strip {
    animation: ledPulse 3s infinite ease-in-out;
}

@keyframes rgbBreath {

    0%,
    100% {
        opacity: 0.2;
        transform: scale(0.8);
        transform-origin: 50px 50px;
        fill: var(--accent);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.2);
        transform-origin: 50px 50px;
        fill: #00ff2f;
    }

    /* Change de couleur (optionnel, ou reste accent) */
}

@keyframes ledPulse {

    0%,
    100% {
        stroke: var(--accent);
        opacity: 0.5;
    }

    50% {
        stroke: #00ff2f;
        opacity: 1;
        filter: drop-shadow(0 0 2px #FFF);
    }
}