/* ==========================================================
   🌊 DYNAMIC SECTION STYLING SYSTEM
   Variants:
   1. .dynamic-section          → Static
   2. .dynamic-section-animate  → Animated waves
   3. .dynamic-section-glow     → Floating + glowing
   4. .dynamic-section-dark     → Dark theme
   5. .dynamic-section-deep     → Deep layered motion
   ========================================================== */

/* ---------- BASE SETUP ---------- */

:root {
    --primary: #0066FF;
    --primary-dark: #0052CC;
    --secondary: #00D4AA;
    --accent: #FF6B35;
    --dark: #0A0F2D;
    --light: #F8FAFF;
    --gray: #64748B;
    --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
    --glass: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.18);
    --wave-blue: #0066ff;
    --wave-aqua: #00d4aa;
}

/* Generic section container */
[class*="dynamic-section"] {
    position: relative;
    overflow: hidden;
}

/* Common wave visuals (shared by all variants) */
[class*="dynamic-section"]::before,
[class*="dynamic-section"]::after {
    content: "";
    position: absolute;
    top: 0;
    height: 120%;
    width: 220px;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.3;
    z-index: 0;
}

/* Left / Right placement */
[class*="dynamic-section"]::before {
    left: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%230066FF' d='M0 0c50 200 150 200 200 400s-50 200-200 400V0z'/%3E%3C/svg%3E");
}
[class*="dynamic-section"]::after {
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300D4AA' d='M200 0c-50 200-150 200-200 400s50 200 200 400V0z'/%3E%3C/svg%3E");
}

/* Ensure content appears above decorative waves */
[class*="dynamic-section"] .container {
    position: relative;
    z-index: 2;
}

/* ==========================================================
   1️⃣ STATIC VARIANT (.dynamic-section)
   ========================================================== */
.dynamic-section {
    background: var(--light);
}
.dynamic-section::before {
    backdrop-filter: blur(3px);
    background-blend-mode: overlay;
}

/* ==========================================================
   2️⃣ ANIMATED VARIANT (.dynamic-section-animate)
   ========================================================== */
.dynamic-section-animate {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 255, 0.05),
        rgba(0, 212, 170, 0.08)
    );
}
.dynamic-section-animate::before,
.dynamic-section-animate::after {
    opacity: 0.25;
    animation: waveFloat 6s ease-in-out infinite alternate;
    mix-blend-mode: multiply;
    filter: blur(1px);
}
.dynamic-section-animate::after {
    animation-delay: 3s;
}

/* ==========================================================
   3️⃣ GLOWING VARIANT (.dynamic-section-glow)
   ========================================================== */
.dynamic-section-glow {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 255, 0.05),
        rgba(0, 212, 170, 0.08)
    );
}
.dynamic-section-glow::before,
.dynamic-section-glow::after {
    opacity: 0.25;
    animation: waveFloat 6s ease-in-out infinite alternate,
               waveGlow 8s ease-in-out infinite;
    mix-blend-mode: multiply;
    filter: blur(1px);
}
.dynamic-section-glow::after {
    animation-delay: 3s, 2s;
}

/* ==========================================================
   4️⃣ DARK THEME VARIANT (.dynamic-section-dark)
   ========================================================== */
.dynamic-section-dark {
    background: var(--dark);
    color: var(--light);
}
.dynamic-section-dark::before,
.dynamic-section-dark::after {
    height: 130%;
    opacity: 0.3;
    animation: waveFloat 7s ease-in-out infinite alternate,
               waveGlow 10s ease-in-out infinite;
    mix-blend-mode: screen;
}

/* ==========================================================
   5️⃣ DEEP VARIANT (.dynamic-section-deep)
   ========================================================== */
.dynamic-section-deep {
    background: linear-gradient(
        135deg,
        rgba(0, 102, 255, 0.08),
        rgba(0, 212, 170, 0.12)
    );
}
.dynamic-section-deep::before,
.dynamic-section-deep::after {
    height: 140%;
    opacity: 0.25;
    animation: waveFloat 7s ease-in-out infinite alternate,
               waveGlow 9s ease-in-out infinite;
    mix-blend-mode: multiply;
}
.dynamic-section-deep::after {
    animation-delay: 4s, 2s;
}



/* ==========================================================
   🧱 Dynamic Hero Section
   ========================================================== */

   .dynamic-hero {
  position: relative;
  background: var(--gradient);
  color: white;
  text-align: center;
  padding: 8rem 2rem;
  overflow: hidden;
}

.dynamic-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 40%, var(--secondary) 0%, transparent 60%);
  opacity: 0.2;
  animation: pulseGlow 8s infinite alternate;
  z-index: 0;
}

.dynamic-hero h1,
.dynamic-hero p,
.dynamic-hero .btn {
  position: relative;
  z-index: 2;
}


/* ==========================================================
   💎 2Glass Card Grid
   ========================================================== */

   .dynamic-glass-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 2rem;
      background: var(--dark);
      padding: 4rem;
    }

    .dynamic-glass-card {
      background: var(--glass);
      border: 1px solid var(--glass-border);
      border-radius: 16px;
      padding: 2rem;
      color: var(--light);
      backdrop-filter: blur(10px);
      transition: transform 0.3s ease, background 0.3s ease;
    }

    .dynamic-glass-card:hover {
      transform: translateY(-5px);
      background: rgba(255, 255, 255, 0.12);
    }


