/*
  Enison Motion Lite
  - scoped to body.enison-motion-lite
  - JS adds html.eml-js
*/

/* Slightly wider layout on large screens (subtle). */
@media (min-width: 87.5em) {
  body.enison-motion-lite .container {
    max-width: 1320px;
  }
}

/* Respect accessibility: disable motion if user asks for it. */
@media (prefers-reduced-motion: reduce) {
  html.eml-js body.enison-motion-lite .eml-reveal {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  body.enison-motion-lite .Card,
  body.enison-motion-lite .Listing ul li,
  body.enison-motion-lite .Card-image img,
  body.enison-motion-lite .Listing-image img,
  body.enison-motion-lite .Section-image img {
    transition: none !important;
    transform: none !important;
  }
}

/* Scroll reveal base (only when JS is enabled to avoid hiding content if JS fails). */
html.eml-js body.enison-motion-lite .eml-reveal {
  opacity: 0;
  transform: translate3d(0, 40px, 0);
  filter: blur(0);
  transition:
    opacity 420ms ease,
    transform 900ms cubic-bezier(.16, 1, .3, 1),
    filter 900ms ease;
  transition-delay: var(--eml-delay, 0ms);
  will-change: opacity, transform, filter;
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-media {
  transform: translate3d(0, 26px, 0) scale(1.12);
}

/* AOS-ish variants (assigned from JS). */
html.eml-js body.enison-motion-lite .eml-reveal.eml-fade-up {
  transform: translate3d(0, 46px, 0);
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-fade-right {
  transform: translate3d(-46px, 0, 0);
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-fade-left {
  transform: translate3d(46px, 0, 0);
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-zoom-out {
  transform: translate3d(0, 22px, 0) scale(1.14);
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-zoom-in {
  transform: translate3d(0, 22px, 0) scale(0.90);
}

/* Hero: softer entrance (slower + tiny blur-to-crisp) */
html.eml-js body.enison-motion-lite .eml-reveal.eml-hero {
  transform: translate3d(0, 22px, 0);
  filter: blur(8px);
  transition:
    opacity 520ms ease,
    transform 1050ms cubic-bezier(.16, 1, .3, 1),
    filter 1050ms ease;
  will-change: opacity, transform, filter;
}

html.eml-js body.enison-motion-lite .eml-reveal.eml-hero-media {
  transform: translate3d(0, 18px, 0) scale(1.10);
  filter: blur(12px);
  transition:
    opacity 560ms ease,
    transform 1200ms cubic-bezier(.16, 1, .3, 1),
    filter 1200ms ease;
  will-change: opacity, transform, filter;
}

/* Ensure blur resolves when in view */
html.eml-js body.enison-motion-lite .eml-reveal.eml-hero.is-inview,
html.eml-js body.enison-motion-lite .eml-reveal.eml-hero-media.is-inview {
  filter: blur(0);
}

html.eml-js body.enison-motion-lite .eml-reveal.is-inview {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* After the entrance has finished, keep interactions (hover) snappy. */
html.eml-js body.enison-motion-lite .eml-reveal.is-settled {
  transition-delay: 0ms !important;
  transition:
    opacity 200ms ease,
    transform 260ms ease,
    filter 260ms ease;
  will-change: auto;
}

/* --- Hero (first block) entrance: CSS-only so it’s visible even when JS loads late --- */
@media (prefers-reduced-motion: no-preference) {
  /* Only the first Hero inside <main> (prevents disabling scroll-reveal on later Heroes) */
  body.enison-motion-lite main > .Hero:first-child .Hero-main > * {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
    filter: blur(8px);
    animation: emlHeroTextIn 1050ms cubic-bezier(.16, 1, .3, 1) forwards;
  }

  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(1) { animation-delay: 120ms; }
  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(2) { animation-delay: 205ms; }
  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(3) { animation-delay: 290ms; }
  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(4) { animation-delay: 375ms; }
  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(5) { animation-delay: 460ms; }
  body.enison-motion-lite main > .Hero:first-child .Hero-main > *:nth-child(6) { animation-delay: 545ms; }

  body.enison-motion-lite main > .Hero:first-child .Hero-aside img {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(1.10);
    filter: blur(12px);
    animation: emlHeroMediaIn 1200ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: 300ms;
  }

  body.enison-motion-lite main > .Hero:first-child .Hero-aside form {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    filter: blur(10px);
    animation: emlHeroMediaIn 1200ms cubic-bezier(.16, 1, .3, 1) forwards;
    animation-delay: 300ms;
  }
}

@keyframes emlHeroTextIn {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

@keyframes emlHeroMediaIn {
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}


/* Optional: gentle “alive” feel on hero image when hovered (after it has revealed). */
@media (hover: hover) {
  body.enison-motion-lite .Hero-aside img.is-inview.is-settled:hover {
    transform: scale(1.03);
  }
}

/* --- Hover “opening” interactions (subtle, modern) --- */

/* Cards: lift slightly + zoom image a touch (exclude Card--alt to avoid breaking its absolute image behaviour). */
body.enison-motion-lite .Card {
  transition: transform 260ms ease;
}

@media (hover: hover) {
  body.enison-motion-lite .Card:hover {
    transform: translateY(-6px);
  }
}

body.enison-motion-lite .Card:not(.Card--alt) .Card-image img {
  transition: transform 700ms cubic-bezier(.2, .75, .2, 1);
  transform: none;
}

/* Clip the zoom neatly on regular cards */
body.enison-motion-lite .Card:not(.Card--alt) .Card-image {
  overflow: hidden;
/*  border-radius: 12px;*/
}

@media (hover: hover) {
  body.enison-motion-lite .Card:not(.Card--alt):hover .Card-image img {
    transform: scale(1.07);
  }
}

/* Listing tiles (Columns block etc.): lift + zoom image */
body.enison-motion-lite .Listing ul li {
  transition: transform 260ms ease;
}

@media (hover: hover) {
  body.enison-motion-lite .Listing ul li:hover {
    transform: translateY(-6px);
  }
}

body.enison-motion-lite .Listing-image img {
  display: block;
  transition: transform 700ms cubic-bezier(.2, .75, .2, 1);
}

@media (hover: hover) {
  body.enison-motion-lite .Listing ul li:hover .Listing-image img {
    transform: scale(1.07);
  }
}

/* Make images feel a bit more “featured” without breaking layout. */
/*body.enison-motion-lite .Listing-image,
body.enison-motion-lite .Section-image img,
body.enison-motion-lite .Hero-aside img {
  border-radius: 12px;
}*/

/* In “Columns”/Listing blocks, increase image presence a bit. */
body.enison-motion-lite .Listing-image {
  margin-bottom: 24px; /* slightly bigger than theme default */
}

/* If the theme hides Listing description on mobile, keep as-is (no forced change) */