/* Staking Tab Style Persistence Fix */
/* Created by Cuserob - Visual Creation & Interface Design 🎨✨ */

/* ========================================
   FIX STAKING ANIMATIONS ON TAB SWITCH
   ======================================== */

/* Ensure staking styles persist when switching tabs */
.tab-content[data-tab="staking-enhanced"],
#staking-enhanced {
  /* Force GPU acceleration */
  transform: translateZ(0);
  will-change: transform;

  /* Prevent style loss on display changes */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Keep energy field canvas active */
#energy-field-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  /* Force canvas to stay rendered */
  transform: translate3d(0, 0, 0);
  opacity: 0.3;
}

/* Fix text glow effects breaking */
.staking-header .cyber-title span {
  display: inline-block;
  position: relative;
}

.energy-text,
.pulse-text,
.glow-text {
  /* Ensure text effects don't break */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Prevent animation restart on tab switch */
.staking-enhanced *[class*="float"],
.staking-enhanced *[class*="pulse"],
.staking-enhanced *[class*="spin"] {
  animation-play-state: running !important;
}

/* Energy orbs persistence */
.floating-energy-orbs {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Keep orbs visible */
  opacity: 1 !important;
  visibility: visible !important;
}

/* Fix energy stats panel layout */
.energy-stats-panel {
  /* Prevent reflow on tab switch */
  min-height: 200px;
  contain: layout;
}

.energy-metric {
  /* Maintain metric card dimensions */
  min-height: 180px;
  transform: translateZ(0);
}

/* Personal dashboard persistence */
.personal-energy-dashboard {
  /* Prevent collapse */
  min-height: 400px;
}

/* Energy pools grid stability */
.energy-pools-grid {
  /* Prevent grid reflow */
  contain: layout style;
  min-height: 600px;
}

.energy-pool-card {
  /* Keep cards stable */
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ========================================
   TAB SWITCHING ANIMATION FIX
   ======================================== */

/* Smooth tab transitions */
.tab-content {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tab-content:not(.active) {
  /* Hide inactive tabs properly */
  opacity: 0;
  visibility: hidden;
  position: absolute;
  pointer-events: none;
}

.tab-content.active {
  opacity: 1;
  visibility: visible;
  position: relative;
  pointer-events: all;
}

/* Prevent animation restart */
.tab-content.active * {
  animation-play-state: running !important;
}

.tab-content:not(.active) * {
  animation-play-state: paused !important;
}

/* ========================================
   SPECIFIC STAKING ELEMENTS FIXES
   ======================================== */

/* Energy signature canvas */
#signature-canvas {
  width: 100%;
  height: 200px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  /* Keep canvas rendered */
  transform: translateZ(0);
}

/* Energy flow calculator persistence */
.energy-calculator-section {
  min-height: 500px;
  /* Prevent section collapse */
  contain: layout;
}

#energy-flow-canvas {
  width: 100%;
  height: 150px;
  /* Force rendering */
  transform: translateZ(0);
  opacity: 1;
}

/* Kawaii helpers stability */
.kawaii-helpers {
  /* Keep helpers visible */
  opacity: 1 !important;
  visibility: visible !important;
}

.helper {
  /* Prevent helper disappearance */
  transform: translateZ(0);
  will-change: transform;
}

/* ========================================
   JAVASCRIPT HOOK CLASSES
   ======================================== */

/* Add these classes via JS when tab becomes active */
.staking-enhanced.tab-active {
  /* Reinitialize animations */
}

.staking-enhanced.tab-active .energy-field-background {
  /* Restart background animation */
  animation: none;
  animation: energy-field-pulse 5s ease-in-out infinite;
}

.staking-enhanced.tab-active .floating-particle {
  /* Restart particle animations */
  animation: none;
  animation: particle-float 8s linear infinite;
}

/* ========================================
   BROWSER-SPECIFIC FIXES
   ======================================== */

/* Chrome/Edge fix */
/* @supports (-webkit-appearance: none) {
  .staking-enhanced {
    /* -webkit-transform: translateZ(0); */
/* DISABLED: causes scrollbar flicker */
/*   -webkit-backface-visibility: hidden;
  }
}

/* Firefox fix */
/*@-moz-document url-prefix() {
  .staking-enhanced {
    transform: translateZ(0);
  }
/* }

/* ========================================
   DEBUG HELPERS
   ======================================== */

/* Add border to debug layout issues */
.debug-staking .staking-enhanced>* {
  border: 1px solid rgba(255, 0, 255, 0.3);
}

/* ========================================
   INITIALIZATION ANIMATION
   ======================================== */

/* Smooth fade-in when tab becomes active */
.tab-content[data-tab="staking-enhanced"].active {
  animation: tab-fade-in 0.5s ease-out;
}

@keyframes tab-fade-in {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Energy field pulse animation */
@keyframes energy-field-pulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.5;
  }
}

/* Particle float animation */
@keyframes particle-float {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) rotate(360deg);
    opacity: 0;
  }
}