/* ============================================================
   CONCIERGE CART — animations.css
   ============================================================ */

/* ---------- Preloader ---------- */
@keyframes preload-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.98); }
  50%      { opacity: 1;   transform: scale(1.03); }
}
@keyframes preload-slide {
  from { transform: translateX(-120%); }
  to   { transform: translateX(320%); }
}

/* ---------- Reveal system ---------- */
.js .fade-up, .js .reveal {
  opacity: 0;
  transform: translateY(44px);
  transition: opacity 1.1s var(--ease-lux), transform 1.1s var(--ease-lux);
}
.js .fade-up.visible, .js .reveal.visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
.js .stagger > * {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.9s var(--ease-lux), transform 0.9s var(--ease-lux);
}
.js .stagger.visible > *:nth-child(1) { transition-delay: 0s; }
.js .stagger.visible > *:nth-child(2) { transition-delay: 0.14s; }
.js .stagger.visible > *:nth-child(3) { transition-delay: 0.28s; }
.js .stagger.visible > *:nth-child(4) { transition-delay: 0.42s; }

/* ---------- Hero entrance ---------- */
.hero .fade-up { transition-duration: 1.5s; }
.hero .hero-eyebrow.visible { transition-delay: 0.08s; }
.hero .hero-display.visible { transition-delay: 0.22s; }
.hero .hero-lead.visible { transition-delay: 0.42s; }
.hero .hero-cta.visible { transition-delay: 0.6s; }

/* 3D stage entrance */
.js .stage-3d {
  opacity: 0;
  transition: opacity 1.6s var(--ease-lux);
}
.js .hero.on .stage-3d { opacity: 1; }

.js .d3-card, .js .d3-chip {
  opacity: 0;
  transition: opacity 1.4s var(--ease-lux);
}
.js .hero.on .d3-jet { opacity: 1; transition-delay: 0.5s; }
.js .hero.on .d3-sedan { opacity: 1; transition-delay: 0.75s; }
.js .hero.on .d3-watch { opacity: 1; transition-delay: 0.95s; }
.js .hero.on .d3-chip { opacity: 1; transition-delay: 1.15s; }

.js .hero-platform {
  opacity: 0;
  transition: opacity 1.1s var(--ease-lux);
}
.js .hero.on .hero-platform { opacity: 1; transition-delay: 1.2s; }

/* ---------- 3D loops ---------- */
@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotateX(72deg) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(72deg) rotate(360deg); }
}
@keyframes core-pulse {
  0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(0.96); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 4px rgba(201, 162, 75, 0.16); }
  50%      { box-shadow: 0 0 0 9px rgba(201, 162, 75, 0.05); }
}
@keyframes scroll-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes halo-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Marquee ---------- */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Timeline ---------- */
@keyframes draw-line {
  to { stroke-dashoffset: 0; }
}

/* ---------- Counter ---------- */
.js .stat .value span {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-lux), transform 0.6s var(--ease-lux);
}
.js .stat .value span.visible { opacity: 1; transform: none; }

/* ---------- 3D tilt lift ---------- */
.service-card, .d3-card figure {
  will-change: transform;
}

/* ---------- Glass reflection sweep on hover ---------- */
.contact-method, .s-plate, .platform-note {
  position: relative;
  overflow: hidden;
}
.contact-method::after, .s-plate::after {
  content: "";
  position: absolute;
  top: 0; left: -70%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.06), transparent);
  transform: skewX(-18deg);
  transition: left 0.8s var(--ease-lux);
  pointer-events: none;
}
.contact-method:hover::after, .s-plate:hover::after { left: 135%; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
  .js .fade-up, .js .reveal, .js .stagger > *, .js .d3-card, .js .d3-chip, .js .stage-3d, .js .hero-platform {
    opacity: 1 !important;
    transform: none !important;
  }
}