/* =========================================================
   R3AP3R PRODUCTIONS - PREMIUM ANIMATION PACK
   Drop into: /var/www/r3ap3rproductions/assets/css/reaper-animations.css
   ========================================================= */

:root {
  --r3-cyan: #00eaff;
  --r3-cyan-soft: rgba(0, 234, 255, 0.18);
  --r3-violet: #7a2cff;
  --r3-violet-soft: rgba(122, 44, 255, 0.18);
  --r3-green: #38ffb3;
  --r3-bg: #050814;
  --r3-card: rgba(8, 14, 30, 0.76);
  --r3-border: rgba(0, 234, 255, 0.16);
  --r3-shadow: 0 0 25px rgba(0, 234, 255, 0.12), 0 0 60px rgba(122, 44, 255, 0.08);
}

html {
  scroll-behavior: smooth;
}

body.r3-animated {
  position: relative;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(0, 234, 255, 0.08), transparent 30%),
    radial-gradient(circle at 85% 20%, rgba(122, 44, 255, 0.08), transparent 35%),
    linear-gradient(180deg, #04070f 0%, #060b16 100%);
}

/* Background FX container */
.r3-ambient-bg {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* Cyber grid */
.r3-ambient-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 234, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 234, 255, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  opacity: 0.35;
  mask-image: radial-gradient(circle at center, black 45%, transparent 100%);
  animation: r3GridPulse 10s ease-in-out infinite;
}

/* Moving light sweep */
.r3-ambient-bg::after {
  content: "";
  position: absolute;
  inset: -10%;
  background: linear-gradient(
    120deg,
    rgba(0, 234, 255, 0.045) 0%,
    transparent 35%,
    rgba(122, 44, 255, 0.065) 70%,
    transparent 100%
  );
  animation: r3BackgroundSweep 14s linear infinite;
}

@keyframes r3GridPulse {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.42; }
}

@keyframes r3BackgroundSweep {
  0%   { transform: translateX(-4%) translateY(0); }
  50%  { transform: translateX(4%) translateY(-1%); }
  100% { transform: translateX(-4%) translateY(0); }
}

/* Floating glow orbs */
.r3-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.24;
  mix-blend-mode: screen;
}

.r3-orb-1 {
  width: 34vw;
  height: 34vw;
  background: rgba(0, 234, 255, 0.25);
  top: 10%;
  left: -6%;
  animation: r3FloatOrb1 18s ease-in-out infinite alternate;
}

.r3-orb-2 {
  width: 28vw;
  height: 28vw;
  background: rgba(122, 44, 255, 0.28);
  top: 8%;
  right: -5%;
  animation: r3FloatOrb2 20s ease-in-out infinite alternate;
}

.r3-orb-3 {
  width: 22vw;
  height: 22vw;
  background: rgba(56, 255, 179, 0.16);
  bottom: -4%;
  left: 35%;
  animation: r3FloatOrb3 24s ease-in-out infinite alternate;
}

@keyframes r3FloatOrb1 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(80px, 40px) scale(1.12); }
}

@keyframes r3FloatOrb2 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-60px, 60px) scale(1.08); }
}

@keyframes r3FloatOrb3 {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(-40px, -50px) scale(1.14); }
}

/* Reaper particle canvas */
#r3ReaperParticles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.38;
}

/* Keep real page content above animation background */
body.r3-animated header,
body.r3-animated nav,
body.r3-animated main,
body.r3-animated section,
body.r3-animated footer,
body.r3-animated .container,
body.r3-animated .wrapper,
body.r3-animated .content,
body.r3-animated .page,
body.r3-animated .navbar {
  position: relative;
  z-index: 2;
}

/* Premium glass card enhancement */
body.r3-animated .card,
body.r3-animated .feature-card,
body.r3-animated .hero-card,
body.r3-animated .info-card,
body.r3-animated .panel,
body.r3-animated .box,
body.r3-animated .service-card,
body.r3-animated .product-card,
body.r3-animated .forum-card,
body.r3-animated .download-card,
body.r3-animated .support-card {
  position: relative;
  background: linear-gradient(145deg, rgba(8, 16, 32, 0.84), rgba(17, 12, 30, 0.78));
  border: 1px solid var(--r3-border);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--r3-shadow);
  overflow: hidden;
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease;
}

