/* ============================================================
   KAREN ADVISORY — ANIMATION LAYER
   Scroll-reveal classes + keyframes. Triggered by js/main.js
   via IntersectionObserver (adds .visible to .reveal* elements).
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity:0; transform:translateY(28px); transition:opacity .65s ease, transform .65s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-left { opacity:0; transform:translateX(-28px); transition:opacity .65s ease, transform .65s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right { opacity:0; transform:translateX(28px); transition:opacity .65s ease, transform .65s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal-right.visible { opacity:1; transform:translateX(0); }

.reveal-scale { opacity:0; transform:scale(.94); transition:opacity .65s ease, transform .65s ease; transition-delay: var(--reveal-delay, 0s); }
.reveal-scale.visible { opacity:1; transform:scale(1); }

/* convenience stagger classes (also settable inline via style="--reveal-delay:.15s") */
.reveal-delay-1 { --reveal-delay: .1s; }
.reveal-delay-2 { --reveal-delay: .2s; }
.reveal-delay-3 { --reveal-delay: .3s; }
.reveal-delay-4 { --reveal-delay: .4s; }
.reveal-delay-5 { --reveal-delay: .5s; }

/* ---------- Keyframes ---------- */
@keyframes fade-up  { from{opacity:0;transform:translateY(24px);} to{opacity:1;transform:translateY(0);} }
@keyframes fade-in  { from{opacity:0;} to{opacity:1;} }
@keyframes scale-in { from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} }
@keyframes shimmer  { 0%{background-position:-200% center;} 100%{background-position:200% center;} }
@keyframes pulse-gold { 0%,100%{box-shadow:0 0 0 0 rgba(201,168,76,0);} 50%{box-shadow:0 0 0 8px rgba(201,168,76,.15);} }
@keyframes pulse-dot { 0%,100%{transform:scale(1);opacity:.6;} 50%{transform:scale(1.5);opacity:1;} }
@keyframes soft-bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-fade-up  { animation: fade-up .65s ease both; }
.animate-fade-in  { animation: fade-in .65s ease both; }
.animate-scale-in { animation: scale-in .65s ease both; }
.animate-pulse-gold { animation: pulse-gold 2.4s ease-in-out infinite; }

/* Pulsing accent dots (hero decoration) */
.pulse-dot { animation: pulse-dot 3s ease-in-out infinite; }
.pulse-dot.delay-1 { animation-delay: .6s; }
.pulse-dot.delay-2 { animation-delay: 1.2s; }

/* Skeleton shimmer for lazy-loading gallery images before they load */
.img-skeleton {
  background: linear-gradient(90deg, var(--gray-100) 25%, var(--gray-200) 37%, var(--gray-100) 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}
.gallery-item img.lazy-loading,
.gallery-item video.lazy-loading { opacity: 0; }
.gallery-item img.lazy-loaded,
.gallery-item video.lazy-loaded { opacity: 1; transition: opacity .5s ease; }

/* Spinner (used by contact form submit state) */
.spinner { display:inline-block; width:16px; height:16px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation: spin .7s linear infinite; }

/* Lightbox fade */
.lightbox { opacity: 0; transition: opacity .25s ease; }
.lightbox.open { opacity: 1; }
.lightbox-stage { transform: scale(.96); transition: transform .25s ease; }
.lightbox.open .lightbox-stage { transform: scale(1); }

/* Hero floating dots reused across pages */
@keyframes hero-pulse { 0%,100%{transform:scale(1);opacity:.6;} 50%{transform:scale(1.5);opacity:1;} }