/* ==========================================================================
   Sunrise Auto Group — Scroll reveal, counters & micro-interactions
   ========================================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal].in-view {
  opacity: 1;
  transform: translateY(0);
}
[data-reveal="fade"] { transform: none; }
[data-reveal-group] > * { transition-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* Hover lift already on .card / .vehicle-card via style.css */

.fade-in { animation: fadeIn 0.5s var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.gallery-main { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 16/10; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-thumbs { display: flex; gap: 0.6rem; margin-top: 0.6rem; overflow-x: auto; padding-bottom: 4px; }
.gallery-thumbs button { flex-shrink: 0; width: 84px; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid transparent; padding: 0; }
.gallery-thumbs button.active { border-color: var(--color-accent); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.9); border: none; display: flex; align-items: center; justify-content: center; }
.gallery-nav.prev { left: 12px; }
.gallery-nav.next { right: 12px; }

.toast { position: fixed; top: 96px; right: 24px; background: var(--color-gray-900); color: #fff; padding: 0.9rem 1.2rem; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 0.6rem; z-index: 2000; transform: translateX(120%); transition: transform 0.4s var(--ease); font-size: 0.9rem; }
.toast.show { transform: translateX(0); }
.toast i { color: var(--color-success); }