/* ==========================================================
   🪩 Dynamic CTA (Call-to-Action) Section
   ========================================================== */

   .dynamic-cta {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      color: white;
      text-align: center;
      padding: 5rem 2rem;
      position: relative;
      overflow: hidden;
    }

    .dynamic-cta::before {
      content: "";
      position: absolute;
      width: 250px;
      height: 250px;
      background: radial-gradient(var(--accent), transparent);
      top: -50px;
      right: -50px;
      opacity: 0.3;
      animation: floatOrb 10s ease-in-out infinite alternate;
    }

/* ==========================================================
   🌈 Dynamic Gradient Border Box
   ========================================================== */

   .dynamic-border-box {
      position: relative;
      padding: 2rem;
      border-radius: 16px;
      background: var(--light);
      z-index: 1;
    }

    .dynamic-border-box::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      padding: 2px;
      background: var(--gradient);
      -webkit-mask: 
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
    }


/* ==========================================================
   💡 Feature Icon Section (Dynamic Motion)
   ========================================================== */

   .dynamic-features {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 2rem;
      background: var(--light);
      padding: 4rem 2rem;
    }

    .dynamic-feature {
      flex: 1 1 250px;
      text-align: center;
      transition: transform 0.4s ease;
    }

    .dynamic-feature:hover {
      transform: translateY(-10px);
    }

/* ==========================================================
   🌊 Wavy Footer (Dynamic Wave Bottom)
   ========================================================== */
.dynamic-footer {
  position: relative;
  background: var(--dark);
  color: var(--light);
  padding: 4rem 2rem 2rem;
  text-align: center;
  overflow: hidden;
}

.dynamic-footer::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2300D4AA' d='M0 0v46.29c47.79 22.38 103.59 29.05 158 17.39 70-15 136-46 206-33s130 65 206 83 168 4 248-18 162-40 240-20 128 68 142 97V0z'/%3E%3C/svg%3E");
  background-size: cover;
  opacity: 0.3;
  animation: waveFloat 10s ease-in-out infinite alternate;
}

/* ==========================================================
   ⚙️ Dynamic Service Cards (Flip Animation)
   ========================================================== */

   .dynamic-flip-card {
  perspective: 1000px;
}
.dynamic-flip-inner {
  position: relative;
  width: 100%;
  height: 280px;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
.dynamic-flip-card:hover .dynamic-flip-inner {
  transform: rotateY(180deg);
}
.dynamic-flip-front,
.dynamic-flip-back {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  backface-visibility: hidden;
}
.dynamic-flip-front {
  background: var(--gradient);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dynamic-flip-back {
  background: var(--light);
  color: var(--dark);
  transform: rotateY(180deg);
  padding: 1.5rem;
}


/* ==========================================================
   🌀 Dynamic Testimonial Carousel (Soft Motion)
   ========================================================== */

   .dynamic-testimonial {
  background: var(--light);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.dynamic-testimonial::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, var(--secondary) 0%, transparent 100%);
  opacity: 0.05;
  animation: slideWave 20s linear infinite;
}

@keyframes slideWave {
  0% { transform: translateX(0); }
  100% { transform: translateX(50%); }
}


/* ==========================================================
   🔥 Dynamic Pricing Section (Highlight Card)
   ========================================================== */

   .dynamic-pricing {
  display: flex;
  gap: 2rem;
  justify-content: center;
  padding: 4rem;
  background: var(--light);
}

.dynamic-price-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.08);
  padding: 2.5rem;
  position: relative;
  transition: all 0.4s ease;
}

.dynamic-price-card.highlight {
  background: var(--gradient);
  color: white;
  transform: scale(1.05);
  box-shadow: 0 15px 25px rgba(0,102,255,0.25);
}


   /* ==========================================================
   🪄 Dynamic Navbar (Glass + Hover Underline)
   ========================================================== */
   .dynamic-navbar {
  position: fixed;
  top: 0;
  width: 100%;
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  z-index: 1000;
  transition: background 0.4s ease;
}

.dynamic-navbar.scrolled {
  background: var(--dark);
}

.dynamic-navbar a {
  color: var(--light);
  margin: 0 1rem;
  position: relative;
  text-decoration: none;
}

.dynamic-navbar a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--secondary);
  transition: width 0.3s ease;
}

.dynamic-navbar a:hover::after {
  width: 100%;
}


   /* ==========================================================
   🌊 KEYFRAME ANIMATIONS
   ========================================================== */

/* Gentle up-down motion with a subtle rotation */
@keyframes waveFloat {
    0% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(1deg); }
    100% { transform: translateY(10px) rotate(-1deg); }
}

/* Soft pulsing glow */
@keyframes waveGlow {
    0%   { opacity: 0.25; filter: blur(1px); }
    50%  { opacity: 0.4;  filter: blur(2px); }
    100% { opacity: 0.25; filter: blur(1px); }
}


@keyframes pulseGlow {
  0% { opacity: 0.2; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(1.05); }
  100% { opacity: 0.2; transform: scale(1); }
}

@keyframes floatOrb {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-15px) rotate(5deg); }
  100% { transform: translateY(15px) rotate(-5deg); }
}