/* ============================================================
   button-shine.css
   Effet "balayage lumineux + roll-up texte" pour boutons CTA.

   Markup attendu (sur <a> ou <button>) :
     <button data-button-effect>
       <span class="btn-shine" aria-hidden="true"></span>
       <span class="btn-roll">
         <span class="btn-roll-layer">Texte</span>
         <span class="btn-roll-layer" aria-hidden="true">Texte</span>
       </span>
     </button>

   Au hover :
   - Une bande lumineuse vert luciole (var --color-accent)
     traverse le bouton de gauche à droite (700 ms cubic-bezier).
   - Le texte "roule" vers le haut, sa copie identique remonte par le bas.

   Aucune dépendance JS. Désactivé sous prefers-reduced-motion.
   ============================================================ */

[data-button-effect] {
  /* overflow:hidden contient le shine + roll dans le radius du bouton.
     isolation:isolate crée un stacking context pour ne pas pourrir le
     z-index global. */
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ── Shine : bande lumineuse oblique qui traverse au hover ────── */

[data-button-effect] .btn-shine {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -120%;
  width: 60%;
  /* Bande plus "lumineuse" : gradient resserré + opacité boostée pour
     vraiment voir le balayage passer. Centre fortement opaque, fade rapide
     vers les bords pour un effet "flash". */
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(201, 242, 107, 0.7) 40%,
    rgba(255, 255, 255, 0.85) 50%,
    rgba(201, 242, 107, 0.7) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 1;
  will-change: transform;
}

[data-button-effect]:hover .btn-shine,
[data-button-effect]:focus-visible .btn-shine {
  left: 120%;
}

/* Variante shine sombre pour boutons sur fond clair (secondary, ghost,
   filtres inactifs, hamburger). On garde une teinte glow vert luciole
   mais avec une opacité plus mesurée car le fond est déjà clair. */
[data-button-effect].btn-shine--light .btn-shine {
  background: linear-gradient(
    100deg,
    transparent 0%,
    rgba(122, 171, 48, 0.35) 40%,
    rgba(122, 171, 48, 0.5) 50%,
    rgba(122, 171, 48, 0.35) 60%,
    transparent 100%
  );
}

/* ── Roll : texte qui se "roule" vers le haut au hover ────────── */

[data-button-effect] .btn-roll {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  /* Hauteur = 1.2em (line-height standard) — affiche une seule ligne ;
     la copie sous est masquée par overflow du parent .btn-roll. */
  height: 1.2em;
  line-height: 1.2em;
  overflow: hidden;
  z-index: 2;
  white-space: nowrap;
}

[data-button-effect] .btn-roll-layer {
  /* inline-flex + gap pour aligner correctement texte + icones SVG sur les
     btn legacy (CTA, ProductsOverview, ProjectsTeaser) qui ont un <svg>
     inline. Sur les <Button> Astro avec slot = texte simple, aucun impact
     visuel (pas de gap entre les enfants car un seul text node). */
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  /* Easing premium : ease-in-out bien dosé pour un mouvement net mais doux */
  transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}

[data-button-effect]:hover .btn-roll-layer,
[data-button-effect]:focus-visible .btn-roll-layer {
  transform: translateY(-100%);
}

/* ── Reduced motion : neutralise tout ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  [data-button-effect] .btn-shine,
  [data-button-effect] .btn-roll-layer {
    transition: none;
  }
  [data-button-effect]:hover .btn-shine,
  [data-button-effect]:focus-visible .btn-shine {
    left: -150%;
  }
  [data-button-effect]:hover .btn-roll-layer,
  [data-button-effect]:focus-visible .btn-roll-layer {
    transform: none;
  }
}