@layer motion {
  .js body {
    transition: opacity 220ms ease;
  }

  .js body.is-leaving {
    opacity: 0;
    pointer-events: none;
  }

  @keyframes monogram-spin {
    to { transform: rotate(1turn); }
  }

  @keyframes gradient-drift {
    0%, 100% { transform: translate3d(-3%, -2%, 0) scale(1); }
    50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  }

  @keyframes loader-letter {
    0%, 100% { opacity: 0.58; transform: scale(0.96); }
    50% { opacity: 1; transform: scale(1.04); }
  }

  .brand-monogram::after {
    animation: monogram-spin 9s linear infinite;
  }

  .brand-monogram--loader::after {
    animation-duration: 1.8s;
  }

  .brand-monogram--loader span {
    animation: loader-letter 1.5s ease-in-out infinite;
  }

  body::after {
    position: fixed;
    z-index: -1;
    top: 8%;
    right: -12rem;
    width: min(46vw, 42rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 38%, rgba(96, 165, 250, 0.28), transparent 35%),
      radial-gradient(circle at 65% 62%, rgba(168, 85, 247, 0.2), transparent 42%);
    filter: blur(70px);
    content: "";
    opacity: 0.55;
    pointer-events: none;
    animation: gradient-drift 14s ease-in-out infinite;
  }

  .page-intro h1 {
    background: linear-gradient(110deg, #ffffff 8%, #b9c7dc 45%, #ffffff 58%, #7e9ac4 85%);
    background-size: 220% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    animation: text-shimmer 8s linear infinite;
  }

  @keyframes text-shimmer {
    to { background-position: -220% center; }
  }

  .js .reveal {
    transform: translate3d(0, 1.5rem, 0);
    opacity: 0;
    transition:
      transform 720ms var(--ease-premium) var(--reveal-delay, 0ms),
      opacity 720ms var(--ease-premium) var(--reveal-delay, 0ms);
  }

  .js .reveal.is-visible {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }

  .split-word {
    display: inline-block;
    animation: split-word-enter 720ms var(--ease-premium) both;
    animation-delay: calc(var(--word-index, 0) * 55ms + 120ms);
  }

  @keyframes split-word-enter {
    from {
      transform: translateY(0.7em);
      opacity: 0;
      filter: blur(8px);
    }
    to {
      transform: translateY(0);
      opacity: 1;
      filter: blur(0);
    }
  }

  .magnetic-button,
  [data-magnetic] {
    transform: translate3d(
      var(--magnetic-x, 0),
      var(--magnetic-y, 0),
      0
    );
  }

  [data-parallax] {
    transform: translate3d(
      var(--parallax-x, 0),
      var(--parallax-y, 0),
      0
    );
    transition: transform 180ms var(--ease-premium);
    will-change: transform;
  }

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

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

    .cursor-glow {
      display: none !important;
    }

    .js .reveal,
    .js .reveal.is-visible,
    .magnetic-button,
    [data-magnetic],
    [data-parallax] {
      transform: none !important;
      opacity: 1 !important;
    }

    .js body {
      opacity: 1 !important;
    }
  }
}