/* Motion only. Rules that start something hidden hang off .motion, which
   js/motion.js sets once GSAP has loaded, so a failed load leaves the page whole. */
@media (prefers-reduced-motion: no-preference) {
  /* The hero is on screen before GSAP arrives, so it animates from CSS alone. */
  body[data-status="ready"] .hero__mood {
    animation: pop var(--duration-pop) var(--ease-css-pop) var(--delay-hero) backwards;
  }

  body[data-status="ready"] .hero .metal-text {
    animation: shine var(--duration-shine) var(--ease-css-shine) var(--delay-hero);
  }

  .is-shining:not(.button) {
    animation: shine var(--duration-shine) var(--ease-css-shine);
  }

  .button:not(.button--ghost) {
    position: relative;
    overflow: hidden;
  }

  .button:not(.button--ghost)::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--gradient-button-shine);
    transform: translateX(-100%);
    pointer-events: none;
  }

  .button.is-shining::after {
    animation: button-shine var(--duration-shine) var(--ease-css-shine);
  }

  .motion [data-section]:not(.hero, .footer)::before {
    transform-origin: left;
    transition: transform var(--duration-strip) var(--ease-css-wipe);
  }

  .motion main > [data-section]:nth-of-type(odd)::before {
    transform-origin: right;
  }

  .motion [data-section]:not(.hero, .footer, .is-in)::before {
    transform: translateY(-50%) scaleX(0);
  }

  .motion .hero__arch-line {
    position: relative;
  }

  .motion .hero__headline {
    position: relative;
  }

  .map-slot__map {
    transition: opacity var(--duration-map-fade) var(--ease-css-shine);
  }

  .bubbles {
    position: absolute;
    inset: 0;
    z-index: var(--layer-motif);
    overflow: hidden;
    border-radius: inherit;
    pointer-events: none;
  }

  .bubbles span {
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: var(--left);
    width: var(--bubble-size);
    height: var(--bubble-size);
    border-radius: var(--radius-full);
    background: var(--gradient-bubble);
    opacity: 0;
    animation: bubble-rise var(--duration-bubble) linear var(--delay) infinite;
    animation-play-state: paused;
  }

  .bubbles span:nth-child(3n) {
    width: var(--bubble-size-large);
    height: var(--bubble-size-large);
  }

  .bubbles.is-playing span {
    animation-play-state: running;
  }

  @keyframes pop {
    from {
      opacity: 0;
      transform: scale(var(--mood-start-scale));
    }
  }

  /* The highlight layer rests off the right edge and crosses to the left of it.
     background-position is the one non-transform animation on the page:
     background-clip: text can't be moved any other way. One shot, small boxes. */
  @keyframes shine {
    from {
      background-position: 100% 0, 0 0;
    }

    to {
      background-position: 0% 0, 0 0;
    }
  }

  @keyframes button-shine {
    to {
      transform: translateX(100%);
    }
  }

  @keyframes bubble-rise {
    10%,
    85% {
      opacity: var(--bubble-opacity);
    }

    to {
      opacity: 0;
      transform: translateY(var(--bubble-rise));
    }
  }
}