@media (prefers-reduced-motion: no-preference) {
  .hero-background{position:relative;isolation:isolate}
  .hero-background::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 72% 40%,#e9c6b029,transparent 55%);transform:translateY(var(--hero-shift,0px))}
  .title-typing .type-first,.title-typing .type-middle,.title-typing .title-mark,.title-typing .type-end{display:inline-block;animation-name:landing-type;animation-fill-mode:both}
  .title-typing .type-first{animation-duration:700ms;animation-timing-function:steps(7,end)}
  .title-typing .type-middle{animation-duration:200ms;animation-delay:700ms;animation-timing-function:steps(2,end)}
  .title-typing .title-mark{animation-duration:500ms;animation-delay:900ms;animation-timing-function:steps(5,end)}
  .title-typing .type-end{animation-duration:100ms;animation-delay:1400ms;animation-timing-function:steps(1,end)}
  #experience .product-frame:not(.is-experience-expanded):not(.is-immersive){position:relative}
  #experience .product-frame:not(.is-experience-expanded):not(.is-immersive)::after{content:"";position:absolute;inset:0;padding:2px;border-radius:inherit;z-index:4;pointer-events:none;opacity:0;background:radial-gradient(180px circle at var(--spot-x,50%) var(--spot-y,50%),#e47c58b0,transparent) border-box;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;transition:opacity 180ms ease-out}
  #experience .product-frame.spot-active::after{opacity:1}
  #experience .source-video video{transition:transform 180ms ease-out}
  #experience .source-video video.poster-tilt{transform:perspective(800px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg))}
  #experience .source-video.motion-buffering::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:5;pointer-events:none;background:linear-gradient(90deg,transparent,#f5ac8f,transparent);background-size:220% 100%;animation:landing-loading 1.3s linear infinite}
  .demo-record.note-saved-motion{animation:landing-saved 360ms cubic-bezier(.22,1.35,.45,1) both}
  .getting-started-steps > li.motion-arrived,
  .scenario-card.motion-arrived,
  .feature-group.motion-arrived,
  .handoff-origin.motion-arrived,
  .handoff-routes > div.motion-arrived {
    animation: landing-arrive 420ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .getting-started-steps > li:nth-child(2),
  .feature-group:nth-child(2),
  .scenario-card:nth-child(even) { animation-delay: 50ms; }
  .getting-started-steps > li:nth-child(3),
  .feature-group:nth-child(3) { animation-delay: 100ms; }
  .handoff-routes > div:nth-child(1) { animation-delay: 80ms; }
  .handoff-routes > div:nth-child(2) { animation-delay: 130ms; }
  .handoff-routes > div:nth-child(3) { animation-delay: 180ms; }

  .getting-started-steps > li.motion-arrived:not(:last-child)::after {
    transform-origin: left center;
    animation: landing-line 380ms 180ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .trial-hero .primary, .steps-action .primary {
    transition: transform 160ms ease-out, background-color 160ms ease-out, box-shadow 160ms ease-out;
  }
  @media (hover: hover) and (pointer: fine) {
    .trial-hero .primary { transform: translate(var(--magnet-x,0px),var(--magnet-y,0px)); }
    .trial-hero .primary:hover { transform: translate(var(--magnet-x,0px),calc(var(--magnet-y,0px) - 2px)); }
    .steps-action .primary:hover { transform: translateY(-2px); }
  }
  .trial-hero .primary:active, .steps-action .primary:active { transform: translateY(1px); }
}

@keyframes landing-arrive {
  from { opacity: .75; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

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

@keyframes landing-type { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0); } }
@keyframes landing-loading { to { background-position:-220% 0; } }
@keyframes landing-saved { 0% { transform:scale(.98); } 65% { transform:scale(1.012); } 100% { transform:scale(1); } }