/* ========================================
   ASSET+ FLEET SOLUTIONS — Animations
   Smooth, cinematic scroll interactions
======================================== */

/* ========== BASE REVEAL — smooth upward slide ========== */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease-snap),
              transform 0.9s var(--ease-snap);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays — cascade effect */
.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; }
.reveal-delay-5 { transition-delay: 0.5s; }

/* ========== REVEAL FROM LEFT ========== */
.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.9s var(--ease-snap),
              transform 0.9s var(--ease-snap);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========== REVEAL FROM RIGHT ========== */
.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity 0.9s var(--ease-snap),
              transform 0.9s var(--ease-snap);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ========== REVEAL SCALE — cinematic zoom-in ========== */
.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity 1s var(--ease-snap),
              transform 1s var(--ease-snap);
}

.reveal-scale.visible {
  opacity: 1;
  transform: scale(1);
}

/* ========== CLIP REVEAL — wipe-in effect ========== */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s var(--ease-snap);
}

.clip-reveal.visible {
  clip-path: inset(0 0 0% 0);
}

/* ========== COUNTER ANIMATION ========== */
.count-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.count-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ========== TECH HOVER — underline sweep ========== */
.tech-hover { position: relative; }

.tech-hover::before {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.4s var(--ease-snap);
}

.tech-hover:hover::before { width: 100%; }

/* ========== PARALLAX LAYER — JS driven ========== */
[data-parallax] {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ========== SECTION LABEL PULSE — accent color reveal ========== */
@keyframes labelPulse {
  0% { color: var(--text-muted); }
  40% { color: var(--accent); }
  100% { color: var(--accent); }
}

.section-label.visible,
.render-section .section-label.visible {
  animation: labelPulse 1.2s var(--ease-snap) forwards;
}

/* ========== SMOOTH SECTION TRANSITIONS ========== */
.dark-section,
.light-section,
.warm-section {
  transition: background-color 0.6s ease;
}

/* ========== SECTION EDGE — subtle divider between contrasting sections ========== */
.dark-section + .section,
.dark-section + .render-section,
.dark-section + .light-section {
  border-top: 1px solid var(--grid-line);
  position: relative;
}

/* ========== RENDER SHOWCASE ENTRANCE ========== */
.render-showcase {
  transition: transform 0.8s var(--ease-snap),
              opacity 0.8s var(--ease-snap);
}

/* ========== BUTTON HOVER — smooth fill ========== */
/* Transition defined in components.css — kept in sync at 0.3s */

/* ========== WHATSAPP ENTRANCE — slide in after page load ========== */
@keyframes whatsappEntrance {
  from {
    opacity: 0;
    transform: translateX(30px) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* ========== WHATSAPP PULSE — subtle attention ring ========== */
@keyframes whatsappPulse {
  0%, 100% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4); }
  50% { box-shadow: 0 4px 24px rgba(37, 211, 102, 0.4), 0 0 0 8px rgba(37, 211, 102, 0.12); }
}

.whatsapp-float {
  animation: whatsappEntrance 0.5s var(--ease-snap) 2s both,
             whatsappPulse 3s ease-in-out 4s infinite;
}

/* ========== NAV LINK ACTIVE INDICATOR ========== */
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* ========== MOBILE MENU BACKDROP ========== */
@media (max-width: 768px) {
  .nav-links {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.97);
  }
}