body {
  padding: 0;
  background-color: #111827;
}

/* keep elements hidden until they are in view */
.animate-on-scroll {
  opacity: 0;
}

/* when animate.css classes are added the element becomes visible */
.animate-on-scroll.animate__animated {
  opacity: 1;
}

/* Define the custom rotation animation */
@keyframes rotateWheel {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* Apply the continuous rotation to the wheel container */
.rotating-wheel {
  /* 40 seconds, slow and steady speed, loops forever */
  animation: rotateWheel 40s linear infinite;
}

/* Lazy Loading Styles */
.lazy-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

.lazy-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.loader-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(255, 255, 255, 0.1);
  border-left: 4px solid #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

.loader-text {
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 8px;
  font-weight: 500;
}

.loader-progress {
  color: #9ca3af;
  font-size: 0.9rem;
}

.progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  margin: 15px 0;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  width: 0%;
  transition: width 0.3s ease;
}

/* Lazy loaded images */
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s ease;
}

.lazy-image.loaded {
  opacity: 1;
}

/* Image placeholder while loading */
.image-placeholder {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Video loading placeholder */
.video-loading {
  position: relative;
}

.video-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  z-index: 10;
}


section.container-fluid {
  padding: 0 !important;
}

.pink-bg {
    background-color: #eb2a61;
}

.lightred-bg {
    background-color: #fc757c;
}

.purple-bg {
    background-color: #a27ad6;
}

/* Smooth modal animation */
    #videoModal {
        animation: fadeIn 0.3s ease-out;
    }

    #videoModal > div {
        animation: slideUp 0.4s ease-out;
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes slideUp {
        from {
            transform: translateY(20px);
            opacity: 0;
        }
        to {
            transform: translateY(0);
            opacity: 1;
        }
    }

    /* Video controls styling */
    video::-webkit-media-controls-panel {
        background-image: linear-gradient(transparent, rgba(0,0,0,0.8));
    }

    /* Hide download button in video controls */
    video::-internal-media-controls-download-button {
        display: none;
    }

    video::-webkit-media-controls-enclosure {
        overflow: hidden;
    }

    video::-webkit-media-controls-panel {
        width: calc(100% + 30px);
    }



        .content-container {
            position: relative;
            z-index: 10;
            text-align: center;
            padding: 2rem;
        }

        .gradient-background {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            overflow: hidden;
        }

        .gradient-sphere {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
        }

          .sphere-1 {
              width: 40vw;
              height: 40vw;
              background: linear-gradient(40deg, rgba(235, 42, 97, 0.9), rgba(252, 117, 124, 0.4));
              top: -10%;
              left: -10%;
              animation: float-1 15s ease-in-out infinite alternate;
          }

          .sphere-2 {
              width: 45vw;
              height: 45vw;
              background: linear-gradient(240deg, rgba(252, 117, 124, 0.9), rgba(162, 122, 214, 0.4));
              bottom: -20%;
              right: -10%;
              animation: float-2 18s ease-in-out infinite alternate;
          }

          .sphere-3 {
              width: 30vw;
              height: 30vw;
              background: linear-gradient(120deg, rgba(162, 122, 214, 0.8), rgba(235, 42, 97, 0.3));
              top: 60%;
              left: 20%;
              animation: float-3 20s ease-in-out infinite alternate;
          }

        .noise-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0.05;
            z-index: 5;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
        }

        @keyframes float-1 {
            0% {
                transform: translate(0, 0) scale(1);
            }
            100% {
                transform: translate(10%, 10%) scale(1.1);
            }
        }

        @keyframes float-2 {
            0% {
                transform: translate(0, 0) scale(1);
            }
            100% {
                transform: translate(-10%, -5%) scale(1.15);
            }
        }

        @keyframes float-3 {
            0% {
                transform: translate(0, 0) scale(1);
                opacity: 0.3;
            }
            100% {
                transform: translate(-5%, 10%) scale(1.05);
                opacity: 0.6;
            }
        }

        .grid-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 40px 40px;
            background-image: 
                linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
                linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
            z-index: 2;
        }

        .glow {
            position: absolute;
            width: 40vw;
            height: 40vh;
            background: radial-gradient(circle, rgba(72, 0, 255, 0.15), transparent 70%);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            animation: pulse 8s infinite alternate;
            filter: blur(30px);
        }

        @keyframes pulse {
            0% {
                opacity: 0.3;
                transform: translate(-50%, -50%) scale(0.9);
            }
            100% {
                opacity: 0.7;
                transform: translate(-50%, -50%) scale(1.1);
            }
        }

        .particles-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 3;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0;
            pointer-events: none;
        }


        /* Ambient light visuals */
        #jli-numbers .ambient-light{
            position:absolute;
            width:var(--size,200px);
            height:var(--size,200px);
            border-radius:50%;
            filter:blur(40px);
            transform:translate(-50%,-50%);
            pointer-events:none;
            mix-blend-mode:screen;
            opacity:.12;
            animation: float-xy 8s ease-in-out infinite, pulse 6s ease-in-out infinite;
            background: radial-gradient(circle at 30% 30%,
                hsla(var(--h,240), var(--s,80%), var(--l,60%), .95),
                hsla(var(--h,240), var(--s,80%), var(--l,60%), .25) 40%,
                transparent 65%);
            will-change: transform, opacity, left, top;
        }

        /* subtle movement */
        @keyframes float-xy{
            0%{ transform: translate(-50%,-50%) translateY(0px) translateX(0px); }
            50%{ transform: translate(-50%,-50%) translateY(-18px) translateX(12px); }
            100%{ transform: translate(-50%,-50%) translateY(0px) translateX(0px); }
        }
        @keyframes pulse{
            0%{ opacity: .06; }
            50%{ opacity: .16; }
            100%{ opacity: .06; }
        }

        /* small helper animation if Tailwind custom class not available */
@keyframes spin-slow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin-slow 40s linear infinite; }