/* ================================================================
   LILA INVESTMENT GROUP — Animations & Responsive
   styles/animations.css
   ================================================================ */

/* ─── SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ─── CUSTOM CURSOR ─── */
.cursor {
  width: 8px; height: 8px;
  background: var(--pink-light);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}
.cursor-ring {
  width: 36px; height: 36px;
  border: 1px solid rgba(242, 191, 193, 0.45);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, opacity 0.3s;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  header { padding: 16px 24px; }
  nav { display: none; }
  .hamburger { display: flex; }

  section { padding: 80px 24px; }

  .hero-content { padding: 0 24px 120px; }
  .hero h1 { font-size: 64px; }
  .hero-stats { position: relative; width: 100%; }
  .stat-item { padding: 18px 20px; flex: 1; }

  .about-grid,
  .contact-grid,
  .why-grid { grid-template-columns: 1fr; gap: 40px; }

  .about-badge { left: 0; bottom: -20px; width: 112px; height: 112px; }
  .about-badge .badge-num { font-size: 42px; }

  .services-grid { grid-template-columns: 1fr; }
  .fleet-grid { grid-template-columns: 1fr 1fr; }
  .form-row { grid-template-columns: 1fr; }

  .project-strip { padding: 64px 24px; }
  .project-highlights { flex-direction: column; gap: 24px; }

  .footer-top { flex-direction: column; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .why-visual { position: relative; top: 0; }
  .quote-form { padding: 28px 20px; }
}

@media (max-width: 600px) {
  .fleet-grid { grid-template-columns: 1fr; }
  .hero-stats { flex-wrap: wrap; }
  .values { grid-template-columns: 1fr; }
  .stat-item { min-width: 50%; }
}