/* Animations CSS File */

/* Hero Banner Animations */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  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);
  }
}

/* Amenities Image Slide Animations */
@keyframes slideOutLeftToRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

@keyframes slideInRightToLeft {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@-webkit-keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}

@keyframes stroke {
  52% {
    transform: rotate(-180deg);
    stroke-dashoffset: 0;
  }
  52.1% {
    transform: rotate(-360deg);
    stroke-dashoffset: 0;
  }
  100% {
    transform: rotate(-180deg);
    stroke-dashoffset: 126;
  }
}
@-webkit-keyframes arrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%, 80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}
@keyframes arrow {
  0%, 100% {
    transform: translateX(0);
    opacity: 1;
  }
  23% {
    transform: translateX(17px);
    opacity: 1;
  }
  24%, 80% {
    transform: translateX(-22px);
    opacity: 0;
  }
  81% {
    opacity: 1;
    transform: translateX(-22px);
  }
}
@-webkit-keyframes arrowUp {
  0%, 100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@keyframes arrowUp {
  0%, 100% {
    transform: rotate(-40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@-webkit-keyframes arrowDown {
  0%, 100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}
@keyframes arrowDown {
  0%, 100% {
    transform: rotate(40deg) scaleX(1);
  }
  20%, 80% {
    transform: rotate(0deg) scaleX(0.1);
  }
}

/* Amenities Image Animation Classes */
.animate-slide-out-left-to-right {
  animation: slideOutLeftToRight 0.5s ease-in-out forwards;
}

.animate-slide-in-right-to-left {
  animation: slideInRightToLeft 0.5s ease-in-out forwards;
}

/* Projects Content Fade Animations */
@keyframes fadeInDelayed {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Underline animation - grows from left to right */
@keyframes underlineGrow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@media (min-width: 1024px) {
  /* Project link animation - triggers after logo */
  .group:hover .project-link {
    animation: fadeInDelayed 0.3s ease-out .7s forwards;
  }

  /* Underline animation - triggers after link appears */
  .group:hover .project-link::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineGrow 0.5s ease-out 1.1s forwards;
  }

  /* Secondary project link - reveals just after the primary for a staggered sequence */
  .group:hover .project-link--secondary {
    animation-delay: 0.95s;
  }

  .group:hover .project-link--secondary::after {
    animation-delay: 1.35s;
  }
}


/* Video Section Reveal Animation */
@keyframes slideUpReveal {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-100%);
  }
}

/* Custom AOS Animations for Video Section */
#gallery-section [data-aos="slide-up"] {
  transform: translateY(100%);
  transition-property: transform;
}

#gallery-section [data-aos="slide-up"].aos-animate {
  animation: slideUpReveal 1.2s ease-in-out forwards;
}

/* Custom AOS Animations for About Section */
.about-section [data-aos="slide-up"] {
  transform: translateY(100%);
  transition-property: transform;
}

/* Overlay: up (reveal), hold, then down (disappear) */
@keyframes overlayUpHoldDown {
  0% { transform: translateY(100%); opacity: 1; }
  40% { transform: translateY(0%); opacity: 1; }
  70% { transform: translateY(0%); opacity: 1; }
  100% { transform: translateY(105%); opacity: 0; visibility: hidden; }
}

[data-aos="slide-up"].aos-animate {
  animation: overlayUpHoldDown 1.6s ease-in-out forwards;
}

/* About Section Image: fade in while zooming out */
@keyframes fadeInZoomOut {
  0% {
    opacity: 0;
    transform: scale(1.2);
  }
  70% {
    opacity: 0;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

[data-aos="fade-zoom"] {
  opacity: 0;
  transition-property: opacity, transform;
}

[data-aos="fade-zoom"].aos-animate {
  animation: fadeInZoomOut 1.6s ease-out forwards;
}

/* ============ Santa Lucía Lotes — accent curtain reveal ============ */
/* Self-triggered, AOS-independent (AOS's built-in slide-up transform fought the
   height-based curtain and hid it). Each curtain group container carries
   data-ml-curtain-group; the page IntersectionObserver adds .ml-curtain-on when
   it scrolls into view. Inside it, [data-ml-curtain] is the accent overlay
   (anchored to the bottom, height drives the rise/recede) and [data-ml-reveal]
   is the content that stays hidden until the curtain clears. Scoped under
   .ml-scope so it outranks the Tailwind absolute/inset-0 utilities. */
.ml-scope [data-ml-curtain] {
  top: auto;     /* anchor to the bottom so height drives the curtain */
  bottom: 0;
  height: 0;
}
.ml-scope .ml-curtain-on [data-ml-curtain] {
  animation: mlCurtain 1.1s cubic-bezier(0.7, 0, 0.25, 1) forwards;
}
@keyframes mlCurtain {
  0%   { height: 0; }     /* nothing covered */
  45%  { height: 100%; }  /* rise up to full height (cover) */
  60%  { height: 100%; }  /* brief hold at the top */
  100% { height: 0; }     /* recede back down, revealing the content */
}

.ml-scope [data-ml-reveal] {
  opacity: 0;
  transform: scale(1.05);
}
.ml-scope .ml-curtain-on [data-ml-reveal] {
  animation: mlRevealIn 1.1s ease forwards;
}
@keyframes mlRevealIn {
  0%, 55% { opacity: 0; transform: scale(1.05); }  /* hidden while the curtain rises + holds */
  100%    { opacity: 1; transform: scale(1); }      /* appear as the curtain recedes */
}

@media (prefers-reduced-motion: reduce) {
  .ml-scope [data-ml-curtain] { display: none; }   /* no curtain flash */
  .ml-scope [data-ml-reveal],
  .ml-scope .ml-curtain-on [data-ml-reveal] { opacity: 1; transform: none; animation: none; }
}

/* Navigation CTA Button Slide Animation */
@keyframes slideBackgroundLeftToRight {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes slideTextLeftToRight {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

/* Model Houses Floor View Switching Animations */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* Floor view animation classes */
.floor-view-fade-in {
  animation: fadeInScale 0.4s ease-out forwards;
}

.floor-view-fade-out {
  animation: fadeOut 0.3s ease-in forwards;
}

/* Play Button Pulse Ring Animation */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

.animate-pulse-ring {
  animation: pulseRing 3s ease-out infinite;
}

.animate-pulse-ring-delayed {
  animation: pulseRing 3s ease-out 1.5s infinite;
}