/* Shared motion layer: expressive, compositor-only, and progressively enhanced. */
:root {
  --motion-enter: cubic-bezier(.16, 1, .3, 1);
  --motion-exit: cubic-bezier(.4, 0, 1, 1);
  --motion-micro: cubic-bezier(.2, .8, .2, 1);
  --motion-route-exit: 280ms;
  --motion-page-enter: 820ms;
  --motion-reveal: 780ms;
}

.site-header::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 18px -8px;
  height: 2px;
  pointer-events: none;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  border-radius: 999px;
  background: linear-gradient(90deg, #21c7f3 0 74%, #ff63ae 74% 100%);
}

body.motion-enhanced .site-header::after {
  animation: route-ready 920ms var(--motion-enter) both;
}

body.motion-enhanced main,
body.motion-enhanced .site-footer {
  transition:
    opacity var(--motion-route-exit) var(--motion-exit),
    transform var(--motion-route-exit) var(--motion-exit);
}

body.is-page-leaving {
  overflow: hidden;
  cursor: progress;
}

body.is-page-leaving main,
body.is-page-leaving .site-footer {
  pointer-events: none;
  opacity: 0;
  transform: translateY(-8px);
}

body.is-page-leaving .site-header::after {
  animation: route-leaving var(--motion-route-exit) linear both;
}

body.is-page-restoring main,
body.is-page-restoring .site-footer {
  transition: none;
}

.motion-enhanced .home-hero .hero-banner-shell {
  transform-origin: center;
  animation: hero-stage-in 1080ms 80ms var(--motion-enter) both;
}

.motion-enhanced .home-hero .hero-conversion {
  animation: hero-copy-in 820ms 270ms var(--motion-enter) both;
}

.motion-enhanced .home-hero .hero-actions {
  animation: fade-up-in 700ms 500ms var(--motion-enter) both;
}

.motion-enhanced .about-hero-copy {
  animation: enter-from-left 880ms 120ms var(--motion-enter) both;
}

.motion-enhanced .about-hero-media {
  animation: enter-from-right 960ms 240ms var(--motion-enter) both;
}

.motion-enhanced .leaderboard-hero .page-hero-inner,
.motion-enhanced .patch-minimal > div,
.motion-enhanced .error-view {
  animation: fade-up-in var(--motion-page-enter) 140ms var(--motion-enter) both;
}

.motion-enhanced .docs-hero .page-hero-inner > .kicker,
.motion-enhanced .docs-hero .page-hero-inner > h1,
.motion-enhanced .docs-hero .page-hero-inner > p,
.motion-enhanced .docs-hero .command-search-shell {
  animation: fade-up-in var(--motion-page-enter) var(--motion-enter) both;
}

.motion-enhanced .docs-hero .page-hero-inner > .kicker { animation-delay: 70ms; }
.motion-enhanced .docs-hero .page-hero-inner > h1 { animation-delay: 180ms; }
.motion-enhanced .docs-hero .page-hero-inner > p { animation-delay: 300ms; }
.motion-enhanced .docs-hero .command-search-shell { animation-delay: 440ms; }

.motion-enhanced .nav a.is-active::before {
  transform-origin: left;
  animation: active-line-in 460ms 400ms var(--motion-enter) both;
}

.motion-enhanced .motion-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity var(--motion-reveal) var(--motion-enter),
    transform var(--motion-reveal) var(--motion-enter);
}

.motion-enhanced .about-social-copy.motion-reveal:not(.is-revealed) {
  transform: translateX(-28px);
}

.motion-enhanced .about-date-gallery figure.motion-reveal:not(.is-revealed),
.motion-enhanced .about-prestige-card.motion-reveal:not(.is-revealed) {
  transform: translateX(28px);
}

.motion-enhanced .motion-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

.motion-enhanced .motion-delay-1 { transition-delay: 110ms; }
.motion-enhanced .motion-delay-2 { transition-delay: 220ms; }
.motion-enhanced .motion-delay-3 { transition-delay: 330ms; }
.motion-enhanced .motion-delay-4 { transition-delay: 440ms; }
.motion-enhanced .motion-delay-5 { transition-delay: 550ms; }

.command-search-popover:not([hidden]) {
  transform-origin: top center;
  animation: search-popover-in 150ms var(--motion-micro) both;
}

.command-card[open] .command-details {
  animation: details-open 180ms var(--motion-micro) both;
}

.mobile-nav:not([hidden]) {
  transform-origin: top right;
  animation: mobile-menu-in 180ms var(--motion-micro) both;
}

@keyframes route-ready {
  0% { opacity: 1; transform: scaleX(0); }
  64% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1); }
}

@keyframes route-leaving {
  from { opacity: 1; transform: scaleX(0); }
  to { opacity: 1; transform: scaleX(1); }
}

@keyframes hero-stage-in {
  from { opacity: .58; transform: translateY(20px) scale(1.025); }
  to { opacity: 1; transform: none; }
}

@keyframes hero-copy-in {
  from { opacity: 0; translate: 0 24px; }
  to { opacity: 1; translate: none; }
}

@keyframes fade-up-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-from-left {
  from { opacity: 0; transform: translateX(-32px); }
  to { opacity: 1; transform: none; }
}

@keyframes enter-from-right {
  from { opacity: 0; transform: translateX(32px); }
  to { opacity: 1; transform: none; }
}

@keyframes active-line-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@keyframes search-popover-in {
  from { opacity: 0; transform: translateY(-5px) scale(.99); }
  to { opacity: 1; transform: none; }
}

@keyframes details-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 800px) {
  .motion-enhanced .about-hero-copy,
  .motion-enhanced .about-hero-media {
    animation-name: fade-up-in;
  }

  .motion-enhanced .about-social-copy.motion-reveal:not(.is-revealed),
  .motion-enhanced .about-date-gallery figure.motion-reveal:not(.is-revealed),
  .motion-enhanced .about-prestige-card.motion-reveal:not(.is-revealed) {
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.motion-enhanced main,
  body.motion-enhanced .site-footer,
  body.is-page-leaving main,
  body.is-page-leaving .site-footer,
  .motion-enhanced .motion-reveal,
  .motion-enhanced .motion-reveal.is-revealed {
    pointer-events: auto;
    opacity: 1;
    transform: none;
    transition: none;
  }

  .site-header::after { display: none; }

  .motion-enhanced *,
  .motion-enhanced *::before,
  .motion-enhanced *::after,
  .command-search-popover,
  .command-details,
  .mobile-nav {
    animation: none !important;
    transition: none !important;
  }
}