/* All content stays visible if motion is unavailable or disabled. */
[data-hero] { isolation: isolate; }
[data-hero].grain > picture,
[data-hero].grain > .absolute,
[data-hero].grain > .hero-aura,
[data-hero].grain > .hero-path { position: absolute; }
[data-hero] > picture { overflow: hidden; }
[data-hero] > picture img { transform: scale(1.035); }
[data-hero] .fill-base { color: #fff; }
[data-hero] .fill-top { display: none; }
.hero-aura {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse at 78% 30%, rgba(95,138,252,.17), transparent 52%);
}
.hero-path {
  position: absolute; z-index: 2; pointer-events: none;
  left: 5%; right: 5%; bottom: 28px; height: 1px;
  background: linear-gradient(90deg, rgba(95,138,252,.5), rgba(255,255,255,.08));
  transform-origin: left;
}
.hero-path span {
  position: absolute; left: 0; top: -2px; width: 5px; height: 5px;
  border-radius: 50%; background: #9ab6ff; box-shadow: 0 0 16px 4px rgba(95,138,252,.45);
}
#navbar { transition: box-shadow .3s ease, background-color .3s ease; }
#navbar.has-scrolled { background: rgba(0,0,0,.97); box-shadow: 0 8px 30px rgba(0,0,0,.2); }
#services .rail-item {
  transition: border-color .4s ease, box-shadow .4s ease;
}
#services .rail-item.is-in-view { border-color: rgba(95,138,252,.3); }
#services .rail-item picture, #services .rail-item img { opacity: 1; }
#services .rail-item picture img { transition: transform .7s cubic-bezier(.22,1,.36,1); }
@media (hover: hover) and (pointer: fine) {
  #services .rail-item:hover { border-color: rgba(95,138,252,.58); box-shadow: 0 18px 50px -28px rgba(39,102,248,.35); }
  #services .rail-item:hover picture img { transform: scale(1.025); }
  [data-hero] .btn { transition: transform .25s ease, box-shadow .25s ease; }
  [data-hero] .btn:hover { transform: translateY(-3px); }
  [data-hero] .btn-jewel:hover { box-shadow: 0 12px 32px -10px rgba(95,138,252,.7); }
}
@media (max-width: 639px) {
  [data-hero] { min-height: 590px; align-items: flex-end; }
  [data-hero] > picture img {
    object-position: 74% 42% !important;
    transform: scale(1.01);
  }
  [data-hero] .hero-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.18) 0%, rgba(0,0,0,.34) 24%, rgba(0,0,0,.84) 62%, rgba(0,0,0,.96) 100%) !important;
  }
  [data-hero] .max-w-\[680px\] { padding-top: 7.5rem; }
  .hero-path { bottom: 18px; }
  .hero-aura { opacity: .6; }
}
@media (prefers-reduced-motion: reduce) {
  [data-hero] > picture img { transform: none; }
  #navbar, #services .rail-item, #services .rail-item picture img, [data-hero] .btn { transition: none; }
  #services .rail-item:hover picture img, [data-hero] .btn:hover { transform: none; }
}