/* achetergta6.fr motion lib : source de vérité animations
 * Hébergé comme asset htmlpub, linké via <link> sur chaque page après tokens.css.
 * Dépend de tokens.css (variables --mg-*).
 * v1.0.0 / 2026-05-15
 */

/* ============================================================
 * 1. GARDE-FOU GLOBAL : prefers-reduced-motion
 * ============================================================
 * Toutes les classes .motion-* sont neutralisées si l'OS demande reduce.
 * Les éléments restent visibles dans leur état final.
 */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .motion-reveal,
  .motion-reveal-up,
  .motion-reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ============================================================
 * 2. REVEAL ENTRANCE : éléments qui apparaissent au load
 * ============================================================
 * Usage HTML :
 *   <h1 class="motion-reveal motion-stagger-1">Titre</h1>
 *   <p  class="motion-reveal motion-stagger-2">Sous-titre</p>
 * JS pose .is-revealed sur l'ancêtre (ou body) au DOMContentLoaded.
 * Délais de 0 à 850ms par cran de 150ms.
 */

.motion-reveal,
.motion-reveal-up,
.motion-reveal-fade {
  opacity: 0;
  transition:
    opacity var(--mg-dur-med) var(--mg-ease-out-expo),
    transform var(--mg-dur-med) var(--mg-ease-out-expo);
  will-change: opacity, transform;
}

.motion-reveal,
.motion-reveal-up {
  transform: translateY(12px);
}

.motion-reveal-fade {
  transform: none;
}

.is-revealed .motion-reveal,
.is-revealed .motion-reveal-up,
.is-revealed .motion-reveal-fade,
.motion-reveal.is-in-view,
.motion-reveal-up.is-in-view,
.motion-reveal-fade.is-in-view {
  opacity: 1;
  transform: translateY(0);
}

.motion-stagger-1 { transition-delay: 0ms; }
.motion-stagger-2 { transition-delay: 150ms; }
.motion-stagger-3 { transition-delay: 350ms; }
.motion-stagger-4 { transition-delay: 500ms; }
.motion-stagger-5 { transition-delay: 650ms; }
.motion-stagger-6 { transition-delay: 850ms; }

/* ============================================================
 * 3. HERO MOTION LIB : ambient layers (gradient + halos + scanline)
 * ============================================================
 * Usage : appliquer .motion-hero-bg sur le .hero, et coller
 * .motion-halo .motion-halo--magenta etc. en absolute positioning.
 * Les opacités et z-index doivent être gérés en local pour respecter
 * le contexte (overlay au-dessus, content tout en haut).
 */

@keyframes motion-sunset-drift {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}

.motion-sunset-drift::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  background:
    linear-gradient(135deg,
      var(--mg-magenta) 0%,
      var(--mg-sunset) 50%,
      var(--mg-sunset-light) 100%);
  background-size: 220% 220%;
  background-position: 0% 0%;
  opacity: 0.55;
  mix-blend-mode: screen;
  filter: blur(6px);
  animation: motion-sunset-drift var(--mg-dur-drift) var(--mg-ease-in-out) infinite;
  pointer-events: none;
  will-change: background-position;
}

.motion-halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: 0.62;
  will-change: transform;
  transform: translate3d(0, 0, 0) scale(1);
}

.motion-halo--magenta {
  background: radial-gradient(circle, var(--mg-magenta) 0%, transparent 60%);
  animation: motion-halo-a var(--mg-dur-halo-a) var(--mg-ease-in-out) infinite;
}
.motion-halo--sunset {
  background: radial-gradient(circle, var(--mg-sunset) 0%, transparent 62%);
  animation: motion-halo-b var(--mg-dur-halo-b) var(--mg-ease-in-out) infinite;
  animation-delay: -8s;
}
.motion-halo--teal {
  background: radial-gradient(circle, var(--mg-teal) 0%, transparent 60%);
  opacity: 0.18;
  animation: motion-halo-c var(--mg-dur-halo-c) var(--mg-ease-in-out) infinite;
  animation-delay: -14s;
}

@keyframes motion-halo-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(80px, 60px, 0) scale(1.12); }
}
@keyframes motion-halo-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-90px, -50px, 0) scale(1.08); }
}
@keyframes motion-halo-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(50px, -70px, 0) scale(1.14); }
}

