/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
/* app/assets/stylesheets/application.css */
 /* @import "tailwindcss/base"; */
 /* @import "tailwindcss/components"; */
 /* @import "tailwindcss/utilities"; */
 
 /* Custom animations */
 @keyframes core-pulse {
   0% { transform: scale(1); box-shadow: 0 0 20px #10b981; }
   50% { transform: scale(1.1); box-shadow: 0 0 40px #10b981; }
   100% { transform: scale(1); box-shadow: 0 0 20px #10b981; }
 }
 
 .core-pulse {
   animation: core-pulse 2s ease-in-out infinite;
 }
 
 /* Glass morphism effect */
 .glass {
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 /* Add to your CSS file or style tag */
 @keyframes chaos-pulse {
   0% { transform: scale(1) rotate(0deg); }
   25% { transform: scale(1.1) rotate(5deg); }
   50% { transform: scale(0.9) rotate(-5deg); }
   75% { transform: scale(1.05) rotate(3deg); }
   100% { transform: scale(1) rotate(0deg); }
 }
 
 .chaos-animation {
   animation: chaos-pulse 2s ease-in-out infinite;
 }
 
 @keystream node-float {
   0% { transform: translateY(0px) rotate(0deg); }
   25% { transform: translateY(-5px) rotate(90deg); }
   50% { transform: translateY(-10px) rotate(180deg); }
   75% { transform: translateY(-5px) rotate(270deg); }
   100% { transform: translateY(0px) rotate(360deg); }
 }
 
 .node-float {
   animation: node-float 3s linear infinite;
 }
 
 #chaos-meter-container{
    display: none;
 }
 
 #payment-element {
   transition: opacity 0.3s ease;
 }
 
 #payment-element.loading {
   opacity: 0.6;
 }
 
 .StripeElement {
   padding: 12px;
   border: 1px solid #4B5563;
   border-radius: 8px;
   background-color: #1F2937;
   color: white;
 }
 
 .StripeElement--focus {
   border-color: #3B82F6;
   box-shadow: 0 0 0 1px #3B82F6;
 }
 
 @keyframes pulse-update {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); }
 }
 
 .animate-pulse {
   animation: pulse-update 0.5s ease-in-out;
 }
 
 @keyframes money-pop {
   0% { transform: scale(1); }
   50% { transform: scale(1.1) rotate(5deg); }
   100% { transform: scale(1); }
 }
 
 @keyframes entry-bounce {
   0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
   40% { transform: translateY(-5px); }
   60% { transform: translateY(-3px); }
 }
 
 .animate-money-pop {
   animation: money-pop 0.6s ease-in-out;
 }
 
 .animate-entry-bounce {
   animation: entry-bounce 0.8s ease-in-out;
 }
 
 .core-element {
   transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1), 
               box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, box-shadow;
 }
 
 .chaos-node {
   will-change: transform, opacity, filter;
   backface-visibility: hidden;
 }
 
 #high-performance-pulse {
   will-change: transform, opacity;
   backface-visibility: hidden;
   transform: translateZ(0);
 }
 
 .core-element {
   transform: translateZ(0); /* GPU acceleration */
 }
 
 /* Disable transitions for high BPM */
 @media (min-bpm: 150) {
   .core-element {
     transition: none !important;
   }
 }
 
 #pulse-canvas {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   pointer-events: none;
   z-index: 5;
 }
 
 /* Ensure the container has proper dimensions */
 .relative.h-80 {
   position: relative;
   min-height: 20rem;
 }
 
 /* Hide the original core element when WebGL is active */
 .webgl-active [data-chrono-sync-target="core"] {
   opacity: 0.3;
 }
 
 .orb-3d {
   background: radial-gradient(
     circle at 30% 30%,
     rgba(255, 255, 255, 0.8) 0%,
     rgba(16, 185, 129, 0.9) 20%,
     rgba(5, 150, 105, 0.95) 70%,
     rgba(4, 120, 87, 1) 100%
   );
   box-shadow: 
     inset 0 -8px 25px rgba(0, 0, 0, 0.6),
     inset 0 8px 20px rgba(255, 255, 255, 0.3),
     0 0 30px rgba(16, 185, 129, 0.4),
     0 8px 25px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
   position: relative;
   overflow: hidden;
 }
 
 .orb-3d::before {
   content: '';
   position: absolute;
   top: 10%;
   left: 20%;
   width: 40%;
   height: 40%;
   background: radial-gradient(
     circle,
     rgba(255, 255, 255, 0.8) 0%,
     rgba(255, 255, 255, 0.1) 70%
   );
   border-radius: 50%;
   filter: blur(5px);
   opacity: 0.6;
   transform: rotate(-25deg);
 }
 
 .orb-3d::after {
   content: '';
   position: absolute;
   top: 5%;
   left: 10%;
   width: 20%;
   height: 20%;
   background: rgba(255, 255, 255, 0.9);
   border-radius: 50%;
   filter: blur(2px);
   opacity: 0.8;
 }
 
 .orb-3d {
   transform: translateZ(0);
   backface-visibility: hidden;
   perspective: 1000px;
   will-change: transform, background-color, box-shadow;
 }
 
 [data-chrono-sync-target="core"] {
   transform: translateZ(0);
   will-change: transform, background-color;
 }
 
 /* Hardware acceleration for animations */
 .chaos-node, .stream-line {
   transform: translateZ(0);
 }
 
 .stream-line {
   z-index: 1 !important; /* Behind the orb */
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .chaos-node {
   z-index: 1 !important; /* Behind the orb */
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   will-change: transform, opacity, filter;
 }
 
 /* Ensure orb is above chaos elements */
 [data-chrono-sync-target="core"] {
   z-index: 10 !important;
   position: relative;
 }
 
 /* Visuals container should be behind the orb */
 [data-chrono-sync-target="visualsContainer"] {
   z-index: 5 !important;
 }
 
 /* Enhanced glow effects */
 @keyframes node-pulse {
   0%, 100% { 
     box-shadow: 0 0 20px currentColor, 0 0 40px rgba(255,255,255,0.3);
   }
   50% { 
     box-shadow: 0 0 30px currentColor, 0 0 60px rgba(255,255,255,0.5);
   }
 }
 
 .chaos-node {
   animation: node-pulse 2s ease-in-out infinite;
 }
 
 /* Performance optimizations */
 .relative.h-80 {
   transform: translateZ(0);
   contain: layout style paint;
 }
 
 [data-chrono-sync-target="visualsContainer"] {
   transform: translateZ(0);
 }
 
 /* Enhanced chaos node animations */
 @keyframes chaos-float {
   0%, 100% { transform: translateY(0px) scale(1); }
   50% { transform: translateY(-10px) scale(1.1); }
 }
 
 @keyframes color-shift {
   0% { filter: hue-rotate(0deg) brightness(100%); }
   50% { filter: hue-rotate(180deg) brightness(120%); }
   100% { filter: hue-rotate(360deg) brightness(100%); }
 }
 
 .chaos-node {
   animation: 
     chaos-float 3s ease-in-out infinite,
     node-pulse 2s ease-in-out infinite;
 }
 
 /* High chaos specific effects */
 .chaos-high .chaos-node {
   animation: 
     chaos-float 1s ease-in-out infinite,
     color-shift 2s linear infinite,
     node-pulse 0.5s ease-in-out infinite;
 }
 
 /* Timing Assist Ring Styles */
 #timing-assist {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 140px;
   height: 140px;
   border: 2px solid rgba(255, 255, 255, 0.7);
   border-radius: 50%;
   transform: translate(-50%, -50%) scale(1);
   z-index: 20;
   pointer-events: none;
   opacity: 0;
   background: transparent;
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
   display: block;
 }
 
 #timing-assist.visible {
   opacity: 1;
 }
 
 #timing-assist .pulse-ring {
   border: 3px solid rgba(255, 255, 255, 0.3);
   border-radius: 50%;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   transform: scale(1);
   transition: all 0.15s ease-out;
 }
 
 #timing-assist.pulsing .pulse-ring {
   transform: scale(1.4);
   border-color: rgba(255, 255, 255, 0.6);
   border-width: 4px;
 }
 
 #timing-assist {
   opacity: 0;
   transform: translate(-50%, -50%) scale(1);
   transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 #timing-assist.visible {
   opacity: 1;
 }
 
 #timing-assist.pulsing {
   transform: translate(-50%, -50%) scale(1.8);
   border-color: rgba(255, 255, 255, 0.9);
   box-shadow: 0 0 40px rgba(255, 255, 255, 0.6);
 }
 
 /* Enhanced Chaos Orb Styles */
 .chaos-node {
   transform: translateZ(0);
   will-change: transform, opacity, filter;
   animation: chaos-float 4s ease-in-out infinite;
 }
 
 .stream-line {
   transform: translateZ(0);
   will-change: transform, opacity;
 }
 
 /* Chaos orb animations */
 @keyframes chaos-float {
   0%, 100% { 
     transform: translateY(0px) scale(1);
   }
   50% { 
     transform: translateY(-5px) scale(1.05);
   }
 }
 
 @keyframes chaos-pulse {
   0%, 100% { 
     box-shadow: 0 0 20px currentColor, 0 0 40px rgba(255,255,255,0.3);
   }
   50% { 
     box-shadow: 0 0 30px currentColor, 0 0 60px rgba(255,255,255,0.5);
   }
 }
 
 .chaos-node {
   animation: 
     chaos-float 4s ease-in-out infinite,
     chaos-pulse 3s ease-in-out infinite;
 }
 
 /* High chaos effects */
 .chaos-high .chaos-node {
   animation-duration: 2s, 1.5s;
 }
 
 /* Custom dark theme enhancements */
 .dark-theme-card {
   background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
   backdrop-filter: blur(10px);
 }
 
 /* Smooth transitions for all interactive elements */
 button, a {
   transition: all 0.2s ease-in-out;
 }