/**
 * REAFZ Enhanced Aesthetics - Dopamine CSS
 * Juicy animations, glows, smooth transitions, satisfying feedback
 */

/* ═══════════════════════════════════════════════════════════
   GLOBAL ENHANCEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Better text rendering */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ═══════════════════════════════════════════════════════════
   GLOW EFFECTS
   ═══════════════════════════════════════════════════════════ */

/* Button glow on hover */
button:hover,
.reafz-uniform-access-btn:hover {
  box-shadow: 
    0 0 20px rgba(255, 68, 68, 0.6),
    0 0 40px rgba(255, 68, 68, 0.4),
    0 0 60px rgba(255, 68, 68, 0.2),
    0 4px 20px rgba(0, 0, 0, 0.3);
  transform: translateY(-2px) scale(1.02);
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Card glow on hover */
.reafz-uniform-card:hover {
  box-shadow: 
    0 0 30px rgba(0, 221, 255, 0.5),
    0 0 60px rgba(0, 221, 255, 0.3),
    0 8px 30px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px) scale(1.03);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Active state glow */
button:active,
.reafz-uniform-access-btn:active {
  box-shadow: 
    0 0 15px rgba(255, 68, 68, 0.8),
    0 2px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(1px) scale(0.98);
  transition: all 0.1s ease;
}

/* ═══════════════════════════════════════════════════════════
   RAINBOW SHIMMER EFFECT
   ═══════════════════════════════════════════════════════════ */

@keyframes rainbow-shimmer {
  0%, 100% { 
    filter: hue-rotate(0deg) brightness(1.1);
    text-shadow: 0 0 20px currentColor;
  }
  50% { 
    filter: hue-rotate(360deg) brightness(1.3);
    text-shadow: 0 0 30px currentColor;
  }
}

/* Apply to special elements */
.reafz-shop-title,
h1, h2 {
  animation: rainbow-shimmer 3s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   FLOATING ANIMATION
   ═══════════════════════════════════════════════════════════ */

@keyframes float {
  0%, 100% { 
    transform: translateY(0px);
  }
  50% { 
    transform: translateY(-10px);
  }
}

.reafz-uniform-card {
  animation: float 3s ease-in-out infinite;
}

.reafz-uniform-card:nth-child(2n) {
  animation-delay: 0.5s;
}

.reafz-uniform-card:nth-child(3n) {
  animation-delay: 1s;
}

/* ═══════════════════════════════════════════════════════════
   PULSE EFFECT
   ═══════════════════════════════════════════════════════════ */

@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(255, 68, 68, 0.5);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(255, 68, 68, 0.8),
      0 0 40px rgba(255, 68, 68, 0.6),
      0 0 60px rgba(255, 68, 68, 0.4);
  }
}

.reafz-uniform-access-btn.shake-attention {
  animation: reafz-btn-shake 0.9s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite,
             pulse-glow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED TRANSITIONS
   ═══════════════════════════════════════════════════════════ */

/* Smooth all transitions */
* {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Enhanced button transitions */
button, .reafz-uniform-access-btn, .reafz-uniform-card {
  transition: 
    transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.3s ease,
    filter 0.3s ease,
    opacity 0.3s ease;
}

/* ═══════════════════════════════════════════════════════════
   PARTICLE TRAIL EFFECT (for cursor)
   ═══════════════════════════════════════════════════════════ */

#reafz-cursor::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(0, 221, 255, 0.3) 0%, transparent 70%);
  opacity: 0.5;
  animation: cursor-glow 2s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes cursor-glow {
  0%, 100% { 
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.5;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.2);
    opacity: 0.8;
  }
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED BEAM EFFECT
   ═══════════════════════════════════════════════════════════ */

@keyframes reafz-beam-fire {
  0% {
    opacity: 0;
    transform: translate(var(--beam-x), var(--beam-y)) rotate(var(--beam-angle)) scaleX(0);
  }
  20% {
    opacity: 1;
    transform: translate(var(--beam-x), var(--beam-y)) rotate(var(--beam-angle)) scaleX(0.5);
  }
  100% {
    opacity: 0;
    transform: translate(var(--beam-x), var(--beam-y)) rotate(var(--beam-angle)) scaleX(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   SCREEN SHAKE VARS
   ═══════════════════════════════════════════════════════════ */

:root {
  --shake-x: 0px;
  --shake-y: 0px;
}

/* ═══════════════════════════════════════════════════════════
   PARTICLE CANVAS STYLING
   ═══════════════════════════════════════════════════════════ */

#reafz-particles {
  filter: blur(0.5px); /* Slight blur for softer particles */
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED HITMARKER
   ═══════════════════════════════════════════════════════════ */

@keyframes reafz-hit-pop {
  0% { 
    transform: translate(-50%, -50%) scale(0.5) rotate(0deg);
    opacity: 0;
  }
  50% { 
    transform: translate(-50%, -50%) scale(1.3) rotate(180deg);
    opacity: 1;
  }
  100% { 
    transform: translate(-50%, -50%) scale(1) rotate(360deg);
    opacity: 0;
  }
}

/* ═══════════════════════════════════════════════════════════
   FIRE EFFECT ENHANCEMENT
   ═══════════════════════════════════════════════════════════ */

@keyframes reafz-fire-pop {
  0% { 
    transform: scale(0) rotate(0deg);
    opacity: 0;
    filter: brightness(1);
  }
  30% { 
    transform: scale(1.2) rotate(90deg);
    opacity: 1;
    filter: brightness(1.5);
  }
  100% { 
    transform: scale(0.8) rotate(180deg);
    opacity: 0;
    filter: brightness(0.5);
  }
}

/* ═══════════════════════════════════════════════════════════
   SCROLL INDICATOR GLOW
   ═══════════════════════════════════════════════════════════ */

@keyframes scroll-glow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(0, 221, 255, 0.5);
  }
  50% {
    box-shadow: 0 0 30px rgba(0, 221, 255, 0.8);
  }
}

/* ═══════════════════════════════════════════════════════════
   TEXT GLOW EFFECT
   ═══════════════════════════════════════════════════════════ */

h1, h2, h3, .reafz-shop-title {
  text-shadow: 
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════
   ENHANCED DETAIL VIEW
   ═══════════════════════════════════════════════════════════ */

.reafz-detail-card {
  animation: detail-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes detail-enter {
  0% {
    transform: scale(0.8) translateY(50px);
    opacity: 0;
  }
  100% {
    transform: scale(1) translateY(0);
    opacity: 1;
  }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  /* Reduce animation intensity on mobile */
  .reafz-uniform-card {
    animation: none;
  }
  
  button:hover,
  .reafz-uniform-access-btn:hover {
    transform: scale(1);
  }
}

/* ═══════════════════════════════════════════════════════════
   PERFORMANCE OPTIMIZATIONS
   ═══════════════════════════════════════════════════════════ */

/* Use GPU acceleration for animations */
.reafz-uniform-card,
button,
.reafz-uniform-access-btn,
#reafz-cursor {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════
   LOADING SHIMMER EFFECT
   ═══════════════════════════════════════════════════════════ */

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.loading-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite;
}