/**
 * Eterno Real Estate - Animation System
 *
 * Luxury animations with smooth, deliberate motion
 * Uses CSS custom properties from variables.css
 */


/* ═══════════════════════════════════════════════════════════════════════════════
   KEYFRAMES - Core Animation Definitions
   ═══════════════════════════════════════════════════════════════════════════════ */

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

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Scale animations */
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scaleInUp {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Reveal animations (for scroll triggers) */
@keyframes revealUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealLeft {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes revealRight {
  from {
    opacity: 0;
    transform: translateX(60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Gold line expand animation */
@keyframes lineExpand {
  from {
    width: 0;
  }
  to {
    width: 40px;
  }
}

/* Shimmer effect for buttons */
@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-15deg);
  }
  100% {
    transform: translateX(200%) skewX(-15deg);
  }
}

/* Pulse glow for buttons */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 var(--color-gold-glow);
  }
  50% {
    box-shadow: 0 0 20px 5px var(--color-gold-glow);
  }
}

/* Subtle float animation */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

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


/* ═══════════════════════════════════════════════════════════════════════════════
   PAGE ENTRANCE ANIMATIONS
   Apply to hero sections for initial page load
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Hero section tag (gold lines + text) */
.hero-tag {
  opacity: 0;
  animation: fadeIn 0.6s var(--ease-out-expo) 0.2s forwards;
}

.hero-tag .w-10 {
  animation: lineExpand 0.5s var(--ease-out-expo) 0.4s forwards;
  width: 0;
}

/* Hero title */
.hero-title {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.3s forwards;
}

/* Hero subtitle */
.hero-subtitle {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.5s forwards;
}

/* Hero CTA buttons */
.hero-cta {
  opacity: 0;
  animation: fadeInUp 0.8s var(--ease-out-expo) 0.7s forwards;
}

/* Hero image/media */
.hero-image {
  opacity: 0;
  animation: scaleIn 1s var(--ease-out-expo) 0.4s forwards;
}

/* Staggered hero elements */
.hero-stagger-1 { animation-delay: 0.1s; }
.hero-stagger-2 { animation-delay: 0.2s; }
.hero-stagger-3 { animation-delay: 0.3s; }
.hero-stagger-4 { animation-delay: 0.4s; }
.hero-stagger-5 { animation-delay: 0.5s; }


/* ═══════════════════════════════════════════════════════════════════════════════
   SCROLL-TRIGGERED REVEAL ANIMATIONS
   Elements start hidden, animate when entering viewport
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base reveal class - initially hidden */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo);
}

.reveal.reveal-left {
  transform: translateX(-40px);
}

.reveal.reveal-right {
  transform: translateX(40px);
}

.reveal.reveal-scale {
  transform: scale(0.95);
}

/* Visible state (added by Intersection Observer) */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* Stagger delays for grid items */
.reveal.stagger-1 { transition-delay: 0.1s; }
.reveal.stagger-2 { transition-delay: 0.2s; }
.reveal.stagger-3 { transition-delay: 0.3s; }
.reveal.stagger-4 { transition-delay: 0.4s; }
.reveal.stagger-5 { transition-delay: 0.5s; }
.reveal.stagger-6 { transition-delay: 0.6s; }

/* Section headers - special reveal */
.section-header {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.section-header.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Gold line animation on reveal */
.section-header.is-visible .bg-gold {
  animation: lineExpand 0.5s var(--ease-out-expo) 0.3s forwards;
  width: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   CARD HOVER EFFECTS
   Unified hover behavior for all cards
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Base card with gold border hover */
.card-hover {
  position: relative;
  transition: transform 0.4s var(--ease-out-expo),
              border-color 0.3s var(--ease-out),
              box-shadow 0.4s var(--ease-out);
}

.card-hover:hover {
  transform: translateY(-4px);
  border-color: var(--color-border-gold);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3),
              0 0 40px rgba(201, 165, 92, 0.1);
}

/* Card with glow effect */
.card-glow {
  position: relative;
  overflow: visible;
}

.card-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--color-gold-primary) 0%, transparent 50%);
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.4s var(--ease-out);
  z-index: -1;
}

