/*
 * Liemes motion fixes (2026-11-02, Productive 21292649).
 * Every scroll-related animation here only animates transform/opacity, so it runs
 * on the compositor and stays smooth while the page scrolls. Loaded after main.css.
 * Kept out of the SCSS on purpose: the server compiles main.css itself (scssphp).
 */

/* Sticky header: topbar slides out by moving the whole header, no margin changes.
   --topbar-h is measured in custom.js. */
#masthead-wrapper {
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#masthead-wrapper.topbar-hidden {
  transform: translate3d(0, calc(-1 * var(--topbar-h, 54px)), 0);
}

/* Was `transition: all` for the old margin-based topbar hide. */
.entry-content {
  transition: none;
}

/* overflow: hidden made these a clipping box that broke position: sticky on mobile;
   clip does the same clipping without that side effect. */
@media (max-width: 991.98px) {
  .smooth-scroll-wrapper,
  .smooth-scroll-content {
    overflow: clip !important;
  }
}

/* USP marquee: CSS animation on the compositor (distance/duration set in usp-carousel.js). */
.is-css-marquee {
  animation: liemes-marquee var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}

@keyframes liemes-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(var(--marquee-distance, -50%), 0, 0);
  }
}

[data-marquee-scroll-direction-target]:hover .is-css-marquee {
  animation-play-state: paused;
}

/* Tile pattern: one composited reveal of the whole pattern instead of hundreds of
   separately animated SVG tiles (those repainted the SVG every frame). */
.block .tile-pattern .tile-pattern__tile {
  animation: none !important;
  opacity: 1 !important;
}

.block .tile-pattern {
  opacity: 0;
  transform: scale(1.04);
  transition:
    opacity 0.9s ease-out,
    transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.block .tile-pattern.is-visible {
  opacity: 1;
  transform: none;
}

/* Scroll fade-ins (.fade-in*): app.js adds .fx-init, IntersectionObserver adds .fx-in.
   Same look as the old GSAP tweens (50px / scale .8, 1s power2.out, data-delay). */
.fx-init {
  opacity: 0;
  transition:
    opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--fx-delay, 0s),
    transform 1s cubic-bezier(0.215, 0.61, 0.355, 1) var(--fx-delay, 0s) !important;
}

.fx-init.fade-in-left {
  transform: translate3d(-50px, 0, 0);
}

.fx-init.fade-in-right {
  transform: translate3d(50px, 0, 0);
}

.fx-init.fade-in-top {
  transform: translate3d(0, -50px, 0);
}

.fx-init.fade-in-bottom {
  transform: translate3d(0, 50px, 0);
}

.fx-init.fade-in-zoom {
  transform: scale(0.8);
}

.fx-init.fx-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .fx-init {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }

  #masthead-wrapper {
    transition: none;
  }

  .is-css-marquee {
    animation: none;
  }

  .block .tile-pattern {
    opacity: 1;
    transform: none;
    transition: none;
  }
}