.hero-scene { position: absolute; z-index: -2; inset: -16px; pointer-events: none; }
.hero-scene .hero-photo { z-index: auto; }
.scroll-meter { position: absolute; bottom: -1px; left: 0; width: 100%; height: 2px; background: var(--bright); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.service-ticker { overflow: hidden; padding-block: 23px; border-bottom: 1px solid var(--line); background: #fff; color: #697265; }
.ticker-track { display: flex; width: max-content; }
.ticker-group { display: flex; align-items: center; flex: 0 0 auto; gap: 48px; padding-right: 48px; white-space: nowrap; font-size: 17px; font-weight: 700; }
.ticker-group i { font-size: 23px; font-style: normal; color: #93ba42; }
.navigation { order: 1; margin-left: auto; }
.menu-toggle { order: 3; }
.motion-toggle { position: relative; order: 2; flex: 0 0 38px; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid #6d795e; border-radius: 4px; background: #d4f58e; cursor: pointer; }
.motion-toggle[hidden], .motion-toggle .play-icon, .motion-toggle[aria-pressed='true'] .pause-icon { display: none; }
.motion-toggle[aria-pressed='true'] .play-icon { display: block; }
.motion-toggle::before { content: attr(aria-label); position: absolute; top: calc(100% + 9px); right: 0; padding: 6px 12px; color: white; background: #18221c; border-radius: 3px; font-size: 11px; white-space: nowrap; opacity: 0; pointer-events: none; }
.motion-toggle:hover::before, .motion-toggle:focus-visible::before { opacity: 1; }
.hero-category span { display: inline-block; }

@keyframes server-drift {
  from { transform: scale(1.12) translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0); }
  to { transform: scale(1.025) translate3d(var(--scene-x, 0px), calc(var(--scene-y, 0px) + var(--scene-scroll, 0px)), 0); }
}
@keyframes ticker-travel {
  to { transform: translateX(-50%); }
}
@keyframes category-light {
  0%, 60%, 100% { color: #b2bda9; }
  15%, 35% { color: #ddff9e; }
}
@keyframes scroll-cue {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(5px); }
}
@media (prefers-reduced-motion: no-preference) {
  .motion-ready .hero-photo { animation: none; }
  .motion-ready .hero-slide.is-active .hero-photo { animation: server-drift 8s ease-in-out infinite alternate; animation-play-state: paused; }
  .motion-ready .ticker-track { animation: ticker-travel 26s linear infinite; animation-play-state: paused; }
  .motion-ready .hero-category span { animation: category-light 9s ease-in-out infinite; animation-play-state: paused; }
  .motion-ready .hero-category span:nth-child(2) { animation-delay: -6s; }
  .motion-ready .hero-category span:nth-child(3) { animation-delay: -3s; }
  .motion-ready .hero-caption a img { animation: scroll-cue 3s ease-in-out infinite; animation-play-state: paused; }
  .motion-enabled .hero.in-view .hero-slide.is-active .hero-photo,
  .motion-enabled .hero.in-view .hero-category span,
  .motion-enabled .hero.in-view .hero-caption a img,
  .motion-enabled .service-ticker.in-view .ticker-track { animation-play-state: running; }
  .motion-suspended .hero-photo, .motion-suspended .ticker-track,
  .motion-suspended .hero-category span, .motion-suspended .hero-caption a img { animation-play-state: paused !important; }
  .motion-enabled .button { position: relative; overflow: hidden; transition: transform .25s, background .25s, box-shadow .25s; }
  .motion-enabled .button::after { content: ''; position: absolute; inset: -30% auto -30% -35%; width: 25%; background: #ffffff4d; transform: skewX(-20deg); transition: left .55s ease; pointer-events: none; }
  .motion-enabled .button:hover::after { left: 120%; }
  .motion-enabled .button:hover { box-shadow: 0 8px 22px #1023161a; }
  .motion-enabled .button img, .motion-enabled .text-link img, .motion-enabled .icon-tile { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
  .motion-enabled .button:hover img, .motion-enabled .text-link:hover img { transform: translate(3px, -3px); }
  .motion-enabled .service { transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .25s, box-shadow .25s; }
  .motion-enabled .service:hover { transform: translateY(-5px); box-shadow: 0 16px 32px #142c1410; }
  .motion-enabled .service:hover .icon-tile { transform: rotate(-6deg); }
  .motion-enabled .server-feature-photo { transition: transform 1s cubic-bezier(.2,.8,.2,1); }
  .motion-enabled #vps:hover .server-feature-photo { transform: scale(1.045); }
  .motion-enabled .infra-visual > img { transform: scale(1.02); transition: transform 1.6s cubic-bezier(.2,.8,.2,1); }
  .motion-enabled .infra-visual.in-view > img { transform: scale(1.08); }
  .motion-enabled .navigation > a:not(.button) { position: relative; }
  .motion-enabled .navigation > a:not(.button)::after { content: ''; position: absolute; bottom: -7px; left: 0; width: 100%; height: 1px; background: var(--bright); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
  .motion-enabled .navigation > a:hover::after, .motion-enabled .navigation > a:focus-visible::after { transform: scaleX(1); }
  .motion-enabled .faqs details[open] > p { animation: faq-in .25s ease-out; }
  @keyframes faq-in { from { opacity: .2; translate: 0 5px; } to { opacity: 1; translate: 0 0; } }
}
@media (hover: none) {
  .motion-enabled .service:hover, .motion-enabled .service:hover .icon-tile,
  .motion-enabled #vps:hover .server-feature-photo { transform: none; }
}
@media (max-width: 900px) {
  .motion-toggle { margin-left: auto; }
  .navigation { margin-left: 0; }
}
@media (max-width: 600px) {
  .service-ticker { padding-block: 18px; }
  .ticker-group { font-size: 12px; gap: 28px; padding-right: 28px; }
  .ticker-group i { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scene { inset: 0; transform: none !important; }
  .hero-photo, .ticker-track, .hero-category span, .hero-caption a img { animation: none !important; }
  .motion-toggle { display: none; }
}