/* ===== PREMIUM ANIMATIONS & MICRO-INTERACTIONS ===== */

/* 1. Reveal on Scroll Initial State */
.reveal-element {
  opacity: 0;
  transform: translateY(30px);
  will-change: opacity, transform;
}

/* Active State (triggered by JS Intersection Observer) */
.reveal-element.reveal-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Fallback for noscript to prevent invisible content */
noscript .reveal-element {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced motion: disable all decorative animations */
@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
  }

  .reveal-element {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .reveal-element.reveal-visible {
    transition: none;
  }

  .button,
  .yc-btn,
  .search-btn,
  .gb-button,
  .wp-block-button__link {
    transition: none !important;
  }

  .button:hover,
  .yc-btn:hover,
  .search-btn:hover,
  .gb-button:hover,
  .wp-block-button__link:hover {
    transform: none;
  }

  .button:active,
  .yc-btn:active,
  .search-btn:active,
  .gb-button:active,
  .wp-block-button__link:active {
    transform: none;
  }

  .loop-apartments .col-sm-4 > a:hover img,
  .card-container .card:hover img {
    transform: none;
  }
}

/* 3. Soft Lift for Buttons */
.button,
.yc-btn,
.search-btn,
.gb-button,
.wp-block-button__link {
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s cubic-bezier(0.25, 1, 0.5, 1), filter 0.3s ease !important;
}

.button:hover,
.yc-btn:hover,
.search-btn:hover,
.gb-button:hover,
.wp-block-button__link:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
  filter: brightness(1.05);
}

.button:active,
.yc-btn:active,
.search-btn:active,
.gb-button:active,
.wp-block-button__link:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

/* 4. Subtle Zoom on Image Cards on hover */
.loop-apartments .col-sm-4 > a, 
.card-container .card > a {
  display: block;
}

.loop-apartments .col-sm-4 > a img,
.card-container .card img {
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.loop-apartments .col-sm-4 > a:hover img,
.card-container .card:hover img {
  transform: scale(1.04);
}