/* ==========================================================================
   animations.css — AOS overrides, shimmer skeletons, counters
   ========================================================================== */

[data-aos] { will-change: opacity, transform; }

/* Loading skeleton shimmer */
.is-loading .skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(11,26,74,.06);
  border-radius: 6px;
  color: transparent !important;
}
.is-loading .skeleton::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.55) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer 1.6s infinite;
}
.section-dark .is-loading .skeleton { background: rgba(255,255,255,.08); }
.section-dark .is-loading .skeleton::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
}
@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* Counter target — adds slight pop when value lands */
.stat-num.counted {
  animation: countPop .35s ease-out;
}
@keyframes countPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

/* Section reveal alternative (no-AOS fallback or supplemental) */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Subtle hover lift utility */
.hover-lift { transition: transform .25s ease, box-shadow .25s ease; }
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--rm-shadow-md); }

/* ==========================================================================
   Interactive micro-animations
   ========================================================================== */

/* ---- Ripple on click (for .btn) ---- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transform: scale(0);
  animation: ripple .7s ease-out;
  pointer-events: none;
}
.btn-gold .ripple { background: rgba(11,26,74,.25); }
.btn-outline-deep .ripple { background: rgba(30,64,255,.18); }
@keyframes ripple {
  to { transform: scale(2.4); opacity: 0; }
}

/* ---- Tilt cards (controlled by JS via inline transform) ---- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .15s ease-out, box-shadow .25s ease;
  will-change: transform;
}
.tilt > * { transform: translateZ(0); }
.tilt .tilt-pop { transform: translateZ(30px); }

/* ---- Magnetic CTA target ---- */
.magnetic {
  display: inline-block;
  transition: transform .25s cubic-bezier(.2,.7,.3,1.4);
  will-change: transform;
}

/* ---- Animated underline on inline links ---- */
.a-underline {
  position: relative;
  display: inline-block;
}
.a-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .35s cubic-bezier(.65,0,.35,1);
}
.a-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- Section reveal stagger ---- */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .6s ease;
}
.stagger-children.is-in > * {
  opacity: 1; transform: none;
}
.stagger-children.is-in > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.is-in > *:nth-child(2) { transition-delay: 60ms; }
.stagger-children.is-in > *:nth-child(3) { transition-delay: 120ms; }
.stagger-children.is-in > *:nth-child(4) { transition-delay: 180ms; }
.stagger-children.is-in > *:nth-child(5) { transition-delay: 240ms; }
.stagger-children.is-in > *:nth-child(6) { transition-delay: 300ms; }
.stagger-children.is-in > *:nth-child(7) { transition-delay: 360ms; }
.stagger-children.is-in > *:nth-child(8) { transition-delay: 420ms; }

/* ---- Marquee (trust logos) ---- */
.marquee {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: inline-flex;
  gap: 4rem;
  align-items: center;
  white-space: nowrap;
  animation: marquee 30s linear infinite;
  will-change: transform;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > * { flex-shrink: 0; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---- Floating element ---- */
.float-y {
  animation: floatY 6s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* ---- Glow pulse on focus ---- */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244,196,48,.0); }
  50% { box-shadow: 0 0 30px 4px rgba(244,196,48,.35); }
}
.glow-pulse { animation: glowPulse 3s ease-in-out infinite; }

/* ---- Scroll-linked parallax targets ---- */
.parallax-slow  { transition: transform .1s linear; will-change: transform; }
.parallax-fast  { transition: transform .1s linear; will-change: transform; }

/* ---- Gradient text ---- */
.text-gradient {
  background: linear-gradient(135deg, var(--rm-royal), var(--rm-sky), var(--rm-gold));
  background-size: 200% 200%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  animation: gradientShift 8s ease-in-out infinite;
}
@keyframes gradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  body::before,
  .hero::before, .hero::after, .hero-orb,
  .scroll-cue, .marquee-track, .text-gradient,
  .bg-aurora::before, .bg-aurora::after, .bg-aurora > .aurora-shimmer,
  .section-dark, .section-dark::before, .section-dark::after,
  .bg-royal-gradient, .bg-royal-gradient::before, .bg-royal-gradient::after,
  .bg-deep-gradient,
  .booking-side::before, .booking-side::after,
  .newsletter-band::before, .newsletter-band::after,
  .site-footer::before,
  .admin-login::before, .admin-login::after,
  .showreel-poster .play-btn { animation: none !important; }
  .tilt { transform: none !important; }
  [data-aos] { opacity: 1 !important; transform: none !important; }
}