/* The Weddings Dot - shared scroll-glide system (CSS half; the logic lives in assets/public/js/scroll-animations.js).
   Everything here is progressive enhancement: hidden "before reveal" states only exist while <html class="sa-js"> is set by the script.
   Without JavaScript, with reduced motion, or if the script fails, content is simply visible.
   Motion uses opacity + the individual translate / scale / clip-path properties so it never fights the transform-based hover effects. */

:root{
 --motion-duration-fast:350ms;
 --motion-duration-normal:720ms;
 --motion-duration-slow:1000ms;
 --motion-ease-premium:cubic-bezier(.22,1,.36,1);
 --motion-distance-small:20px;
 --motion-distance-medium:36px;
 --motion-distance-side:28px;
 --motion-stagger-small:80ms;
 --motion-stagger-medium:120ms;
}
@media(max-width:620px){
 :root{--motion-distance-medium:22px;--motion-distance-side:14px;--motion-duration-normal:600ms;--motion-duration-slow:800ms}
}

/* ---- reveal: shared transition (only present while an element is waiting to be revealed; the script removes the attribute afterwards
        so each component's own hover transitions are restored) ---- */
html.sa-js [data-sa]{
 transition:
  opacity var(--sa-dur,var(--motion-duration-normal)) var(--motion-ease-premium) var(--sa-delay,0ms),
  translate var(--sa-dur,var(--motion-duration-normal)) var(--motion-ease-premium) var(--sa-delay,0ms),
  scale var(--motion-duration-slow) var(--motion-ease-premium) var(--sa-delay,0ms),
  clip-path var(--motion-duration-slow) var(--motion-ease-premium) var(--sa-delay,0ms);
}
/* hidden (pre-reveal) states. visibility stays visible so the legacy ".ftco-animate{visibility:hidden}" cannot trap content */
html.sa-js [data-sa]:not(.sa-in){opacity:0;visibility:visible}
html.sa-js [data-sa="up"]:not(.sa-in){translate:0 var(--motion-distance-medium)}
html.sa-js [data-sa="left"]:not(.sa-in){translate:calc(-1 * var(--motion-distance-side)) 0}
html.sa-js [data-sa="right"]:not(.sa-in){translate:var(--motion-distance-side) 0}
html.sa-js [data-sa="img"]:not(.sa-in){scale:1.04;clip-path:inset(7% 0 0 0)}
html.sa-js [data-sa="fade"]{--sa-dur:var(--motion-duration-normal)}
html.sa-js [data-sa].sa-in{opacity:1;translate:0 0;scale:1;clip-path:inset(0 0 0 0)}

/* legacy template: ".ftco-animate" starts hidden and is revealed by waypoints + animate.css. While this system is active it takes over:
   the legacy hidden state and its fadeInUp animation are switched off so there is one reveal, not two. */
html.sa-js .ftco-animate:not([data-sa]){opacity:1;visibility:visible}
html.sa-js .ftco-animate,html.sa-js .ftco-animate.ftco-animated{animation:none!important}
/* rooms page: its tab panels force legacy blocks visible; keep them in the reveal too */
html.sa-js .room-panel [data-sa]:not(.sa-in){opacity:0!important}

/* ---- hero entrance: a short sequence on load; links and buttons are usable immediately ---- */
@keyframes sa-hero-rise{from{opacity:0;translate:0 var(--motion-distance-medium)}to{opacity:1;translate:0 0}}
html.sa-js .hero .hero-content>*{animation:sa-hero-rise var(--motion-duration-normal) var(--motion-ease-premium) both;animation-delay:calc(var(--sa-hero-i,0) * var(--motion-stagger-medium) + 80ms)}
html.sa-js .hero .hero-content>*:nth-child(1){--sa-hero-i:0}
html.sa-js .hero .hero-content>*:nth-child(2){--sa-hero-i:1}
html.sa-js .hero .hero-content>*:nth-child(3){--sa-hero-i:2}
html.sa-js .hero .hero-content>*:nth-child(4){--sa-hero-i:3}

/* safety nets */
@media(prefers-reduced-motion:reduce){
 [data-sa],html.sa-js [data-sa]:not(.sa-in){opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important;transition:none!important}
 html.sa-js .hero .hero-content>*{animation:none}
}
@media print{[data-sa],html.sa-js [data-sa]:not(.sa-in){opacity:1!important;translate:none!important;scale:none!important;clip-path:none!important}}