/* Motion follows input; content and controls are visible without this layer. */
:root { --mvs-motion-ease: cubic-bezier(.16,1,.3,1); }
.mvs-magnetic {
  --mvs-magnet-x: 0px;
  --mvs-magnet-y: 0px;
  --mvs-press-scale: 1;
}
:root[data-mvs-spatial="true"] .mvs-magnetic,
:root[data-mvs-spatial="true"] .mvs-magnetic:hover {
  transform: translate3d(var(--mvs-magnet-x),var(--mvs-magnet-y),0) scale(var(--mvs-press-scale));
  transition-property: color,background-color,box-shadow;
  transition-duration: 160ms;
  transition-timing-function: var(--mvs-motion-ease);
}
:root[data-mvs-spatial="true"] .mvs-magnetic:active,
:root[data-mvs-spatial="true"] .mvs-magnetic[data-mvs-pressed="true"] {
  --mvs-press-scale: .97;
}
.btn > svg,.text-link > svg {
  transform: translateX(0);
  transition: transform 180ms var(--mvs-motion-ease);
}
.btn:is(:hover,:focus-visible) > svg,
.text-link:is(:hover,:focus-visible) > svg { transform: translateX(3px); }
.btn:active > svg { transform: translateX(1px); transition-duration: 70ms; }
.mvs-depth {
  --mvs-depth-x: 0deg;
  --mvs-depth-y: 0deg;
  --mvs-depth-lift: 0px;
  --mvs-base-x: 0deg;
  --mvs-base-y: 0deg;
}
.hero-film.mvs-depth { --mvs-base-x: 3deg; --mvs-base-y: -9deg; }
:root[data-mvs-spatial="true"] .mvs-depth,
:root[data-mvs-spatial="true"] .mvs-depth:hover {
  transform: perspective(1400px) translate3d(0,var(--mvs-depth-lift),0)
    rotateX(calc(var(--mvs-base-x) + var(--mvs-depth-x)))
    rotateY(calc(var(--mvs-base-y) + var(--mvs-depth-y)));
  transform-origin: 50% 50%;
  transition: box-shadow 220ms var(--mvs-motion-ease);
}
:root[data-mvs-spatial="true"] .mvs-depth[data-mvs-media-locked="true"],
:root[data-mvs-spatial="true"] .mvs-depth[data-mvs-media-locked="true"]:hover {
  transform: none;
}
.mvs-moving { will-change: transform; }
.video-frame:focus-within { outline: 1px solid var(--lime,#c8f25a); outline-offset: 4px; }
.brief > div { border-radius: 4px; transition: background-color 160ms var(--mvs-motion-ease); }
.brief > div:hover { background: rgba(200,242,90,.065); }
.before-after .ba-arrow { transition: box-shadow 220ms var(--mvs-motion-ease); }
.before-after:is(:hover,:focus-within) .ba-arrow {
  box-shadow: 0 12px 28px -12px rgba(200,242,90,.6);
}
.style-grid a { isolation: isolate; }
.style-grid img {
  transform: scale(1);
  transform-origin: 50% 60%;
  transition: transform 320ms var(--mvs-motion-ease),filter 220ms var(--mvs-motion-ease);
}
.style-grid a:is(:hover,:focus-visible) img { filter: saturate(1.08); }
.style-grid a h3 { transition: color 160ms var(--mvs-motion-ease); }
.style-grid a:is(:hover,:focus-visible) h3 { color: var(--lime,#c8f25a); }
.feature-grid .panel {
  transition: background-color 200ms var(--mvs-motion-ease),border-color 200ms var(--mvs-motion-ease),translate 260ms var(--mvs-motion-ease);
}
.feature-grid .panel:is(:hover,:focus-within) {
  background-color: #171421;
  border-color: rgba(200,242,90,.35);
}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .style-grid a:is(:hover,:focus-visible) img { transform: scale(1.035); }
  .feature-grid .panel:is(:hover,:focus-within) { translate: 0 -3px; }
}
@media (prefers-reduced-motion:reduce),(hover:none),(pointer:coarse) {
  .mvs-depth,.mvs-depth:hover,.hero-film.mvs-depth,.hero-film.mvs-depth:hover,
  .mvs-magnetic,.mvs-magnetic:hover { transform: none !important; }
  .btn > svg,.text-link > svg,.btn:is(:hover,:focus-visible) > svg,
  .text-link:is(:hover,:focus-visible) > svg { transform: none; }
  .style-grid img,.style-grid a:is(:hover,:focus-visible) img { transform: none; }
  .feature-grid .panel:is(:hover,:focus-within) { translate: none; }
  .mvs-moving { will-change: auto; }
}
@media (prefers-reduced-motion:reduce) {
  .style-grid img,.feature-grid .panel,.brief > div { transition-duration: 100ms; }
}