.card-glow:hover::before {
  opacity: 0.3;
}

/* Image zoom on card hover */
.card-image-zoom {
  overflow: hidden;
}

.card-image-zoom img {
  transition: transform 0.7s var(--ease-out-expo);
}

.card-hover:hover .card-image-zoom img {
  transform: scale(1.05);
}

/* Card title color transition */
.card-title-hover {
  transition: color 0.3s var(--ease-out);
}

.card-hover:hover .card-title-hover {
  color: var(--color-gold-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   BUTTON EFFECTS
   Glow, shimmer, and interaction states
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Gold button with shine effect */
.btn-gold-shine {
  position: relative;
  overflow: hidden;
  background: var(--color-gold-primary);
  color: var(--color-text-inverse);
  transition: background-color 0.3s var(--ease-out),
              transform 0.2s var(--ease-out),
              box-shadow 0.3s var(--ease-out);
}

.btn-gold-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transform: translateX(-100%) skewX(-15deg);
  transition: none;
}

.btn-gold-shine:hover {
  background: var(--color-gold-light);
  box-shadow: var(--glow-gold-md);
}

.btn-gold-shine:hover::before {
  animation: shimmer 0.8s ease-out;
}

.btn-gold-shine:active {
  transform: scale(0.98);
}

/* Outline button with gold hover */
.btn-outline-gold {
  position: relative;
  border: 1px solid var(--color-border-gold);
  color: var(--color-gold-primary);
  background: transparent;
  transition: all 0.3s var(--ease-out);
  overflow: hidden;
}

.btn-outline-gold::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-gold-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease-out-expo);
  z-index: -1;
}

.btn-outline-gold:hover {
  color: var(--color-text-inverse);
  border-color: var(--color-gold-primary);
}

.btn-outline-gold:hover::before {
  transform: scaleX(1);
}

/* Ghost button with subtle glow */
.btn-ghost-glow {
  color: var(--color-text-secondary);
  transition: color 0.3s var(--ease-out),
              text-shadow 0.3s var(--ease-out);
}

.btn-ghost-glow:hover {
  color: var(--color-gold-primary);
  text-shadow: 0 0 20px var(--color-gold-glow);
}

/* Icon button with circular glow */
.btn-icon-glow {
  transition: background-color 0.3s var(--ease-out),
              box-shadow 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}

.btn-icon-glow:hover {
  background: var(--color-gold-primary);
  color: var(--color-text-inverse);
  box-shadow: var(--glow-gold-sm);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   NUMBER COUNTER ANIMATION
   For statistics and metrics display
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Counter container */
.counter-stat {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}

.counter-stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Counter number - styled separately */
.counter-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Plus sign animation */
.counter-suffix {
  opacity: 0;
  transition: opacity 0.3s var(--ease-out) 0.5s;
}

.counter-stat.is-visible .counter-suffix {
  opacity: 1;
}


/* ═══════════════════════════════════════════════════════════════════════════════
   UTILITY ANIMATIONS
   Reusable animation classes
   ═══════════════════════════════════════════════════════════════════════════════ */

/* Floating animation for decorative elements */
.animate-float {
  animation: float 6s ease-in-out infinite;
}

/* Pulse animation for attention */
.animate-pulse-gold {
  animation: pulseGlow 2s ease-in-out infinite;
}

/* Spin animation for loaders */
.animate-spin-slow {
  animation: spin 3s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Text reveal animation */
.text-reveal {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.6s var(--ease-out-expo);
}

.text-reveal.is-visible {
  clip-path: inset(0 0 0 0);
}


/* ═══════════════════════════════════════════════════════════════════════════════
   REDUCED MOTION SUPPORT
   Respect user preferences for reduced motion
   ═══════════════════════════════════════════════════════════════════════════════ */

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

  .reveal,
  .hero-tag,
  .hero-title,
  .hero-subtitle,
  .hero-cta,
  .hero-image,
  .section-header,
  .counter-stat {
    opacity: 1;
    transform: none;
  }
}