/* ==========================================================================
   ANIMATIONS — scroll reveals + micro-interactions.
   Paired with static/js/reveal-on-scroll.js (IntersectionObserver).
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-slow) var(--ease-luxury),
              transform var(--duration-slow) var(--ease-luxury);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal="scale"].is-visible { transform: scale(1); }

[data-reveal="fade"] { transform: none; }

/* stagger children automatically via inline --delay set by JS */
[data-reveal] { transition-delay: var(--delay, 0s); }

/* Magnetic / lift hover for interactive tiles */
.hover-lift {
  transition: transform var(--duration-fast) var(--ease-luxury);
}
.hover-lift:hover { transform: translateY(-4px); }

/* Image zoom on hover, used inside product/gallery cards */
.media-zoom { overflow: hidden; }
.media-zoom img {
  transition: transform 0.7s var(--ease-luxury);
}
.media-zoom:hover img { transform: scale(1.06); }

/* Glass surface for sticky header state + overlays */
.glass {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.glass-dark {
  background: rgba(18,18,18,0.6);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

/* Ripple button feedback */
.btn-luxury { position: relative; overflow: hidden; }
.btn-luxury .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 0.6s var(--ease-luxury);
  background: rgba(255,255,255,0.5);
  pointer-events: none;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* Animated counters (number set by JS, this just guards layout shift) */
.stat-number { font-variant-numeric: tabular-nums; }

/* Floating ambient shape used sparingly behind hero */
.float-shape {
  animation: float 8s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) translateX(0); }
  50% { transform: translateY(-18px) translateX(8px); }
}