/* The layout stays in style.css. Motion enhances it without changing document flow. */
.hero-line{display:block}
.header .nav-inner{transition:height .45s cubic-bezier(.22,1,.36,1),background-color .35s,box-shadow .35s,border-color .35s}
.header.is-scrolled .nav-inner{height:56px;background:color-mix(in srgb,var(--bg) 86%,transparent);border-color:var(--line);box-shadow:0 9px 28px -19px #27364a55}
.header nav a{position:relative;transition:color .25s,opacity .25s}
.header nav a:after{content:"";position:absolute;bottom:-7px;left:0;right:0;height:2px;background:currentColor;border-radius:2px;transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.header nav a[aria-current=location]:after{transform:scaleX(1)}
.button,.card-visit,.features>a,.quiet-button span,.closing a,.theme-toggle svg{transition:transform .35s cubic-bezier(.22,1,.36,1),background-color .25s,box-shadow .25s,opacity .25s}
.button:active,.card-visit:active{transform:scale(.96)}
.theme-toggle[aria-pressed=true] svg{transform:rotate(90deg)}
@keyframes copy-enter{from{opacity:0;transform:translate3d(0,34px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes preview-enter{from{opacity:0;transform:translate3d(0,52px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes section-enter{from{opacity:0;transform:translate3d(0,38px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes demo-enter{from{opacity:0;transform:translate3d(0,10px,0) scale(.99)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes chart-draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes chart-fill{from{opacity:0}to{opacity:1}}
@keyframes odds-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes hint-arrow{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media(prefers-reduced-motion:no-preference){
 .motion-pending .hero-line,.motion-pending .hero-description,.motion-pending .hero-actions,.motion-pending .showcase-wrap{opacity:0}
 .motion-enabled .hero-line{animation:copy-enter 1.05s cubic-bezier(.22,1,.36,1) both}
 .motion-enabled .hero-line:nth-child(2){animation-delay:.12s}
 .motion-enabled .hero-description{animation:copy-enter .95s cubic-bezier(.22,1,.36,1) .24s both}
 .motion-enabled .hero-actions{animation:copy-enter .9s cubic-bezier(.22,1,.36,1) .34s both}
 .motion-enabled .hero-actions .primary span{animation:hint-arrow 1.5s ease-in-out 1.4s 2}
 .motion-enabled .showcase-wrap{perspective:1800px;animation:preview-enter 1.25s cubic-bezier(.22,1,.36,1) .38s backwards}
 .motion-enabled .showcase{transform-origin:50% 0;transform:rotateX(var(--showcase-tilt,5deg)) scale(var(--showcase-scale,.975))}
 .motion-enabled .motion-reveal:not(.in){opacity:0;transform:translate3d(0,38px,0)}
 .motion-enabled .motion-reveal.in{animation:section-enter .9s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms) backwards}
 .motion-enabled #demo-panel>.demo-surface{animation:demo-enter .5s cubic-bezier(.22,1,.36,1) backwards}
 .motion-enabled #demo-panel .chart-line,.motion-enabled .product-card.in .chart-line{stroke-dasharray:1;animation:chart-draw 1.6s cubic-bezier(.4,0,.2,1) .2s backwards}
 .motion-enabled #demo-panel .chart-area,.motion-enabled .product-card.in .chart-area{animation:chart-fill 1.4s ease .3s backwards}
 .motion-enabled #demo-panel .odds i,.motion-enabled .product-card.in .odds i{transform-origin:left;animation:odds-grow .85s cubic-bezier(.22,1,.36,1) .12s backwards}
 .motion-enabled .event:nth-child(2) .odds i{animation-delay:.2s}
 .motion-enabled .event:nth-child(3) .odds i{animation-delay:.28s}
 .motion-enabled #events .event{animation:demo-enter .45s cubic-bezier(.22,1,.36,1) backwards}
 .motion-enabled .product-card .app-icon{transform:translate3d(0,var(--icon-drift,0px),0)}
 .motion-enabled .product-card{transform:perspective(1200px) translate3d(0,var(--card-lift,0px),0) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg));transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
 .motion-enabled .car-image img{animation:chart-fill .5s ease backwards}
}
@media(hover:hover) and (pointer:fine){
 .motion-enabled .product-card:hover{--card-lift:-6px}
 .product-card:hover .card-visit{background:var(--button);color:var(--button-text);transform:rotate(45deg)}
 .product-card:hover .card-preview .demo-surface{transform:scale(1.018);transition:transform .6s cubic-bezier(.22,1,.36,1)}
 .card-preview .demo-surface{transition:transform .6s cubic-bezier(.22,1,.36,1)}
 .quiet-button:hover span{transform:translate(3px,-3px)}
 .features>a:hover{transform:translateX(3px)}
 .closing a:hover{transform:translateY(-2px)}
}
@media(max-width:700px){
 .header.is-scrolled .nav-inner{height:52px}
 .motion-enabled .motion-reveal.in{animation-duration:.7s;animation-delay:0ms}
 .motion-enabled .hero-line{animation-duration:.85s}
 .motion-enabled .showcase{transform:none}
 .motion-enabled .product-card .app-icon{transform:none}
 .motion-enabled .product-card{transform:none}
}
@media(prefers-reduced-motion:reduce){
 .motion-pending .hero-line,.motion-pending .hero-description,.motion-pending .hero-actions,.motion-pending .showcase-wrap,.motion-reveal{opacity:1;transform:none}
 *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .showcase,.product-card,.app-icon{transform:none!important}
}