/* ═══════════════════════════════════════════════════════
   CarWorld Animation System v2.0
   Unified design language for all transitions
   Timing: fast (200ms), normal (350ms), slow (500ms)
   Easing: cubic-bezier(.22,1,.36,1) — smooth in-out
   ═══════════════════════════════════════════════════════ */

:root {
  --anim-fast: 200ms;
  --anim-norm: 350ms;
  --anim-slow: 500ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-in: cubic-bezier(.36,0,1,.22);
  --ease-in-out: cubic-bezier(.45,0,.35,1);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
}

/* ── Page Transitions ── */
.page {
  opacity: 1;
  transform: none;
}
.page.active {
  opacity: 1;
  transform: none;
}
.page.page-enter {
  animation: pageEnter 260ms var(--ease-out) both;
  will-change: opacity, transform;
}
@keyframes pageEnter {
  from {
    opacity: 0;
    transform: translate3d(0, 8px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* Use the browser's same-document transition when available. Only the main
   stage is captured so the fixed navigation does not flicker or slide. */
:root {
  view-transition-name: none;
}
body > main {
  view-transition-name: page-stage;
}
::view-transition-old(page-stage) {
  animation: pageStageOut 130ms ease-out both;
}
::view-transition-new(page-stage) {
  animation: pageStageIn 240ms var(--ease-out) both;
}
@keyframes pageStageOut {
  to {
    opacity: .7;
    transform: translate3d(0, -3px, 0);
  }
}
@keyframes pageStageIn {
  from {
    opacity: 0;
    transform: translate3d(0, 7px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

/* ── Card Stagger Entrance ── */
.cars-grid .card,
.cars-grid .reveal {
  opacity: 0;
  transform: translateY(20px) scale(.97);
  transition: opacity var(--anim-slow) var(--ease-out), transform var(--anim-slow) var(--ease-out);
}
.cars-grid .card.in,
.cars-grid .reveal.in {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Stagger delays set via style="--d: 1" */
[data-delay] {
  transition-delay: calc(var(--d, 0) * 60ms) !important;
}

#garageGrid {
  min-height: 360px;
  transition: opacity 160ms ease;
}
#garageGrid.is-updating {
  opacity: .52;
  pointer-events: none;
}
#garageGrid.results-enter {
  animation: resultsEnter 240ms var(--ease-out) both;
}
#garageGrid .reveal {
  transition-delay: calc(var(--d, 0) * 28ms);
}
.garage-skeleton {
  min-height: 220px;
  opacity: 1 !important;
  transform: none !important;
}
@keyframes resultsEnter {
  from { opacity: .5; }
  to { opacity: 1; }
}

/* ── Image Progressive Loading ── */
img {
  opacity: 0;
  transition: opacity var(--anim-norm) var(--ease-out);
}
img.loaded,
img[loading="lazy"] {
  opacity: 1;
}

/* Image blur-up placeholder */
.img-blur-wrap {
  position: relative;
  overflow: hidden;
  background: var(--bg2);
}
.img-blur-wrap img {
  opacity: 0;
  transition: opacity var(--anim-slow) var(--ease-out);
}
.img-blur-wrap img.loaded {
  opacity: 1;
}
.img-blur-placeholder {
  position: absolute;
  inset: 0;
  background: var(--bg2);
  filter: blur(20px);
  transform: scale(1.1);
  transition: opacity var(--anim-slow) var(--ease-out);
}

/* ── Card Hover Lift ── */
.card, .car-card {
  transition: transform var(--anim-norm) var(--ease-out),
              box-shadow var(--anim-norm) var(--ease-out);
}
.card:hover, .car-card:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 30px rgba(10,132,255,.08);
  transition-duration: var(--anim-fast);
}

/* ── Button Feedback ── */
.btn {
  transition: transform var(--anim-fast) var(--ease-spring),
              box-shadow var(--anim-fast) var(--ease-out),
              background var(--anim-fast) var(--ease-out),
              border-color var(--anim-fast) var(--ease-out);
}
.btn:active {
  transform: scale(.96);
  transition-duration: 80ms;
}

/* ── Modal / Dropdown ── */
.modal-overlay {
  opacity: 0;
  transition: opacity var(--anim-norm) var(--ease-out);
  pointer-events: none;
}
.modal-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.modal-content {
  opacity: 0;
  transform: scale(.92) translateY(20px);
  transition: opacity var(--anim-norm) var(--ease-out),
              transform var(--anim-norm) var(--ease-spring);
}
.modal-overlay.open .modal-content {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Dropdown */
.dropdown-menu {
  opacity: 0;
  transform: translateY(-8px) scale(.95);
  transition: opacity var(--anim-fast) var(--ease-out),
              transform var(--anim-fast) var(--ease-out);
  pointer-events: none;
}
.dropdown-menu.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* ── Skeleton Loading ── */
.skeleton {
  background: linear-gradient(90deg,
    var(--bg2) 25%,
    rgba(255,255,255,.04) 50%,
    var(--bg2) 75%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}
@keyframes skeletonShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ── Search Results ── */
.search-dd {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--anim-fast) var(--ease-out),
              transform var(--anim-fast) var(--ease-out);
  pointer-events: none;
}
.search-dd.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}
.search-result-item {
  transition: background var(--anim-fast) var(--ease-out);
}

/* ── Scroll Reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--anim-slow) var(--ease-out),
              transform var(--anim-slow) var(--ease-out);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }

/* ── Toast Notification ── */
.toast-container {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 12px 24px;
  border-radius: var(--rfull);
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: rgba(8,11,20,.92);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  animation: toastIn var(--anim-norm) var(--ease-spring) forwards;
  pointer-events: all;
  white-space: nowrap;
}
@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px) scale(.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}
.toast-out {
  animation: toastOut var(--anim-fast) var(--ease-in) forwards;
}
@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(-10px) scale(.9);
  }
}

