/* One-time, viewport-driven motion. No automatic changes to demo tabs or data. */
@keyframes landing-enter{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
/* The headline is the largest paint: it moves but is never transparent. */
@keyframes landing-rise{from{transform:translateY(18px)}to{transform:translateY(0)}}
.hero h1{animation:landing-rise .65s cubic-bezier(.22,1,.36,1) both}
.hero-intro{animation:landing-enter .65s .09s cubic-bezier(.22,1,.36,1) both}
.reveal-pending{opacity:0;transform:translateY(20px)}
.reveal-entered{animation:landing-enter .72s cubic-bezier(.22,1,.36,1) both}
.plan.reveal-entered:nth-child(2){animation-delay:.08s}.plan.reveal-entered:nth-child(3){animation-delay:.16s}
@media(prefers-reduced-motion:reduce){.reveal-pending{opacity:1;transform:none}.hero h1,.hero-intro,.reveal-entered{animation:none!important}}
/* Premium motion system (4 Nov). Brand rules from Figma «17 — Ambiente»: slow 48 s lights, reduced motion respected,
   decoration never moves content, clicks or focus. One signature moment: each demo's channel light switches on as it enters. */
:root{--ease-out:cubic-bezier(.22,1,.36,1);--ease-soft:cubic-bezier(.45,0,.2,1);--ease-spring:cubic-bezier(.34,1.32,.64,1)}
/* Hero: headline, copy, actions and the trial line arrive as one short sequence. */
.hero-actions{animation:landing-enter .7s .2s var(--ease-out) both}
.hero-trial:not([hidden]){animation:landing-enter .6s .05s var(--ease-out) both}
/* Demos lift into place; their light switches on a beat later and then drifts very slowly. */
@keyframes demo-enter{from{opacity:0;transform:translateY(32px) scale(.975)}to{opacity:1;transform:none}}
@keyframes light-drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.06)}}
.live-demo.reveal-entered{animation:demo-enter .95s var(--ease-out) both}
.channel-light::before,.plans::before,.request-section::before{transition:opacity 1.6s var(--ease-soft) .25s;animation:light-drift 48s var(--ease-soft) infinite alternate}
.channel-light:has(.reveal-pending)::before,.plans:has(.reveal-pending)::before,.request-section:has(.request-form.reveal-pending)::before{opacity:0}
:root[data-tab=hidden] .channel-light::before,:root[data-tab=hidden] .plans::before,:root[data-tab=hidden] .request-section::before{animation-play-state:paused}
/* Header: the primary action slides in when the hero's leaves. */
.site-header [data-account-primary]{max-width:280px;overflow:hidden;transition:opacity .3s var(--ease-out),transform .4s var(--ease-out),visibility .3s,max-width .45s var(--ease-out),padding .45s var(--ease-out),margin .45s var(--ease-out),border-color .3s}
:root[data-hero-action=visible] .site-header [data-account-primary],:root[data-page=landing]:not([data-hero-action]) .site-header [data-account-primary]{transform:translateY(-6px);max-width:0;padding-inline:0;margin-left:-18px;border-color:transparent}
/* Buttons and links respond to touch and pointer. */
.button{transition:background-color .2s,border-color .2s,color .2s,transform .18s var(--ease-out)}
.button:active{transform:scale(.97)}
.button .icon,.text-link .icon{transition:transform .3s var(--ease-out)}
.button:hover .icon,.text-link:hover .icon{transform:translateX(3px)}
/* Plans: cards lift on hover and their channel image breathes; the Founders price arrives once the server confirms it. */
@keyframes price-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.plan{transition:transform .45s var(--ease-out),border-color .45s,box-shadow .45s}
.plan::before{transition:transform 1.4s var(--ease-out),opacity .6s}
@media(hover:hover){.plan:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--text) 26%,var(--line))}.plan:hover::before{transform:scale(1.06)}}
.plan-offer:not([hidden]){animation:price-in .7s var(--ease-out) both}
.plan-standard:not([hidden]){animation:price-in .6s .1s var(--ease-out) both}
.plan-saving:not([hidden]){animation:price-in .6s .2s var(--ease-out) both}
/* FAQ answers open and close smoothly where the browser supports animating <details>. */
.faq-item{interpolate-size:allow-keywords}
.faq-item::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease-out),content-visibility .4s allow-discrete}
.faq-item[open]::details-content{block-size:auto}
.faq-item .faq-answer{transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.faq-item:not([open]) .faq-answer{opacity:0;transform:translateY(-4px)}
@media(prefers-reduced-motion:reduce){
 .hero-actions,.hero-trial,.live-demo.reveal-entered,.plan-offer,.plan-standard,.plan-saving{animation:none!important}
 .channel-light::before,.plans::before,.request-section::before{animation:none!important;transition:none!important}
 .plan,.plan::before,.button,.button .icon,.site-header [data-account-primary],.faq-item::details-content,.faq-item .faq-answer{transition:none!important}
 .plan:hover,.plan:hover::before,.button:active{transform:none}
}
/* The hero's primary action carries the channel light: a soft halo that breathes, and one sheen on arrival and on hover. */
@keyframes cta-breathe{0%,100%{opacity:.45;transform:scale(.96)}50%{opacity:.8;transform:scale(1.04)}}
@keyframes cta-sheen{from{background-position:160% 0,0 0}to{background-position:-60% 0,0 0}}
.hero-actions [data-account-primary]{position:relative;isolation:isolate;background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) 160% 0/250% 100% no-repeat,var(--primary);animation:cta-sheen 1.4s 1.1s var(--ease-soft) both;transition:transform .3s var(--ease-out),box-shadow .3s var(--ease-out)}
.hero-actions [data-account-primary]::before{content:'';position:absolute;z-index:-1;inset:-12px -18px;border-radius:999px;pointer-events:none;background:radial-gradient(closest-side,rgba(224,163,90,.55),transparent),radial-gradient(closest-side at 20% 50%,rgba(111,143,179,.5),transparent),radial-gradient(closest-side at 80% 50%,rgba(92,199,133,.35),transparent);filter:blur(14px);animation:cta-breathe 5s var(--ease-soft) infinite}
:root[data-theme=light] .hero-actions [data-account-primary]::before{opacity:.35}
@media(hover:hover){.hero-actions [data-account-primary]:hover{transform:translateY(-1px);box-shadow:0 10px 30px -10px rgba(224,163,90,.55);animation:cta-sheen 1s var(--ease-soft) both}}
:root[data-tab=hidden] .hero-actions [data-account-primary]::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-actions [data-account-primary],.hero-actions [data-account-primary]::before{animation:none!important;transition:none!important}.hero-actions [data-account-primary]:hover{transform:none}}
/* The halo sits behind the button, not over it; hover brightens without creating a new stacking context. */
.hero-actions{isolation:isolate}
.hero-actions [data-account-primary]{isolation:auto}
.hero-actions [data-account-primary]::before{inset:-14px -24px;filter:blur(16px);background:radial-gradient(closest-side,rgba(224,163,90,.85),transparent),radial-gradient(closest-side at 18% 50%,rgba(111,143,179,.8),transparent),radial-gradient(closest-side at 82% 50%,rgba(92,199,133,.6),transparent)}
@keyframes cta-breathe{0%,100%{opacity:.6;transform:scale(.97)}50%{opacity:1;transform:scale(1.05)}}
.hero-actions .button.primary:hover{filter:none}
/* Hover stays quiet: the button only brightens; no lift, no extra shadow, no replayed sheen. */
@media(hover:hover){.hero-actions [data-account-primary]:hover{transform:none;box-shadow:none;animation:cta-sheen 1.4s 1.1s var(--ease-soft) both;background-color:color-mix(in srgb,var(--primary) 88%,#fff)}}
/* The header's primary action shares the channel light: a soft glow, and one sheen each time it appears. */
@keyframes cta-glow{0%,100%{box-shadow:0 0 14px -4px rgba(224,163,90,.45),0 0 24px -8px rgba(111,143,179,.4)}50%{box-shadow:0 0 22px -2px rgba(224,163,90,.75),0 0 34px -6px rgba(111,143,179,.6)}}
.site-header [data-account-primary]{background:linear-gradient(110deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%) 160% 0/250% 100% no-repeat,var(--primary)}
:root[data-hero-action=hidden] .site-header [data-account-primary]{animation:cta-sheen 1.2s .35s var(--ease-soft) both,cta-glow 5s 1.6s var(--ease-soft) infinite}
:root[data-theme=light][data-hero-action=hidden] .site-header [data-account-primary]{animation:cta-sheen 1.2s .35s var(--ease-soft) both}
.site-header .button.primary:hover{filter:none;background-color:color-mix(in srgb,var(--primary) 88%,#fff)}
:root[data-tab=hidden] .site-header [data-account-primary]{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.site-header [data-account-primary]{animation:none!important}}
@keyframes cta-glow{0%,100%{box-shadow:0 0 16px 0 rgba(224,163,90,.5),0 0 28px -4px rgba(111,143,179,.45)}50%{box-shadow:0 0 24px 2px rgba(224,163,90,.85),0 0 40px 0 rgba(111,143,179,.65)}}
/* Plans: each tier's waves (one voice, a duet, a chorus) drift continuously and very slowly; hover only brightens them,
   so the rhythm never jumps. Paused in hidden tabs; still with reduced motion. */
@keyframes wave-flow{from{-webkit-mask-position:0 0,0 0;mask-position:0 0,0 0}to{-webkit-mask-position:-405px 0,0 0;mask-position:-405px 0,0 0}}
.plans[data-pattern=waves] .plan::before{animation:wave-flow 70s linear infinite;transition:background-color .8s var(--ease-soft)}
.plans[data-pattern=waves] .plan[data-plan-key=studio]::before{animation-duration:60s}
.plans[data-pattern=waves] .plan[data-plan-key=business]::before{animation-duration:50s}
@media(hover:hover){.plans[data-pattern=waves] .plan:hover::before{transform:none;background-color:color-mix(in srgb,var(--text) 40%,transparent)}}
:root[data-tab=hidden] .plans[data-pattern] .plan::before{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.plans[data-pattern] .plan::before{animation:none!important}}
/* Loading: a negotiated language is applied before the page shows, account actions appear once in their final state,
   and the header's action starts folded while the hero's is in view. Fallbacks release all of it within 1.5 s. */
html{background:var(--bg)}
body{transition:opacity .25s var(--ease-out)}
:root[data-translating] body{opacity:0}
.account-actions,.mobile-sign-in{transition:opacity .35s var(--ease-out),visibility .35s}
:root[data-settling] .account-actions,:root[data-settling] .mobile-sign-in{opacity:0;visibility:hidden}
:root[data-settling] .hero-actions{visibility:hidden;animation-play-state:paused}
:root[data-page=landing]:not([data-hero-action]) .site-header [data-account-primary]{transition:none}
@media(prefers-reduced-motion:reduce){body,.account-actions,.mobile-sign-in{transition:none}}