/* ==========================================================================
   site-motion.css — high-end landing page motion layer.
   Only ever active when body has class "motion-on" (server-side gate on
   animations_enabled / hero_frontline_enabled / hero_frontline_animation_enabled)
   AND the visitor has not requested reduced motion.
   ========================================================================== */

/* Smooth scroll only when motion is allowed */
body.motion-on{scroll-behavior:smooth}

/* ---------- Aurora / gradient backdrop behind the hero ---------- */
body.motion-on .hero{isolation:isolate}
body.motion-on .hero::before{
  content:"";position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 45% at 15% 20%, rgba(240,165,0,.30), transparent 60%),
    radial-gradient(32% 40% at 85% 15%, rgba(10,102,194,.28), transparent 60%),
    radial-gradient(45% 55% at 60% 90%, rgba(200,16,46,.16), transparent 65%);
  filter:blur(30px) saturate(130%);
  animation:auroraDrift 22s ease-in-out infinite alternate;
  background-size:160% 160%;
}
@keyframes auroraDrift{
  0%{background-position:0% 0%, 100% 0%, 50% 100%; transform:scale(1)}
  100%{background-position:20% 30%, 70% 40%, 30% 70%; transform:scale(1.06)}
}

/* ---------- Floating crest / logo ---------- */
body.motion-on .head-brand .crest,
body.motion-on .head-brand .mk{animation:motionFloat 5.5s ease-in-out infinite}
@keyframes motionFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}

/* ---------- Scroll reveal (progressive enhancement on top of existing .reveal) ---------- */
body.motion-on .m-reveal{opacity:0;transform:translateY(26px);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);will-change:opacity,transform}
body.motion-on .m-reveal.m-in{opacity:1;transform:none}
body.motion-on .m-reveal.m-stagger.m-in{transition-delay:var(--m-delay,0ms)}

/* ---------- Hero staggered title words (extra polish on top of hero-word) ---------- */
body.motion-on .hero .lbl{animation:motionFadeUp .7s ease both}
body.motion-on .hero .lead{animation:motionFadeUp .7s ease .15s both}
body.motion-on .hero-cta{animation:motionFadeUp .7s ease .28s both}
body.motion-on .hero-search{animation:motionFadeUp .7s ease .4s both}
@keyframes motionFadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- Animated counters ---------- */
body.motion-on .stat-box .n{font-variant-numeric:tabular-nums}

/* ---------- Card tilt / lift on hover (desktop only; skips touch) ---------- */
@media (hover:hover) and (pointer:fine){
  body.motion-on .card,
  body.motion-on .dept-card,
  body.motion-on .news-card,
  body.motion-on .face{
    transform-style:preserve-3d;perspective:800px;
    transition:transform .35s cubic-bezier(.2,.7,.3,1),box-shadow .35s ease,border-color .35s ease;
  }
  body.motion-on .card:hover,
  body.motion-on .dept-card:hover,
  body.motion-on .news-card:hover,
  body.motion-on .face:hover{
    box-shadow:0 22px 44px -18px rgba(0,20,60,.28);
  }
}

/* ---------- Animated underline links (nav + inline content links) ---------- */
body.motion-on .m-underline,
body.motion-on .news-item .nbody h4 a,
body.motion-on .dept-card .dbody a,
body.motion-on .news-card .more,
body.motion-on .cms-body a{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;background-position:0 100%;background-size:0% 2px;
  transition:background-size .3s ease;
}
body.motion-on .m-underline:hover,
body.motion-on .news-item .nbody h4 a:hover,
body.motion-on .dept-card .dbody a:hover,
body.motion-on .news-card .more:hover,
body.motion-on .cms-body a:hover{background-size:100% 2px}

/* ---------- Marquee for the announcement ticker (progressive; ticker already scrolls) ---------- */
body.motion-on .tk-track{animation-duration:38s}

/* ---------- Frontline word: subtle idle glow lift already handled inline; add gentle hover pop ---------- */
body.motion-on .frontline-wrap{transition:transform .3s ease}
body.motion-on .frontline-wrap:hover{transform:translateY(-2px)}

/* ---------- Respect reduced motion globally, even if server toggle is on ---------- */
@media (prefers-reduced-motion: reduce){
  body.motion-on,
  body.motion-on *{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
    scroll-behavior:auto !important;
  }
  body.motion-on .hero::before{display:none}
  body.motion-on .m-reveal{opacity:1 !important;transform:none !important}
}