body.r3-animated .card::before,
body.r3-animated .feature-card::before,
body.r3-animated .hero-card::before,
body.r3-animated .info-card::before,
body.r3-animated .panel::before,
body.r3-animated .box::before,
body.r3-animated .service-card::before,
body.r3-animated .product-card::before,
body.r3-animated .forum-card::before,
body.r3-animated .download-card::before,
body.r3-animated .support-card::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(0, 234, 255, 0.48),
    rgba(0, 234, 255, 0.08),
    rgba(122, 44, 255, 0.36),
    rgba(56, 255, 179, 0.20)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
  opacity: 0.78;
}

body.r3-animated .card::after,
body.r3-animated .feature-card::after,
body.r3-animated .hero-card::after,
body.r3-animated .info-card::after,
body.r3-animated .panel::after,
body.r3-animated .box::after,
body.r3-animated .service-card::after,
body.r3-animated .product-card::after,
body.r3-animated .forum-card::after,
body.r3-animated .download-card::after,
body.r3-animated .support-card::after {
  content: "";
  position: absolute;
  top: -120%;
  left: -35%;
  width: 48%;
  height: 320%;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(25deg);
  transition: transform 0.85s ease, opacity 0.85s ease;
  opacity: 0;
  pointer-events: none;
}

body.r3-animated .card:hover,
body.r3-animated .feature-card:hover,
body.r3-animated .hero-card:hover,
body.r3-animated .info-card:hover,
body.r3-animated .panel:hover,
body.r3-animated .box:hover,
body.r3-animated .service-card:hover,
body.r3-animated .product-card:hover,
body.r3-animated .forum-card:hover,
body.r3-animated .download-card:hover,
body.r3-animated .support-card:hover {
  transform: translateY(-7px) scale(1.01);
  box-shadow:
    0 0 25px rgba(0, 234, 255, 0.20),
    0 0 70px rgba(122, 44, 255, 0.14);
  border-color: rgba(0, 234, 255, 0.35);
}

body.r3-animated .card:hover::after,
body.r3-animated .feature-card:hover::after,
body.r3-animated .hero-card:hover::after,
body.r3-animated .info-card:hover::after,
body.r3-animated .panel:hover::after,
body.r3-animated .box:hover::after,
body.r3-animated .service-card:hover::after,
body.r3-animated .product-card:hover::after,
body.r3-animated .forum-card:hover::after,
body.r3-animated .download-card:hover::after,
body.r3-animated .support-card:hover::after {
  transform: translateX(270%) rotate(25deg);
  opacity: 1;
}

/* Hero glow breathing */
body.r3-animated .hero,
body.r3-animated .hero-card,
body.r3-animated .hero-panel,
body.r3-animated .main-hero {
  animation: r3HeroPulse 6s ease-in-out infinite;
}

@keyframes r3HeroPulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(0, 234, 255, 0.10),
      0 0 50px rgba(122, 44, 255, 0.08);
  }
  50% {
    box-shadow:
      0 0 28px rgba(0, 234, 255, 0.18),
      0 0 76px rgba(122, 44, 255, 0.12);
  }
}

/* Buttons: premium shine sweep */
body.r3-animated button,
body.r3-animated .btn,
body.r3-animated a.btn,
body.r3-animated input[type="submit"],
body.r3-animated .button,
body.r3-animated a.button {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    filter 0.25s ease;
}

body.r3-animated button::after,
body.r3-animated .btn::after,
body.r3-animated a.btn::after,
body.r3-animated input[type="submit"]::after,
body.r3-animated .button::after,
body.r3-animated a.button::after {
  content: "";
  position: absolute;
  top: -55%;
  left: -130%;
  width: 70%;
  height: 230%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
  transform: rotate(20deg);
  transition: left 0.62s ease;
  pointer-events: none;
}

