/* =========================================================
   MILO COMPONENT CONTRACT
   File: milo-motion.css
   Layer: Motion System
   Version: 1.x

   PURPOSE
   ----------------------------------------------------------------
   Defines Milo’s shared motion behaviors:
   - Reveal-on-scroll system
   - Pre-load safety
   - Elementor editor safety
   - Motion keyframes used by other components
   - Reduced-motion handling

   OWNERSHIP
   ----------------------------------------------------------------
   Owns:
   - Reveal base / visible states
   - Reveal timing, easing, and delay contract
   - Heading/media reveal overrides
   - Shared keyframes used by Milo components
   - Reduced-motion handling for reveal motion

   Does NOT own:
   - Intersection logic or JS state management
   - Section-specific cascade timing art direction
   - Component-specific hover transitions
   - Global motion token definitions

   ARCHITECTURE
   ----------------------------------------------------------------
   - .milo-reveal-scope is the state container
   - .milo-reveal is the animating child
   - JS adds .is-visible when the scope enters view
   - Component/module CSS may locally tune reveal variables

========================================================= */

/* #region 0) SAFETY */
/* Prevent flash of transition before JS marks the page ready */
html:not(.milo-loaded) .milo-reveal,
html:not(.milo-loaded) .milo-reveal-scope .milo-reveal {
  transition: none !important;
}

/* Keep Elementor editor fully visible and static */
body.elementor-editor-active .milo-reveal-scope .milo-reveal {
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
  transition: none !important;
}
/* #endregion 0) SAFETY */

/* #region 1) REVEAL SYSTEM */

/* #region 1A) BASE STATE */
.milo-reveal-scope .milo-reveal {
  opacity: 0;
  filter: blur(var(--milo-reveal-blur));
  transform: translateY(var(--milo-reveal-y));

  transition-property: opacity, transform, filter !important;
  transition-duration:
    var(--milo-reveal-dur), var(--milo-reveal-dur),
    var(--milo-reveal-dur-filter, var(--milo-reveal-dur)) !important;
  transition-timing-function:
    var(--milo-ease-reveal, var(--milo-ease)),
    var(--milo-ease-reveal, var(--milo-ease)),
    var(--milo-ease-reveal-soft, var(--milo-ease)) !important;
  transition-delay:
    var(--milo-delay), var(--milo-delay), var(--milo-delay) !important;

  will-change: opacity, transform, filter;
}
/* #endregion 1A) BASE STATE */

/* #region 1B) VISIBLE STATE */
.milo-reveal-scope.is-visible .milo-reveal {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
/* #endregion 1B) VISIBLE STATE */

/* #endregion 1) REVEAL SYSTEM */

/* #region 2) SHARED KEYFRAMES */

@keyframes milo-divider-sweep {
  0% {
    background-position: 200% 0;
    opacity: 0;
  }

  8% {
    opacity: 0.18;
  }

  50% {
    opacity: 0.4;
  }

  92% {
    opacity: 0.18;
  }

  100% {
    background-position: -200% 0;
    opacity: 0;
  }
}
/* #endregion 2) SHARED KEYFRAMES */

/* #region 3) REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
  .milo-reveal-scope .milo-reveal {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    transition: none !important;
    transition-delay: 0ms !important;
  }
}
/* #endregion 3) REDUCED MOTION */