/* Content remains visible if JavaScript or animation support is unavailable. */
@keyframes support-hover-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes support-wiggle {
  0%, 78%, 100% { rotate: 0deg; }
  81%, 87% { rotate: -4deg; }
  84%, 90% { rotate: 4deg; }
  93% { rotate: -2deg; }
  96% { rotate: 2deg; }
}
.hero-price strong {
  position: relative;
  display: inline-block;
  transform-origin: center 70%;
  font-variant-numeric: tabular-nums;
}
.hero-price strong::after {
  content: "";
  position: absolute;
  left: 3%;
  right: 3%;
  bottom: -2px;
  height: 4px;
  background: #f7a5c0;
  border-radius: 2px;
  transform-origin: left center;
  pointer-events: none;
}
@keyframes price-emphasis {
  0%, 10%, 34%, 100% { transform: scale(1); text-shadow: 0 0 0 transparent; }
  21% { transform: scale(1.09); text-shadow: 0 5px 16px #ef347228; }
  28% { transform: scale(.99); text-shadow: 0 2px 8px #ef347210; }
}
@keyframes price-underline {
  0%, 10%, 100% { transform: scaleX(.65); opacity: .55; }
  23%, 40% { transform: scaleX(1); opacity: 1; }
  60% { transform: scaleX(.65); opacity: .55; }
}
@keyframes gentle-entry {
  from { opacity: 0; translate: 0 16px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes phone-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}
@keyframes status-breathe {
  0%, 100% { box-shadow: 0 0 0 0 #f3457826; }
  50% { box-shadow: 0 0 0 4px #f3457800; }
}
@keyframes track-flow {
  to { background-position: 20px 0; }
}
@keyframes note-drift {
  0%, 100% { translate: 0 0; rotate: -1deg; }
  50% { translate: 0 -7px; rotate: 1deg; }
}
@keyframes arrow-nudge {
  0%, 65%, 100% { translate: 0 0; }
  35% { translate: 5px 4px; }
}
@keyframes label-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -5px; }
}
@keyframes green-breathe {
  0%, 100% { box-shadow: 0 0 0 0 #6caa8433; }
  50% { box-shadow: 0 0 0 5px #6caa8400; }
}
@keyframes pointer-tap {
  0%, 60%, 100% { translate: 0 0; rotate: 0deg; }
  30% { translate: -2px -2px; rotate: -9deg; }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-on .support-float { animation: support-hover-float 3.8s ease-in-out infinite, support-wiggle 7s ease-in-out infinite; }
  .motion-on .support-float:hover,
  .motion-on .support-float:focus-visible,
  .motion-on:has(dialog[open]) .support-float { animation-play-state: paused; }
  .motion-on .hero-price strong {
    animation: price-emphasis 4.8s ease-in-out .6s infinite paused;
  }
  .motion-on .hero-price strong::after {
    animation: price-underline 4.8s ease-in-out .6s infinite paused;
  }
  .motion-on .hero-price.motion-in-view strong,
  .motion-on .hero-price.motion-in-view strong::after {
    animation-play-state: running;
  }
  .motion-on .stage-note { animation: note-drift 5s ease-in-out infinite paused; }
  .motion-on .stage-note .note-arrow { animation: arrow-nudge 3s ease-in-out infinite paused; }
  .motion-on .stage-label { animation: label-drift 4.5s ease-in-out infinite paused; }
  .motion-on .stage-label .status-dot { animation: green-breathe 2.5s ease-in-out infinite paused; }
  .motion-on .stage-label .label-pointer { animation: pointer-tap 3s ease-in-out infinite paused; }
  .motion-on .product-stage.motion-in-view .stage-note,
  .motion-on .product-stage.motion-in-view .note-arrow,
  .motion-on .product-stage.motion-in-view .stage-label,
  .motion-on .product-stage.motion-in-view .stage-label .status-dot,
  .motion-on .product-stage.motion-in-view .label-pointer { animation-play-state: running; }
  .motion-on .hero .eyebrow,
  .motion-on .hero h1,
  .motion-on .hero-price,
  .motion-on .hero-actions,
  .motion-on .hero-checks,
  .motion-on .product-stage {
    animation: gentle-entry .65s cubic-bezier(.2,.7,.2,1) both;
  }
  .motion-on .hero h1 { animation-delay: .07s; }
  .motion-on .hero-price { animation-delay: .14s; }
  .motion-on .hero-actions { animation-delay: .21s; }
  .motion-on .hero-checks { animation-delay: .28s; }
  .motion-on .product-stage { animation-delay: .35s; }
  .motion-on .reveal-pending { opacity: 0; translate: 0 18px; }
  .motion-on .reveal-shown {
    animation: gentle-entry .65s cubic-bezier(.2,.7,.2,1) both;
    animation-delay: var(--reveal-delay, 0ms);
  }
  .motion-on .reveal-pending:focus-within {
    opacity: 1;
    translate: none;
  }
  .motion-on .phone-window { animation: phone-float 5s ease-in-out infinite; animation-play-state: paused; }
  .motion-on .product-stage.motion-in-view .phone-window { animation-play-state: running; }
  .motion-on .timing.motion-in-view .live-dot { animation: status-breathe 2.5s ease-in-out infinite; }
  .motion-on .timing.motion-in-view .time-track>span { animation: track-flow 2s linear infinite; }
  .motion-on .time-track>span { transition: width .9s linear; }
  .motion-on dialog[open] { animation: gentle-entry .22s ease-out; }
  .motion-on #role-panel.role-enter { animation: gentle-entry .28s ease-out; }
  .motion-on.motion-paused *,
  .motion-on.motion-paused *::before,
  .motion-on.motion-paused *::after { animation-play-state: paused !important; }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .button svg, .button img { transition: translate .2s ease; }
  .button:hover>svg:last-child { translate: 2px 0; }
  .windows-button:hover>svg:last-child, .app-button:hover .entry-button-icon { translate: 0 2px; }
  .audience-item>svg, #features .details-items svg { transition: rotate .2s ease, translate .2s ease; }
  .audience-item:hover>svg, .details-items>div:hover>svg { rotate: -5deg; translate: 0 -2px; }
  .showcase .pixel-art { transition: translate .3s ease; }
  .showcase:hover .pixel-art { translate: 0 -5px; }
}
@media (max-width: 760px) {
  .motion-on .phone-window { animation: none; }
  .motion-on .stage-label { animation: none; }
  .motion-on .reveal-shown { animation-delay: 0ms; animation-duration: .4s; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal-pending, .reveal-shown { opacity: 1 !important; translate: none !important; }
  .motion-on *, .motion-on *::before, .motion-on *::after { animation: none !important; transition: none !important; }
}