frontend/src/App.css

/* ─── HyperFlow 3.0 Brand Design System ─────────────────────────── */

:root {
  --hf-primary: #FF0077;     /* Zomato District Hot Pink/Crimson */
  --hf-accent: #8F00FF;      /* Zomato District Neon Indigo/Violet */
  --hf-success: #00E676;     /* Vivid Emerald Green */
  --hf-danger: #FF3366;      /* Alert Red */
  --hf-warn: #FFB300;        /* Warning Gold */
  --hf-surface-0: #040406;   /* Zomato District Deep Obsidian Black */
  --hf-surface-1: #0A0A0F;   /* Obsidian Card Backplate */
  --hf-surface-2: #14141F;   /* Elevated Panel */
  --hf-glass: rgba(255, 255, 255, 0.04);
  --hf-border: rgba(255, 255, 255, 0.06);
}

/* Material Symbols Outlined Custom Config */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Smooth Transitions & Scrolling */
* {
  transition: background-color 0.25s cubic-bezier(0.23, 1, 0.32, 1), 
              border-color 0.25s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.25s cubic-bezier(0.23, 1, 0.32, 1);
  scroll-behavior: smooth;
}

/* Glassmorphism Panel */
.glass-panel {
  background: rgba(18, 18, 26, 0.65);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* Floating Glows */
.glow-primary {
  box-shadow: 0 0 25px rgba(108, 99, 255, 0.15);
}

.glow-primary-strong {
  box-shadow: 0 0 30px rgba(108, 99, 255, 0.4);
}

.glow-accent {
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.15);
}

/* Scrollbar Resets */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Latency sparkline flow animation */
@keyframes flow {
  0% { stroke-dashoffset: 100; }
  100% { stroke-dashoffset: 0; }
}
.route-path {
  stroke-dasharray: 10;
  animation: flow 5s linear infinite;
}

/* Neon Pulse Indicator */
@keyframes neonPulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(0, 212, 170, 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0);
  }
}
.pulse-neon {
  animation: neonPulse 2s infinite;
}

/* Skeleton Loading Shimmer */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer {
  background: linear-gradient(90deg, #12121A 25%, #1A1A26 50%, #12121A 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Interactive card lifts */
.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(0,0,0,0.5), 0 0 15px rgba(108, 99, 255, 0.1);
  border-color: rgba(108, 99, 255, 0.2);
}

/* Festive theme variable overrides */
body[data-festival='diwali'] {
  --hf-primary: #FF9900 !important;   /* Marigold Gold */
  --hf-accent: #E23E00 !important;    /* Terracotta Orange */
  --hf-success: #00E676 !important;
  --hf-surface-0: #140700 !important;  /* Warm Charcoal */
  --hf-surface-1: #200D00 !important;  /* Deep Gold-Bronze Panel */
  --hf-surface-2: #2E1500 !important;
  --hf-border: rgba(255, 153, 0, 0.1) !important;
}

body[data-festival='holi'] {
  --hf-primary: #FF00FF !important;   /* Neon Magenta Splatter */
  --hf-accent: #00F0FF !important;    /* Splash Cyan */
  --hf-success: #39FF14 !important;   /* Neon Lime */
  --hf-surface-0: #060B12 !important;  /* Ink Blue */
  --hf-surface-1: #0C1522 !important;
  --hf-surface-2: #152235 !important;
  --hf-border: rgba(0, 240, 255, 0.1) !important;
}

body[data-festival='christmas'] {
  --hf-primary: #D32F2F !important;   /* Poinsettia Crimson */
  --hf-accent: #2E7D32 !important;    /* Pine Forest Green */
  --hf-success: #FFD700 !important;   /* Sparkle Gold */
  --hf-surface-0: #020804 !important;  /* Spruce Black */
  --hf-surface-1: #06180C !important;
  --hf-surface-2: #0C2815 !important;
  --hf-border: rgba(46, 125, 50, 0.1) !important;
}

body[data-festival='monsoon'] {
  --hf-primary: #00B0FF !important;   /* Torrential Cyan Rain */
  --hf-accent: #5C6BC0 !important;    /* Stormy Slate Gray-Blue */
  --hf-success: #4CAF50 !important;   /* Fresh Moss Green */
  --hf-surface-0: #0A0F14 !important;  /* Deep Ocean Blue-Black */
  --hf-surface-1: #101820 !important;
  --hf-surface-2: #17222E !important;
  --hf-border: rgba(0, 176, 255, 0.1) !important;
}

@keyframes diwaliFlicker {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); filter: drop-shadow(0 0 12px #FF9900); }
}
.diwali-light {
  animation: diwaliFlicker 1.8s infinite ease-in-out;
}

@keyframes holiFloat {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(6px, -6px) scale(1.04); }
  100% { transform: translate(0, 0) scale(1); }
}
.holi-splatter {
  animation: holiFloat 5s infinite ease-in-out;
}

