/* =====================================================
   CYBR BUTTON — VERSION FINALE SIMPLIFIÉE
   Gris Gundam / Orange au survol
   ===================================================== */

.cybr-btn {
  /* === COULEURS (GRIS GUNDAM) === */
  --primary: #8f9499;          /* gris Gundam */
  --shadow-primary: #6b7075;   /* ombre structure */
  --shadow-secondary: #2e3236;
  --hover-primary: #ff8c1a;    /* orange activation */

  /* === TEXTE === */
  --color: #1b1d1f;
  --hover-color: #111;
  font-size: var(--font-size);


  display: flex;
  align-items: center;    /* centrage vertical */
  justify-content: center;/* centrage horizontal */

  text-align: center;
  line-height: 1.2;

  /* === FORME === */
  --font-size: 12px;
  --clip: polygon(
    0 0, 100% 0, 100% 100%,
    95% 100%, 95% 90%, 85% 90%,
    85% 100%, 8% 100%, 0 70%
  );
  --border: 4px;
  --shimmy-distance: 5;

  font-family: Cyber, sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: bold;

  width: var(--btn-width, 180px);
  height: var(--btn-height, 43px);


  background: transparent;
  color: var(--color);
  border: 0;
  cursor: pointer;
  position: relative;
  outline: none;

  filter: contrast(1.05) brightness(0.97);
}

/* =====================================================
   COUCHES DU BOUTON (FORME ORIGINALE)
   ===================================================== */

.cybr-btn::before,
.cybr-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: var(--clip);
  z-index: -1;
}

.cybr-btn::before {
  background: var(--shadow-primary);
  transform: translate(var(--border), 0);
}

.cybr-btn::after {
  background: var(--primary);
}

/* =====================================================
   CYBR BUTTON — ÉTAT ACTIF FIGÉ
   ===================================================== */

.cybr-btn.is-active {
  color: #111;
  animation: none; /* pas de vibration permanente */
}

.cybr-btn.is-active::after {
  background: #c96a16; /* orange */
  animation: active-pulse 5s ease-in-out infinite;
}

.cybr-btn.is-active::before {
  background: #7d400e; /* ombre orange */
}

/* Le glitch reste discret */
.cybr-btn.is-active .cybr-btn__active-glitch {
  display: block;
}


/* =====================================================
   GLITCH ACTIF — CONTENU DANS LES LIMITES DU BOUTON
   ===================================================== */

.cybr-btn__active-glitch {
  position: absolute;
  inset: 0;
  background: var(--hover-primary);
  clip-path: var(--clip);
  display: none;
  animation: active-glitch 1.6s infinite;
  z-index: -1;
}

@keyframes active-pulse {
  0%, 100% {
    opacity: 1;
    filter: brightness(1);
  }

  45% {
    opacity: 1;
    filter: brightness(1);
  }

  /* début de la perte d'énergie */
  47% {
    opacity: 0.75;
    filter: brightness(0.75);
  }

  /* presque éteint */
  49% {
    opacity: 0.40;
    filter: brightness(0.50);
  }

  /* petit retour parasite */
  51% {
    opacity: 0.65;
    filter: brightness(0.70);
  }

  /* extinction */
  53% {
    opacity: 0.30;
    filter: brightness(0.45);
  }

  /* retour brutal de l'alimentation */
  56% {
    opacity: 1;
    filter: brightness(1);
  }
}

/* =====================================================
   HOVER / ACTIVATION
   ===================================================== */

.cybr-btn:hover {
  color: var(--hover-color);
  animation: vibration 0.35s infinite;
}

.cybr-btn:hover::after {
  background: var(--hover-primary);
}

.cybr-btn:hover::before {
  background: #b35f00;
}

/* =====================================================
   GLITCH LOCAL
   ===================================================== */

.cybr-btn__glitch {
  position: absolute;
  inset: calc(var(--border) * -1);
  background: var(--hover-primary);
  clip-path: var(--clip);
  display: none;
  animation: glitch 1.6s infinite;
  z-index: -1;
}

.cybr-btn:hover .cybr-btn__glitch {
  display: block;
}

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

@keyframes vibration {
  0% { transform: translate(0); }
  20% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  100% { transform: translate(0); }
}

@keyframes glitch {
  0% { clip-path: inset(0 0 90% 0); }
  10% { clip-path: inset(10% 0 60% 0); }
  20% { clip-path: inset(40% 0 20% 0); }
  30% { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}