/* Distance by O — animations */

/* Endless ticker rows: each track moves exactly one half, then resets — no pause, no gap */
@keyframes ticker-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

.ticker__track {
  animation-name: ticker-marquee;
  animation-duration: 72s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-delay: 0s;
  animation-fill-mode: none;
  animation-play-state: running;
}

/* Bottom row: same direction, slight phase offset so the two lines don’t look glued */
.ticker__track--alt {
  animation-name: ticker-marquee;
  animation-duration: 72s;
  animation-delay: -36s;
}

/* Scroll-linked slow-in (progress driven by JS via CSS vars) */
[data-reveal-section] .reveal-item {
  opacity: var(--reveal-opacity, 0);
  transform: translate3d(0, var(--reveal-y, 3rem), 0);
  will-change: opacity, transform;
}

/* Storybook — slow chapter reveals */
.story-in {
  opacity: 0;
  transform: translate3d(0, 2.25rem, 0);
  transition:
    opacity 1.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.story-in.is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.story-mask {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.story-mask.is-in {
  clip-path: inset(0 0 0 0);
}

.story-mask img {
  transform: scale(1.08);
  transition: transform 2.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.story-mask.is-in img {
  transform: scale(1);
}


@keyframes story-scroll-pulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ticker__track {
    animation: none;
  }

  .hero__media img,
  .hero__media:hover img,
  .house__figure img,
  .house__figure:hover img,
  .consult__figure img,
  .consult__figure:hover img,
  .house-hero__media img,
  .house-hero__media:hover img,
  .house-space__media img,
  .house-space:hover .house-space__media img,
  .event__media img,
  .event:hover .event__media img {
    transform: none;
  }

  [data-reveal-section] .reveal-item {
    --reveal-opacity: 1 !important;
    --reveal-y: 0px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .story-in,
  .story-in.is-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .story-mask,
  .story-mask.is-in {
    clip-path: none !important;
    transition: none !important;
  }

  .story-mask img,
  .story-mask.is-in img {
    transform: none !important;
    transition: none !important;
  }

}