/* ═══════════════════════════════════════════════════════════════
   AUTOSUCRO · ANIMATION SYSTEM
   Microinteractions + scroll reveal unificados
   ═══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ─────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes rippleAnim {
  to { transform: scale(2.8); opacity: 0; }
}
@keyframes pulseWA {
  0%   { box-shadow: 0 0 0 0 rgba(58,59,59,0.45); }
  70%  { box-shadow: 0 0 0 18px rgba(58,59,59,0); }
  100% { box-shadow: 0 0 0 0 rgba(58,59,59,0); }
}
@keyframes heroBgDrift {
  from { transform: scale(1.06) translateY(0); }
  to   { transform: scale(1.06) translateY(-18px); }
}


/* ── REVEAL SYSTEM ─────────────────────────────────────────────── */
.ar {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.65s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.ar.fl { transform: translateX(-40px); }
.ar.fr { transform: translateX(40px); }
.ar.sc { transform: scale(0.93) translateY(14px); }
.ar.on { opacity: 1; transform: none; }

/* Stagger delays */
.ar[data-d="1"] { transition-delay: 0.06s; }
.ar[data-d="2"] { transition-delay: 0.13s; }
.ar[data-d="3"] { transition-delay: 0.20s; }
.ar[data-d="4"] { transition-delay: 0.27s; }
.ar[data-d="5"] { transition-delay: 0.34s; }
.ar[data-d="6"] { transition-delay: 0.41s; }


/* ── HERO ENTRANCE (CSS-only, instantáneo en page load) ────────── */
.hero-eyebrow  { animation: fadeUp 0.80s cubic-bezier(0.22,1,0.36,1) 0.10s both; }
.hero-title    { animation: fadeUp 0.90s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-actions  { animation: fadeUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.50s both; }

.page-hero-eyebrow { animation: fadeUp 0.65s cubic-bezier(0.22,1,0.36,1) 0.06s both; }
.page-hero-title   { animation: fadeUp 0.75s cubic-bezier(0.22,1,0.36,1) 0.22s both; }


/* ── RIPPLE ────────────────────────────────────────────────────── */
.ar-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255,255,255,0.22);
  transform: scale(0);
  animation: rippleAnim 0.55s ease-out forwards;
}


/* ── BOTONES ────────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.24s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.16);
}
.btn:active {
  transform: translateY(0) scale(0.96);
  box-shadow: none;
  transition-duration: 0.10s !important;
}

.btn-contact {
  position: relative;
  overflow: hidden;
  transition: all 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}
.btn-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  background: white !important;
}
.btn-contact:active {
  transform: scale(0.97);
  transition-duration: 0.10s !important;
}


/* ── VEHICLE CARDS ──────────────────────────────────────────────── */
.vehicle-card {
  transition:
    box-shadow 0.40s cubic-bezier(0.22,1,0.36,1),
    transform  0.40s cubic-bezier(0.22,1,0.36,1) !important;
}
.vehicle-card:not(.sold):hover {
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 52px rgba(0,0,0,0.13) !important;
}


/* ── SERVICE CARDS ──────────────────────────────────────────────── */
.service-card {
  transition:
    box-shadow    0.35s cubic-bezier(0.22,1,0.36,1),
    border-color  0.22s ease,
    transform     0.35s cubic-bezier(0.22,1,0.36,1) !important;
}
.service-card:hover { transform: translateY(-6px) !important; }
.service-icon {
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.service-card:hover .service-icon {
  transform: scale(1.14) rotate(-6deg);
}


/* ── WHY ITEMS ──────────────────────────────────────────────────── */
.why-item {
  transition:
    background   0.28s ease,
    border-color 0.28s ease,
    transform    0.30s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.why-item:hover { transform: translateY(-5px) !important; }
.why-icon svg {
  transition: stroke 0.22s ease, transform 0.32s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.why-item:hover .why-icon svg { transform: scale(1.18) rotate(-8deg); }


/* ── REVIEW CARDS ───────────────────────────────────────────────── */
.review-card {
  transition:
    transform    0.38s cubic-bezier(0.22,1,0.36,1),
    box-shadow   0.38s cubic-bezier(0.22,1,0.36,1);
}
.review-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0,0,0,0.10);
}


/* ── INFO CARDS ─────────────────────────────────────────────────── */
.info-card {
  transition:
    transform    0.35s cubic-bezier(0.22,1,0.36,1),
    box-shadow   0.35s cubic-bezier(0.22,1,0.36,1),
    border-color 0.22s ease;
}
.info-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.09);
  border-color: var(--brand);
}
.info-card-icon {
  transition: transform 0.32s cubic-bezier(0.34,1.56,0.64,1);
}
.info-card:hover .info-card-icon { transform: scale(1.14) rotate(-5deg); }


