/* Shared motion primitives add polish while leaving every page readable if JavaScript is unavailable. */
html.motion-ready .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translate3d(0, 28px, 0) scale(0.985);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--motion-delay, 0ms);
  will-change: opacity, filter, transform;
}

html.motion-ready .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) scale(1);
}

/* A pointer-following highlight gives interactive cards depth without constant movement. */
.motion-card {
  position: relative;
  isolation: isolate;
}

.motion-card::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  background: radial-gradient(
    280px circle at var(--motion-x, 50%) var(--motion-y, 50%),
    rgb(96 201 170 / 15%),
    transparent 58%
  );
  content: "";
  pointer-events: none;
  transition: opacity 220ms ease;
}

.motion-card:hover::after { opacity: 1; }

/* A soft double pulse gives the transparent S a heartbeat followed by a calm pause. */
.nav-brand-mark img { animation: brand-heartbeat 4.6s ease-in-out infinite; }

@keyframes brand-heartbeat {
  0%, 7%, 16%, 25%, 100% {
    filter:
      drop-shadow(0 0 2px rgb(23 107 91 / 26%))
      drop-shadow(0 0 7px rgb(74 197 161 / 28%));
  }
  11% {
    filter:
      drop-shadow(0 0 4px rgb(23 107 91 / 42%))
      drop-shadow(0 0 15px rgb(74 197 161 / 54%));
  }
  20% {
    filter:
      drop-shadow(0 0 3px rgb(23 107 91 / 34%))
      drop-shadow(0 0 11px rgb(74 197 161 / 42%));
  }
}

.motion-magnetic {
  transition:
    transform 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
  will-change: transform;
}

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

  html.motion-ready .motion-reveal,
  html.motion-ready .motion-reveal.is-visible {
    opacity: 1;
    filter: none;
    transform: none;
    transition: none;
  }

  .nav-brand-mark img { animation: none; }
  .motion-card::after { display: none; }
  .motion-magnetic { transition: none; }
}