/* Optional, visibility-aware motion. Nothing is hidden while waiting for JavaScript. */
:root{--vm-ease:cubic-bezier(.2,.72,.24,1)}
.hero-hat.vm-pointer-depth{translate:var(--vm-pointer-x,0px) var(--vm-pointer-y,0px);transition:translate 180ms var(--vm-ease)}
/* The path stays on one ellipse. Only its highlight advances, so it cannot
   intersect a differently rotated ellipse or be clipped into stray segments. */
.hero-art .orbit-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.hero-art .orbit-light{fill:none;stroke:#86b5cd;stroke-width:.32px;stroke-linecap:round;stroke-dasharray:16 84;stroke-dashoffset:0;opacity:.85}
.hero-art.vm-hero-ready .orbit-light{animation:vm-orbit-travel 9600ms linear infinite;animation-play-state:paused}
.hero-art.vm-hero-ready .hero-viki{animation:vm-viki-float 5600ms ease-in-out infinite;animation-play-state:paused;transform-origin:50% 58%}
.hero-art.vm-hero-active .orbit-light,.hero-art.vm-hero-active .hero-viki{animation-play-state:running}
@keyframes vm-orbit-travel{to{stroke-dashoffset:-100}}
@keyframes vm-viki-float{0%,100%{transform:translateY(4px) rotate(-1.6deg)}50%{transform:translateY(-12px) rotate(1.6deg)}}
/* Focus never waits for a visual entrance. JS also cancels its Web Animations. */
.vm-reveal:focus-within{opacity:1!important;transform:none!important}
/* This class provides the same immediate fallback when the preference changes live. */
html.vm-reduced-motion,html.vm-reduced-motion *{scroll-behavior:auto!important}
html.vm-reduced-motion *,html.vm-reduced-motion *::before,html.vm-reduced-motion *::after{animation:none!important;transition:none!important}
html.vm-reduced-motion .hero-copy>*,html.vm-reduced-motion .hero-art>*,html.vm-reduced-motion .vm-reveal,html.vm-reduced-motion .vd-phone,html.vm-reduced-motion .vd-screen,html.vm-reduced-motion .vd-card,html.vm-reduced-motion .vd-status,html.vm-reduced-motion .vd-agent-avatar,html.vm-reduced-motion .button:hover{transform:none!important;translate:none!important}
html.vm-reduced-motion .orbit-light{display:none!important}
html.vm-reduced-motion .hero-art>.orbit{transform:rotate(-25deg)!important}
@media(prefers-reduced-motion:reduce){
 html,html *{scroll-behavior:auto!important}
 *,*::before,*::after{animation:none!important;transition:none!important}
 .hero-copy>*,.hero-art>*,.vm-reveal,.vd-phone,.vd-screen,.vd-card,.vd-status,.vd-agent-avatar,.button:hover{transform:none!important;translate:none!important}
 .hero-art .orbit-light{display:none!important}
 .hero-art>.orbit{transform:rotate(-25deg)!important}
}

/* Selected hero notification composition; contained in the existing art frame. */
.hero-art.vm-notifications{display:block;background:transparent;border-radius:0;overflow:clip}
.hero-art.vm-notifications::before{content:"";position:absolute;inset:92px 3% 6px;border-radius:48% 48% 23% 24%;background:radial-gradient(ellipse at 50% 34%,#e7f3fa 0%,#f4f9fc 48%,#f9fcfd 75%);z-index:-2}
.hero-art.vm-notifications .hero-viki{position:absolute;inset:105px 16px 16px;width:calc(100% - 32px);height:calc(100% - 121px);display:block}
.hero-art.vm-notifications .hero-hat{width:100%;height:125%;max-width:100%;max-height:none;margin:0;object-fit:contain;object-position:top center}
.hero-art.vm-notifications .orbit{display:block;left:6%;top:43%;width:88%;height:40%;transform:rotate(-25deg);border-color:#bed6e399}
.hero-art.vm-notifications .vhn-notification{position:absolute;top:10px;left:0;right:0;margin:auto;width:min(378px,calc(100% - 16px));height:139px;padding:16px 18px 12px;background:linear-gradient(115deg,#ffffffcf,#f4faffb8);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid #fff;border-radius:20px;box-shadow:0 13px 35px #3867830c,0 1px 0 #8cb3c615;z-index:3;text-align:left;display:flex;flex-direction:column;gap:7px;color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.hero-art.vm-notifications .vhn-notification:hover{box-shadow:0 17px 38px #3867831b,0 0 0 1px #c9e0ed}
.hero-art.vm-notifications .vhn-meta{display:flex;align-items:center;gap:7px;color:#6f92a5;font-size:10px;letter-spacing:.025em;font-weight:600}
.hero-art.vm-notifications .vhn-spark{font-size:14px;color:#78a9c3}
.hero-art.vm-notifications .vhn-time{margin-left:auto;color:#98aab4;font-size:9px;font-weight:450}
.hero-art.vm-notifications .vhn-body{display:block;min-width:0}
.hero-art.vm-notifications .vhn-title{display:block;font-size:15px;font-weight:680;line-height:1.35;letter-spacing:-.2px;margin-bottom:4px}
.hero-art.vm-notifications .vhn-copy{display:block;font-size:11.5px;line-height:1.45;color:#71838d}
.hero-art.vm-notifications .vhn-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.hero-art.vm-notifications .vhn-action{font-size:10px;font-weight:650;color:#4b7d98}
.hero-art.vm-notifications .vhn-arrow{display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:#e1eef6;color:#52819a;font-size:14px;flex:none}
.hero-art.vm-notifications .vhn-progress{height:2px;width:34px;background:#d9e7ef;border-radius:2px;overflow:hidden;margin-left:auto}
.hero-art.vm-notifications .vhn-progress i{display:block;transform-origin:left;width:100%;height:100%;background:#88afc4;transform:scaleX(var(--vhn-progress,0))}
@media(max-width:1000px){
 .hero-art.vm-notifications .vhn-notification{height:132px;padding:14px 15px 11px;border-radius:18px}
 .hero-art.vm-notifications .vhn-title{font-size:13px}
 .hero-art.vm-notifications .vhn-copy{font-size:10.5px}
 .hero-art.vm-notifications .vhn-meta{font-size:9px}
 .hero-art.vm-notifications .vhn-action{font-size:9px}
 .hero-art.vm-notifications .vhn-time{font-size:8px}
}
@media(max-width:360px){
 .hero-art.vm-notifications .vhn-notification{top:6px;width:calc(100% - 8px);height:128px;padding:12px 13px 10px}
 .hero-art.vm-notifications .vhn-title{font-size:12.5px}
 .hero-art.vm-notifications .vhn-copy{font-size:10px}
}