/* =========================================================
   ARCA LUXURY STONE — Animations
   GSAP ScrollTrigger classes + reveal patterns
   ========================================================= */

/* ------- Scroll Reveal Base ------- */
.rv {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.rv.in {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for grouped elements */
.rv-delay-1 { transition-delay: 0.10s; }
.rv-delay-2 { transition-delay: 0.20s; }
.rv-delay-3 { transition-delay: 0.30s; }
.rv-delay-4 { transition-delay: 0.40s; }
.rv-delay-5 { transition-delay: 0.50s; }

/* Slide in from left */
.rv-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-left.in { opacity: 1; transform: translateX(0); }

/* Slide in from right */
.rv-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-right.in { opacity: 1; transform: translateX(0); }

/* Scale up reveal */
.rv-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-scale.in { opacity: 1; transform: scale(1); }

/* Clip-path reveal (top-to-bottom curtain) */
.rv-clip {
  clip-path: inset(0 0 100% 0);
  -webkit-clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.rv-clip.in {
  clip-path: inset(0 0 0% 0);
  -webkit-clip-path: inset(0 0 0% 0);
}

/* ------- Gold Line Draw ------- */
.gold-draw {
  position: relative;
  overflow: hidden;
}
.gold-draw::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-dark));
  transition: width 1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;
}
.gold-draw.in::after { width: 100%; }

/* ------- Parallax Wrapper ------- */
.parallax-wrap {
  overflow: hidden;
  border-radius: inherit;
}
.parallax-img {
  width: 100%;
  height: 115%;
  object-fit: cover;
  transform: translateY(0);
  will-change: transform;
}

/* ------- Stat Counter ------- */
.stat-number[data-target] {
  transition: none;
}

/* ------- Hero Gradient Layer ------- */
.hero-gradient-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: radial-gradient(
    ellipse 600px 600px at 50% 50%,
    rgba(215, 175, 77, 0.18) 0%,
    rgba(215, 175, 77, 0.06) 40%,
    transparent 70%
  );
  transition: background 0.1s linear;
}

/* ------- Marquee Scroll Text ------- */
.marquee-track {
  display: flex;
  gap: 40px;
  animation: marqueeScroll 14s linear infinite;
  white-space: nowrap;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-item {
  font-family: var(--font-head);
  font-size: clamp(0.65rem, 1.2vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
.marquee-item .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

/* ------- Image Overlay Reveal ------- */
.img-reveal-wrap {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
}
.img-reveal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--gold-pale);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.9s cubic-bezier(0.77, 0, 0.18, 1);
}
.img-reveal-wrap.in::after { transform: scaleX(0); }

/* ------- Section Pin Marker (GSAP uses) ------- */
.gsap-pin { position: relative; }

/* ------- Hover Lift (cards, features) ------- */
.hover-lift {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(26, 24, 21, 0.16);
}

/* ------- Gold Pulse (CTA button) ------- */
@keyframes goldPulse {
  0%, 100% { box-shadow: 0 4px 20px rgba(215, 175, 77, 0.35); }
  50%       { box-shadow: 0 8px 40px rgba(215, 175, 77, 0.65); }
}
.pulse { animation: goldPulse 2.5s ease-in-out infinite; }

/* ------- Loading Shimmer ------- */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position: 200% center; }
}
.shimmer {
  background: linear-gradient(90deg, var(--gray-light) 25%, var(--gray-mid) 50%, var(--gray-light) 75%);
  background-size: 200% auto;
  animation: shimmer 1.8s linear infinite;
}

/* ------- Reduced Motion ------- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv-left, .rv-right, .rv-scale, .rv-clip,
  .gold-draw, .img-reveal-wrap, .parallax-img,
  .marquee-track {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
  .gold-draw::after { width: 100%; }
  .img-reveal-wrap::after { transform: scaleX(0); }
}