/* Restrained motion system for a technical product site. */
.site-header {
  border-bottom-color: transparent;
  transition: box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.site-header.scrolled {
  background: rgba(255,255,255,.97);
  border-color: var(--line);
  box-shadow: 0 8px 28px rgba(18,53,65,.07);
}
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,var(--teal),#32aaa3);
  transform: scaleX(var(--scroll-progress,0));
  transform-origin: left center;
  will-change: transform;
}
.hero { position: relative; }
.hero::before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -160px;
  top: -230px;
  border-radius: 50%;
  background: radial-gradient(circle,rgba(26,167,158,.14),rgba(26,167,158,0) 68%);
  animation: ambient-float 9s ease-in-out infinite alternate;
  pointer-events: none;
}
.app-shot {
  position: relative;
  transition: transform .22s ease-out, box-shadow .35s ease;
  will-change: transform;
}
.app-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg,transparent 30%,rgba(255,255,255,.2) 48%,transparent 65%);
  transform: translateX(-120%);
  animation: screen-sheen 7s ease-in-out 1.4s infinite;
  pointer-events: none;
}
.app-shot:hover { box-shadow: 0 30px 70px rgba(18,53,65,.18); }
.screen-card { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.screen-card:hover {
  transform: translateY(-5px);
  border-color: #b5d4d1;
  box-shadow: 0 22px 46px rgba(18,53,65,.1);
}
.hero .eyebrow,.hero h1,.hero-copy,.hero .actions,.hero .micro,.hero .app-shot,.page-hero .container>* {
  opacity: 0;
  animation: hero-enter .72s cubic-bezier(.2,.8,.2,1) forwards;
}
.hero h1,.page-hero h1 { animation-delay: .08s; }
.hero-copy,.page-hero .lead { animation-delay: .16s; }
.hero .actions { animation-delay: .24s; }
.hero .micro { animation-delay: .3s; }
.hero .app-shot { animation-delay: .2s; }
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .72s cubic-bezier(.2,.8,.2,1), transform .72s cubic-bezier(.2,.8,.2,1);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal-group>* {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.8,.2,1), transform .6s cubic-bezier(.2,.8,.2,1);
}
.reveal-group.is-visible>* { opacity: 1; transform: none; }
.reveal-group.is-visible>*:nth-child(2) { transition-delay: .08s; }
.reveal-group.is-visible>*:nth-child(3) { transition-delay: .16s; }
.reveal-group.is-visible>*:nth-child(4) { transition-delay: .24s; }
.faq-item button span:last-child { transition: transform .25s ease; }
.faq-item button[aria-expanded="true"] span:last-child { transform: rotate(180deg); }
@keyframes ambient-float { to { transform: translate3d(-45px,35px,0) scale(1.08); } }
@keyframes screen-sheen {
  0%,68% { transform: translateX(-120%); }
  88%,100% { transform: translateX(120%); }
}
@keyframes hero-enter {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .site-header,.app-shot,.screen-card,.reveal,.reveal-group>*,.faq-item button span:last-child { transition: none; }
  .hero::before,.app-shot::after { animation: none; }
  .hero .eyebrow,.hero h1,.hero-copy,.hero .actions,.hero .micro,.hero .app-shot,.page-hero .container>* {
    opacity: 1;
    animation: none;
  }
  .reveal,.reveal-group>* { opacity: 1; transform: none; }
}