/* ============================================
   Trejos Restrepo — Animation System
   ============================================ */

/* ---- prefers-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;
  }
}

/* ============================================
   1. KEYFRAMES
   ============================================ */

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

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

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

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

@keyframes scaleIn {
  0%   { transform: scale(0); opacity: 0; }
  70%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes elasticIn {
  0%   { transform: scale(0); }
  60%  { transform: scale(1.08); }
  80%  { transform: scale(0.95); }
  100% { transform: scale(1); }
}

@keyframes flyIn {
  0%   { transform: scale(0) rotate(-15deg); opacity: 0; }
  60%  { transform: scale(1.1) rotate(3deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}

@keyframes fanIn {
  0%   { transform: perspective(800px) rotateY(12deg) translateX(-20px); opacity: 0; }
  100% { transform: perspective(800px) rotateY(0) translateX(0); opacity: 1; }
}

@keyframes clipRevealRight {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes clipRevealLeft {
  0%   { clip-path: inset(0 0 0 100%); }
  100% { clip-path: inset(0 0 0 0); }
}

@keyframes textClipReveal {
  0%   { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

@keyframes ring {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5); }
  100% { box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
}

@keyframes floatGlow {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.4; }
  50% { transform: translateY(-20px) scale(1.05); opacity: 0.6; }
}

/* ============================================
   2. UTILITY CLASSES (for JS to add/remove)
   ============================================ */

.anim-hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-hidden-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-hidden-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-hidden-scale {
  opacity: 0;
  transform: scale(0.8);
  transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.anim-visible {
  opacity: 1 !important;
  transform: translateY(0) translateX(0) scale(1) !important;
}

/* ============================================
   3. ENTRY ANIMATIONS — Hero
   ============================================ */

.hero-entry .hero__badge {
  animation: fadeInDown 0.4s ease-out both;
}

.hero-entry .hero__title {
  animation: textClipReveal 0.7s cubic-bezier(0.77, 0, 0.175, 1) 0.15s both;
}

.hero-entry .hero__desc {
  animation: fadeInUp 0.5s ease-out 0.35s both;
}

.hero-entry .hero__actions {
  animation: fadeInUp 0.45s ease-out 0.5s both;
}

.hero-entry .hero__stats > div:nth-child(1) {
  animation: fadeInUp 0.4s ease-out 0.65s both;
}
.hero-entry .hero__stats > div:nth-child(2) {
  animation: fadeInUp 0.4s ease-out 0.75s both;
}
.hero-entry .hero__stats > div:nth-child(3) {
  animation: fadeInUp 0.4s ease-out 0.85s both;
}

/* Cortina en la imagen del hero */
.hero__image-col {
  position: relative;
  overflow: hidden;
}

.hero-entry .hero__image-col::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  z-index: 1;
  animation: clipRevealLeft 0.8s cubic-bezier(0.77, 0, 0.175, 1) 0.3s both;
}

.hero__image {
  opacity: 0;
  animation: fadeInUp 0.6s ease-out 0.3s both;
}

/* ============================================
   4. HERO GLOW — Floating
   ============================================ */

.hero__glow {
  animation: floatGlow 6s ease-in-out infinite;
}

/* ============================================
   5. STATS COUNTER
   ============================================ */

.stat-number {
  display: inline-block;
  transition: all 0.01s linear;
}

/* ============================================
   6. SERVICE CARDS — Hover
   ============================================ */

.service-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.3s ease;
  will-change: transform;
}

.service-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 53, 92, 0.12), 0 6px 14px rgba(0, 53, 92, 0.08);
}

.service-card__number {
  transition: color 0.3s ease, transform 0.3s ease;
}

.service-card:hover .service-card__number {
  color: #007BC6;
  transform: scale(1.1);
}

/* ============================================
   7. TEAM CARDS — Hover con glow
   ============================================ */

.team-card {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.35s ease;
  position: relative;
  overflow: hidden;
}

.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.35s ease;
  box-shadow: 0 0 30px rgba(0, 123, 198, 0.15), 0 0 60px rgba(0, 123, 198, 0.05);
}

.team-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 53, 92, 0.15);
}

.team-card:hover::before {
  opacity: 1;
}

.team-card__icon {
  transition: transform 0.35s ease, filter 0.35s ease;
}

.team-card:hover .team-card__icon {
  transform: rotate(-5deg) scale(1.08);
  filter: drop-shadow(0 4px 12px rgba(0, 123, 198, 0.3));
}

.team-card__name {
  transition: color 0.3s ease;
}

.team-card:hover .team-card__name {
  color: #007BC6;
}

/* ============================================
   8. CTA — Gradient animado + elastic buttons
   ============================================ */

.cta {
  background: linear-gradient(135deg, #00355C, #005a8c, #00355C);
  background-size: 200% 200%;
  animation: gradientShift 10s ease infinite;
}

.cta__btn {
  transition: transform 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              box-shadow 0.25s ease,
              background 0.25s ease;
  will-change: transform;
}

.cta__btn:hover {
  transform: scale(1.04);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.cta__btn:active {
  transform: scale(0.97);
}

/* Icono de WhatsApp se mueve en hover */
.cta__btn--whatsapp svg {
  transition: transform 0.25s ease;
}

.cta__btn--whatsapp:hover svg {
  transform: translateX(4px);
}

/* ============================================
   9. CONTACT — Inputs focus
   ============================================ */

.contact__input,
.contact__textarea {
  transition: transform 0.2s ease,
              box-shadow 0.2s ease,
              border-color 0.2s ease;
}

.contact__input:focus,
.contact__textarea:focus {
  transform: scale(1.01);
  border-color: #007BC6;
  box-shadow: 0 0 0 3px rgba(0, 123, 198, 0.12);
}

.contact__submit {
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.contact__submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 198, 0.3);
}

.contact__submit:active {
  transform: translateY(0);
}

/* ============================================
   10. WHATSAPP FLOAT — Ring + pulse
   ============================================ */

.whatsapp-float {
  animation: ring 1s ease-out 1.5s 3, gentlePulse 2.5s ease-in-out 4.5s infinite;
}

.whatsapp-float:hover {
  animation-play-state: paused;
  transform: scale(1.12);
  transition: transform 0.2s ease;
}

/* ============================================
   11. NAVBAR — Scroll shrink
   ============================================ */

.nav {
  transition: box-shadow 0.2s ease, border-bottom-color 0.2s ease;
}

.nav--scrolled {
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.08);
  border-bottom-color: #d0d5dd;
}

.nav--scrolled .nav__inner {
  padding-top: 8px;
  padding-bottom: 8px;
}

.nav--scrolled .nav__logo {
  height: 50px;
}

.nav__inner {
  transition: padding 0.2s ease;
}

.nav__logo {
  transition: height 0.2s ease;
}

/* ============================================
   12. ABOUT — Badge fly-in
   ============================================ */

.about__badge {
  transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              opacity 0.5s ease;
}

/* ============================================
   13. RESPONSIVE — Ajustes
   ============================================ */

@media (max-width: 768px) {
  .hero-entry .hero__title {
    animation-duration: 0.5s;
  }

  .service-card:hover {
    transform: translateY(-3px) scale(1.01);
  }

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

  .hero__image-col::after {
    display: none;
  }
}