/* =====================================================================
   ShivShakti Design & Interiors — animation.css
   Subtle, performance-minded motion. All effects collapse to a
   static, instant state when the user prefers reduced motion.
   ===================================================================== */

/* ----------------------------- Keyframes ----------------------------- */
@keyframes fade-in   { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-up  { from { opacity: 0; transform: translateY(34px); } to { opacity: 1; transform: none; } }
@keyframes slide-left{ from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@keyframes slide-right{from { opacity: 0; transform: translateX(-40px);} to { opacity: 1; transform: none; } }
@keyframes scale-in  { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(176, 141, 87, .45); }
  70%  { box-shadow: 0 0 0 18px rgba(176, 141, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(176, 141, 87, 0); }
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }
@keyframes scroll-dot {
  0% { transform: translateY(-100%); opacity: 0; }
  40% { opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes shimmer { 100% { background-position: 200% 0; } }

/* ------------------- Scroll-reveal (driven by JS) -------------------- */
/* Elements start hidden; .is-revealed (added by IntersectionObserver)
   plays the relevant animation once. */
[data-anim] {
  opacity: 0;
  will-change: opacity, transform;
}
[data-anim].is-revealed {
  opacity: 1;
  animation-duration: .9s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
  animation-fill-mode: both;
}
[data-anim="fade"].is-revealed   { animation-name: fade-in; }
[data-anim="up"].is-revealed     { animation-name: slide-up; }
[data-anim="left"].is-revealed   { animation-name: slide-left; }
[data-anim="right"].is-revealed  { animation-name: slide-right; }
[data-anim="scale"].is-revealed  { animation-name: scale-in; }

/* Stagger helpers */
[data-delay="1"].is-revealed { animation-delay: .1s; }
[data-delay="2"].is-revealed { animation-delay: .2s; }
[data-delay="3"].is-revealed { animation-delay: .3s; }
[data-delay="4"].is-revealed { animation-delay: .4s; }
[data-delay="5"].is-revealed { animation-delay: .5s; }
[data-delay="6"].is-revealed { animation-delay: .6s; }

/* --------------------------- Ambient motion ------------------------- */
.float { animation: float-y 6s ease-in-out infinite; }
.hero__scroll .dot { position: relative; overflow: hidden; }
.hero__scroll .dot::after {
  content: ""; position: absolute; inset: 0;
  background: #fff;
  animation: scroll-dot 2.4s ease-in-out infinite;
}
.play-btn { animation: pulse-ring 2.6s ease-out infinite; }

/* Hover lift utility */
.hover-lift { transition: transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s; }
.hover-lift:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }

/* Scale-on-hover utility */
.hover-scale img { transition: transform 1s cubic-bezier(.22,.61,.36,1); }
.hover-scale:hover img { transform: scale(1.06); }

/* Marquee track (partner brands optional) */
.marquee { overflow: hidden; }
.marquee__track { display: flex; gap: 4rem; width: max-content; animation: marquee 28s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }

/* Loading shimmer for lazy images */
.img-shimmer {
  background: linear-gradient(100deg, var(--color-surface-2) 30%, var(--color-line-soft) 50%, var(--color-surface-2) 70%);
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

/* Counter mid-animation guard */
.counting { font-variant-numeric: tabular-nums; }

/* --------------------- Reduced-motion override ---------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  [data-anim] { opacity: 1 !important; transform: none !important; }
  .float, .play-btn, .marquee__track, .hero__scroll .dot::after { animation: none !important; }
}