/* =========================================================
   SmartServices30 — Premium FX (couche additive)
   Micro-interactions & finitions haut de gamme.
   Ne modifie aucun style existant : uniquement des ajouts.
   ========================================================= */

/* -----------------------------------------------------------
   1. Boutons — balayage lumineux (shine sweep) au survol
   ----------------------------------------------------------- */
body.ss-premium .ss-btn {
  overflow: hidden;
  isolation: isolate;
}
body.ss-premium .ss-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 65%
  );
  transform: translateX(-120%);
  pointer-events: none;
}
body.ss-premium .ss-btn:hover::after {
  transition: transform 0.85s var(--ss-ease-out);
  transform: translateX(120%);
}
body.ss-premium .ss-btn-ghost::after,
body.ss-premium .ss-btn--ghost::after {
  background: linear-gradient(
    105deg,
    transparent 35%,
    rgba(255, 255, 255, 0.12) 50%,
    transparent 65%
  );
}
body.ss-premium .ss-btn > * { position: relative; z-index: 2; }

/* -----------------------------------------------------------
   2. Cartes bento — bordure-lueur qui suit le curseur
      (réutilise les variables --mx / --my déjà posées par premium.js)
   ----------------------------------------------------------- */
body.ss-premium .ss-bento__card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(
    320px circle at var(--mx, 50%) var(--my, 50%),
    rgba(34, 211, 238, 0.55),
    rgba(167, 139, 250, 0.25) 40%,
    transparent 70%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.45s var(--ss-ease-out);
  pointer-events: none;
  z-index: 2;
}
body.ss-premium .ss-bento__card:hover::before { opacity: 1; }

/* Halo intérieur doux qui suit aussi le curseur */
body.ss-premium .ss-bento__card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    rgba(167, 139, 250, 0.08),
    transparent 65%
  );
  opacity: 0;
  transition: opacity 0.45s var(--ss-ease-out);
  pointer-events: none;
  z-index: 1;
}
body.ss-premium .ss-bento__card:hover::after { opacity: 1; }
body.ss-premium .ss-bento__card > * { position: relative; z-index: 3; }

/* -----------------------------------------------------------
   3. Études de cas — zoom doux du visuel au survol
   ----------------------------------------------------------- */
body.ss-premium .ss-case__visual {
  overflow: hidden;
}
body.ss-premium .ss-case__visual-mock {
  transition: transform 0.9s var(--ss-ease-out);
  will-change: transform;
}
body.ss-premium .ss-case:hover .ss-case__visual-mock {
  transform: translateY(-4px) scale(1.025);
}

/* -----------------------------------------------------------
   4. Témoignages & étapes process — lift subtil au survol
   ----------------------------------------------------------- */
body.ss-premium .ss-testimonial,
body.ss-premium .ss-process__step {
  transition: transform 0.55s var(--ss-ease-out),
              border-color 0.4s var(--ss-ease-out),
              box-shadow 0.55s var(--ss-ease-out);
}
body.ss-premium .ss-testimonial:hover,
body.ss-premium .ss-process__step:hover {
  transform: translateY(-4px);
  border-color: var(--ss-border-strong);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.7);
}

/* -----------------------------------------------------------
   5. Texte dégradé — shimmer lent et discret (CTA final)
   ----------------------------------------------------------- */
@keyframes ss-fx-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
body.ss-premium .ss-cta-final .ss-gradient-text {
  background-size: 220% 220%;
  animation: ss-fx-shimmer 7s var(--ss-ease-in-out) infinite;
}

/* -----------------------------------------------------------
   6. Liens de navigation — soulignement animé en dégradé
   ----------------------------------------------------------- */
body.ss-premium .main-navigation a {
  position: relative;
}
body.ss-premium .main-navigation a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 2px;
  border-radius: 2px;
  background: var(--ss-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ss-ease-out);
}
body.ss-premium .main-navigation a:hover::after,
body.ss-premium .main-navigation .current-menu-item > a::after {
  transform: scaleX(1);
}

/* -----------------------------------------------------------
   7. Titres de sections — révélation masquée (pilotée par JS)
      .ss-fx-mask est posé par premium-fx.js : sans JS, rien ne change.
   ----------------------------------------------------------- */
body.ss-premium .ss-fx-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
}
body.ss-premium .ss-fx-mask > .ss-fx-mask-inner {
  display: inline-block;
  will-change: transform;
}

/* -----------------------------------------------------------
   8. Accessibilité — focus visible élégant
   ----------------------------------------------------------- */
body.ss-premium a:focus-visible,
body.ss-premium button:focus-visible,
body.ss-premium .ss-btn:focus-visible {
  outline: 2px solid var(--ss-grad-1);
  outline-offset: 3px;
  border-radius: var(--ss-radius-sm);
}

/* -----------------------------------------------------------
   9. Reduced motion — on neutralise les effets animés
   ----------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  body.ss-premium .ss-btn::after { display: none; }
  body.ss-premium .ss-cta-final .ss-gradient-text { animation: none; }
  body.ss-premium .ss-case:hover .ss-case__visual-mock,
  body.ss-premium .ss-testimonial:hover,
  body.ss-premium .ss-process__step:hover {
    transform: none;
  }
}