/* ================================================================
   RUNNING GREEN MOTION DESIGN SYSTEM
   Ambient, reactive, system-feel motion layer
   Only active when data-theme="running-green"
   Controlled by data-motion="off|subtle|enhanced"
   ================================================================ */

/* --- Motion intensity OFF: disable everything --- */
[data-motion="off"] .rg-motion-bg,
[data-motion="off"] .rg-ambient-dot,
[data-motion="off"] .rg-ambient-line,
[data-motion="off"] .rg-scanline-overlay { display: none !important; }
[data-motion="off"] * { animation-duration: 0s !important; }
[data-motion="off"] .rg-scan-sweep::after { display: none !important; }

/* --- Respect prefers-reduced-motion --- */
@media (prefers-reduced-motion: reduce) {
  .rg-motion-bg,
  .rg-ambient-dot,
  .rg-ambient-line,
  .rg-scanline-overlay { display: none !important; }
  [data-theme="running-green"] * { animation-duration: 0s !important; }
}

/* ================================================================
   1. BACKGROUND MOTION LAYER
   Slow, almost-invisible ambient system activity
   ================================================================ */

[data-theme="running-green"] .rg-motion-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Subtle noise grain texture via SVG filter */
[data-theme="running-green"] .rg-motion-bg::before {
  content: '';
  position: absolute;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  animation: rg-grain 8s steps(4) infinite;
  will-change: transform;
}

/* Gradient shift overlay */
[data-theme="running-green"] .rg-motion-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(183,255,0,0.03) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(11,11,15,0.4) 0%, transparent 60%);
  animation: rg-gradient-shift 20s ease-in-out infinite alternate;
  will-change: opacity;
}

/* Faint scanlines overlay */
[data-theme="running-green"] .rg-scanline-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(183,255,0,0.008) 2px,
    rgba(183,255,0,0.008) 4px
  );
  opacity: 0.5;
}

/* Enhanced mode: slightly more visible bg */
[data-motion="enhanced"][data-theme="running-green"] .rg-motion-bg::before { opacity: 0.04; }
[data-motion="enhanced"][data-theme="running-green"] .rg-motion-bg::after {
  background: radial-gradient(ellipse at 30% 50%, rgba(183,255,0,0.05) 0%, transparent 50%),
              radial-gradient(ellipse at 70% 80%, rgba(11,11,15,0.5) 0%, transparent 60%);
}
[data-motion="enhanced"][data-theme="running-green"] .rg-scanline-overlay { opacity: 0.8; }

@keyframes rg-grain {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-5%, -5%); }
  50% { transform: translate(5%, -10%); }
  75% { transform: translate(-10%, 5%); }
  100% { transform: translate(0, 0); }
}

@keyframes rg-gradient-shift {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.7; }
}

/* ================================================================
   2. MICRO INTERACTION SYSTEM
   Subtle hover responses on interactive elements
   ================================================================ */

[data-theme="running-green"] .nav-item,
[data-theme="running-green"] .sidebar-nav-item,
[data-theme="running-green"] .btn-primary,
[data-theme="running-green"] .btn-secondary,
[data-theme="running-green"] .btn-post,
[data-theme="running-green"] .btn-ghost,
[data-theme="running-green"] .post-action-btn,
[data-theme="running-green"] .filter-btn,
[data-theme="running-green"] .feed-tab,
[data-theme="running-green"] .game-card,
[data-theme="running-green"] .lfg-card,
[data-theme="running-green"] .clan-card,
[data-theme="running-green"] .people-card,
[data-theme="running-green"] .clip-card,
[data-theme="running-green"] .widget,
[data-theme="running-green"] .reaction-pill,
[data-theme="running-green"] .post-card,
[data-theme="running-green"] .conv-item,
[data-theme="running-green"] .notif-item,
[data-theme="running-green"] .trend-item,
[data-theme="running-green"] .friend-item {
  transition: all 0.15s ease-out;
}

/* Hover brightness + green tint */
[data-theme="running-green"] .post-card:hover {
  filter: brightness(1.04);
}

[data-theme="running-green"] .game-card:hover,
[data-theme="running-green"] .lfg-card:hover,
[data-theme="running-green"] .clan-card:hover,
[data-theme="running-green"] .people-card:hover,
[data-theme="running-green"] .widget:hover {
  filter: brightness(1.05);
}

