/* ================================================================
   VOLTEX EFFECTS — Master Stylesheet
   All keyframes, base styles, and component CSS for 100 effects
   ================================================================ */

/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes ve-blink         { 0%,100%{opacity:1}  50%{opacity:0} }
@keyframes ve-wave          { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes ve-grad-shift    { 0%{background-position:0% 50%} 100%{background-position:300% 50%} }
@keyframes ve-grad-mesh     { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes ve-spin-ring     { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
@keyframes ve-float         { 0%,100%{transform:translateY(0)} 50%{transform:translateY(calc(var(--ve-float-amp, -10px)*-1))} }
@keyframes ve-bounce        { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes ve-shake         { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
@keyframes ve-ripple        { 0%{transform:scale(0);opacity:1} 100%{transform:scale(4);opacity:0} }
@keyframes ve-pulse-ring    { 0%{transform:scale(1);opacity:.7} 100%{transform:scale(2.8);opacity:0} }
@keyframes ve-orbit         { 0%{transform:rotate(0deg) translateX(var(--ve-orbit-r,60px))} 100%{transform:rotate(360deg) translateX(var(--ve-orbit-r,60px))} }
@keyframes ve-neon-border   { 0%,100%{box-shadow:0 0 6px var(--ve-neon-color,#0ea5e9),0 0 12px var(--ve-neon-color,#0ea5e9)} 50%{box-shadow:0 0 22px var(--ve-neon-color,#0ea5e9),0 0 45px var(--ve-neon-color,#0ea5e9),inset 0 0 12px var(--ve-neon-color,#0ea5e9)22} }
@keyframes ve-neon-flicker  { 0%,90%,100%{opacity:1} 91%{opacity:.6} 92%{opacity:1} 94%{opacity:.5} 95%{opacity:1} 97%{opacity:.8} 98%{opacity:1} }
@keyframes ve-bar-wave      { 0%,100%{height:4px} 50%{height:var(--ve-bar-max,32px)} }
@keyframes ve-dna-dot       { 0%,100%{transform:translateX(-20px)} 50%{transform:translateX(20px)} }
@keyframes ve-dna-line      { 0%,100%{transform:scaleX(1);opacity:.5} 50%{transform:scaleX(.2);opacity:.1} }
@keyframes ve-live-dot      { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:.5} }
@keyframes ve-scroll-dot    { 0%{transform:translateY(0);opacity:1} 75%{transform:translateY(14px);opacity:0} 76%,100%{transform:translateY(0);opacity:0} }
@keyframes ve-typing-dot    { 0%,100%{transform:translateY(0);opacity:.4} 50%{transform:translateY(-7px);opacity:1} }
@keyframes ve-geo-pulse     { 0%,100%{opacity:.1} 50%{opacity:.45} }
@keyframes ve-dot-pulse     { 0%,100%{transform:scale(1);opacity:.25} 50%{transform:scale(1.7);opacity:.9} }
@keyframes ve-divider-slide { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
@keyframes ve-draw-path     { 0%{stroke-dashoffset:100} 100%{stroke-dashoffset:0} }
@keyframes ve-eb-flicker    { 0%,88%,100%{opacity:1} 89%{opacity:.6} 90%{opacity:1} 93%{opacity:.4} 94%{opacity:1} 97%{opacity:.7} 98%{opacity:1} }
@keyframes ve-tw-blink      { 0%,100%{opacity:1} 50%{opacity:0} }

/* ── BASE STYLES ───────────────────────────────────────────── */

/* Typewriter */
.ve-tw-cur { animation: ve-tw-blink .9s step-end infinite; }

/* Neon text */
.ve-neon-flicker { animation: ve-neon-flicker 3s ease-in-out infinite; text-shadow: 0 0 8px var(--ve-neon-color,#0ea5e9), 0 0 20px var(--ve-neon-color,#0ea5e9); }

/* Gradient text */
.ve-gradient-text { background-size: 300% 100%; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: ve-grad-shift 4s linear infinite; }

/* Particle storm */
.ve-particle-storm { position: relative; overflow: hidden; }
.ve-particle-storm > *:not(canvas) { position: relative; z-index: 2; }

/* Glitch text */
.ve-glitch-text { display: inline-block; position: relative; }

/* Power-on */
.ve-power-on { visibility: visible; }

/* Arc lightning */
.ve-arc-lightning { display: block; text-align: center; line-height: 0; }

/* Cursor trail */
.ve-cursor-trail { display: none !important; }

/* Flip card */
.ve-flip-card { perspective: 1000px; }
.ve-flip-inner { transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22,1,.36,1); width: 100%; height: 100%; position: relative; }
.ve-flip-front, .ve-flip-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ve-flip-back { transform: rotateY(180deg); }
.ve-flip-card.ve-flip-vertical .ve-flip-back { transform: rotateX(180deg); }

/* Ripple */
@keyframes ve-ripple-in { 0%{transform:scale(0);opacity:1} 100%{transform:scale(4);opacity:0} }
.ve-hover-ripple { overflow: hidden; position: relative; }
.ve-hover-ripple span[style*="ve-ripple"] { animation: ve-ripple-in .6s linear forwards; }

/* Pulse ring */
.ve-pulse-ring { position: relative; }
.ve-pulse-ring > span[style*="ve-pulse-ring"] { position: absolute; }

/* Orbit */
.ve-orbit { position: relative; }

/* Floating badge */
.ve-floating-badge { display: inline-block; }

/* Neon border */
.ve-neon-border { animation: ve-neon-border 2s ease-in-out infinite; }

/* Bar wave */
.ve-bar-wave { display: flex; align-items: center; }

/* DNA helix */
.ve-dna-helix { position: relative; display: inline-block; }

/* Live badge */
.ve-live-badge { display: inline-flex; align-items: center; }

/* Scroll indicator */
.ve-scroll-indicator { display: inline-flex; justify-content: center; }

/* Typing dots */
.ve-typing-dots { display: inline-flex; align-items: center; gap: 5px; }

/* Badge bounce */
.ve-badge-bounce { display: inline-block; animation: ve-bounce 1s cubic-bezier(.34,1.56,.64,1) infinite; }

/* Rotating ring */
.ve-rotating-ring { display: inline-block; border-radius: 50%; }

/* Electric border */
.ve-electric-border { animation: ve-eb-flicker 2s ease-in-out infinite; }

/* Countdown */
.ve-countdown { display: flex; flex-wrap: wrap; gap: .75em; }
.ve-countdown-inner { display: flex; gap: 1em; flex-wrap: wrap; }

/* Progress ring */
.ve-progress-ring { display: inline-flex; align-items: center; justify-content: center; }

/* Timeline */
.ve-timeline { position: relative; padding-left: 30px; }
.ve-timeline::before { content: ''; position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: currentColor; opacity: .2; }
.ve-timeline-item { position: relative; margin-bottom: 1.5em; }

/* Wave divider */
.ve-wave-divider { display: block; line-height: 0; overflow: hidden; }

/* Before/after slider */
.ve-before-after { position: relative; overflow: hidden; cursor: col-resize; user-select: none; -webkit-user-select: none; }

/* Animated divider */
.ve-animated-divider { display: block; }

/* Morphing shape */
.ve-morphing-shape { display: inline-block; }

/* Stagger group */
.ve-stagger-group { display: block; }

/* Image wipe */
.ve-image-wipe { display: block; }

/* Scroll reveal family */
.ve-fade-up, .ve-fade-down, .ve-fade-left, .ve-fade-right,
.ve-zoom-in, .ve-zoom-out, .ve-rotate-in, .ve-flip-in,
.ve-slide-clip, .ve-bounce-in, .ve-blur-in { display: block; }

/* Tilt card */
.ve-tilt-card { transform-style: preserve-3d; }

/* Polaroid */
.ve-polaroid { display: inline-block; }

/* Background containers (canvas placed inside) */
.ve-matrix-rain, .ve-aurora, .ve-bokeh, .ve-grain,
.ve-starfield, .ve-neural-net, .ve-circuit-board, .ve-wave-bg,
.ve-hex-grid, .ve-dot-grid, .ve-liquid-blob, .ve-confetti,
.ve-ripple-bg, .ve-laser-grid, .ve-smoke, .ve-gradient-mesh,
.ve-geo-pattern, .ve-floating-orbs, .ve-bubble-rise, .ve-noise-overlay { position: relative; overflow: hidden; }
.ve-matrix-rain > *:not(canvas),
.ve-aurora > *:not(canvas),
.ve-bokeh > *:not(canvas),
.ve-starfield > *:not(canvas),
.ve-neural-net > *:not(canvas),
.ve-circuit-board > *:not(canvas),
.ve-wave-bg > *:not(canvas),
.ve-hex-grid > *:not(canvas),
.ve-dot-grid > *:not(canvas),
.ve-floating-orbs > *:not(canvas),
.ve-bubble-rise > *:not(canvas),
.ve-laser-grid > *:not(canvas),
.ve-smoke > *:not(canvas),
.ve-ripple-bg > *:not(canvas),
.ve-confetti > *:not(canvas),
.ve-geo-pattern > *:not(svg) { position: relative; z-index: 2; }

/* Cursor effects */
.ve-cursor-follower { pointer-events: none; }
.ve-gravity-dots { position: relative; overflow: hidden; }
.ve-cursor-spotlight { position: relative; }
.ve-cursor-glow, .ve-cursor-crosshair, .ve-cursor-dots,
.ve-custom-cursor, .ve-cursor-magnetic { display: none; }

/* Utility: ensure relative positioning for overlays */
.ve-spotlight-hover, .ve-hover-ripple, .ve-expand-hover,
.ve-cursor-spotlight, .ve-image-glitch { overflow: hidden; position: relative; }