/* =========================================================
   SBG – Motion layer (hero Ken Burns + light entrance animations)
   Load after sbg.css:  <link rel="stylesheet" href="assets/css/sbg-motion.css">
   ========================================================= */

:root {
  --m-ease: cubic-bezier(.22, .61, .36, 1);
  --m-dur: .9s;
  --m-shift: 22px;
}

/* ---------- 1. Hero image: slow zoom in / zoom out / pan ---------- */
.hero__media img {
  will-change: transform;
  transform-origin: center;
  backface-visibility: hidden;
}
.hero__slide--1 .hero__media img { animation: hero-kb-zoom-in  14s ease-in-out infinite alternate; }
.hero__slide--2 .hero__media img { animation: hero-kb-zoom-out 14s ease-in-out infinite alternate; }
.hero__slide--3 .hero__media img { animation: hero-kb-pan      14s ease-in-out infinite alternate; }

@keyframes hero-kb-zoom-in  { from { transform: scale(1); }    to { transform: scale(1.12); } }
@keyframes hero-kb-zoom-out { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hero-kb-pan {
  from { transform: scale(1.1) translateX(-3%); }
  to   { transform: scale(1.1) translateX(3%); }
}

/* ---------- 2. Hero content: staggered fade-up on every slide change ---------- */
.hero__slide.is-active .hero__title,
.hero__slide.is-active .hero__text,
.hero__slide.is-active .hero__actions {
  animation: m-fade-up var(--m-dur) var(--m-ease) both;
}
.hero__slide.is-active .hero__title   { animation-delay: .25s; }
.hero__slide.is-active .hero__text    { animation-delay: .4s; }
.hero__slide.is-active .hero__actions { animation-delay: .55s; }

@keyframes m-fade-up {
  from { opacity: 0; transform: translate3d(0, var(--m-shift), 0); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 3. Scroll reveal (activated by sbg-motion.js) ---------- */
/* Only hides content once JS confirms it's running – page stays visible without JS. */
.motion-ready [data-m] {
  opacity: 0;
  transform: translate3d(0, var(--m-shift), 0);
  transition: opacity var(--m-dur) var(--m-ease), transform var(--m-dur) var(--m-ease);
  transition-delay: var(--m-delay, 0s);
}
.motion-ready [data-m="fade"]  { transform: none; }
.motion-ready [data-m="left"]  { transform: translate3d(calc(var(--m-shift) * -1), 0, 0); }
.motion-ready [data-m="right"] { transform: translate3d(var(--m-shift), 0, 0); }
.motion-ready [data-m="zoom"]  { transform: scale(.97); }

.motion-ready [data-m].is-in {
  opacity: 1;
  transform: none;
}

/* ---------- 4. Reduced motion: turn everything off ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero__slide.is-active .hero__title,
  .hero__slide.is-active .hero__text,
  .hero__slide.is-active .hero__actions { animation: none !important; }
  .motion-ready [data-m] { opacity: 1 !important; transform: none !important; transition: none !important; }
}