/* =========================================================
   AUTO CENTAR BIMMER — animations.css
   Scroll reveal + subtle hero motion. All motion is
   disabled via prefers-reduced-motion in responsive.css.
   ========================================================= */

/* ---------- Scroll reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
/* Stagger helper — apply data-delay via JS or these classes */
.reveal.d-1 { transition-delay: .08s; }
.reveal.d-2 { transition-delay: .16s; }
.reveal.d-3 { transition-delay: .24s; }
.reveal.d-4 { transition-delay: .32s; }

/* ---------- Hero: subtle cinematic zoom ---------- */
@keyframes heroZoom {
  from { transform: scale(1.10); }
  to   { transform: scale(1.01); }
}
.hero__media img {
  animation: heroZoom 16s var(--ease) forwards;
}

/* ---------- Scroll cue pulse ---------- */
@keyframes cuePulse {
  0%, 100% { opacity: .5; transform: scaleY(1); }
  50%      { opacity: 1;  transform: scaleY(1.18); }
}
.scroll-cue .line {
  transform-origin: top;
  animation: cuePulse 2.4s ease-in-out infinite;
}

/* ---------- Fade-up for hero content on load ---------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}
.hero__inner > * {
  opacity: 0;
  animation: fadeUp .8s var(--ease) forwards;
}
.hero__inner > *:nth-child(1) { animation-delay: .15s; }
.hero__inner > *:nth-child(2) { animation-delay: .28s; }
.hero__inner > *:nth-child(3) { animation-delay: .40s; }
.hero__inner > *:nth-child(4) { animation-delay: .52s; }
.hero__inner > *:nth-child(5) { animation-delay: .62s; }
.hero__inner > *:nth-child(6) { animation-delay: .72s; }

/* ---------- Cursor-car skid trail fade ---------- */
@keyframes skidFade {
  from { opacity: .5; }
  to   { opacity: 0; transform: scale(.4); }
}

/* Respect reduced motion explicitly (belt and suspenders) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .hero__media img,
  .hero__inner > *,
  .scroll-cue .line { animation: none; opacity: 1; transform: none; }
}

/* =========================================================
   PREMIUM FX — subtle micro-interactions (premium-fx.js)
   ========================================================= */

/* ── Image reveal — clip-path sweep left→right ─────────── */
.img-reveal {
  clip-path: inset(0 100% 0 0 round 14px);
  opacity: 0;
  transition:
    clip-path .88s cubic-bezier(.22,.61,.36,1),
    opacity    .60s ease;
}
.img-reveal.img-reveal-in {
  clip-path: inset(0 0% 0 0 round 14px);
  opacity: 1;
}
/* Mobile: simple fade-up instead of clip-path */
@media (max-width: 860px) {
  .img-reveal {
    clip-path: none;
    transform: translateY(18px);
    transition:
      opacity   .7s ease,
      transform .7s cubic-bezier(.22,.61,.36,1);
  }
  .img-reveal.img-reveal-in {
    opacity: 1;
    transform: none;
  }
}

/* ── Card tilt light reflection ──────────────────────────── */
.vcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255,255,255,.06) 0%,
    transparent 58%
  );
  opacity: 0;
  transition: opacity .3s ease;
}
.vcard.is-tilting::after { opacity: 1; }

/* ── Eyebrow accent bar — animates in on sec-head reveal ─── */
.sec-head.reveal .eyebrow::before {
  width: 0;
  transition: width .55s cubic-bezier(.22,.61,.36,1) .12s;
}
.sec-head.reveal.is-visible .eyebrow::before { width: 26px; }

/* ── Button sweep — light shimmer on hover (one pass) ──── */
.btn--primary {
  position: relative;
  overflow: hidden;
}
.btn--primary::before {
  content: "";
  position: absolute;
  top: -2px; bottom: -2px;
  left: -120%;
  width: 55%;
  background: linear-gradient(
    90deg,
    transparent            0%,
    rgba(255,255,255,.13) 50%,
    transparent           100%
  );
  transform: skewX(-18deg);
  transition: left .52s cubic-bezier(.22,.61,.36,1);
  pointer-events: none;
}
.btn--primary:hover::before { left: 160%; }

/* ── prefers-reduced-motion: disable all new FX ─────────── */
@media (prefers-reduced-motion: reduce) {
  .img-reveal {
    clip-path: none !important;
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .vcard::after { display: none; }
  .sec-head.reveal .eyebrow::before { width: 26px; transition: none; }
  .btn--primary::before { display: none; }
}