/* Approved Balanced homepage entrance. All content remains readable without JavaScript. */
.hero-icon-motion{position:relative;display:inline-flex;flex:0 0 var(--hero-icon-size);border-radius:24%;isolation:isolate}
.hero-icon-motion::after{content:"";position:absolute;inset:0;border-radius:24%;pointer-events:none;opacity:0;background:linear-gradient(115deg,transparent 25%,rgba(79,189,255,.10) 43%,rgba(255,255,255,.32) 49%,rgba(255,221,182,.12) 54%,transparent 66%);background-size:300% 100%;background-position:140% 0;mix-blend-mode:screen}
html.hero-motion-enabled .hero-icon-motion{--hero-glint-peak:.84;animation:hero-icon-breathe 6.8s ease-in-out infinite}
html.hero-motion-enabled .hero-icon-motion::after{animation:hero-icon-light 9.5s ease-in-out infinite .65s}
html.hero-motion-enabled .ambient-a{animation:hero-ambient-drift 18s ease-in-out infinite alternate}
html.hero-motion-enabled .ambient-b{animation:hero-ambient-drift 22s ease-in-out infinite alternate-reverse}
/* An entrance, then a settled page: separate the reading rhythm from the card. */
.hero{--hero-text-travel:30px;--hero-card-travel:100px}
html.hero-motion-enabled .hero.motion-enter .hero-lockup,
html.hero-motion-enabled .hero.motion-enter h1,
html.hero-motion-enabled .hero.motion-enter .hero-copy,
html.hero-motion-enabled .hero.motion-enter .hero-highlights,
html.hero-motion-enabled .hero.motion-enter .repair-announcement,
html.hero-motion-enabled .hero.motion-enter .hero-meta{animation:hero-arrive .95s cubic-bezier(.16,1,.3,1) both}
html.hero-motion-enabled .hero.motion-enter .hero-lockup{--hero-text-travel:20px;animation-duration:.85s}
html.hero-motion-enabled .hero.motion-enter h1{animation-delay:.18s;animation-duration:1.1s}
html.hero-motion-enabled .hero.motion-enter .hero-copy{animation-delay:.38s}
html.hero-motion-enabled .hero.motion-enter .hero-highlights{animation-delay:.50s}
html.hero-motion-enabled .hero.motion-enter .repair-announcement{animation-delay:.62s}
html.hero-motion-enabled .hero.motion-enter .hero-meta{animation-delay:.72s}
html.hero-motion-enabled .hero-cta-panel.motion-card-enter{animation:hero-card-arrive 1.15s cubic-bezier(.16,1,.3,1) var(--hero-card-delay,.52s) both}
html.hero-motion-enabled .hero-cta-panel.motion-card-waiting{opacity:0}
/* Clip only viewport overflow while the card comes in from the side. */
body{overflow-x:clip}
html.hero-motion-enabled .hero-cta-buttons .button{transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .25s,background .25s}
html.hero-motion-enabled .hero-cta-buttons .button:hover{transform:translateY(-2px)}
html.hero-motion-enabled .hero-cta-buttons .button:active{transform:translateY(0) scale(.985)}
@keyframes hero-arrive{from{opacity:0;transform:translate3d(0,var(--hero-text-travel),0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-card-arrive{from{opacity:0;transform:translate3d(var(--hero-card-travel),0,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes hero-icon-breathe{0%,100%{transform:translateY(0)}50%{transform:translateY(-3.5px)}}
@keyframes hero-icon-light{0%,3%{opacity:0;background-position:140% 0}12%{opacity:var(--hero-glint-peak,.65)}23%{opacity:0;background-position:-30% 0}100%{opacity:0;background-position:-30% 0}}
@keyframes hero-ambient-drift{from{transform:translate3d(-13px,5px,0) scale(1)}to{transform:translate3d(20px,-15px,0) scale(1.045)}}
html.hero-motion-outside .hero-icon-motion,html.hero-motion-outside .hero-icon-motion::after,html.hero-motion-outside .ambient{animation-play-state:paused!important}
@media(max-width:760px){.hero{--hero-card-travel:42px}}
@media(prefers-reduced-motion:reduce){html .hero-icon-motion,html .hero-icon-motion::after,html .ambient,html .hero.motion-enter .hero-copy-wrap>*,html .hero-cta-panel.motion-card-enter{animation:none!important}html .hero-cta-panel.motion-card-waiting{opacity:1}html .hero-cta-buttons .button{transition:none!important}}
