/* ============================================================
   AURA BEAUTY LOUNGE — Animations & Micro-interactions
   Reveal-on-scroll (JS toggles .is-visible), keyframes,
   and reduced-motion safeguards.
   ============================================================ */

/* ---------- Scroll reveal primitives ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  will-change: opacity, transform;
}
[data-reveal="fade"]  { transform: none; }
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.94); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Staggered children */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
[data-stagger].is-visible > * { opacity: 1; transform: none; }
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.14s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.23s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.32s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.41s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.50s; }

/* ---------- Hero entrance (runs on load) ---------- */
.hero__content > * { opacity: 0; animation: rise 1s var(--ease) forwards; }
.hero__content .eyebrow    { animation-delay: 0.15s; }
.hero__content .hero__title{ animation-delay: 0.30s; }
.hero__content .hero__sub  { animation-delay: 0.45s; }
.hero__content .hero__actions { animation-delay: 0.60s; }
.hero__content .hero__rating  { animation-delay: 0.75s; }
.hero__media { opacity: 0; animation: rise 1.2s var(--ease) 0.4s forwards; }
.hero__media .float-card { opacity: 0; animation: rise 0.8s var(--ease) 1.1s forwards; }

@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Ambient / decorative ---------- */
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37,211,102,0.5), var(--shadow); }
  70%  { box-shadow: 0 0 0 16px rgba(37,211,102,0), var(--shadow); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0), var(--shadow); }
}

@keyframes scroll-bob {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(6px); opacity: 0.5; }
}
.hero__scroll .rail { animation: scroll-bob 2.2s var(--ease) infinite; }

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

/* Shimmer for loading skeletons */
.skeleton {
  position: relative; overflow: hidden; background: var(--ivory-deep); border-radius: var(--radius);
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: shimmer 1.6s infinite;
}
@keyframes shimmer { 100% { transform: translateX(100%); } }

/* Subtle image ken-burns on hero (paused, tasteful) */
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero__media img { animation: kenburns 14s var(--ease) alternate infinite; }

/* Link + button already handled in style.css via transitions */

/* ---------- Mobile: use vertical reveals ----------
   On narrow screens, horizontal (left/right) reveals start off-screen and
   can cause transient horizontal overflow on full-width elements
   (e.g. the booking panel, which has no overflow clipping of its own).
   Reflow them to a gentle vertical rise — safer and better on small screens. */
@media (max-width: 860px) {
  [data-reveal="left"],
  [data-reveal="right"] { transform: translateY(28px); }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal], [data-stagger] > *, .hero__content > *, .hero__media, .hero__media .float-card {
    opacity: 1 !important; transform: none !important;
  }
  .hero__media img { animation: none; }
}