/* ============================================================
   WISDOM LUXURY HOMES — Animations CSS
   ============================================================ */

/* ── Fade In ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Slide Up ── */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(40px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Slide Down ── */
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Slide Left ── */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Slide Right ── */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── Scale In ── */
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* ── Line Expand ── */
@keyframes lineExpand {
  from { width: 0; }
  to { width: 100%; }
}

/* ── Float ── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ── Pulse ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(0.97); }
}

/* ── Shimmer ── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* ── Rotate ── */
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ── Counter ── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Utility Animation Classes ── */
.animate-fade-in { animation: fadeIn 0.8s ease forwards; }
.animate-slide-up { animation: slideUp 0.8s ease forwards; }
.animate-slide-left { animation: slideLeft 0.8s ease forwards; }
.animate-slide-right { animation: slideRight 0.8s ease forwards; }
.animate-scale-in { animation: scaleIn 0.6s ease forwards; }
.animate-float { animation: float 4s ease-in-out infinite; }

/* Delay helpers */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }
.delay-1000 { animation-delay: 1s; }

/* Start hidden for JS-triggered animations */
.anim-hidden { opacity: 0; }

/* ── Hero Animations ── */
.hero__label.animated { animation: slideRight 0.9s ease forwards; }
.hero__title.animated { animation: slideUp 1s ease 0.2s forwards; opacity: 0; }
.hero__subtitle.animated { animation: slideUp 0.9s ease 0.4s forwards; opacity: 0; }
.hero__actions.animated { animation: slideUp 0.9s ease 0.6s forwards; opacity: 0; }
.hero__scroll.animated { animation: fadeIn 1s ease 1s forwards; opacity: 0; }

/* ── Ripple Effect ── */
.ripple-container { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
  transform: scale(0);
  animation: rippleEffect 0.6s linear;
  pointer-events: none;
}
@keyframes rippleEffect {
  to { transform: scale(4); opacity: 0; }
}

/* ── Image Reveal ── */
.img-reveal-wrap {
  overflow: hidden;
  position: relative;
}
.img-reveal-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateX(0);
  transform-origin: left;
}
.img-reveal-wrap.revealed::after {
  animation: imgReveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
@keyframes imgReveal {
  0% { transform: translateX(-100%); transform-origin: left; }
  50% { transform: translateX(0); transform-origin: left; }
  51% { transform: translateX(0); transform-origin: right; }
  100% { transform: translateX(100%); transform-origin: right; }
}

/* ── AOS Custom Styles ── */
[data-aos="fade-up-custom"] {
  opacity: 0;
  transform: translateY(32px);
  transition-property: opacity, transform;
}
[data-aos="fade-up-custom"].aos-animate {
  opacity: 1;
  transform: translateY(0);
}
[data-aos="scale-in-custom"] {
  opacity: 0;
  transform: scale(0.9);
  transition-property: opacity, transform;
}
[data-aos="scale-in-custom"].aos-animate {
  opacity: 1;
  transform: scale(1);
}

/* ── GSAP Initial States ── */
.gsap-reveal { opacity: 0; }
.gsap-slide-up { opacity: 0; transform: translateY(50px); }
.gsap-slide-left { opacity: 0; transform: translateX(-50px); }
.gsap-slide-right { opacity: 0; transform: translateX(50px); }
.gsap-scale { opacity: 0; transform: scale(0.85); }

/* ── Parallax Wrapper ── */
.parallax-wrap { overflow: hidden; }
.parallax-img { will-change: transform; }

/* ── Hover Line Underline ── */
.hover-underline {
  position: relative;
  display: inline-block;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--transition);
}
.hover-underline:hover::after { width: 100%; }

/* ── Staggered Grid Animation ── */
.stagger-grid > * {
  opacity: 0;
  transform: translateY(24px);
}
.stagger-grid.animated > *:nth-child(1) { animation: slideUp 0.7s ease 0.05s forwards; }
.stagger-grid.animated > *:nth-child(2) { animation: slideUp 0.7s ease 0.15s forwards; }
.stagger-grid.animated > *:nth-child(3) { animation: slideUp 0.7s ease 0.25s forwards; }
.stagger-grid.animated > *:nth-child(4) { animation: slideUp 0.7s ease 0.35s forwards; }
.stagger-grid.animated > *:nth-child(5) { animation: slideUp 0.7s ease 0.45s forwards; }
.stagger-grid.animated > *:nth-child(6) { animation: slideUp 0.7s ease 0.55s forwards; }
.stagger-grid.animated > *:nth-child(n+7) { animation: slideUp 0.7s ease 0.65s forwards; }

/* ── Page Transition ── */
.page-transition {
  position: fixed;
  inset: 0;
  background: var(--text-primary);
  z-index: 99998;
  pointer-events: none;
  transform: scaleY(0);
  transform-origin: bottom;
}
.page-transition.entering {
  animation: pageEnter 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}
.page-transition.leaving {
  animation: pageLeave 0.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
  transform-origin: top;
}
@keyframes pageEnter {
  from { transform: scaleY(0); transform-origin: bottom; }
  to { transform: scaleY(1); transform-origin: bottom; }
}
@keyframes pageLeave {
  from { transform: scaleY(1); transform-origin: top; }
  to { transform: scaleY(0); transform-origin: top; }
}

/* ── Cursor Glow (desktop only) ── */
.cursor-glow {
  position: fixed;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(199,164,106,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease;
}

/* ── Loading Skeleton ── */
.skeleton {
  background: linear-gradient(90deg, var(--bg-secondary) 25%, #eeeeee 50%, var(--bg-secondary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}

/* ── Number Counter ── */
.counter-wrap { overflow: hidden; }
.counter-num { display: inline-block; }