/* ==========================================================================
   MANIKA PATEL — ANIMATIONS, MOVING GRADIENT & TINY VISIBLE FLORAL STYLES (2026)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOVING GRADIENT HERO BANNER BACKGROUND
   -------------------------------------------------------------------------- */
.hero-moving-gradient {
  position: absolute;
  top: -100px;
  left: -100px;
  right: -100px;
  bottom: -100px;
  z-index: -2;
  background: linear-gradient(
    -45deg,
    rgba(254, 205, 211, 0.55),
    rgba(224, 231, 255, 0.70),
    rgba(209, 250, 229, 0.60),
    rgba(254, 243, 199, 0.65),
    rgba(219, 234, 254, 0.70)
  );
  background-size: 400% 400%;
  animation: movingGradient 18s ease infinite;
  filter: blur(40px);
  opacity: 0.85;
  pointer-events: none;
}

[data-theme="dark"] .hero-moving-gradient {
  background: linear-gradient(
    -45deg,
    rgba(159, 18, 57, 0.4),
    rgba(30, 27, 75, 0.6),
    rgba(6, 78, 59, 0.4),
    rgba(120, 53, 15, 0.4),
    rgba(30, 58, 138, 0.6)
  );
  background-size: 400% 400%;
  animation: movingGradient 18s ease infinite;
  filter: blur(50px);
  opacity: 0.75;
}

@keyframes movingGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --------------------------------------------------------------------------
   2. TINY & CRISP VISIBLE COLORFUL FLORAL BACKGROUND ELEMENTS (VERSION 2)
   -------------------------------------------------------------------------- */
.abstract-floral-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.abstract-flower {
  position: absolute;
  pointer-events: none;
  opacity: 0.9;
  filter: drop-shadow(0 6px 12px rgba(244, 114, 182, 0.25));
  transition: transform 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .abstract-flower {
  opacity: 0.85;
  filter: drop-shadow(0 6px 12px rgba(244, 114, 182, 0.35));
}

/* Tiny Flower Placements & Dynamic Floating/Spinning Keyframes */
.abstract-flower-1 {
  top: 12%;
  left: 8%;
  width: 72px;
  height: 72px;
  animation: floatTiny1 14s ease-in-out infinite alternate;
}

.abstract-flower-2 {
  top: 18%;
  right: 14%;
  width: 90px;
  height: 90px;
  animation: floatTiny2 18s ease-in-out infinite alternate-reverse;
}

.abstract-flower-3 {
  bottom: 22%;
  left: 12%;
  width: 80px;
  height: 80px;
  animation: floatTiny3 16s ease-in-out infinite alternate;
}

.abstract-flower-4 {
  bottom: 15%;
  right: 10%;
  width: 105px;
  height: 105px;
  animation: floatTiny4 22s ease-in-out infinite alternate-reverse;
}

.abstract-flower-5 {
  top: 45%;
  left: 48%;
  width: 64px;
  height: 64px;
  animation: floatTiny5 12s ease-in-out infinite alternate;
}

.abstract-flower-6 {
  top: 70%;
  left: 32%;
  width: 54px;
  height: 54px;
  animation: floatTiny1 20s ease-in-out infinite alternate-reverse;
}

.abstract-flower-7 {
  top: 30%;
  right: 35%;
  width: 85px;
  height: 85px;
  animation: floatTiny3 15s ease-in-out infinite alternate;
}

/* Floating Animations for Tiny Flowers */
@keyframes floatTiny1 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(18px, -24px) rotate(90deg) scale(1.15);
  }
  100% {
    transform: translate(-15px, 15px) rotate(180deg) scale(0.9);
  }
}

@keyframes floatTiny2 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-22px, 28px) rotate(-120deg) scale(1.1);
  }
  100% {
    transform: translate(20px, -18px) rotate(-240deg) scale(0.95);
  }
}

@keyframes floatTiny3 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.9);
  }
  50% {
    transform: translate(25px, 20px) rotate(140deg) scale(1.2);
  }
  100% {
    transform: translate(-20px, -25px) rotate(280deg) scale(1);
  }
}

@keyframes floatTiny4 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-30px, -20px) rotate(-90deg) scale(1.15);
  }
  100% {
    transform: translate(18px, 22px) rotate(-180deg) scale(0.9);
  }
}

@keyframes floatTiny5 {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(15px, -15px) rotate(180deg) scale(1.25);
  }
  100% {
    transform: translate(-12px, 18px) rotate(360deg) scale(0.85);
  }
}

/* Glass Orb Floating Accents */
.glass-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(30px);
  opacity: 0.5;
  z-index: -1;
}

.glass-orb-1 {
  width: 320px;
  height: 320px;
  background: var(--accent-lavender);
  top: 10%;
  right: 5%;
  animation: floatOrb 8s infinite ease-in-out alternate;
}

.glass-orb-2 {
  width: 250px;
  height: 250px;
  background: var(--accent-mint);
  bottom: 15%;
  left: 5%;
  animation: floatOrb 10s infinite ease-in-out alternate-reverse;
}

@keyframes floatOrb {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(30px, -40px) scale(1.1); }
  100% { transform: translate(-20px, 20px) scale(0.95); }
}

/* --------------------------------------------------------------------------
   3. CURSOR & INTERACTION OVERRIDES
   -------------------------------------------------------------------------- */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--text-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--text-primary);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  opacity: 0.4;
  transition: width 0.2s ease, height 0.2s ease;
}

body.cursor-hover .cursor-outline {
  width: 56px;
  height: 56px;
  background-color: var(--accent-glow);
  border-color: var(--accent-lavender-dark);
  opacity: 0.8;
}

/* Responsive Overrides */
@media (max-width: 768px) {
  .cursor-dot, .cursor-outline { display: none; }
  .hero-moving-gradient { filter: blur(30px); }
  .abstract-flower { opacity: 0.7; transform: scale(0.85); }
}