/* ==========================================================================
   VZ CONCIERGE SERVICE — MOTION & REVEAL
   IntersectionObserver-driven reveal states + keyframes.
   ========================================================================== */

/* ————— Reveal primitives (only active when JS present) ————— */
.js .reveal {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.9s var(--ease-out),
    transform 0.9s var(--ease-out);
  will-change: opacity, transform;
}

.js .reveal.from-left {
  transform: translateX(-44px);
}

.js .reveal.from-right {
  transform: translateX(44px);
}

.js .reveal.zoom {
  transform: scale(0.94);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Stagger helper — applied to children */
.js .stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.js .stagger.is-in > * {
  opacity: 1;
  transform: none;
}

.js .stagger.is-in > *:nth-child(2) { transition-delay: 0.08s; }
.js .stagger.is-in > *:nth-child(3) { transition-delay: 0.16s; }
.js .stagger.is-in > *:nth-child(4) { transition-delay: 0.24s; }
.js .stagger.is-in > *:nth-child(5) { transition-delay: 0.32s; }
.js .stagger.is-in > *:nth-child(6) { transition-delay: 0.4s; }
.js .stagger.is-in > *:nth-child(7) { transition-delay: 0.48s; }
.js .stagger.is-in > *:nth-child(8) { transition-delay: 0.56s; }

/* Parallax smoothing between scroll ticks */
[data-parallax] {
  transition: transform 0.35s var(--ease-out);
}

/* ————— Hero entrance (timed on load) ————— */
.hero-anim > * {
  opacity: 0;
  transform: translateY(26px);
  animation: heroIn 1.1s var(--ease-out) forwards;
}

.hero-anim > *:nth-child(1) { animation-delay: 0.1s; }
.hero-anim > *:nth-child(2) { animation-delay: 0.22s; }
.hero-anim > *:nth-child(3) { animation-delay: 0.34s; }
.hero-anim > *:nth-child(4) { animation-delay: 0.46s; }
.hero-anim > *:nth-child(5) { animation-delay: 0.58s; }
.hero-anim > *:nth-child(6) { animation-delay: 0.7s; }

@keyframes heroIn {
  to {
    opacity: 1;
    transform: none;
  }
}

/* ————— Slow Ken Burns on hero image ————— */
.hero-bg img.kb {
  animation: kenburns 26s var(--ease-io) infinite alternate;
}

@keyframes kenburns {
  from {
    transform: scale(1.06);
  }
  to {
    transform: scale(1.14);
  }
}

/* ————— Parallax utility (JS offsets via --py) ————— */
[data-parallax] {
  will-change: transform;
}

/* ————— Gold underline sweep for headings on hover targets ————— */
.gold-line {
  position: relative;
}

/* ————— Floating WhatsApp pulse ring ————— */
.float-btn.pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  animation: floatPulse 2.6s var(--ease-io) infinite;
}

@keyframes floatPulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(1.55);
    opacity: 0;
  }
}

/* ————— Counter shimmer for gold numerals ————— */
.gold-shimmer {
  background: linear-gradient(100deg, var(--gold) 30%, var(--gold-light) 46%, var(--gold) 62%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 5.5s linear infinite;
}

@keyframes shimmer {
  to {
    background-position: -220% 0;
  }
}

/* ————— Body lock while menu/loader active ————— */
body.is-locked {
  overflow: hidden;
}