/* ============================================================
   Animation layer 2 — adds polish without breaking BMW voice.
   All effects gated by prefers-reduced-motion: no-preference.
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- View Transitions API (Chromium) ---------- */
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: lmrFade 200ms var(--ease-in) both; }
  ::view-transition-new(root) { animation: lmrFade 280ms var(--ease-out) reverse both; }
  @keyframes lmrFade {
    from { opacity: 1; }
    to   { opacity: 0; }
  }

  /* ---------- Cursor spotlight on dark bands ---------- */
  .band--dark { position: relative; }
  .band--dark::after {
    content: "";
    position: absolute; inset: 0;
    pointer-events: none;
    background: radial-gradient(
      300px circle at var(--mx, 50%) var(--my, 50%),
      rgba(28,105,212,0.12) 0%,
      rgba(28,105,212,0) 60%
    );
    opacity: 0;
    transition: opacity 400ms var(--ease-out);
  }
  .band--dark:hover::after { opacity: 1; }

  /* ---------- Marquee divider strip between bands ---------- */
  .marquee {
    overflow: hidden;
    background: var(--surface-dark);
    color: rgba(255,255,255,0.55);
    border-top: 1px solid rgba(255,255,255,0.05);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    padding: 12px 0;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .marquee__track {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 28s linear infinite;
  }
  .marquee__track > span { padding: 0 32px; position: relative; }
  .marquee__track > span::after {
    content: "·"; position: absolute; right: -4px; color: var(--blue);
  }
  @keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .marquee:hover .marquee__track { animation-play-state: paused; }

  /* ---------- 3-D card tilt on hover ---------- */
  .card { transform-style: preserve-3d; will-change: transform; }
  .card[data-tilt] {
    transition: transform 220ms var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
  }

  /* ---------- Cart badge bounce on add ---------- */
  .cart__dot { transform-origin: 70% 30%; will-change: transform; }
  .cart__dot.is-bump { animation: dotBump 600ms var(--ease-out); }
  @keyframes dotBump {
    0%   { transform: scale(1); }
    25%  { transform: scale(1.5); background: var(--success); }
    100% { transform: scale(1); }
  }

  /* ---------- Filter chip ripple ---------- */
  .chip {
    position: relative;
    overflow: hidden;
  }
  .chip::after {
    content: "";
    position: absolute;
    left: var(--rx, 50%); top: var(--ry, 50%);
    width: 0; height: 0;
    border-radius: 50%;
    background: rgba(28,105,212,0.18);
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
  .chip.is-rippling::after {
    animation: chipRipple 500ms var(--ease-out);
  }
  @keyframes chipRipple {
    0%   { width: 0; height: 0; opacity: 1; }
    100% { width: 200%; height: 200%; opacity: 0; }
  }

  /* ---------- Logo subtle pulse on first load (homepage only) ---------- */
  body[data-page="home"] .nav__brand img {
    animation: logoPulse 1200ms var(--ease-out) 200ms 1 both;
    transform-origin: center;
  }
  @keyframes logoPulse {
    0%   { transform: scale(0.9); opacity: 0; }
    60%  { transform: scale(1.05); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
  }

  /* ---------- Search overlay results cascade ---------- */
  .search-grid > .search-hit {
    opacity: 0;
    transform: translateY(8px);
    animation: searchHit 380ms var(--ease-out) forwards;
  }
  .search-grid > .search-hit:nth-child(1)  { animation-delay: 30ms; }
  .search-grid > .search-hit:nth-child(2)  { animation-delay: 60ms; }
  .search-grid > .search-hit:nth-child(3)  { animation-delay: 90ms; }
  .search-grid > .search-hit:nth-child(4)  { animation-delay: 120ms; }
  .search-grid > .search-hit:nth-child(5)  { animation-delay: 150ms; }
  .search-grid > .search-hit:nth-child(6)  { animation-delay: 180ms; }
  .search-grid > .search-hit:nth-child(7)  { animation-delay: 210ms; }
  .search-grid > .search-hit:nth-child(8)  { animation-delay: 240ms; }
  .search-grid > .search-hit:nth-child(n+9){ animation-delay: 270ms; }
  @keyframes searchHit {
    to { opacity: 1; transform: none; }
  }

  /* ---------- Footer social hover wave ---------- */
  .footer__social a { transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), color 200ms var(--ease-out); }
  .footer__social a:hover { transform: translateY(-2px); }

  /* ---------- Newsletter collapsible chevron rotate ---------- */
  .footer__newsletter > summary i, .footer__newsletter > summary svg {
    transition: transform 240ms var(--ease-out);
  }

  /* ---------- Hero text mask reveal (clip-path slide) ---------- */
  .hero__inner > .hero-title {
    animation: titleSlide 700ms var(--ease-out) 200ms both;
  }
  @keyframes titleSlide {
    from { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateY(16px); }
    to   { opacity: 1; clip-path: inset(0 0 0 0);    transform: translateY(0); }
  }

  /* ---------- Lab card stat tick on view ---------- */
  .lab-stats dd {
    transition: color 180ms var(--ease-out);
  }
  .lab-card.is-in .lab-stats dd { color: var(--ink); }

  /* ---------- Toast slide-in with subtle scale ---------- */
  .toast {
    transform: translate3d(0, 12px, 0) scale(0.97);
  }
  .toast.is-in {
    transform: translate3d(0, 0, 0) scale(1);
  }

  /* ---------- Stock badge ping for low-stock ---------- */
  .stock-badge.stock--low {
    animation: stockPing 2.4s var(--ease-out) infinite;
  }
  @keyframes stockPing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0.10); }
  }

  /* ---------- Discount/auto-tier flash ---------- */
  .disc-applied { animation: discFlash 1200ms var(--ease-out); }
  @keyframes discFlash {
    0%   { background: rgba(34,197,94,0.30); }
    100% { background: rgba(34,197,94,0.08); }
  }

  /* ---------- Compliance bar quiet pulse ---------- */
  .compliance b {
    background: linear-gradient(90deg, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.0) 100%);
    background-size: 200% 100%;
    animation: complianceShine 5s linear infinite;
  }
  @keyframes complianceShine {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
  }

  /* ---------- Link arrow nudge ---------- */
  .link-arrow { transition: gap 200ms var(--ease-out), color 180ms var(--ease-out); }
  .link-arrow:hover { gap: 12px; }

  /* ---------- Footer base copyright fade-in ---------- */
  .footer__base { animation: fadeIn 1.4s var(--ease-out) 200ms both; }
  @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

  /* ---------- Buy-rail price slide ---------- */
  .buy-rail__price { transition: color 200ms var(--ease-out); }
  .buy-rail:hover .buy-rail__price { color: var(--blue); }

  /* ---------- Image hover zoom on PDP gallery thumbs ---------- */
  .gallery__thumb { transition: border-color 180ms var(--ease-out); }
  .gallery__thumb img { transition: transform 320ms var(--ease-out); }
  .gallery__thumb:hover img { transform: scale(1.08); }

  /* ---------- Reduce-motion-aware re-asserts (defensive) ---------- */
}