body.r3-animated button:hover,
body.r3-animated .btn:hover,
body.r3-animated a.btn:hover,
body.r3-animated input[type="submit"]:hover,
body.r3-animated .button:hover,
body.r3-animated a.button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
  box-shadow:
    0 0 18px rgba(0, 234, 255, 0.24),
    0 0 38px rgba(122, 44, 255, 0.14);
}

body.r3-animated button:hover::after,
body.r3-animated .btn:hover::after,
body.r3-animated a.btn:hover::after,
body.r3-animated input[type="submit"]:hover::after,
body.r3-animated .button:hover::after,
body.r3-animated a.button:hover::after {
  left: 165%;
}

/* Nav underline glow */
body.r3-animated nav a,
body.r3-animated .nav a,
body.r3-animated .navbar a {
  position: relative;
  transition: color 0.25s ease, text-shadow 0.25s ease, transform 0.25s ease;
}

body.r3-animated nav a::after,
body.r3-animated .nav a::after,
body.r3-animated .navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, var(--r3-cyan), var(--r3-violet));
  box-shadow: 0 0 12px rgba(0, 234, 255, 0.5);
  transition: width 0.3s ease;
}

body.r3-animated nav a:hover,
body.r3-animated .nav a:hover,
body.r3-animated .navbar a:hover {
  text-shadow: 0 0 10px rgba(0, 234, 255, 0.38);
}

body.r3-animated nav a:hover::after,
body.r3-animated nav a.active::after,
body.r3-animated .nav a:hover::after,
body.r3-animated .nav a.active::after,
body.r3-animated .navbar a:hover::after,
body.r3-animated .navbar a.active::after {
  width: 100%;
}

/* Scroll reveal */
.r3-reveal {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transition:
    opacity 0.8s ease,
    transform 0.8s ease;
  will-change: transform, opacity;
}

.r3-reveal.r3-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Mouse aura */
.r3-cursor-aura {
  position: fixed;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  background: radial-gradient(circle, rgba(0, 234, 255, 0.10), rgba(122, 44, 255, 0.045), transparent 68%);
  transform: translate(-50%, -50%);
  transition: opacity 0.35s ease;
  filter: blur(8px);
}

/* Loading screen */
.r3-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background:
    radial-gradient(circle at center, rgba(0, 234, 255, 0.10), transparent 36%),
    linear-gradient(180deg, #03050b, #070c18);
  display: grid;
  place-items: center;
  transition: opacity 0.65s ease, visibility 0.65s ease;
}

.r3-loader.r3-loader-hide {
  opacity: 0;
  visibility: hidden;
}

.r3-loader-inner {
  text-align: center;
  color: #f5f7ff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.r3-loader-mark {
  width: 74px;
  height: 74px;
  margin: 0 auto 18px;
  border: 1px solid rgba(0, 234, 255, 0.35);
  border-top-color: rgba(122, 44, 255, 0.85);
  border-radius: 50%;
  box-shadow:
    0 0 20px rgba(0, 234, 255, 0.25),
    inset 0 0 22px rgba(122, 44, 255, 0.18);
  animation: r3LoaderSpin 1.25s linear infinite;
}

.r3-loader-text {
  font-size: 13px;
  color: rgba(245, 247, 255, 0.82);
  text-shadow: 0 0 12px rgba(0, 234, 255, 0.42);
}

@keyframes r3LoaderSpin {
  to { transform: rotate(360deg); }
}

/* Optional text glow accents */
body.r3-animated h1,
body.r3-animated .logo,
body.r3-animated .brand,
body.r3-animated .site-title {
  text-shadow:
    0 0 14px rgba(0, 234, 255, 0.16),
    0 0 34px rgba(122, 44, 255, 0.12);
}

/* Respect accessibility reduced motion */
@media (prefers-reduced-motion: reduce) {
  .r3-animated *,
  .r3-animated *::before,
  .r3-animated *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .r3-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  .r3-loader {
    display: none !important;
  }
}

/* Mobile tuning */
@media (max-width: 768px) {
  .r3-orb {
    filter: blur(70px);
    opacity: 0.18;
  }

  .r3-cursor-aura {
    display: none;
  }

  #r3ReaperParticles {
    opacity: 0.24;
  }
}