/*
 * Sublime Chaos — animations d'apparition au scroll
 * API compatible avec l'ancien modèle :
 * class="scroll-in-animation" data-animation="fadeInRight"
 */

:root {
  --sc-animation-duration: 950ms;
  --sc-animation-delay: 0ms;
  --sc-animation-distance: 110px;
  --sc-animation-ease: cubic-bezier(.16, .82, .24, 1);
}

/* Le contenu reste visible quand JavaScript est désactivé. */
.js .scroll-in-animation {
  animation-duration: var(--animation-duration, var(--sc-animation-duration));
  animation-delay: var(--animation-delay, var(--sc-animation-delay));
  animation-timing-function: var(--animation-ease, var(--sc-animation-ease));
  animation-fill-mode: both;
  will-change: opacity, transform, filter, clip-path;
}

.js .scroll-in-animation:not(.is-animated) {
  opacity: 0;
  visibility: hidden;
}

.js .scroll-in-animation.is-animated {
  visibility: visible;
}

/* Apparitions classiques */
.scroll-in-animation.is-animated[data-animation="fadeIn"] { animation-name: sc-fadeIn; }
.scroll-in-animation.is-animated[data-animation="fadeInLeft"] { animation-name: sc-fadeInLeft; }
.scroll-in-animation.is-animated[data-animation="fadeInRight"] { animation-name: sc-fadeInRight; }
.scroll-in-animation.is-animated[data-animation="fadeInUp"] { animation-name: sc-fadeInUp; }
.scroll-in-animation.is-animated[data-animation="fadeInDown"] { animation-name: sc-fadeInDown; }
.scroll-in-animation.is-animated[data-animation="slideInLeft"] { animation-name: sc-slideInLeft; }
.scroll-in-animation.is-animated[data-animation="slideInRight"] { animation-name: sc-slideInRight; }
.scroll-in-animation.is-animated[data-animation="slideInUp"] { animation-name: sc-slideInUp; }
.scroll-in-animation.is-animated[data-animation="slideInDown"] { animation-name: sc-slideInDown; }
.scroll-in-animation.is-animated[data-animation="zoomIn"] { animation-name: sc-zoomIn; }
.scroll-in-animation.is-animated[data-animation="scaleIn"] { animation-name: sc-scaleIn; }
.scroll-in-animation.is-animated[data-animation="blurIn"] { animation-name: sc-blurIn; }
.scroll-in-animation.is-animated[data-animation="flipInY"] { animation-name: sc-flipInY; backface-visibility: visible; }
.scroll-in-animation.is-animated[data-animation="rotateIn"] { animation-name: sc-rotateIn; }
.scroll-in-animation.is-animated[data-animation="bounceIn"] { animation-name: sc-bounceIn; }
.scroll-in-animation.is-animated[data-animation="revealMaskLeft"] { animation-name: sc-revealMaskLeft; }
.scroll-in-animation.is-animated[data-animation="revealMaskRight"] { animation-name: sc-revealMaskRight; }

@keyframes sc-fadeIn {
  from { opacity: 0; transform: translate3d(0, 22px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-fadeInLeft {
  from { opacity: 0; transform: translate3d(calc(0px - var(--animation-distance, var(--sc-animation-distance))), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-fadeInRight {
  from { opacity: 0; transform: translate3d(var(--animation-distance, var(--sc-animation-distance)), 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-fadeInUp {
  from { opacity: 0; transform: translate3d(0, var(--animation-distance, 80px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-fadeInDown {
  from { opacity: 0; transform: translate3d(0, calc(0px - var(--animation-distance, 80px)), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-slideInLeft {
  from { opacity: 0; transform: translate3d(-105vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-slideInRight {
  from { opacity: 0; transform: translate3d(105vw, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-slideInUp {
  from { opacity: 0; transform: translate3d(0, 55vh, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-slideInDown {
  from { opacity: 0; transform: translate3d(0, -55vh, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes sc-zoomIn {
  from { opacity: 0; transform: scale(.72); filter: blur(8px); }
  to { opacity: 1; transform: scale(1); filter: blur(0); }
}

@keyframes sc-scaleIn {
  from { opacity: 0; transform: scale(.92); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes sc-blurIn {
  from { opacity: 0; filter: blur(20px); transform: translate3d(0, 28px, 0); }
  to { opacity: 1; filter: blur(0); transform: translate3d(0, 0, 0); }
}

@keyframes sc-flipInY {
  from { opacity: 0; transform: perspective(900px) rotateY(72deg); }
  55% { opacity: 1; transform: perspective(900px) rotateY(-8deg); }
  to { opacity: 1; transform: perspective(900px) rotateY(0); }
}

@keyframes sc-rotateIn {
  from { opacity: 0; transform: rotate(-12deg) scale(.88); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}

@keyframes sc-bounceIn {
  0% { opacity: 0; transform: scale(.72); }
  58% { opacity: 1; transform: scale(1.06); }
  78% { transform: scale(.97); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sc-revealMaskLeft {
  from { opacity: 0; clip-path: inset(0 100% 0 0 round 1.5rem); transform: translate3d(-36px, 0, 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 1.5rem); transform: translate3d(0, 0, 0); }
}

@keyframes sc-revealMaskRight {
  from { opacity: 0; clip-path: inset(0 0 0 100% round 1.5rem); transform: translate3d(36px, 0, 0); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 1.5rem); transform: translate3d(0, 0, 0); }
}

/* Rotation progressive liée au scroll — 90° par défaut. */
.scroll-rotate,
[data-scroll-rotate] {
  --scroll-rotation: 0deg;
  transform: rotate(var(--scroll-rotation));
  transform-origin: var(--rotate-origin, 50% 50%);
  will-change: transform;
}

.scroll-rotate img,
[data-scroll-rotate] img {
  display: block;
  width: 100%;
  height: auto;
  pointer-events: none;
  user-select: none;
}

/* Démonstration intégrée à la section méthode. */
.method-rotation-art {
  position: absolute;
  z-index: 1;
  top: clamp(5.5rem, 12vw, 10rem);
  right: clamp(1.25rem, 6vw, 7rem);
  width: clamp(120px, 17vw, 250px);
  aspect-ratio: 1;
  pointer-events: none;
  opacity: .92;
}

.method-rotation-art .scroll-rotate {
  width: 100%;
  height: 100%;
}

@keyframes ambient-pulse {
  0%, 100% { opacity: .35; transform: scale(1); }
  50% { opacity: .68; transform: scale(1.12); }
}

@keyframes cue-line {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0) scale(1.035);
  will-change: transform;
}

@media (max-width: 991.98px) {
  .method-rotation-art {
    position: relative;
    inset: auto;
    width: min(180px, 45vw);
    margin: 1.5rem auto 0;
  }
}

@media (max-width: 767.98px) {
  :root { --sc-animation-distance: 56px; }

  .scroll-in-animation.is-animated[data-animation="slideInLeft"],
  .scroll-in-animation.is-animated[data-animation="slideInRight"] {
    animation-name: sc-fadeInUp;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }

  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js .scroll-in-animation,
  .js .scroll-in-animation:not(.is-animated) {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
    animation: none !important;
  }

  .scroll-rotate,
  [data-scroll-rotate],
  [data-parallax] {
    transform: none !important;
  }
}