/* ============================================================
   RIDE GOAT — Motion & Parallax Engine v1
   Gaming-site-inspired scroll choreography on the light theme.
   Pairs with assets/rg-motion.js
   ============================================================ */

:root {
  --rg-purple: #6210fe;
  --rg-navy: #190e3f;
  --rg-orange: #f58220;
  --rg-pink: #fe003c;
  --rg-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Scroll progress bar ---------- */
.rgm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, var(--rg-purple), var(--rg-orange));
  z-index: 2147483000;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* ---------- Scroll reveals ---------- */
.rgm-reveal,
.rgm-reveal-left,
.rgm-reveal-right,
.rgm-reveal-scale {
  opacity: 0;
  transition: opacity 0.9s var(--rg-ease), transform 0.9s var(--rg-ease);
  will-change: opacity, transform;
}
.rgm-reveal        { transform: translateY(34px); }
.rgm-reveal-left   { transform: translateX(-44px); }
.rgm-reveal-right  { transform: translateX(44px); }
.rgm-reveal-scale  { transform: scale(0.93); }

.rgm-in {
  opacity: 1 !important;
  transform: none !important;
}

/* stagger helpers */
.rgm-d1 { transition-delay: 0.1s; }
.rgm-d2 { transition-delay: 0.2s; }
.rgm-d3 { transition-delay: 0.3s; }
.rgm-d4 { transition-delay: 0.4s; }
.rgm-d5 { transition-delay: 0.5s; }
.rgm-d6 { transition-delay: 0.6s; }

/* ---------- Parallax layers ---------- */
[data-prlx] { will-change: transform; }

/* ---------- Tilt cards (mouse-tracking 3D) ---------- */
.rgm-tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--rg-ease), box-shadow 0.35s var(--rg-ease);
}
.rgm-tilt:hover {
  box-shadow: 0 24px 60px -18px rgba(98, 16, 254, 0.28);
}
.rgm-tilt > * { transform: translateZ(24px); }

/* ---------- Floating ambient blobs ---------- */
.rgm-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
  animation: rgmFloat 14s ease-in-out infinite alternate;
}
.rgm-blob.purple { background: radial-gradient(circle, rgba(98,16,254,0.45), transparent 65%); }
.rgm-blob.orange { background: radial-gradient(circle, rgba(245,130,32,0.4), transparent 65%); }
.rgm-blob.pink   { background: radial-gradient(circle, rgba(254,0,60,0.3), transparent 65%); }

@keyframes rgmFloat {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(40px, -30px) scale(1.08); }
  100% { transform: translate(-30px, 25px) scale(0.95); }
}

/* gentle bob for hero objects */
.rgm-bob { animation: rgmBob 5.5s ease-in-out infinite; }
@keyframes rgmBob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-18px) rotate(1.5deg); }
}

/* ---------- Marquee strip ---------- */
.rgm-marquee {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.rgm-marquee-track {
  display: inline-flex;
  align-items: center;
  gap: 70px;
  padding-right: 70px;
  animation: rgmMarquee 32s linear infinite;
  will-change: transform;
}
.rgm-marquee:hover .rgm-marquee-track { animation-play-state: paused; }
@keyframes rgmMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Gradient animated text ---------- */
.rgm-gradient-text {
  background: linear-gradient(110deg, var(--rg-navy) 20%, var(--rg-purple) 55%, #8b45ff 85%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rgmShine 6s linear infinite;
}
@keyframes rgmShine {
  to { background-position: 200% center; }
}

/* ---------- Counter ---------- */
[data-count] { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion: kill everything ---------- */
@media (prefers-reduced-motion: reduce) {
  .rgm-reveal, .rgm-reveal-left, .rgm-reveal-right, .rgm-reveal-scale {
    opacity: 1; transform: none; transition: none;
  }
  .rgm-blob, .rgm-bob, .rgm-marquee-track, .rgm-gradient-text { animation: none; }
  [data-prlx] { transform: none !important; }
  .rgm-tilt { transition: none; }
}