/*
 * GodStocks — PRO MAX Animation System (gs-anim.css)
 * Awwwards / Apple-tier Institutional Animations
 * GPU-accelerated, buttery smooth 60fps/120fps transitions
 */

/* ─── CUSTOM EASING GLOBALS ─── */
:root {
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ─── PROGRESS BAR (Cybernetic Flow) ─── */
#gs-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(90deg, #FFD700, #00E5FF, #00FF88, #FFD700);
  background-size: 200% 100%;
  animation: gsGradientFlow 2s linear infinite;
  z-index: 999999;
  transition: width 0.1s var(--ease-out-expo);
  box-shadow: 0 0 10px rgba(0, 229, 255, 0.6), 0 0 20px rgba(0, 255, 136, 0.4);
  pointer-events: none;
}
@keyframes gsGradientFlow {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ─── PAGE ENTRY REVEAL (Institutional Glide) ─── */
@keyframes gsPageReveal {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
body {
  animation: gsPageReveal 1.2s var(--ease-out-expo) both;
}

/* ─── HEADER ENTRY (Drop & Snap) ─── */
@keyframes gsHeaderDrop {
  0% { opacity: 0; transform: translateY(-100%); backdrop-filter: blur(0px); }
  100% { opacity: 1; transform: translateY(0); backdrop-filter: blur(20px); }
}
header {
  animation: gsHeaderDrop 1s var(--ease-out-expo) 0.2s both;
}

/* ─── SCROLL REVEAL (Pro Max 3D Stagger) ─── */
.gs-rv {
  opacity: 0;
  transform: translateY(40px) scale(0.95);
  transition: opacity 0.8s var(--ease-out-expo),
              transform 0.8s var(--ease-out-expo),
              filter 0.8s var(--ease-out-expo);
  filter: blur(4px);
  will-change: transform, opacity, filter;
}
.gs-rv.gs-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* ─── TABLE ROW REVEAL (Cascading Slide) ─── */
.gs-row-reveal {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.6s var(--ease-out-expo),
              transform 0.6s var(--ease-out-expo);
}
.gs-row-reveal.gs-in {
  opacity: 1;
  transform: translateX(0);
}

/* ─── CARD HOVER LIFT (Magnetic Spring & Glow) ─── */
.card, .sig-card, .stat-card, .session {
  transition: transform 0.5s var(--ease-spring),
              box-shadow 0.5s var(--ease-out-expo),
              border-color 0.5s var(--ease-out-expo),
              background 0.5s var(--ease-out-expo) !important;
  transform-style: preserve-3d;
}
.card:hover, .sig-card:hover {
  transform: translateY(-8px) scale(1.02) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 
              0 0 30px rgba(0, 255, 136, 0.2),
              inset 0 0 0 1px rgba(0, 255, 136, 0.4) !important;
  background: linear-gradient(165deg, rgba(30, 34, 50, 0.8), rgba(15, 18, 25, 0.9)) !important;
  z-index: 10;
}
.stat-card:hover {
  transform: translateY(-5px) scale(1.015) !important;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5),
              inset 0 0 0 1px rgba(255, 215, 0, 0.3) !important;
}

/* ─── BUTTONS (Micro-Interactions) ─── */
button, .chart-btn, .exit-btn, .header-nav-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-spring),
              box-shadow 0.3s var(--ease-out-expo),
              background 0.3s var(--ease-out-expo) !important;
}
button:active, .chart-btn:active {
  transform: scale(0.95) !important;
}
.chart-btn:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 10px 20px rgba(0,255,136,0.3) !important;
}
/* Ripple Effect overlay (Optional CSS only glow) */
.chart-btn::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 150%; height: 150%;
  background: radial-gradient(circle, rgba(255,255,255,0.2) 0%, transparent 60%);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.5s var(--ease-out-expo), opacity 0.5s;
}
.chart-btn:hover::after {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* ─── SIGNAL BADGE PULSE (Neon Core) ─── */
@keyframes gsBadgePulseBuy {
  0% { box-shadow: 0 0 0 0 rgba(0,255,136,0.6), inset 0 0 10px rgba(0,255,136,0.3); }
  70% { box-shadow: 0 0 0 10px rgba(0,255,136,0), inset 0 0 0px rgba(0,255,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,255,136,0), inset 0 0 0px rgba(0,255,136,0); }
}
@keyframes gsBadgePulseSell {
  0% { box-shadow: 0 0 0 0 rgba(255,51,102,0.6), inset 0 0 10px rgba(255,51,102,0.3); }
  70% { box-shadow: 0 0 0 10px rgba(255,51,102,0), inset 0 0 0px rgba(255,51,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,51,102,0), inset 0 0 0px rgba(255,51,102,0); }
}
.signal-buy, .sig-badge.buy, .sig-buy {
  animation: gsBadgePulseBuy 2s infinite;
}
.signal-sell, .sig-badge.sell, .sig-sell {
  animation: gsBadgePulseSell 2s infinite;
}

/* ─── PRICE FLASH (Smooth Dissolve) ─── */
@keyframes flashGreenPro {
  0%   { background: rgba(0,255,136,0.4); text-shadow: 0 0 10px #00ff88; transform: scale(1.02); }
  100% { background: transparent; text-shadow: none; transform: scale(1); }
}
@keyframes flashRedPro {
  0%   { background: rgba(255,51,102,0.4); text-shadow: 0 0 10px #ff3366; transform: scale(1.02); }
  100% { background: transparent; text-shadow: none; transform: scale(1); }
}
.gs-flash-up { animation: flashGreenPro 0.8s var(--ease-out-expo) forwards; }
.gs-flash-dn { animation: flashRedPro   0.8s var(--ease-out-expo) forwards; }

/* ─── SKELETON SHIMMER (Liquid Gold/Silver) ─── */
@keyframes gsShimmerPro {
  0% { transform: translateX(-150%) skewX(-15deg); }
  100% { transform: translateX(150%) skewX(-15deg); }
}
.gs-skeleton {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
  border-radius: 6px;
  color: transparent !important;
}
.gs-skeleton::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,215,0,0.1), transparent);
  animation: gsShimmerPro 1.5s var(--ease-in-out-circ) infinite;
}

/* ─── LIVE DOT RING (Radar Sweep) ─── */
@keyframes gsLivePulseRadar {
  0% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0,255,136,0.7); }
  50% { transform: scale(1); box-shadow: 0 0 0 6px rgba(0,255,136,0); }
  100% { transform: scale(0.8); box-shadow: 0 0 0 0 rgba(0,255,136,0); }
}
.live-dot, .status-dot, .branding-badge {
  animation: gsLivePulseRadar 1.5s var(--ease-out-expo) infinite !important;
}

/* ─── MAGNETIC BUTTON WRAPPER ─── */
.magnetic-wrap {
  display: inline-block;
  perspective: 1000px;
}

/* ─── REDUCED MOTION OVERRIDE ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}