/* ==========================================================================
   ARSAB TECH — MOTION LAYER
   Lightweight, site-wide motion system.
   Principles: CSS-first, transform/opacity where possible, progressive
   enhancement, keyboard/touch-safe interactions, reduced-motion support.
   ========================================================================== */

/* ---------- Page load fade ---------- */
html.mo-ready body { animation: moPageIn .45s ease both; }
@keyframes moPageIn { from { opacity: 0; } to { opacity: 1; } }
body.mo-leaving { opacity: 0; transition: opacity .18s ease; }

/* ---------- Scroll reveal ---------- */
.mo-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--mo-delay, 0s);
  will-change: opacity, transform;
}
.mo-reveal.mo-in { opacity: 1; transform: translateY(0); }

.mo-reveal-scale {
  opacity: 0;
  transform: scale(.94);
  transition:
    opacity .6s cubic-bezier(.16,1,.3,1),
    transform .6s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--mo-delay, 0s);
}
.mo-reveal-scale.mo-in { opacity: 1; transform: scale(1); }

/* ---------- Image hover zoom ---------- */
.mo-zoom { overflow: hidden; }
.mo-zoom img, .mo-zoom video {
  transition: transform .55s cubic-bezier(.16,1,.3,1);
}
.mo-zoom:hover img, .mo-zoom:focus-within img,
.mo-zoom:hover video, .mo-zoom:focus-within video {
  transform: scale(1.06);
}

/* ---------- Card lift ---------- */
.mo-lift {
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease;
}
.mo-lift:hover, .mo-lift:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(20,19,31,.12);
}

/* ---------- Sticky nav ---------- */
.mo-nav-scrolled {
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 6px 24px rgba(20,19,31,.08);
}

/* ---------- Link underline ---------- */
.mo-underline {
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size .35s ease;
}
.mo-underline:hover, .mo-underline:focus-visible {
  background-size: 100% 1px;
}

/* ---------- Stagger helper ---------- */
[data-mo-index] { --mo-delay: 0s; }

/* ==========================================================================
   HERO MOTION
   ========================================================================== */

/* Existing hero visual treatment remains untouched; these classes add only
   entrance/parallax motion around it. */
.mo-hero-media {
  will-change: transform;
  transform: translate3d(var(--mo-parallax-x, 0px), var(--mo-parallax-y, 0px), 0);
  transition: transform .18s cubic-bezier(.16,1,.3,1);
}

.mo-hero-curtain {
  clip-path: inset(0 100% 0 0);
  animation: moHeroCurtain 1s cubic-bezier(.16,1,.3,1) .08s forwards;
}
@keyframes moHeroCurtain {
  to { clip-path: inset(0 0 0 0); }
}

/* Hero image entrance + continuous pan now lives entirely in
   css/hero-final.css (heroImgSettle → heroKenBurnsLoop, sequenced via
   animation-delay) so there is a single source of truth for it and no
   specificity fight between stylesheets. The old standalone Ken Burns
   loop and the yellow/violet ambient glow that lived here have been
   removed — the glow didn't match the current red/maroon hero theme
   and was always running behind the visible vignette. */
.hero { position: relative; }

/* ==========================================================================
   FOOTER — calm closing animation
   ========================================================================== */

.mo-footer-ready .home-footer .footer-brand,
.mo-footer-ready .home-footer .footer-col,
.mo-footer-ready .home-footer .footer-bottom {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity .65s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1);
}

.mo-footer-ready .home-footer .footer-brand { transition-delay: .02s; }
.mo-footer-ready .home-footer .footer-col:nth-of-type(2) { transition-delay: .10s; }
.mo-footer-ready .home-footer .footer-col:nth-of-type(3) { transition-delay: .16s; }
.mo-footer-ready .home-footer .footer-col:nth-of-type(4) { transition-delay: .22s; }
.mo-footer-ready .home-footer .footer-bottom { transition-delay: .30s; }

.mo-footer-ready .home-footer.mo-footer-in .footer-brand,
.mo-footer-ready .home-footer.mo-footer-in .footer-col,
.mo-footer-ready .home-footer.mo-footer-in .footer-bottom {
  opacity: 1;
  transform: translateY(0);
}

.home-footer .footer-socials a,
.home-footer .footer-col a,
.home-footer .footer-legal a {
  transition:
    color .25s ease,
    transform .25s cubic-bezier(.16,1,.3,1);
}
.home-footer .footer-socials a:hover,
.home-footer .footer-socials a:focus-visible {
  transform: translateY(-2px);
}
.home-footer .footer-col a:hover,
.home-footer .footer-col a:focus-visible,
.home-footer .footer-legal a:hover,
.home-footer .footer-legal a:focus-visible {
  transform: translateX(3px);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html.mo-ready body,
  .mo-reveal,
  .mo-reveal-scale,
  .mo-hero-media,
  .mo-hero-curtain,
  .mo-footer-ready .home-footer .footer-brand,
  .mo-footer-ready .home-footer .footer-col,
  .mo-footer-ready .home-footer .footer-bottom {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}

@media (hover: none), (pointer: coarse) {
  .mo-hero-media { transform: none !important; }
}