[data-motion="enhanced"][data-theme="running-green"] .post-card:hover { filter: brightness(1.06); }
[data-motion="enhanced"][data-theme="running-green"] .game-card:hover,
[data-motion="enhanced"][data-theme="running-green"] .lfg-card:hover,
[data-motion="enhanced"][data-theme="running-green"] .clan-card:hover,
[data-motion="enhanced"][data-theme="running-green"] .people-card:hover { filter: brightness(1.08); }

/* ================================================================
   3. SCAN SWEEP EFFECT (Signature Interaction)
   Thin scan line on hover for key elements
   ================================================================ */

[data-theme="running-green"] .rg-scan-sweep {
  position: relative;
  overflow: hidden;
}

[data-theme="running-green"] .rg-scan-sweep::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 40%,
    rgba(183,255,0,0.06) 48%,
    rgba(183,255,0,0.1) 50%,
    rgba(183,255,0,0.06) 52%,
    transparent 60%,
    transparent 100%
  );
  pointer-events: none;
  transition: none;
  z-index: 1;
}

[data-theme="running-green"] .rg-scan-sweep:hover::after {
  animation: rg-scan-sweep 0.4s ease-out forwards;
}

[data-motion="enhanced"][data-theme="running-green"] .rg-scan-sweep::after {
  background: linear-gradient(
    90deg,
    transparent 0%,
    transparent 38%,
    rgba(183,255,0,0.08) 46%,
    rgba(183,255,0,0.14) 50%,
    rgba(183,255,0,0.08) 54%,
    transparent 62%,
    transparent 100%
  );
}

@keyframes rg-scan-sweep {
  0% { left: -100%; }
  100% { left: 100%; }
}

/* ================================================================
   4. STATUS INDICATORS (Living UI)
   Soft pulsing for online/live/trending markers
   ================================================================ */

[data-theme="running-green"] .friend-status-dot.online,
[data-theme="running-green"] .rg-status-live {
  animation: rg-status-pulse 2s ease-in-out infinite;
}

[data-theme="running-green"] .rg-status-trending {
  animation: rg-status-pulse 1.8s ease-in-out infinite;
  animation-delay: -0.4s;
}

@keyframes rg-status-pulse {
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; }
}

/* Enhanced mode: add slight scale to pulse */
[data-motion="enhanced"][data-theme="running-green"] .friend-status-dot.online {
  animation: rg-status-pulse-enhanced 1.8s ease-in-out infinite;
}

@keyframes rg-status-pulse-enhanced {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}

/* ================================================================
   5. MICRO GLITCH BEHAVIOR (Controlled)
   Rare, tiny horizontal jitter on active elements
   ================================================================ */

[data-theme="running-green"] .nav-item.active,
[data-theme="running-green"] .sidebar-nav-item.active,
[data-theme="running-green"] .filter-btn.active,
[data-theme="running-green"] .feed-tab.active {
  animation: rg-micro-glitch 8s step-end infinite;
}

@keyframes rg-micro-glitch {
  0%, 2% { transform: translateX(0); }
  2.1%, 2.3% { transform: translateX(1px); }
  2.4%, 2.6% { transform: translateX(-1px); }
  2.7%, 100% { transform: translateX(0); }
}

/* Enhanced: slightly more frequent glitch */
[data-motion="enhanced"][data-theme="running-green"] .nav-item.active,
[data-motion="enhanced"][data-theme="running-green"] .sidebar-nav-item.active,
[data-motion="enhanced"][data-theme="running-green"] .filter-btn.active,
[data-motion="enhanced"][data-theme="running-green"] .feed-tab.active {
  animation: rg-micro-glitch-enhanced 5s step-end infinite;
}

@keyframes rg-micro-glitch-enhanced {
  0%, 3% { transform: translateX(0); }
  3.1%, 3.4% { transform: translateX(1px); }
  3.5%, 3.8% { transform: translateX(-2px); }
  3.9%, 6% { transform: translateX(1px); }
  6.1%, 100% { transform: translateX(0); }
}

/* ================================================================
   6. BORDERS & DIVIDERS (Animated Subtlety)
   Shimmer on key dividers/borders
   ================================================================ */

[data-theme="running-green"] .rg-border-shimmer {
  position: relative;
}

