/* ========================================
   GeniusBI — Magic Animations Library
   Inspired by 21st.dev / Magic UI
   Pure CSS/JS — No dependencies
   ======================================== */

/* ========================================
   1. BORDER BEAM
   Animated light traveling along card border
   Usage: class="border-beam"
   ======================================== */
.border-beam {
  position: relative;
  overflow: hidden;
}
.border-beam::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--beam-angle, 0deg),
    transparent 0%,
    transparent 76%,
    var(--purple) 80%,
    var(--teal) 84%,
    transparent 88%,
    transparent 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: borderBeamSpin 4s linear infinite;
  pointer-events: none;
}
@property --beam-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes borderBeamSpin {
  to { --beam-angle: 360deg; }
}
/* Fallback for browsers without @property */
@supports not (background: conic-gradient(from 0deg, red, blue)) {
  .border-beam::before {
    background: linear-gradient(90deg, transparent, var(--purple), var(--teal), transparent);
    animation: borderBeamFallback 3s linear infinite;
  }
}
@keyframes borderBeamFallback {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ========================================
   2. SHINE BORDER
   Animated gradient border glow
   Usage: class="shine-border"
   ======================================== */
.shine-border {
  position: relative;
  overflow: hidden;
}
.shine-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(
    var(--shine-angle, 0deg),
    transparent 40%,
    rgba(138,101,196,0.6) 50%,
    rgba(125,188,219,0.6) 55%,
    transparent 65%
  );
  animation: shineSweep 3s ease-in-out infinite;
  z-index: -1;
}
.shine-border::after {
  content: '';
  position: absolute;
  inset: 1.5px;
  border-radius: inherit;
  background: inherit;
  z-index: -1;
}
@keyframes shineSweep {
  0% { --shine-angle: 0deg; transform: rotate(0deg); }
  100% { --shine-angle: 360deg; transform: rotate(360deg); }
}

/* ========================================
   3. BLUR FADE (scroll reveal with blur)
   Usage: class="blur-fade"
   ======================================== */
.blur-fade {
  opacity: 0;
  filter: blur(12px);
  transform: translateY(24px);
  transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 0.8s var(--ease);
}
.blur-fade.visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}
.blur-fade-delay-1 { transition-delay: 0.1s; }
.blur-fade-delay-2 { transition-delay: 0.2s; }
.blur-fade-delay-3 { transition-delay: 0.3s; }
.blur-fade-delay-4 { transition-delay: 0.4s; }
.blur-fade-delay-5 { transition-delay: 0.5s; }
.blur-fade-delay-6 { transition-delay: 0.6s; }

/* ========================================
   4. MARQUEE — infinite scroll
   Usage: div.marquee > div.marquee-track > items
   ======================================== */
.marquee {
  overflow: hidden;
  width: 100%;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}