/* ── TALLER / WORKSHOP ──────────────────────────────────────────── */
.workshop-img { overflow: hidden; }
.workshop-img img {
  transition:
    transform 0.70s cubic-bezier(0.22,1,0.36,1),
    filter    0.50s ease !important;
}
.workshop-img:hover img {
  transform: scale(1.06) !important;
  filter: brightness(0.80) !important;
}


/* ── ABOUT MOSAIC ───────────────────────────────────────────────── */
.about-img-mosaic img {
  transition: transform 0.55s cubic-bezier(0.22,1,0.36,1), filter 0.40s ease;
}
.about-img-mosaic img:hover {
  transform: scale(1.04);
  filter: brightness(0.88);
}


/* ── TIMELINE ───────────────────────────────────────────────────── */
.tl-item {
  transition: transform 0.28s cubic-bezier(0.22,1,0.36,1);
}
.tl-item:hover { transform: translateX(10px); }
.tl-year {
  transition: color 0.28s ease, transform 0.28s ease;
}
.tl-item:hover .tl-year {
  color: var(--line);
  transform: scale(1.04);
}


/* ── CONTACT WA ─────────────────────────────────────────────────── */
.contact-wa {
  transition:
    border-color 0.22s ease,
    box-shadow   0.22s ease,
    transform    0.32s cubic-bezier(0.22,1,0.36,1) !important;
}
.contact-wa:hover { transform: translateY(-4px) !important; }


/* ── INSURER LOGOS ──────────────────────────────────────────────── */
.insurer-logo {
  transition:
    transform    0.22s cubic-bezier(0.34,1.56,0.64,1),
    box-shadow   0.22s ease,
    border-color 0.18s ease;
}
.insurer-logo:hover {
  transform: translateY(-3px);
}


/* ── FILTER CHIPS ───────────────────────────────────────────────── */
.sf-chip {
  transition: all 0.18s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.sf-chip:hover { transform: scale(1.05); }
.sf-chip:active { transform: scale(0.95); transition-duration: 0.08s !important; }


/* ── WA FLOAT ───────────────────────────────────────────────────── */
.wa-float {
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease !important;
  animation: pulseWA 3.2s ease-out infinite 3s;
}
.wa-float:hover {
  transform: scale(1.12) !important;
  opacity: 1 !important;
  animation: none;
}


/* ── FOOTER SOCIAL ──────────────────────────────────────────────── */
.footer-social a {
  transition: all 0.24s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.footer-social a:hover {
  transform: scale(1.20) translateY(-3px) !important;
}


/* ── HEADER LOGO ────────────────────────────────────────────────── */
.header-logo {
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
}
.header-logo:hover { transform: scale(1.07); opacity: 0.85; }


/* ── NAV UNDERLINE ──────────────────────────────────────────────── */
.site-nav a { position: relative; }
.site-nav a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%; right: 50%;
  height: 1.5px;
  background: rgba(255,255,255,0.65);
  border-radius: 2px;
  transition: left 0.24s cubic-bezier(0.22,1,0.36,1),
              right 0.24s cubic-bezier(0.22,1,0.36,1);
}
.site-nav a:hover::after  { left: 14px; right: 14px; }
.site-nav a.active::after { left: 14px; right: 14px; background: white; }


/* ── FORM INPUTS ────────────────────────────────────────────────── */
.form-input, .form-textarea {
  transition: border-color 0.22s ease, box-shadow 0.22s ease !important;
}
.form-input:focus, .form-textarea:focus {
  box-shadow: 0 0 0 3.5px rgba(58,59,59,0.10) !important;
}


/* ── BACK LINK (vehiculo.html) ──────────────────────────────────── */
.vp-back {
  transition: color 0.20s ease, transform 0.28s cubic-bezier(0.22,1,0.36,1) !important;
}
.vp-back:hover { transform: translateX(-5px) !important; }


/* ── HEADER WA ICON ─────────────────────────────────────────────── */
.header-wa {
  transition: background 0.22s ease, border-color 0.22s ease,
              transform 0.26s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.header-wa:hover { transform: scale(1.10) !important; }


/* ─── REDUCED MOTION ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ar { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-eyebrow, .hero-title, .hero-actions,
  .page-hero-eyebrow, .page-hero-title { animation: none !important; }
  .wa-float { animation: none !important; }
  .btn:hover, .btn-contact:hover,
  .vehicle-card:not(.sold):hover,
  .service-card:hover, .why-item:hover,
  .review-card:hover, .info-card:hover,
  .contact-wa:hover, .tl-item:hover {
    transform: none !important;
    box-shadow: none !important;
  }
}