/* ── Filter / Sort Controls ── */
.filter-select, .input {
  transition: border-color var(--anim-fast) var(--ease-out),
              box-shadow var(--anim-fast) var(--ease-out);
}

/* ── Badge / Tag ── */
.badge, .tag {
  transition: color var(--anim-fast) var(--ease-out),
              background-color var(--anim-fast) var(--ease-out),
              border-color var(--anim-fast) var(--ease-out),
              transform var(--anim-fast) var(--ease-out);
}

/* ── Tab / Pagination ── */
.rank-tab, .pag-btn {
  transition: color var(--anim-fast) var(--ease-out),
              background-color var(--anim-fast) var(--ease-out),
              border-color var(--anim-fast) var(--ease-out),
              transform var(--anim-fast) var(--ease-out);
}

/* ── Hero Animations ── */
.hero-car-body {
  transition: transform var(--anim-slow) var(--ease-out);
}
.hero-headlight {
  animation: headlightPulse 3s ease-in-out infinite;
}
.hero-taillight {
  animation: taillightPulse 3s ease-in-out infinite 1.5s;
}
@keyframes headlightPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
@keyframes taillightPulse {
  0%, 100% { opacity: .7; }
  50% { opacity: 1; }
}
.hero-speed-line-1 {
  animation: speedLine1 2.5s ease-in-out infinite;
}
.hero-speed-line-2 {
  animation: speedLine2 2.5s ease-in-out infinite .3s;
}
@keyframes speedLine1 {
  0%, 100% { transform: translateX(0); opacity: .6; }
  50% { transform: translateX(12px); opacity: 1; }
}
@keyframes speedLine2 {
  0%, 100% { transform: translateX(0); opacity: .4; }
  50% { transform: translateX(8px); opacity: .8; }
}
.hero-wheel-fl {
  animation: wheelSpin 4s linear infinite;
}
@keyframes wheelSpin {
  to { transform: rotate(360deg); }
}

/* ── Performance ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  body > main {
    view-transition-name: none;
  }
}

@media (max-width: 720px), (pointer: coarse) {
  :root {
    --anim-fast: 120ms;
    --anim-norm: 180ms;
    --anim-slow: 260ms;
  }
  .page.page-enter {
    animation-duration: 190ms;
  }
  .card:hover,
  .car-card:hover {
    transform: none;
    box-shadow: none;
  }
}