.reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
transition-delay: var(--reveal-delay, 0ms);
will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.stagger .reveal { transition-duration: var(--dur-med); }
.no-js .reveal, html.no-observer .reveal { opacity: 1; transform: none; }
.line-mask { display: block; overflow: hidden; padding-bottom: 0.1em; margin-bottom: -0.1em; }
.line-inner {
display: inline-block;
transform: translateY(115%);
animation: line-up 0.9s var(--ease-out) forwards;
will-change: transform;
}
.line-mask:nth-child(1) .line-inner { animation-delay: 0.16s; }
.line-mask:nth-child(2) .line-inner { animation-delay: 0.28s; }
.line-mask:nth-child(3) .line-inner { animation-delay: 0.40s; }
@keyframes line-up { to { transform: translateY(0); } }
.hero-anim {
animation-duration: 0.85s;
animation-timing-function: var(--ease-out);
animation-fill-mode: both;
animation-delay: var(--anim-delay, 0s);
will-change: transform, opacity;
}
.a-bounce-up { animation-name: bounce-in-up; }
.a-zoom      { animation-name: zoom-in; animation-duration: 0.75s; }
.a-fade-up   { animation-name: fade-in-up; animation-duration: 0.8s; }
.a-bounce-in { animation-name: bounce-in; }
.a-rise      { animation-name: rise-in; animation-duration: 1.1s; }
.hero-eyebrow { --anim-delay: 0.08s; }
.hero-sub     { --anim-delay: 0.58s; }
.hero-note    { --anim-delay: 0.70s; }
.hero-actions .btn:nth-child(1) { --anim-delay: 0.82s; }
.hero-actions .btn:nth-child(2) { --anim-delay: 0.92s; }
.hero-trust   { --anim-delay: 1.04s; }
.hero-mark-1  { --anim-delay: 1.00s; }
.hero-mark-2  { --anim-delay: 1.14s; }
.hero-mark-3  { --anim-delay: 1.28s; }
.hs-browser   { --anim-delay: 0.45s; }
.hs-phones    { --anim-delay: 0.85s; }
.hs-chip-1    { --anim-delay: 1.20s; }
.hs-chip-2    { --anim-delay: 1.35s; }
.hs-chip-3    { --anim-delay: 1.50s; }
@keyframes bounce-in-up {
0%   { opacity: 0; transform: translate3d(0, 46px, 0); }
60%  { opacity: 1; transform: translate3d(0, -9px, 0); }
80%  { transform: translate3d(0, 4px, 0); }
100% { opacity: 1; transform: none; }
}
@keyframes zoom-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: none; } }
@keyframes fade-in-up { from { opacity: 0; transform: translate3d(0, 24px, 0); } to { opacity: 1; transform: none; } }
@keyframes bounce-in {
0%   { opacity: 0; transform: scale(0.3); }
55%  { opacity: 1; transform: scale(1.08); }
75%  { transform: scale(0.95); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.hs-browser.hero-anim { animation-name: browser-in; }
@keyframes browser-in {
from { opacity: 0; transform: translate3d(40px, 30px, 0) rotate(6deg) scale(0.94); }
to   { opacity: 1; transform: rotate(2.5deg); }
}
@keyframes rise-in {
0%   { opacity: 0; transform: translate3d(0, 70px, 0) rotate(-6deg); }
65%  { opacity: 1; transform: translate3d(0, -8px, 0) rotate(1deg); }
100% { opacity: 1; transform: none; }
}
.hero-bob      { animation: bob 3s var(--ease-in-out) infinite; }
.hero-bob-slow { animation: bob-soft 4.6s var(--ease-in-out) infinite; }
.decor-dotgrid {
animation: fade-in 0.8s var(--ease-out) 0.9s both, bob-soft 5.2s var(--ease-in-out) 1.4s infinite;
}
.decor-lines-arc .draw-node {
animation: node-in var(--dur-med) var(--ease-out) 1.5s both, bob-soft 3.6s var(--ease-in-out) 2.1s infinite;
}
.hs-browser-in { animation: drift 7.2s var(--ease-in-out) 1.4s infinite; }
.hs-phones-in  { animation: drift-big 6s var(--ease-in-out) 1.8s infinite; }
.hs-chip-in, .apps-chip-in { animation: chip-bob 4.4s var(--ease-in-out) infinite; }
.hs-chip-2 .hs-chip-in, .apps-chip-2 .apps-chip-in { animation-duration: 5.2s; animation-delay: -1.3s; }
.hs-chip-3 .hs-chip-in, .apps-chip-3 .apps-chip-in { animation-duration: 4.8s; animation-delay: -2.6s; }
.apps-phones-in { animation: drift-big 6.4s var(--ease-in-out) infinite; }
@keyframes bob      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
@keyframes bob-soft { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes drift    { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6%); } }
@keyframes drift-big { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-4%) rotate(-1deg); } }
@keyframes chip-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.hero-line {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-fill-mode: both;
animation-delay: var(--line-delay, 0s);
}
.hero-line-v { animation-name: line-drop; animation-duration: 13.5s; }
.hero-line-v:nth-child(1) { --line-delay: 0s; }
.hero-line-v:nth-child(2) { --line-delay: -1.4s; }
.hero-line-v:nth-child(3) { --line-delay: -3s; }
.hero-line-v:nth-child(4) { --line-delay: -4.1s; }
.hero-line-v:nth-child(5) { --line-delay: -6s; }
.hero-line-v:nth-child(6) { --line-delay: -7.1s; }
.hero-line-v:nth-child(7) { --line-delay: -8.15s; }
.hero-line-v:nth-child(8) { --line-delay: -9.15s; }
.hero-line-v:nth-child(9) { --line-delay: -10.15s; }
.hero-line-h:nth-child(10) { animation-name: line-sweep-a; animation-duration: 8.2s;  --line-delay: -4.1s; }
.hero-line-h:nth-child(11) { animation-name: line-sweep-b; animation-duration: 9.5s;  --line-delay: -1.45s; }
.hero-line-h:nth-child(12) { animation-name: line-sweep-c; animation-duration: 12.2s; --line-delay: -1.4s; }
@media (max-width: 63.99rem) {
.hero-line-v:not(:nth-child(2)):not(:nth-child(5)):not(:nth-child(8)), .hero-line-h:not(:nth-child(11)) { display: none; }
}
html:not(.no-js) main > :not(:first-child):not(.anim-on),
html:not(.no-js) main > :not(:first-child):not(.anim-on) *,
main > :first-child.anim-off, main > :first-child.anim-off * { animation-play-state: paused !important; }
@keyframes line-drop    { 0% { transform: translate3d(0, -100%, 0); } 33.33% { transform: translate3d(0, 150vh, 0); } 100% { transform: translate3d(0, 150vh, 0); } }
@keyframes line-sweep-a { 0% { transform: translate3d(-100%, 0, 0); } 33.33% { transform: translate3d(110vw, 0, 0); } 100% { transform: translate3d(110vw, 0, 0); } }
@keyframes line-sweep-b { 0% { transform: translate3d(-100%, 0, 0); } 28.57% { transform: translate3d(110vw, 0, 0); } 100% { transform: translate3d(110vw, 0, 0); } }
@keyframes line-sweep-c { 0% { transform: translate3d(-100%, 0, 0); } 22.22% { transform: translate3d(110vw, 0, 0); } 100% { transform: translate3d(110vw, 0, 0); } }
.draw-line { stroke-dasharray: 620; stroke-dashoffset: 620; animation: draw 1.6s var(--ease-in-out) 0.3s forwards; }
.draw-node { opacity: 0; animation: node-in var(--dur-med) var(--ease-out) 1.5s forwards; }
.decor-dots circle { opacity: 0; animation: node-in var(--dur-fast) var(--ease-out) forwards; }
.decor-dots circle:nth-child(1) { animation-delay: 1.30s; }
.decor-dots circle:nth-child(2) { animation-delay: 1.38s; }
.decor-dots circle:nth-child(3) { animation-delay: 1.46s; }
.decor-dots circle:nth-child(4) { animation-delay: 1.54s; }
.decor-dots circle:nth-child(5) { animation-delay: 1.62s; }
.decor-dots circle:nth-child(6) { animation-delay: 1.70s; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes node-in { to { opacity: 1; } }
.hero-circle {
transform: scale(0.85); opacity: 0;
animation: circle-in 1.2s var(--ease-out) 0.2s forwards;
will-change: transform, opacity;
}
@keyframes circle-in { to { transform: scale(1); opacity: 0.92; } }
@media (max-width: 47.9rem) { @keyframes circle-in { to { transform: scale(1); opacity: 0.35; } } }
.scroll-shot img {
animation: shot-scroll var(--shot-dur, 18s) var(--ease-in-out) var(--shot-delay, 1.5s) infinite;
will-change: transform;
}
@keyframes shot-scroll {
0%, 10%   { transform: translateY(0); }
48%, 58%  { transform: translateY(calc(var(--shift, 0.8) * -100%)); }
96%, 100% { transform: translateY(0); }
}
.marquee-track { animation: marquee 28s linear infinite; will-change: transform; }
.rail-track    { animation: marquee var(--rail-dur, 70s) linear infinite; will-change: transform; }
.rail-reverse .rail-track { animation-direction: reverse; }
.rail:hover .rail-track, .rail:focus-within .rail-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.apps-ring-a, .studio-ring-a { animation: spin 38s linear infinite; }
.apps-ring-b, .studio-ring-b { animation: spin 56s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.search-caret { animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
[data-parallax] { will-change: transform; }
[data-magnetic] { transition: transform var(--dur-fast) var(--ease-out); }
[data-magnetic].is-magnetic-active { transition: transform 80ms linear; }
[data-tilt] { transition: transform var(--dur-med) var(--ease-out); }
[data-tilt].is-tilting { transition: transform 120ms linear; }
.ph-title .w > i {
transform: translateY(115%);
animation: line-up 0.8s var(--ease-out) forwards;
animation-delay: calc(0.12s + var(--wi, 0) * 0.055s);
will-change: transform;
}
.page-hero .vb-in, .page-hero .vp-in { animation: drift 7.4s var(--ease-in-out) 1.4s infinite; }
.page-hero .stack-card-a { --anim-delay: 0.35s; }
.page-hero .stack-card-b { --anim-delay: 0.5s; }
.page-hero .stack-card-c { --anim-delay: 0.65s; }
.page-hero .vb-frame, .page-hero .vp-frame, .page-hero .apps-stage, .page-hero .studio-card, .page-hero .vis-search { --anim-delay: 0.4s; }
.page-hero .ph-chip-1 { --anim-delay: 1.1s; }
.page-hero .ph-chip-2 { --anim-delay: 1.25s; }
.page-hero .ph-chip-3 { --anim-delay: 1.4s; }
.ph-chip .hs-chip-in { animation: chip-bob 4.4s var(--ease-in-out) infinite; }
.ph-chip-2 .hs-chip-in { animation-duration: 5.2s; animation-delay: -1.3s; }
.ph-chip-3 .hs-chip-in { animation-duration: 4.8s; animation-delay: -2.6s; }
.ph-sub  { --anim-delay: 0.55s; }
.ph-note { --anim-delay: 0.65s; }
.page-hero .hero-actions .btn:nth-child(1) { --anim-delay: 0.75s; }
.page-hero .hero-actions .btn:nth-child(2) { --anim-delay: 0.85s; }
.page-hero .hero-trust { --anim-delay: 0.95s; }
.ph-mark-1 { --anim-delay: 1s; }
.ph-mark-2 { --anim-delay: 1.15s; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.hero-lines { display: none; }
.rail { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
.rail-track [aria-hidden="true"] { display: none; }
.reveal, .line-inner, .hero-anim, .hero-bob, .hero-bob-slow,
.draw-line, .draw-node, .decor-lines-arc .draw-node, .decor-dots circle,
.decor-dotgrid, .hero-circle, .marquee-track, .rail-track,
.hs-browser-in, .hs-phones-in, .hs-chip-in, .apps-chip-in, .apps-phones-in,
.apps-ring-a, .apps-ring-b, .studio-ring-a, .studio-ring-b,
.scroll-shot img, .search-caret,
.ph-title .w > i, .page-hero .vb-in, .page-hero .vp-in, .ph-chip .hs-chip-in {
animation: none !important;
transition: none !important;
opacity: 1 !important;
transform: none !important;
}
.hs-browser.hero-anim { transform: rotate(2.5deg) !important; }
.hero-circle { opacity: 0.92 !important; }
[data-parallax], [data-magnetic], [data-tilt] { transition: none !important; transform: none !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 47.9rem) {
.hero-circle { opacity: 0.35 !important; }
}
.page-hero .ai-card, .is-visible .ai-card { animation: ai-float 7s ease-in-out 1.4s infinite; }
@keyframes ai-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
html:not(.no-js):not(.no-observer) .vis-ai .cm,
html:not(.no-js):not(.no-observer) .vis-ai .chat-replies,
html:not(.no-js):not(.no-observer) .vis-ai .call-done,
html:not(.no-js):not(.no-observer) .flow-outs li { opacity: 0; }
html:not(.no-js):not(.no-observer) .agent-steps li { opacity: 0.35; }
html:not(.no-js):not(.no-observer) .agent-tick { color: transparent; background: transparent; border-color: var(--violet-pale); }
.page-hero .vis-ai .cm, .is-visible .vis-ai .cm,
.page-hero .vis-ai .chat-replies, .is-visible .vis-ai .chat-replies,
.page-hero .vis-ai .call-done, .is-visible .vis-ai .call-done,
.page-hero .flow-outs li, .is-visible .flow-outs li {
animation: ai-pop 0.55s var(--ease-out) both;
animation-delay: calc(0.9s + var(--mi) * 0.95s);
}
.page-hero .flow-outs li, .is-visible .flow-outs li { animation-delay: calc(1.6s + var(--mi) * 0.45s); }
@keyframes ai-pop { from { opacity: 0; transform: translateY(10px) scale(0.97); } to { opacity: 1; transform: none; } }
.page-hero .agent-steps li, .is-visible .agent-steps li { animation: ai-step 0.4s var(--ease-out) both; animation-delay: calc(0.8s + var(--mi) * 0.9s); }
.page-hero .agent-tick, .is-visible .agent-tick { animation: ai-tick 0.4s var(--ease-out) both; }
.agent-steps li:nth-child(1) .agent-tick { animation-delay: 1.3s; }
.agent-steps li:nth-child(2) .agent-tick { animation-delay: 2.2s; }
.agent-steps li:nth-child(3) .agent-tick { animation-delay: 3.1s; }
.agent-steps li:nth-child(4) .agent-tick { animation-delay: 4s; }
.agent-steps li:nth-child(5) .agent-tick { animation-delay: 4.9s; }
@keyframes ai-step { from { opacity: 0.35; } to { opacity: 1; } }
@keyframes ai-tick {
from { color: transparent; background: transparent; border-color: var(--violet-pale); transform: scale(0.8); }
to   { color: var(--white); background: var(--violet); border-color: var(--violet); transform: none; }
}
.cm-typing i { animation: ai-dot 1.2s ease-in-out infinite; }
.cm-typing i:nth-child(2) { animation-delay: 0.15s; }
.cm-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes ai-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
.call-wave i { animation: ai-wave 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -11ms); }
@keyframes ai-wave { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
.flow-link i { animation: ai-travel 1.8s ease-in-out infinite; }
.flow-link + .flow-node + .flow-link i { animation-delay: 0.9s; }
@keyframes ai-travel {
0%   { transform: translateY(-0.2rem); opacity: 0; }
20%, 80% { opacity: 1; }
100% { transform: translateY(1.4rem); opacity: 0; }
}
html:not(.no-js) .vis-ai .ai-seq { opacity: 0; }
.page-hero .vis-ai .ai-seq, .is-visible .vis-ai .ai-seq { animation: ai-pop 0.55s var(--ease-out) both; animation-delay: calc(0.9s + var(--mi) * 0.6s); }
.page-hero .loc-pin, .is-visible .loc-pin { animation: ai-drop 0.7s var(--ease-out) 0.5s both; }
@keyframes ai-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
.ai-card, .vis-ai .cm, .chat-replies, .call-done, .flow-outs li, .agent-steps li, .agent-tick,
.cm-typing i, .call-wave i, .flow-link i, .vis-ai .ai-seq, .loc-pin {
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
.agent-tick { color: var(--white) !important; background: var(--violet) !important; border-color: var(--violet) !important; }
}