[data-reveal] {
  --reveal-offset: var(--reveal-distance);
  --reveal-duration: var(--duration-reveal);
  --reveal-delay: 0ms;
}

[data-reveal="copy"] {
  --reveal-offset: 8px;
  --reveal-duration: var(--duration-reveal-copy);
  --reveal-delay: 70ms;
}

[data-reveal="action"] {
  --reveal-offset: 8px;
  --reveal-duration: var(--duration-reveal-action);
  --reveal-delay: 140ms;
}

[data-reveal="media"] {
  --reveal-duration: var(--duration-reveal-media);
  --reveal-delay: 40ms;
}

.row > :nth-child(2) > [data-reveal="card"] {
  --reveal-delay: var(--reveal-stagger);
}

.row > :nth-child(3) > [data-reveal="card"] {
  --reveal-delay: calc(var(--reveal-stagger) * 2);
}

.row > :nth-child(n + 4) > [data-reveal="card"] {
  --reveal-delay: calc(var(--reveal-stagger) * 3);
}

.has-motion [data-reveal]:not(.is-revealed) {
  opacity: 0;
}

/* GSAP scenes own their initial state and must not inherit the legacy reveal. */
.has-motion [data-gsap-scene] [data-reveal]:not(.is-revealed) {
  opacity: 1;
}

.has-motion [data-reveal].is-entering {
  animation: section-reveal var(--reveal-duration) var(--ease-cinematic)
    var(--reveal-delay) both;
}

.has-motion [data-reveal="media"].is-entering {
  animation-name: section-image-reveal;
}

@keyframes section-reveal {
  from {
    opacity: 0;
    translate: 0 var(--reveal-offset);
  }
  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes section-image-reveal {
  from {
    opacity: 0;
    scale: var(--reveal-image-scale);
  }
  to {
    opacity: 1;
    scale: 1;
  }
}

@media (max-width: 991.98px), (max-height: 620px), (pointer: coarse) {
  .has-motion {
    --reveal-distance: 8px;
    --reveal-image-scale: 1.015;
    --reveal-stagger: 0ms;
    --duration-reveal: 480ms;
    --duration-reveal-copy: 360ms;
    --duration-reveal-media: 620ms;
    --duration-reveal-action: 320ms;
  }

  .has-motion [data-reveal] {
    --reveal-delay: 0ms;
  }
}

/* Never wait for an entrance to read, focus or interact with the content. */
.has-motion [data-reveal]:focus-within,
.animations-paused [data-reveal] {
  opacity: 1 !important;
  translate: none !important;
  scale: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce), print {
  .has-motion [data-reveal] {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
    animation: none !important;
  }
}