/**
 * CY Colombia - Global Animation System for Elementor Widgets & Pages
 *
 * Ultra-smooth micro-interactions, scroll-triggered reveals, staggered card appearances,
 * animated number counters, and floating badges.
 */

/* Keyframe Definitions */
@keyframes cyFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(36px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

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

@keyframes cyFadeInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes cyScaleIn {
  0% {
    opacity: 0;
    transform: scale(0.92);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes cyFloatBadge {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-9px) rotate(1deg);
  }
}

@keyframes cyShieldPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 10px 30px rgba(208, 6, 24, 0.3);
  }
  50% {
    transform: scale(1.06);
    box-shadow: 0 20px 42px rgba(208, 6, 24, 0.5);
  }
}

@keyframes cyDotGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(208, 6, 24, 0.7);
  }
  50% {
    transform: scale(1.2);
    box-shadow: 0 0 0 8px rgba(208, 6, 24, 0);
  }
}

/* Scroll-triggered reveal classes */
.cy-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.cy-reveal.cy-in-view {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.cy-reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.cy-reveal-left.cy-in-view {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.cy-reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.cy-reveal-right.cy-in-view {
  opacity: 1 !important;
  transform: translateX(0) !important;
}

.cy-reveal-scale {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.cy-reveal-scale.cy-in-view {
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Specific Card Reveal with Bulletproof Stagger and High-Visibility Entrance */
.cy-card-reveal {
  opacity: 0 !important;
  transform: translateY(44px) !important;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: opacity, transform;
}

/* Stagger Delays for Cards */
.cy-stagger-container > *:nth-child(1),
.cy-card-reveal:nth-child(1),
.cy-stagger-1 {
  transition-delay: 0.05s !important;
}

.cy-stagger-container > *:nth-child(2),
.cy-card-reveal:nth-child(2),
.cy-stagger-2 {
  transition-delay: 0.20s !important;
}

.cy-stagger-container > *:nth-child(3),
.cy-card-reveal:nth-child(3),
.cy-stagger-3 {
  transition-delay: 0.35s !important;
}

.cy-stagger-container > *:nth-child(4),
.cy-card-reveal:nth-child(4),
.cy-stagger-4 {
  transition-delay: 0.50s !important;
}

.cy-stagger-container > *:nth-child(5),
.cy-card-reveal:nth-child(5),
.cy-stagger-5 {
  transition-delay: 0.65s !important;
}

.cy-stagger-container > *:nth-child(6),
.cy-card-reveal:nth-child(6),
.cy-stagger-6 {
  transition-delay: 0.80s !important;
}

/* In-View State */
.cy-card-reveal.cy-in-view,
.cy-in-view > .cy-card-reveal,
.cy-in-view .cy-card-reveal {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Continuous Ambient Micro-Animations */
.cy-float-anim {
  animation: cyFloatBadge 4.5s ease-in-out infinite;
}

.cy-pulse-anim {
  animation: cyShieldPulse 3.8s ease-in-out infinite;
}

.cy-dot-pulse {
  animation: cyDotGlow 2.5s infinite;
}

/* Card Interactive Elevate & Glow (Only active after in-view reveal) */
.cy-interactive-card {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease;
}

.cy-card-reveal.cy-in-view.cy-interactive-card:hover,
.cy-interactive-card.cy-in-view:hover,
.cy-metric-card.cy-in-view:hover,
.metric-card.cy-in-view:hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 24px 50px rgba(0, 0, 0, 0.15) !important;
  transition-delay: 0s !important;
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Number Counter Styling */
.cy-counter {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* Accessibility: Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  .cy-reveal,
  .cy-reveal-left,
  .cy-reveal-right,
  .cy-reveal-scale,
  .cy-card-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .cy-float-anim,
  .cy-pulse-anim,
  .cy-dot-pulse {
    animation: none !important;
  }
}

/* =======================================================
   RESPONSIVE CARD IMAGES - PREVENT STRETCHING & ENFORCE COVER
   No letterboxing, no white space gaps, proportional aspect ratios
   ======================================================= */
@media (max-width: 820px) {
  /* Storage cards */
  .storage-card,
  .cy-storage-card {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .storage-card__image,
  .cy-storage-card__image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 280px !important;
    overflow: hidden !important;
  }
  .storage-card__image img,
  .cy-storage-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .storage-card h3,
  .cy-storage-card h3 {
    margin-top: 20px !important;
  }

  /* Services cards */
  .service-card,
  .cy-service-card,
  .service-card:nth-child(2n),
  .cy-service-card:nth-child(2n),
  .cy-service-card.cy-reverse {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .service-card__image,
  .cy-service-card__image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }
  .service-card__image img,
  .cy-service-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Location cards */
  .location-card,
  .cy-location-card {
    min-height: 0 !important;
  }
  .location-card > img,
  .location-card__image,
  .cy-location-card__image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 260px !important;
    overflow: hidden !important;
  }
  .location-card > img,
  .location-card__image img,
  .cy-location-card__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Gallery cards */
  .gallery-card,
  .gallery-card--1,
  .gallery-card--2,
  .cy-gallery-item {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 11 !important;
    max-height: 300px !important;
    overflow: hidden !important;
  }
  .gallery-card img,
  .cy-gallery-item__media img,
  .cy-gallery-item--portrait .cy-gallery-item__media img,
  .cy-gallery-item--standard .cy-gallery-item__media img,
  .cy-gallery-item--panoramic .cy-gallery-item__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  /* Inner heroes / Contact / About images */
  .inner-hero__media,
  .contact-hero__image,
  .gallery-hero__visual,
  .cy-inner-hero__media,
  .about-intro__image img,
  .cy-about-intro__image-wrap img,
  .policy-section__image img,
  .cy-policy__image-wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 0 !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}

@media (max-width: 560px) {
  .storage-card__image,
  .cy-storage-card__image {
    max-height: 220px !important;
  }
  .service-card__image,
  .cy-service-card__image {
    max-height: 200px !important;
  }
  .location-card > img,
  .location-card__image,
  .cy-location-card__image {
    max-height: 210px !important;
  }
  .gallery-card,
  .gallery-card--1,
  .gallery-card--2,
  .cy-gallery-item {
    max-height: 240px !important;
  }
  .inner-hero__media,
  .contact-hero__image,
  .gallery-hero__visual,
  .cy-inner-hero__media,
  .about-intro__image img,
  .cy-about-intro__image-wrap img,
  .policy-section__image img,
  .cy-policy__image-wrap img {
    max-height: 230px !important;
  }
}