.motion-scanline {
  position: absolute;
  left: 0; right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 46, 147, 0.55) 50%,
    transparent 100%);
  opacity: 0;
  pointer-events: none;
  animation: motion-scanline-sweep var(--mg-dur-scanline) linear infinite;
  will-change: transform, opacity;
}

@keyframes motion-scanline-sweep {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  8%   { opacity: 0.04; }
  92%  { opacity: 0.04; }
  100% { transform: translate3d(0, 100vh, 0); opacity: 0; }
}

/* ============================================================
 * 4. CTA BREATHE : glow magenta loop sur les CTA
 * ============================================================
 * Usage : <a class="cta motion-breathe">...</a>
 */

@keyframes motion-cta-breathe {
  0%, 100% { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35), 0 0 0 rgba(255, 46, 147, 0); }
  50%      { box-shadow: 0 6px 28px rgba(0, 0, 0, 0.35), 0 0 36px rgba(255, 46, 147, 0.25); }
}

.motion-breathe {
  animation: motion-cta-breathe var(--mg-dur-breathe) var(--mg-ease-in-out) infinite;
  will-change: box-shadow;
}

.motion-breathe:hover {
  animation-play-state: paused;
  transform: translateY(-2px);
  transition: transform var(--mg-dur-fast) var(--mg-ease-out);
}

/* ============================================================
 * 5. DOT PULSE : badge dot avec halo qui pulse
 * ============================================================
 * Usage : <span class="badge"><span class="motion-pulse"></span>label</span>
 */

@keyframes motion-dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 46, 147, 0.55); }
  70%  { box-shadow: 0 0 0 10px rgba(255, 46, 147, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 46, 147, 0); }
}

.motion-pulse {
  animation: motion-dot-pulse var(--mg-dur-pulse) var(--mg-ease-in-out) infinite;
}

/* ============================================================
 * 6. SCROLL-DRIVEN MOTION : Chrome 115+ animation-timeline
 * ============================================================
 * Fallback : sans support, les éléments restent dans leur état final.
 * Usage : <div class="motion-rise-on-scroll">Contenu</div>
 */

@supports (animation-timeline: view()) {
  .motion-rise-on-scroll {
    animation: motion-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 50%;
  }

  .motion-fade-on-scroll {
    animation: motion-fade-in linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 40%;
  }

  .motion-parallax-slow {
    animation: motion-parallax-y linear both;
    animation-timeline: view();
    animation-range: cover;
  }
}

@keyframes motion-rise {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes motion-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes motion-parallax-y {
  from { transform: translate3d(0, 60px, 0); }
  to   { transform: translate3d(0, -60px, 0); }
}

/* ============================================================
 * 7. HOVER MICRO-INTERACTIONS
 * ============================================================
 */

.motion-tilt-hover {
  transition:
    transform var(--mg-dur-fast) var(--mg-ease-out),
    box-shadow var(--mg-dur-fast) var(--mg-ease-out);
  will-change: transform;
}
.motion-tilt-hover:hover {
  transform: translateY(-3px) rotate(-0.4deg);
  box-shadow: var(--mg-glow-magenta-soft);
}

.motion-glow-hover {
  position: relative;
  transition: box-shadow var(--mg-dur-fast) var(--mg-ease-out);
}
.motion-glow-hover:hover {
  box-shadow: var(--mg-glow-magenta);
}

/* ============================================================
 * 8. VIEW TRANSITIONS (Chrome 111+, Safari 18+)
 * ============================================================
 * Activé via motion.js qui ajoute <meta name="view-transition" content="same-origin">.
 * Les éléments avec view-transition-name partagent leur identité cross-page.
 */

@supports (view-transition-name: none) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--mg-dur-med);
    animation-timing-function: var(--mg-ease-out-expo);
  }

  .vt-hero-wordmark { view-transition-name: hero-wordmark; }
  .vt-nav-logo     { view-transition-name: nav-logo; }
  .vt-cta-ps5      { view-transition-name: cta-ps5; }
  .vt-cta-xbox     { view-transition-name: cta-xbox; }
}

/* ============================================================
 * 9. PROBE : si motion.css se charge, ce custom property existe
 * ============================================================
 */

:root {
  --mg-motion-loaded: "v1.0.0-2026-05-15";
}