/* Sam Motive — apparitions au défilement. Aucune couleur/police redéfinie. */
:root {
  --sm-reveal-loaded: 1;
}

/* Les éléments sont visibles par défaut. Ces états sont ajoutés par JS. */
[data-sm-reveal-state] {
  --sm-reveal-x: 0px;
  --sm-reveal-y: 28px;
  --sm-reveal-duration: 700ms;
  --sm-reveal-delay: 0ms;
}

.sm-reveal--left {
  --sm-reveal-x: -20px;
  --sm-reveal-y: 0px;
}

.sm-reveal--right {
  --sm-reveal-x: 20px;
  --sm-reveal-y: 0px;
}

[data-sm-reveal-step="1"] { --sm-reveal-delay: 90ms; }
[data-sm-reveal-step="2"] { --sm-reveal-delay: 180ms; }
[data-sm-reveal-step="3"] { --sm-reveal-delay: 270ms; }

.sm-delay-1 { --sm-reveal-delay: 90ms; }
.sm-delay-2 { --sm-reveal-delay: 180ms; }
.sm-delay-3 { --sm-reveal-delay: 270ms; }

[data-sm-reveal-state="waiting"] {
  opacity: 0;
  translate: var(--sm-reveal-x) var(--sm-reveal-y);
}

[data-sm-reveal-state="animating"] {
  animation: sm-block-reveal var(--sm-reveal-duration)
    cubic-bezier(.22, 1, .36, 1) var(--sm-reveal-delay) both;
}

@keyframes sm-block-reveal {
  from {
    opacity: 0;
    translate: var(--sm-reveal-x) var(--sm-reveal-y);
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

/* Un élément qui reçoit le focus reste immédiatement lisible. */
[data-sm-reveal-state]:focus-within {
  opacity: 1;
  translate: none;
  animation: none;
}

@media (max-width: 700px) {
  [data-sm-reveal-state] {
    --sm-reveal-x: 0px;
    --sm-reveal-y: 16px;
    --sm-reveal-duration: 550ms;
    --sm-reveal-delay: 0ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-sm-reveal-state] {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
  }
}