[data-theme="running-green"] .rg-border-shimmer::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    #1A1A22 0%,
    #1A1A22 30%,
    rgba(183,255,0,0.12) 50%,
    #1A1A22 70%,
    #1A1A22 100%
  );
  background-size: 200% 100%;
  animation: rg-border-shimmer 6s ease-in-out infinite;
}

@keyframes rg-border-shimmer {
  0%, 100% { background-position: 200% 0; }
  50% { background-position: -200% 0; }
}

[data-motion="enhanced"][data-theme="running-green"] .rg-border-shimmer::before {
  background: linear-gradient(
    90deg,
    #1A1A22 0%,
    #1A1A22 25%,
    rgba(183,255,0,0.18) 50%,
    #1A1A22 75%,
    #1A1A22 100%
  );
  background-size: 200% 100%;
  animation-duration: 4s;
}

/* ================================================================
   7. PAGE / SECTION TRANSITIONS
   Smooth fade + slight upward motion between sections
   ================================================================ */

[data-theme="running-green"] .section {
  animation: none;
}

[data-theme="running-green"] .section.active.rg-section-enter {
  animation: rg-section-in 0.2s ease-out forwards;
}

@keyframes rg-section-in {
  0% {
    opacity: 0;
    transform: translateY(3px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

[data-motion="enhanced"][data-theme="running-green"] .section.active.rg-section-enter {
  animation: rg-section-in-enhanced 0.25s ease-out forwards;
}

@keyframes rg-section-in-enhanced {
  0% {
    opacity: 0;
    transform: translateY(4px);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* ================================================================
   8. DATA SYSTEM DETAILS (Ambient UI Elements)
   Small visual elements that imply a system layer
   ================================================================ */

[data-theme="running-green"] .rg-ambient-dot {
  position: fixed;
  width: 2px;
  height: 2px;
  background: rgba(183,255,0,0.15);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  animation: rg-ambient-flicker 4s ease-in-out infinite;
}

[data-theme="running-green"] .rg-ambient-dot:nth-child(2) {
  animation-delay: -1.5s;
  animation-duration: 5s;
}

[data-theme="running-green"] .rg-ambient-dot:nth-child(3) {
  animation-delay: -3s;
  animation-duration: 6s;
}

[data-theme="running-green"] .rg-ambient-dot:nth-child(4) {
  animation-delay: -0.8s;
  animation-duration: 4.5s;
}

[data-theme="running-green"] .rg-ambient-line {
  position: fixed;
  width: 20px;
  height: 1px;
  background: rgba(183,255,0,0.06);
  pointer-events: none;
  z-index: 0;
  animation: rg-ambient-line-fade 8s ease-in-out infinite;
}

[data-theme="running-green"] .rg-ambient-line:nth-child(2) {
  animation-delay: -3s;
  width: 14px;
}

@keyframes rg-ambient-flicker {
  0%, 100% { opacity: 0.15; }
  30% { opacity: 0.4; }
  32% { opacity: 0.1; }
  34% { opacity: 0.35; }
  70% { opacity: 0.2; }
}

@keyframes rg-ambient-line-fade {
  0%, 100% { opacity: 0; transform: scaleX(0.5); }
  40%, 60% { opacity: 1; transform: scaleX(1); }
}

/* Enhanced: more visible ambient elements */
[data-motion="enhanced"][data-theme="running-green"] .rg-ambient-dot {
  width: 3px;
  height: 3px;
  background: rgba(183,255,0,0.2);
}

[data-motion="enhanced"][data-theme="running-green"] .rg-ambient-line {
  background: rgba(183,255,0,0.1);
  width: 28px;
}

/* ================================================================
   MOTION INTENSITY SETTING UI
   ================================================================ */

.motion-intensity-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.motion-intensity-btn {
  flex: 1;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s ease-out;
  text-align: center;
}

.motion-intensity-btn:hover {
  background: rgba(183,255,0,0.04);
  border-color: rgba(183,255,0,0.15);
  color: var(--text-primary);
}

.motion-intensity-btn.active {
  background: rgba(183,255,0,0.1);
  border-color: rgba(183,255,0,0.25);
  color: #B7FF00;
}

/* Non-running-green themes: generic active style */
[data-theme="dark"] .motion-intensity-btn.active,
[data-theme="light"] .motion-intensity-btn.active {
  background: rgba(139,92,246,0.1);
  border-color: rgba(139,92,246,0.25);
  color: var(--accent);
}