:root {
  --motion-out: cubic-bezier(.23, 1, .32, 1);
  --motion-in-out: cubic-bezier(.77, 0, .175, 1);
  --motion-direct: 160ms;
  --motion-surface: 220ms;
}

.button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition-timing-function: var(--motion-out);
}

.button::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: -80%;
  bottom: -80%;
  left: -40%;
  width: 28%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translateX(-220%) rotate(12deg);
  transition: opacity 120ms linear, transform 240ms var(--motion-out);
}

.platform.section-dark {
  background-color: var(--navy);
  background-image:
    linear-gradient(rgba(116, 169, 204, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(116, 169, 204, .035) 1px, transparent 1px);
  background-size: 40px 40px;
}

.button:active {
  transform: scale(.97);
  transition-duration: 110ms;
}

.site-header,
.nav-shell,
.nav-shell::after,
.language-switch,
.language-option,
.form-field input,
.form-field select,
.form-field textarea,
.product-link > span:last-child,
.related-card {
  transition-timing-function: var(--motion-out);
}

.site-header,
.nav-shell,
.nav-shell::after {
  transition-duration: var(--motion-surface);
}

.product-card > img,
.related-card > img,
.system-card > img,
.evidence-card > img {
  transition: transform 240ms var(--motion-out);
  transform-origin: center;
}

.product-link:active,
.related-card:active {
  transform: scale(.985);
}

.hero-copy > .eyebrow,
.hero-copy > h1,
.hero-copy > .lead,
.hero-copy > .hero-actions,
.hero-proof > .proof,
.detail-hero-copy > .eyebrow,
.detail-hero-copy > h1,
.detail-hero-copy > p,
.detail-hero-copy > .detail-actions,
.detail-hero-copy > .button {
  animation: motion-rise 440ms var(--motion-out) both;
}

.hero-copy > h1,
.detail-hero-copy > h1 { animation-delay: 45ms; }
.hero-copy > .lead,
.detail-hero-copy > p { animation-delay: 90ms; }
.hero-copy > .hero-actions,
.detail-hero-copy > .detail-actions,
.detail-hero-copy > .button { animation-delay: 135ms; }
.hero-proof > .proof:nth-child(1) { animation-delay: 170ms; }
.hero-proof > .proof:nth-child(2) { animation-delay: 205ms; }
.hero-proof > .proof:nth-child(3) { animation-delay: 240ms; }

.hero-media,
.detail-hero-media {
  animation: motion-mask-reveal 520ms var(--motion-out) 80ms both;
  transform-origin: center;
}

@keyframes motion-rise {
  from { opacity: .06; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes motion-mask-reveal {
  from { opacity: .72; clip-path: inset(0 0 10% 0 round 18px); transform: translateY(8px); }
  to { opacity: 1; clip-path: inset(0 0 0 0 round 18px); transform: translateY(0); }
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { transform: translateY(-1px); }
  .button-primary:hover::after,
  .button-primary:focus-visible::after {
    opacity: 1;
    transform: translateX(560%) rotate(12deg);
  }
  .product-card:hover > img,
  .related-card:hover > img,
  .system-card:hover > img,
  .evidence-card:hover > img { transform: scale(1.018); }
  .related-card:hover { transform: translateY(-2px); }
}

@media (hover: none), (pointer: coarse) {
  .button:hover,
  .related-card:hover { transform: none; }
  .product-link:hover > span:last-child { transform: none; }
}

@media (max-width: 820px) {
  .mobile-menu {
    opacity: 0;
    transform: translateY(-6px) scale(.99);
    transform-origin: top right;
    transition: opacity 160ms linear, transform 180ms var(--motion-out);
  }

  .mobile-menu.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (max-width: 560px) {
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .hero-actions,
  .hero-proof > .proof,
  .detail-hero-copy > .eyebrow,
  .detail-hero-copy > h1,
  .detail-hero-copy > p,
  .detail-hero-copy > .detail-actions,
  .detail-hero-copy > .button {
    animation-duration: 360ms;
  }

  .hero-media,
  .detail-hero-media {
    animation-duration: 420ms;
  }

  @keyframes motion-rise {
    from { opacity: .12; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes motion-mask-reveal {
    from { opacity: .8; clip-path: inset(0 0 5% 0 round 14px); transform: translateY(4px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 14px); transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-copy > .eyebrow,
  .hero-copy > h1,
  .hero-copy > .lead,
  .hero-copy > .hero-actions,
  .hero-proof > .proof,
  .detail-hero-copy > .eyebrow,
  .detail-hero-copy > h1,
  .detail-hero-copy > p,
  .detail-hero-copy > .detail-actions,
  .detail-hero-copy > .button,
  .hero-media,
  .detail-hero-media {
    animation-name: motion-reduced-fade;
    animation-duration: 140ms;
    animation-delay: 0ms;
  }

  .site-header,
  .nav-shell,
  .nav-shell::after { transition-duration: 0ms !important; }

  .button,
  .button:active,
  .product-link,
  .product-link > span:last-child,
  .related-card,
  .related-card:active,
  .product-card > img,
  .related-card > img,
  .system-card > img,
  .evidence-card > img {
    transform: none !important;
  }

  .button::after { display: none; }

  .mobile-menu {
    transform: none !important;
    transition: opacity 120ms linear !important;
  }

  @keyframes motion-reduced-fade {
    from { opacity: .82; }
    to { opacity: 1; }
  }
}