/* ============================================================
   MBMR — animation.css
   Hero: load-sequence | Scroll: observer-triggered
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroLineIn {
  from { opacity: 0; transform: translateY(56px) skewY(1.5deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes drawRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes kenBurns {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}
@keyframes statsPop {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* ============================================================
   HERO — load sequence (fires immediately on render)
   ============================================================ */
.hero-impact__label {
  opacity: 0;
  animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .05s;
}
.hero-impact__line1 {
  opacity: 0;
  animation: heroLineIn .65s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .2s;
}
.hero-impact__rule {
  transform-origin: left center;
  animation: drawRule .4s cubic-bezier(.77,0,.18,1) forwards;
  animation-delay: .58s;
}
.hero-impact__line2 {
  opacity: 0;
  animation: heroLineIn .65s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .72s;
}
.hero-impact__desc {
  opacity: 0;
  animation: fadeUp .5s ease forwards;
  animation-delay: .95s;
}
.hero-impact__body .btn-row {
  opacity: 0;
  animation: fadeUp .5s ease forwards;
  animation-delay: 1.1s;
}
.hero-impact__bg img {
  animation: kenBurns 18s ease forwards;
}

/* ============================================================
   SCROLL REVEAL — base classes
   JS adds .is-visible on IntersectionObserver trigger
   CSS var --d controls stagger delay (set by JS)
   ============================================================ */
.anim-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.anim-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.anim-fade {
  opacity: 0;
  transition: opacity .6s ease;
  transition-delay: var(--d, 0ms);
}
.anim-scale {
  opacity: 0;
  transform: scale(.94) translateY(16px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}

/* visible state — all reset */
.anim-up.is-visible,
.anim-left.is-visible,
.anim-fade.is-visible,
.anim-scale.is-visible {
  opacity: 1;
  transform: none;
}

/* stats pop — separate animation when strip enters view */
.stats-strip__item.anim-stats {
  opacity: 0;
}
.stats-strip__item.anim-stats.is-visible {
  animation: statsPop .5s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: var(--d, 0ms);
}

/* section title clip reveal */
.anim-clip-wrap {
  overflow: hidden;
  display: block;
}
.anim-clip {
  display: block;
  transform: translateY(100%);
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--d, 0ms);
}
.anim-clip.is-visible {
  transform: none;
}

/* CTA band elements */
.cta-band__label.anim-fade,
.cta-band__title.anim-up {
  /* inherits base classes above */
}
.cta-band__actions.anim-right {
  opacity: 0;
  transform: translateX(32px);
  transition: opacity .5s ease, transform .5s cubic-bezier(.22,.61,.36,1);
  transition-delay: .2s;
}
.cta-band__actions.anim-right.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   HOVER INTERACTIONS
   ============================================================ */
.car-card {
  transition: transform .25s ease, box-shadow .25s ease;
}
.car-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(45,98,255,.13);
}

.service-item {
  transition: background .2s ease, padding-left .2s ease;
}
.service-item:hover {
  background: rgba(45,98,255,.04);
  padding-left: 8px;
}

.region-card-v2 {
  transition: background .18s ease;
}
.region-card-v2 * {
  transition: color .18s ease, border-color .18s ease;
}

.faq-item {
  transition: background .15s ease;
}
.faq-item:hover {
  background: rgba(45,98,255,.025);
}
.faq-icon {
  transition: transform .25s ease;
}
.faq-item.open .faq-icon {
  transform: rotate(45deg);
}

/* ── Car image scale ── */
.car-card__img img {
  transition: transform .4s ease;
}
.car-card:hover .car-card__img img {
  transform: scale(1.05);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-impact__label,
  .hero-impact__line1,
  .hero-impact__rule,
  .hero-impact__line2,
  .hero-impact__desc,
  .hero-impact__body .btn-row,
  .hero-impact__bg img {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .anim-up, .anim-left, .anim-fade, .anim-scale,
  .anim-clip, .stats-strip__item.anim-stats,
  .cta-band__actions.anim-right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .car-card, .service-item, .region-card-v2,
  .faq-icon, .car-card__img img {
    transition: none !important;
  }
}

/* ── Custom cursor ── */
.has-custom-cursor * { cursor: none !important; }
.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--indigo, #2D62FF);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .2s ease, height .2s ease, background .2s ease;
}
.cursor-dot.is-hover {
  width: 20px;
  height: 20px;
  background: transparent;
  border: 2px solid var(--indigo, #2D62FF);
}

/* ── Hero parallax overflow guard ── */
.detail-hero { overflow: hidden; }