/* Embossed Credit Card styling */
.text-embossed {
  text-shadow: -0.5px -0.5px 0px rgba(255,255,255,0.4), 0.5px 0.5px 0.5px rgba(0,0,0,0.9);
  color: #E2C96C !important;
}

.gold-chip-shimmer {
  background: linear-gradient(135deg, #f3e092 0%, #e2c96c 50%, #c4a73b 100%);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.4);
}

.benefit-outline-purple {
  border: 1px solid rgba(143, 0, 255, 0.4) !important;
}
.benefit-outline-green {
  border: 1px solid rgba(0, 230, 76, 0.4) !important;
}
.benefit-outline-red {
  border: 1px solid rgba(255, 51, 102, 0.4) !important;
}

/* Custom card gradients */
.premium-card-grad {
  background: linear-gradient(135deg, rgba(20, 20, 31, 0.9) 0%, rgba(10, 10, 15, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ─── Stitch Spec Alignment ─── */
.phone-frame {
  width: 410px;
  height: 760px;
  border-radius: 40px;
  overflow: hidden;
  position: relative;
  background-color: #040406;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 40px rgba(255, 0, 119, 0.1);
}

.ambient-glow {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(143, 0, 255, 0.2) 0%, rgba(4, 4, 6, 0) 70%);
  z-index: 0;
  pointer-events: none;
}

.logo-rings {
  position: relative;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(to bottom right, #FF0077, #8F00FF);
  box-shadow: 0 0 30px rgba(143, 0, 255, 0.6);
}

.logo-rings::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: linear-gradient(to bottom right, #8F00FF, #FF0077);
  z-index: -1;
  filter: blur(8px);
}

.logo-inner {
  background-color: #040406;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bg-gradient-logo {
  background: linear-gradient(135deg, #FF9900, #FF3366, #39FF14);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.bg-gradient-logo-bg {
  background: linear-gradient(135deg, #FF9900, #FF3366, #39FF14);
}

.neon-glow-primary {
  box-shadow: 0 0 20px rgba(255, 0, 119, 0.3);
}

.neon-glow-pink {
  box-shadow: 0 0 20px rgba(255, 0, 119, 0.3);
}

.neon-glow-purple {
  box-shadow: 0 0 20px rgba(143, 0, 255, 0.3);
}

.metallic-gradient {
  background: linear-gradient(135deg, #FF0077 0%, #8f03ff 100%);
}

.shimmer-effect::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
  transform: skewX(-15deg);
  animation: shimmer-swipe 3s infinite;
}

@keyframes shimmer-swipe {
  0% { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(200%) skewX(-15deg); }
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

.glow-ring {
  position: relative;
}

.glow-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, #FF0077, #8F00FF, #FF0077);
  filter: blur(8px);
  opacity: 0.8;
  z-index: -1;
  animation: spin 4s linear infinite;
}

.glow-ring::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  background: #040406;
  z-index: -1;
}

.gradient-btn {
  background: linear-gradient(135deg, #FF0077 0%, #8F00FF 100%);
  position: relative;
  overflow: hidden;
}

.gradient-btn::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(to bottom right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(45deg);
  animation: shimmer-rot 3s infinite;
}

@keyframes shimmer-rot {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}