.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  animation: marqueeScroll var(--marquee-duration, 30s) linear infinite;
}
.marquee:hover .marquee-track {
  animation-play-state: paused;
}
.marquee-reverse .marquee-track {
  animation-direction: reverse;
}
@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
/* Vertical marquee */
.marquee-vertical {
  overflow: hidden;
  height: 300px;
  -webkit-mask-image: linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(180deg, transparent, black 10%, black 90%, transparent);
}
.marquee-vertical .marquee-track {
  flex-direction: column;
  animation: marqueeScrollV var(--marquee-duration, 25s) linear infinite;
}
@keyframes marqueeScrollV {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* ========================================
   5. ANIMATED GRADIENT TEXT
   Usage: class="gradient-text-animated"
   ======================================== */
.gradient-text-animated {
  background: linear-gradient(
    90deg,
    var(--purple-light) 0%,
    var(--teal) 33%,
    var(--purple-light) 66%,
    var(--teal) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientFlow 4s ease infinite;
}
@keyframes gradientFlow {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ========================================
   6. SHINY TEXT (light glare sweep)
   Usage: class="shiny-text"
   ======================================== */
.shiny-text {
  position: relative;
  display: inline-block;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 70%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shinyTextSweep 3s ease-in-out infinite;
  color: var(--white);
}
@keyframes shinyTextSweep {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ========================================
   7. SHIMMER BUTTON
   Usage: class="btn-shimmer"
   ======================================== */
.btn-shimmer {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--white);
  padding: 15px 34px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: linear-gradient(110deg, var(--purple) 45%, rgba(255,255,255,0.15) 50%, var(--purple) 55%);
  background-size: 250% 100%;
  animation: shimmerBtn 2.5s ease-in-out infinite;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.btn-shimmer:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(138,101,196,0.2);
}
@keyframes shimmerBtn {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* ========================================
   8. NUMBER TICKER
   Usage: span.number-tick[data-target="94"]
   (JS handles the counting animation)
   ======================================== */
.number-tick {
  display: inline-block;
  font-variant-numeric: tabular-nums;
  transition: transform 0.3s var(--ease);
}
.number-tick.counting {
  animation: numberPop 0.3s var(--ease);
}
@keyframes numberPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

/* ========================================
   9. ORBITING CIRCLES
   Usage: div.orbiting-container > div.orbit-item
   ======================================== */
.orbiting-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.orbit-ring {
  position: absolute;
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 50%;
  animation: orbitSpin var(--orbit-duration, 20s) linear infinite;
}
.orbit-ring.reverse { animation-direction: reverse; }
.orbit-item {
  position: absolute;
  animation: orbitSpin var(--orbit-duration, 20s) linear infinite;
}
.orbit-item > * {
  animation: orbitCounterSpin var(--orbit-duration, 20s) linear infinite;
}
.orbit-item.reverse { animation-direction: reverse; }
.orbit-item.reverse > * { animation-direction: reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
@keyframes orbitCounterSpin { to { transform: rotate(-360deg); } }

/* ========================================
   10. FLICKERING GRID (background effect)
   Usage: div.flicker-grid
   ======================================== */
.flicker-grid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.flicker-cell {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: var(--purple-light);
  opacity: 0;
  animation: flickerDot var(--flicker-speed, 4s) ease-in-out infinite;
}
@keyframes flickerDot {
  0%, 100% { opacity: 0; }
  50% { opacity: var(--flicker-max, 0.4); }
}

/* ========================================
   11. METEORS
   Usage: div.meteors-container > span.meteor
   ======================================== */
.meteors-container {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.meteor {
  position: absolute;
  width: 1px;
  height: 80px;
  background: linear-gradient(180deg, var(--purple-light), transparent);
  transform: rotate(-45deg);
  animation: meteorFall var(--meteor-speed, 3s) linear infinite;
  opacity: 0;
}
@keyframes meteorFall {
  0% { transform: translateY(-100px) translateX(0) rotate(-45deg); opacity: 0; }
  10% { opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translateY(800px) translateX(-400px) rotate(-45deg); opacity: 0; }
}

/* ========================================
   12. TEXT REVEAL ON SCROLL
   Each word fades in as you scroll
   Usage: div.text-reveal > span.text-reveal-word
   ======================================== */
.text-reveal-word {
  display: inline-block;
  opacity: 0.15;
  transition: opacity 0.5s var(--ease);
  margin-right: 0.3em;
}
.text-reveal-word.revealed {
  opacity: 1;
}

/* ========================================
   13. RIPPLE EFFECT
   Usage: class="ripple-effect"
   ======================================== */
.ripple-effect {
  position: relative;
  overflow: hidden;
}
.ripple-effect .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(138,101,196,0.2);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
}
@keyframes rippleExpand {
  to { transform: scale(4); opacity: 0; }
}

/* ========================================
   14. PROGRESSIVE BLUR
   Blurs bottom edge of containers
   ======================================== */
.progressive-blur {
  position: relative;
}
.progressive-blur::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(transparent, var(--white));
  pointer-events: none;
}
.progressive-blur-dark::after {
  background: linear-gradient(transparent, var(--navy));
}

/* ========================================
   15. GLOW EFFECT
   Soft glow behind elements
   ======================================== */
/* Glow removed — using subtle shadow instead */
.glow { position: relative; }
.glow::before { display: none; }

/* ========================================
   16. MAGNETIC HOVER
   Cards slightly follow cursor
   (JS handles the heavy lifting)
   ======================================== */
.magnetic-hover {
  transition: transform 0.3s var(--ease);
}

/* ========================================
   17. STAGGER CHILDREN
   Automatically stagger child animations
   ======================================== */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; }
.stagger-children.visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* ========================================
   18. SCROLL PROGRESS BAR
   ======================================== */
/* ========================================
   19. CURSOR GLOW
   Follows mouse in hero sections
   ======================================== */
.hero-cursor-glow {
  position:absolute; width:400px; height:400px; border-radius:50%;
  background:radial-gradient(circle, rgba(138,101,196,0.08) 0%, transparent 70%);
  pointer-events:none; transform:translate(-50%,-50%);
  transition:left 0.3s ease, top 0.3s ease;
  z-index:1;
}

/* ========================================
   20. SCROLL PROGRESS BAR
   ======================================== */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  z-index: 9999;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.1s linear;
}