/* SDDG — animation.css
   AETHER Quiet Luxury Editorial
   Hero: hero-split load sequence | Scroll: observer-triggered
   ============================================================ */

/* ── Keyframes ── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to   { opacity: 1; transform: none; }
}
@keyframes clipReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}
@keyframes statsPop {
  0%   { opacity: 0; transform: translateY(20px); }
  60%  { transform: translateY(-4px); }
  100% { opacity: 1; transform: none; }
}
@keyframes drawRule {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   HERO SPLIT — load sequence (fires immediately on render)
   ============================================================ */
.hero-split__label {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .1s;
}
.hero-split__title {
  opacity: 0;
  animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .3s;
}
.hero-split__desc {
  opacity: 0;
  animation: fadeUp .6s ease forwards;
  animation-delay: .65s;
}
.hero-split__body .btn-row {
  opacity: 0;
  animation: fadeUp .5s ease forwards;
  animation-delay: .85s;
}
.hero-split__img {
  opacity: 0;
  animation: slideInLeft .9s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: .15s;
}

/* ============================================================
   HOVER INTERACTIONS
   ============================================================ */
.car-card { transition: border-color .4s ease; }
.service-card { transition: border-color .4s ease; }
.region-card { transition: background .3s ease, color .3s ease; }
.feature-card { transition: background .3s ease, border-color .3s ease; }

.faq-item { transition: background .2s ease; }
.faq-icon { transition: transform .3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

.car-card__img img { transition: transform .6s ease; }
.car-card:hover .car-card__img img { transform: scale(1.04); }

/* ============================================================
   CTA BAND — inherits base anim classes
   ============================================================ */
.cta-band__title.anim-up, .cta-band__sub.anim-fade { /* inherits base */ }

/* ============================================================
   DETAIL HERO
   ============================================================ */
.detail-hero { overflow: hidden; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.has-custom-cursor * { cursor: none !important; }
.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: var(--gold, #A38A5F);
  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: 1.5px solid var(--gold, #A38A5F);
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-split__label, .hero-split__title, .hero-split__desc,
  .hero-split__body .btn-row, .hero-split__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, .anim-right {
    opacity: 1 !important; transform: none !important;
    transition: none !important; animation: none !important;
  }
  .car-card, .service-card, .region-card, .feature-card,
  .faq-icon, .car-card__img img { transition: none !important; }
}