/* ============================================================
   ODESSEY RV REPAIR — Animations
   ============================================================ */

/* ── REVEAL ON SCROLL ── */
.reveal {
  opacity:0; transform:translateY(32px);
  transition: opacity .65s ease, transform .65s cubic-bezier(.4,0,.2,1);
}
.reveal.from-left  { transform:translateX(-40px); }
.reveal.from-right { transform:translateX(40px); }
.reveal.scale-in   { transform:scale(.94); }
.reveal.visible {
  opacity:1;
  transform:translateY(0) translateX(0) scale(1);
}
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }
.reveal-delay-4 { transition-delay:.4s; }
.reveal-delay-5 { transition-delay:.5s; }

/* ── FLOATING ELEMENTS ── */
@keyframes floatUp {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-12px); }
}
.float-anim { animation: floatUp 5s ease-in-out infinite; }
.float-anim-slow { animation: floatUp 7s ease-in-out infinite; }

/* ── GRADIENT SHIFT ── */
@keyframes gradientShift {
  0%,100% { background-position:0% 50%; }
  50%     { background-position:100% 50%; }
}
.gradient-animate {
  background-size:200% 200%;
  animation: gradientShift 8s ease infinite;
}

/* ── PULSE RING ── */
@keyframes pulseRing {
  0%   { box-shadow:0 0 0 0 rgba(232,160,32,.4); }
  70%  { box-shadow:0 0 0 14px rgba(232,160,32,0); }
  100% { box-shadow:0 0 0 0 rgba(232,160,32,0); }
}
.pulse-ring { animation: pulseRing 2s infinite; }

/* ── SHIMMER ── */
@keyframes shimmer {
  0%   { background-position:-200% center; }
  100% { background-position:200% center; }
}
.shimmer-text {
  background: linear-gradient(90deg, #e8a020 0%, #f5bb4a 40%, #e8a020 80%);
  background-size:200% auto;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation: shimmer 3s linear infinite;
}

/* ── COUNTER ── */
.counter-num {
  display:inline-block;
  transition:none;
}

/* ── HERO SHAPES ── */
.hero-shape-1 {
  position:absolute; bottom:-80px; right:-60px;
  width:400px; height:400px; border-radius:50%;
  border:1px solid rgba(232,160,32,.12);
  pointer-events:none; z-index:2;
  animation: floatUp 9s ease-in-out infinite;
}
.hero-shape-2 {
  position:absolute; top:20%; right:10%;
  width:180px; height:180px;
  border:1px solid rgba(255,255,255,.05);
  border-radius:50%; pointer-events:none; z-index:2;
  animation: floatUp 6s ease-in-out infinite reverse;
}
.hero-shape-3 {
  position:absolute; top:30%; left:5%;
  width:80px; height:80px;
  border:2px solid rgba(232,160,32,.15);
  transform:rotate(45deg); pointer-events:none; z-index:2;
  animation: floatUp 8s ease-in-out infinite;
}

/* ── SVG WAVE SEPARATORS ── */
.wave-sep {
  display:block; width:100%;
  line-height:0; overflow:hidden;
}
.wave-sep svg {
  display:block; width:100%;
}

/* ── LOADING SKELETON ── */
@keyframes skeletonPulse {
  0%,100% { opacity:.4; }
  50%      { opacity:.8; }
}
.skeleton {
  background:rgba(255,255,255,.06);
  border-radius:4px;
  animation: skeletonPulse 1.6s ease infinite;
}

/* ── STAGGER CHILDREN ── */
.stagger-children > * { opacity:0; transform:translateY(20px); }
.stagger-children.go > *:nth-child(1) { animation: staggerIn .5s .05s forwards ease; }
.stagger-children.go > *:nth-child(2) { animation: staggerIn .5s .15s forwards ease; }
.stagger-children.go > *:nth-child(3) { animation: staggerIn .5s .25s forwards ease; }
.stagger-children.go > *:nth-child(4) { animation: staggerIn .5s .35s forwards ease; }
.stagger-children.go > *:nth-child(5) { animation: staggerIn .5s .45s forwards ease; }
.stagger-children.go > *:nth-child(6) { animation: staggerIn .5s .55s forwards ease; }
@keyframes staggerIn {
  to { opacity:1; transform:translateY(0); }
}

/* ── TICKER ── */
@keyframes ticker {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}
.ticker-wrap {
  overflow:hidden; border-top:1px solid rgba(255,255,255,.06);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:.7rem 0; background:rgba(255,255,255,.02);
}
.ticker-inner {
  display:flex; white-space:nowrap;
  animation: ticker 28s linear infinite;
}
.ticker-item {
  display:inline-flex; align-items:center; gap:1rem;
  padding:0 2.5rem;
  font-family:var(--font-cond); font-size:.85rem;
  font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--smoke);
}
.ticker-item i { color:var(--amber); }

/* ── PROGRESS BARS ── */
.progress-bar-wrap {
  background:rgba(255,255,255,.08);
  border-radius:40px; height:8px; overflow:hidden; margin:.5rem 0;
}
.progress-bar-fill {
  height:100%; border-radius:40px;
  background:linear-gradient(90deg, var(--amber-dark), var(--amber-light));
  width:0%; transition:width 1.2s cubic-bezier(.4,0,.2,1);
}