/* ==========================================================================
   EstatePrime — Micro Interactions & Animations (CSS only)
   ========================================================================== */

/* Fade-in on load for hero content */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero__content {
  animation: fade-up 0.6s ease both;
}

.hero__visual {
  animation: fade-up 0.7s ease 0.12s both;
}

.hero__badge {
  animation: fade-in 0.5s ease both;
}

/* Underline reveal for text links */
.link-underline {
  position: relative;
  display: inline-block;
}

.link-underline::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-end: -2px;
  inline-size: 100%;
  block-size: 1.5px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: inline-start;
  transition: transform var(--transition-base);
}

.link-underline:hover::after,
.link-underline:focus-visible::after {
  transform: scaleX(1);
}

/* Image zoom utility (used with overflow hidden parent) */
.img-zoom {
  transition: transform var(--transition-slow);
}

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

/* Card lift */
.card-lift {
  transition:
    transform var(--transition-base),
    border-color var(--transition-base);
}

.card-lift:hover {
  transform: translateY(-4px);
}

/* Focus ring enhancement for interactive cards */
.property-card:focus-within,
.collection-card:focus-within,
.article-card:focus-within,
.agent-card:focus-within {
  border-color: var(--color-primary);
  outline: 2px solid transparent;
}

/* Smooth border color on interactive elements */
.interactive-border {
  transition: border-color var(--transition-base);
}

.interactive-border:hover {
  border-color: var(--color-primary);
}

/* Button icon nudge */
.btn--primary svg,
.btn--secondary svg {
  transition: transform var(--transition-fast);
}

.btn--primary:hover svg,
.btn--secondary:hover svg {
  transform: translateX(3px);
}

/* Reduced motion handled in reset.css */