/* Scroll reveal — the motion vocabulary used across efreedom.com.
   Pairs with assets/scroll-reveal.js. Both are page-agnostic: the JS decides
   what gets revealed, this file only describes the states.

   The base .scroll-reveal rule IS the hidden state. If it ever gets flattened to
   opacity:1/transform:none the whole system silently dies — every element renders
   in its final position and nothing ever animates. That is the one rule to protect. */

:root{
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-soft:cubic-bezier(.4,0,.2,1);
}

.scroll-reveal{
  opacity:0;
  transform:translate3d(var(--reveal-x,0), var(--reveal-y,30px), 0) scale(var(--reveal-scale,1));
  filter:blur(var(--reveal-blur,0));
  clip-path:var(--reveal-clip, inset(-12% -12% -12% -12% round 0));
  transition:
    opacity var(--reveal-duration,.72s) var(--motion-ease) var(--reveal-delay,0ms),
    transform var(--reveal-duration,.72s) var(--motion-ease) var(--reveal-delay,0ms),
    filter var(--reveal-duration,.72s) var(--motion-ease) var(--reveal-delay,0ms),
    clip-path var(--reveal-duration,.72s) var(--motion-ease) var(--reveal-delay,0ms);
  will-change:opacity,transform,filter,clip-path;
}
.scroll-reveal.is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  clip-path:inset(-12% -12% -12% -12% round 0);
}

/* Once an element has landed, drop the reveal transition so it does not fight
   the element's own hover/interaction transitions. */
.scroll-reveal.reveal-done{
  will-change:auto;
  clip-path:none;
}

.reveal-pop{
  --reveal-y:42px;
  --reveal-scale:.92;
  --reveal-duration:.64s;
}
.reveal-social{
  --reveal-y:28px;
  --reveal-scale:.84;
  --reveal-duration:.46s;
}
.reveal-submerge{
  --reveal-y:54px;
  --reveal-scale:.965;
  --reveal-duration:.78s;
}
.reveal-word{
  --reveal-y:18px;
  --reveal-scale:.985;
  --reveal-duration:.5s;
}
.reveal-left{
  --reveal-x:-42px;
  --reveal-y:10px;
  --reveal-duration:.74s;
}
.reveal-right{
  --reveal-x:42px;
  --reveal-y:10px;
  --reveal-duration:.74s;
}
.reveal-clip{
  --reveal-y:26px;
  --reveal-scale:1.025;
  --reveal-duration:.84s;
  --reveal-clip:inset(18% 0 18% 0 round 40px);
}
.reveal-pocket{
  --reveal-x:40px;
  --reveal-y:34px;
  --reveal-duration:.68s;
}

/* No JS: never leave content stranded at opacity 0. */
html:not(.js) .scroll-reveal{
  opacity:1;
  transform:none;
  filter:none;
  clip-path:none;
}

@media (prefers-reduced-motion:reduce){
  .scroll-reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}