/* =================================================================
   MOTION LIBRARY — used by all 9 variants
   scroll-reveal, marquee, magnetic, parallax, counter, 3D tilt,
   gradient mesh, status bar pulse, AI live counter
   ================================================================= */

/* --- scroll-reveal: any element with [data-reveal] starts hidden --- */
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out); }
[data-reveal="up"]    { transform: translateY(20px); }
[data-reveal="down"]  { transform: translateY(-20px); }
[data-reveal="left"]  { transform: translateX(-24px); }
[data-reveal="right"] { transform: translateX(24px); }
[data-reveal="scale"] { transform: scale(0.96); }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* --- stagger: child elements appear in sequence --- */
[data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); }
[data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger].is-in > *:nth-child(1)  { transition-delay: 0ms; }
[data-reveal-stagger].is-in > *:nth-child(2)  { transition-delay: 60ms; }
[data-reveal-stagger].is-in > *:nth-child(3)  { transition-delay: 120ms; }
[data-reveal-stagger].is-in > *:nth-child(4)  { transition-delay: 180ms; }
[data-reveal-stagger].is-in > *:nth-child(5)  { transition-delay: 240ms; }
[data-reveal-stagger].is-in > *:nth-child(6)  { transition-delay: 300ms; }
[data-reveal-stagger].is-in > *:nth-child(7)  { transition-delay: 360ms; }
[data-reveal-stagger].is-in > *:nth-child(8)  { transition-delay: 420ms; }
[data-reveal-stagger].is-in > *:nth-child(9)  { transition-delay: 480ms; }
[data-reveal-stagger].is-in > *:nth-child(10) { transition-delay: 540ms; }
[data-reveal-stagger].is-in > *:nth-child(11) { transition-delay: 600ms; }
[data-reveal-stagger].is-in > *:nth-child(12) { transition-delay: 660ms; }

/* --- marquee (horizontal scroll) --- */
.rp-marquee {
  display: flex; gap: var(--sp-8);
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.rp-marquee__track {
  display: flex; gap: var(--sp-8); flex-shrink: 0; min-width: 100%;
  animation: rp-marquee 40s linear infinite;
}
.rp-marquee__item {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-18); font-weight: 500; white-space: nowrap;
  color: var(--fg-muted);
  font-feature-settings: "ss01";
}
.rp-marquee__item strong { color: var(--fg); font-weight: 600; }
.rp-marquee__item::before { content: "✦"; color: var(--rp-orange); font-size: 0.7em; }
@keyframes rp-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* --- magnetic hover (used on CTAs) --- */
.rp-magnetic { display: inline-block; transition: transform 200ms var(--ease-out); }

/* --- 3D card tilt --- */
.rp-tilt {
  transform-style: preserve-3d;
  transition: transform 400ms var(--ease-out), box-shadow 400ms var(--ease-out);
  will-change: transform;
}
.rp-tilt:hover { transform: perspective(1200px) rotateX(2deg) rotateY(-2deg) translateZ(0); }
.rp-tilt__inner { transform: translateZ(40px); }

/* --- count-up number (used for stats) --- */
.rp-count { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* --- status pulse (used in AI status bar) --- */
.rp-pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #10B981; position: relative;
}
.rp-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%;
  background: #10B981; opacity: 0.4;
  animation: rp-pulse 2s var(--ease) infinite;
}
@keyframes rp-pulse {
  0%   { transform: scale(0.6); opacity: 0.6; }
  100% { transform: scale(2.4); opacity: 0; }
}

/* --- gradient mesh background (used in glass / spatial / y2k) --- */
.rp-mesh {
  position: relative; overflow: hidden; isolation: isolate;
}
.rp-mesh::before, .rp-mesh::after {
  content: ""; position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: 0.4; pointer-events: none;
  animation: rp-mesh 20s ease-in-out infinite;
  z-index: -1;
}
.rp-mesh::before { width: 480px; height: 480px; background: var(--rp-orange); top: -120px; left: -120px; }
.rp-mesh::after  { width: 420px; height: 420px; background: #6366F1; bottom: -120px; right: -120px; animation-delay: -10s; }
@keyframes rp-mesh {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(60px, -40px) scale(1.1); }
}

/* --- noise / grain overlay (used in Y2K, glass, editorial) --- */
.rp-noise {
  position: relative; isolation: isolate;
}
.rp-noise::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity: 0.06;
  mix-blend-mode: overlay;
}

/* --- shimmer (loading state) --- */
@keyframes rp-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.rp-shimmer { background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent); background-size: 200% 100%; animation: rp-shimmer 2s linear infinite; }

/* --- kbd-style (used in AI prompt input) --- */
.rp-kbd {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 4px;
  background: var(--bg-soft); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 11px;
  color: var(--fg-muted);
}

/* --- "since 2009" tick mark (used in editorial) --- */
.rp-rule { display: block; width: 48px; height: 2px; background: var(--fg); margin: var(--sp-4) 0; }
.rp-rule--accent { background: var(--rp-orange); }

/* --- spinner (used in booking form submit) --- */
@keyframes rp-spin { to { transform: rotate(360deg); } }
.rp-spinner {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: rp-spin 0.6s linear infinite;
}

/* --- chrome / iridescent border (Y2K) --- */
.rp-chrome {
  background: linear-gradient(135deg,
    #E5E7EB 0%, #FFFFFF 25%, #DBEAFE 35%, #F0ABFC 50%, #DBEAFE 65%, #FFFFFF 75%, #E5E7EB 100%);
  background-size: 200% 200%;
  animation: rp-chrome 8s ease infinite;
}
@keyframes rp-chrome {
  0%, 100% { background-position: 0% 0%; }
  50%      { background-position: 100% 100%; }
}

/* --- halftone / dot pattern (Memphis) --- */
.rp-dots {
  background-image: radial-gradient(currentColor 1px, transparent 1.5px);
  background-size: 14px 14px;
  color: var(--fg-muted);
  opacity: 0.3;
}