/* parts/motion.css: owned by the motion workstream. Loaded after styles.css.
   Slow, deliberate, calm. No bounce, spring, overshoot or spin anywhere. */

:root {
  --m-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* gentle ease-out, no overshoot */
  --m-dur: 0.8s;
  --m-rise: 18px;
}

html {
  background: var(--bg, #1e1d1c); /* shows through during page fades */
}

/* ---------- 1. Reveals: disabled (always shown; no scroll entrance) ---------- */

[data-reveal],
[data-reveal].is-in,
.split .char,
.split.is-in .char,
.split--words .word,
.split--words.is-in .word,
.u-fade,
.uhero__frame.u-fade,
.uhero__word.u-fade {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  transition: none !important;
  will-change: auto;
}

[data-parallax] {
  translate: none !important;
}

/* Hero Ken Burns: much smaller drift, no jump when a slide fades out */
.hero__slide img {
  transform: scale(1.02);
}

.hero__slide:nth-child(2n) img {
  transform: scale(1.06);
}

@keyframes kenburns {
  from {
    transform: scale(1.06) translate3d(-0.6%, 0, 0);
  }
  to {
    transform: scale(1.02) translate3d(0.6%, -0.4%, 0);
  }
}

@keyframes kenburnsAlt {
  from {
    transform: scale(1.02) translate3d(0.6%, 0.4%, 0);
  }
  to {
    transform: scale(1.06) translate3d(-0.6%, 0, 0);
  }
}

.hero__slide {
  transition-duration: 2.2s;
}

/* If JS never runs, never leave content invisible */
@media (scripting: none) {
  [data-reveal],
  .split .char,
  .split--words .word {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ---------- 2. Page transitions: instant (no fade-in / leave) ---------- */

body {
  animation: none;
}

html.is-leaving body {
  opacity: 1;
  transition: none;
  pointer-events: auto;
}

/* ---------- 3. Image hover: scale 1.02 at most, slow ---------- */

@media (hover: hover) {
  .tile:hover img,
  .card:hover .card__media img,
  .duo__tile:hover img,
  .split-feature__media:hover img {
    transform: scale(1.02);
  }

  .tile img,
  .card__media img,
  .duo__tile img,
  .split-feature__media img {
    transition-duration: 1.2s;
    transition-timing-function: var(--m-ease);
  }

  .info-card:hover {
    transform: translateY(-3px);
  }

  /* ---------- 4. Link hover: 4px nudge and underline drift ---------- */

  .footer__links a,
  .footer__legal a,
  .mega__list a {
    transition:
      transform 0.5s var(--m-ease),
      opacity 0.3s ease,
      background-color 0.3s ease;
  }

  .footer__links a:hover,
  .footer__legal a:hover,
  .mega__list a:hover {
    transform: translateX(4px);
  }

  .menu-item {
    transition-duration: 0.5s;
  }

  .menu-item:hover {
    padding-left: 10px;
  }

  .tile__arrow svg {
    transition: transform 0.5s var(--m-ease);
  }

  .tile:hover .tile__arrow svg {
    transform: translateX(4px);
  }

  .newsletter p a,
  .info-card a {
    transition: text-underline-offset 0.4s var(--m-ease), opacity 0.3s ease;
  }

  .newsletter p a:hover {
    text-underline-offset: 6px;
  }

  .info-card a:hover {
    text-underline-offset: 8px;
  }
}

.tile__arrow {
  transform: translateY(6px);
  transition-duration: 0.6s;
}

/* ---------- 5. Reduced motion: only instant opacity changes remain ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }

  [data-reveal],
  .split .char,
  .split--words .word,
  .u-fade,
  .uhero__frame.u-fade,
  .uhero__word.u-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .hero__slide img,
  .hero__slide:nth-child(2n) img,
  .page-header__bg img {
    transform: none !important;
  }

  .tile:hover img,
  .card:hover .card__media img,
  .duo__tile:hover img,
  .split-feature__media:hover img,
  .info-card:hover,
  .footer__links a:hover,
  .footer__legal a:hover,
  .mega__list a:hover,
  .tile:hover .tile__arrow svg {
    transform: none !important;
  }

  .menu-item:hover {
    padding-left: 6px !important;
  }

  .tile__arrow {
    transform: none !important;
  }

  [data-parallax] {
    translate: none !important;
  }

  html.is-leaving body {
    opacity: 1 !important;
  }
}