/* =======================================
   FLASHY INTERACTIVE EFFECTS
   Extra visual enhancements
   ======================================= */

/* CUSTOM CURSOR TRAIL */
.cursor-dot {
  /* cursor dot disabled to improve accessibility and performance */
  display: none !important;
}

@keyframes cursor-pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

/* SCROLL PROGRESS BAR */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue), var(--yellow), var(--green));
  z-index: 10000;
  transition: width 0.2s ease;
  box-shadow: 0 2px 10px rgba(11, 116, 209, 0.5);
}

/* FLOATING SHAPES BACKGROUND */
.floating-shapes {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.floating-shape {
  position: absolute;
  opacity: 0.1;
  animation: float-shapes 20s ease-in-out infinite;
}

@keyframes float-shapes {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-30px) rotate(90deg);
  }
  50% {
    transform: translateY(-60px) rotate(180deg);
  }
  75% {
    transform: translateY(-30px) rotate(270deg);
  }
}

/* SECTION DIVIDER WAVES */
.section-divider {
  position: relative;
  height: 80px;
  background: transparent;
  overflow: hidden;
}

.section-divider svg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 100%;
}

/* GLOW EFFECT ON SCROLL */
.glow-on-scroll {
  transition: all 0.5s ease;
}

.glow-on-scroll.active {
  box-shadow: 0 0 40px rgba(11, 116, 209, 0.6),
              0 0 60px rgba(255, 210, 77, 0.4);
}

/* PARALLAX EFFECT */
.parallax {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

/* TILT EFFECT FOR CARDS */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

/* LOADING SCREEN */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #0b74d1, #0f8af3, #ffd24d);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99999;
  animation: fade-out 1s ease 2s forwards;
}

@keyframes fade-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

.loading-spinner {
  width: 80px;
  height: 80px;
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

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

/* GLOWING ORB EFFECT */
.glow-orb {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(11, 116, 209, 0.3), transparent);
  filter: blur(60px);
  pointer-events: none;
  animation: orb-float 8s ease-in-out infinite;
}

@keyframes orb-float {
  0%, 100% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, -50px);
  }
  50% {
    transform: translate(50px, 100px);
  }
  75% {
    transform: translate(-100px, 50px);
  }
}

/* STAR BURST ON CLICK */
.starburst {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: linear-gradient(135deg, #ffd24d, #fff);
  border-radius: 50%;
  animation: burst 0.8s ease-out forwards;
}

@keyframes burst {
  0% {
    transform: scale(1) translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: scale(0) translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

/* RAINBOW TEXT EFFECT */
.rainbow-text {
  background: linear-gradient(90deg,
    #ff0000, #ff7700, #ffff00, #00ff00,
    #0099ff, #6633ff, #ff00ff
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow-scroll 3s linear infinite;
}

@keyframes rainbow-scroll {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* SHAKE ANIMATION */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease;
}

/* ZOOM IN FADE IN */
@keyframes zoom-in-fade {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* SLIDE IN FROM SIDES */
@keyframes slide-in-left {
  from {
    opacity: 0;
    transform: translateX(-100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  from {
    opacity: 0;
    transform: translateX(100px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* MORPH BLOB EFFECT */
@keyframes morph {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
  }
  25% {
    border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
  }
  50% {
    border-radius: 50% 50% 40% 60% / 30% 70% 50% 60%;
  }
  75% {
    border-radius: 70% 30% 50% 50% / 60% 40% 60% 40%;
  }
}

/* GRADIENT BORDER ANIMATION */
@keyframes gradient-border-rotate {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* TYPEWRITER EFFECT */
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

/* SCALE PULSE */
@keyframes scale-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* HOVER LIFT */
.hover-lift {
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.hover-lift:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(11, 116, 209, 0.3);
}

/* MAGNETIC BUTTON */
.magnetic-btn {
  transition: transform 0.3s ease;
}

/* GLASS MORPHISM */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 32px rgba(11, 116, 209, 0.1);
}

/* NEON BORDER */
.neon-border {
  border: 2px solid #0b74d1;
  box-shadow: 0 0 10px #0b74d1,
              0 0 20px #0b74d1,
              0 0 30px #0b74d1,
              inset 0 0 10px #0b74d1;
  animation: neon-flicker 3s ease-in-out infinite;
}

@keyframes neon-flicker {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
  55% {
    opacity: 1;
  }
  60% {
    opacity: 0.9;
  }
}

/* CONFETTI BURST */
.confetti {
  position: fixed;
  width: 10px;
  height: 10px;
  background: var(--yellow);
  animation: confetti-fall 3s ease-out forwards;
  pointer-events: none;
}

@keyframes confetti-fall {
  0% {
    transform: translateY(0) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}