/* ── Scroll-reveal ── */
.reveal,
.fade-in {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.65s var(--ease-out),
    transform 0.65s var(--ease-out);
}

.reveal.visible,
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.12s; }
.delay-2 { transition-delay: 0.24s; }
.delay-3 { transition-delay: 0.36s; }
.delay-4 { transition-delay: 0.48s; }

/* ── Hero entrance (triggered on load) ── */
.hero .fade-in {
  animation: heroFadeUp 0.8s var(--ease-out) forwards;
  opacity: 0;
}

.hero .delay-1 { animation-delay: 0.1s; }
.hero .delay-2 { animation-delay: 0.22s; }
.hero .delay-3 { animation-delay: 0.36s; }
.hero .delay-4 { animation-delay: 0.52s; }

@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scroll line in hero ── */
@keyframes scrollDrop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.scroll-line {
  animation: scrollDrop 2s var(--ease) infinite;
}

/* ── Carousel slide ── */
.carousel-track {
  transition: transform 0.55s var(--ease-out);
}

/* ── Accordion panel ── */
.accordion-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s var(--ease-out), padding 0.3s var(--ease-out);
}

.accordion-panel.open {
  max-height: 600px;
}

/* ── Hover lift for cards ── */
.car-card {
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.car-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}

/* ── Button transitions ── */
.btn {
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    transform 0.15s var(--ease),
    box-shadow var(--duration) var(--ease);
}

.btn:active {
  transform: scale(0.97);
}

/* ── Filter pill ── */
.filter-pill {
  transition:
    background-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

/* ── Nav scroll state ── */
.nav-header {
  transition:
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    backdrop-filter var(--duration) var(--ease);
}

/* ── Dot indicator ── */
.dot {
  transition: width var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

/* ── Form states ── */
.form-group input,
.form-group select,
.form-group textarea {
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

/* ── Success message ── */
@keyframes successPop {
  0%   { opacity: 0; transform: scale(0.92) translateY(12px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.form-success {
  animation: successPop 0.5s var(--ease-out) both;
}

/* ── Accordion icon ── */
.accordion-icon {
  transition: transform 0.3s var(--ease);
}

.accordion-trigger[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

/* ── No results state ── */
@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}

.no-results {
  animation: fadeInScale 0.4s var(--ease-out) both;
}

/* ── Portrait decoration ── */
@keyframes floatPortrait {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.portrait-frame {
  animation: floatPortrait 6s ease-in-out infinite;
}