/* ============================================================
   DH BLACK CAR — Animations & Transitions
   ============================================================ */

/* Intersection Observer reveals */
.reveal { opacity: 0; transform: translateY(25px); transition: opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Loader */
.page-loader {
  position: fixed; inset: 0; background: var(--navy);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-logo { text-align: center; }
.loader-logo .logo__dh { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 700; color: #A48111; animation: pulse 1.5s ease infinite; }
.loader-bar { width: 120px; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; margin: 1.5rem auto 0; overflow: hidden; }
.loader-bar-fill { height: 100%; width: 0; background: #A48111; animation: load 2s ease forwards; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.5} }
@keyframes load { 0%{width:0} 100%{width:100%} }

/* Number counter animation */
@keyframes countUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.stat-card__num { animation: countUp .5s ease both; }

/* Gold shimmer */
@keyframes shimmer { 0%{background-position:-1000px 0} 100%{background-position:1000px 0} }
.btn--primary::after {
  content:''; position:absolute; top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(to right,transparent,rgba(255,255,255,.15),transparent);
  transform:skewX(-20deg); animation:none;
}
.btn--primary { position:relative; overflow:hidden; }
.btn--primary:hover::after { animation:shimmer .8s ease; }

/* Card hover lift */
.plan__card, .benefit__card, .route__card, .special__card {
  will-change: transform;
}

/* Nav link underline */
.nav__link:not(.nav__link--cta) {
  position: relative;
}
.nav__link:not(.nav__link--cta)::after {
  content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px;
  background: var(--gold); transition: width var(--transition);
}
.nav__link:not(.nav__link--cta):hover::after,
.nav__link.active::after { width: 100%; }

/* Status badge pulse */
.status-badge.status--pendiente { animation: pulseBadge 2s ease infinite; }
@keyframes pulseBadge { 0%,100%{opacity:1} 50%{opacity:.7} }