/* ===================================
   UNIFIED BACKGROUND SYSTEM
   ================================== */

/* ===== BASE SECTION WITH BACKGROUND ===== */
.section-bg {
  position: relative;
  overflow: hidden;
}

/* ===== BACKGROUND LAYER (Video or Image) ===== */
.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -3;
}

/* Video Backgrounds */
.bg-layer video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Image Backgrounds */
.bg-layer img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Pattern Backgrounds */
.bg-layer.pattern {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Animated Pattern Backgrounds */
.bg-layer.pattern.animated::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  opacity: 0.3;
  z-index: 1;
}

/* ===== OVERLAY LAYER ===== */
.bg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  background: var(--overlay-color, rgba(0, 0, 0, 0.3));
  opacity: var(--overlay-opacity, 1);
}

/* ===== CONTENT LAYER ===== */
.section-bg .container {
  position: relative;
  z-index: 1;
}

/* ===== BACKGROUND TYPES ===== */

/* Video Background */
.bg-video .bg-layer video {
  display: block;
}

.bg-video .bg-layer img {
  display: none;
}

/* Fallback: Show image if video fails */
.bg-video .bg-layer video:not([src]) + img,
.bg-video .bg-layer video[src=""] + img {
  display: block;
}

/* Image Background */
.bg-image .bg-layer img {
  display: block;
}

.bg-image .bg-layer video {
  display: none;
}

/* Pattern Background */
.bg-pattern .bg-layer {
  background-size: var(--pattern-size, 100px 100px);
  background-position: center;
}

/* ===== SPECIFIC PATTERNS ===== */
.bg-pattern[data-pattern="dots"] .bg-layer::before {
  background: 
    radial-gradient(circle, var(--primary-color) 10%, transparent 20%),
    radial-gradient(circle, transparent 10%, var(--accent-color) 20%);
  background-size: 30px 30px;
  background-position: 0 0, 15px 15px;
  animation: moveDotsBackground 20s linear infinite;
}

.bg-pattern[data-pattern="waves"] .bg-layer::before {
  background: repeating-radial-gradient(
    circle at 50% 50%,
    rgba(102, 126, 234, 0.2) 0%,
    transparent 30%
  ),
  repeating-radial-gradient(
    circle at 50% 50%,
    var(--accent-color) 0%,
    var(--accent-color) 5px,
    transparent 5px,
    transparent 15px
  );
  animation: wavePattern 15s ease-in-out infinite;
}

.bg-pattern[data-pattern="grid"] .bg-layer::before {
  background-image:
    linear-gradient(rgba(55, 255, 139, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 255, 139, 0.1) 1px, transparent 1px),
    linear-gradient(rgba(102, 126, 234, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(102, 126, 234, 0.05) 1px, transparent 1px);
  background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
  animation: gridShift 35s linear infinite;
}

.bg-pattern[data-pattern="geometric"] .bg-layer::before {
  background: 
    linear-gradient(45deg, transparent 40%, var(--primary-color) 40%, var(--primary-color) 60%, transparent 60%),
    linear-gradient(-45deg, transparent 40%, var(--accent-color) 40%, var(--accent-color) 60%, transparent 60%);
  background-size: 40px 40px;
  background-position: 0 0, 20px 20px;
  animation: geometricShift 25s linear infinite;
}

.bg-pattern[data-pattern="circuit"] .bg-layer::before {
  background-image:
    linear-gradient(90deg, var(--primary-color) 1px, transparent 1px),
    linear-gradient(180deg, var(--primary-color) 1px, transparent 1px),
    radial-gradient(circle at 20px 20px, var(--accent-color) 2px, transparent 2px),
    radial-gradient(circle at 60px 60px, var(--secondary-color) 2px, transparent 2px);
  background-size: 40px 40px, 40px 40px, 80px 80px, 120px 120px;
  animation: circuitPulse 30s linear infinite;
}

/* ===== PREDEFINED SECTION STYLES ===== */

/* Hero Section */
.hero-bg {
  --overlay-color: rgba(0, 0, 0, 0.3);
  --overlay-opacity: 1;
}

/* Music Video Section */
.music-video-bg {
  --overlay-color: linear-gradient(135deg, rgba(255, 107, 107, 0.3), rgba(238, 90, 36, 0.3));
  --overlay-opacity: 1;
}

/* Documentary Section */
.documentary-bg {
  --overlay-color: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(68, 160, 141, 0.3));
  --overlay-opacity: 1;
}

/* UGC Section */
.ugc-bg {
  --overlay-color: linear-gradient(135deg, rgba(102, 126, 234, 0.3), rgba(118, 75, 162, 0.3));
  --overlay-opacity: 1;
}

/* Motion Design Section */
.motion-bg {
  --overlay-color: linear-gradient(135deg, rgba(168, 237, 234, 0.3), rgba(254, 214, 227, 0.3));
  --overlay-opacity: 1;
}

/* Remoose Section */
.remoose-bg {
  --overlay-color: linear-gradient(135deg, rgba(250, 112, 154, 0.3), rgba(254, 225, 64, 0.3));
  --overlay-opacity: 1;
}

/* Contact Section */
.contact-bg {
  --overlay-color: linear-gradient(135deg, rgba(102, 126, 234, 0.4), rgba(118, 75, 162, 0.4));
  --overlay-opacity: 1;
}

/* About Section */
.about-bg {
  --overlay-color: linear-gradient(135deg, rgba(78, 205, 196, 0.3), rgba(68, 160, 141, 0.3));
  --overlay-opacity: 1;
}

/* ===== UTILITY CLASSES FOR OVERLAY OPACITY ===== */
.overlay-10 { --overlay-opacity: 0.1; }
.overlay-20 { --overlay-opacity: 0.2; }
.overlay-30 { --overlay-opacity: 0.3; }
.overlay-40 { --overlay-opacity: 0.4; }
.overlay-50 { --overlay-opacity: 0.5; }
.overlay-60 { --overlay-opacity: 0.6; }
.overlay-70 { --overlay-opacity: 0.7; }
.overlay-80 { --overlay-opacity: 0.8; }
.overlay-90 { --overlay-opacity: 0.9; }
.overlay-100 { --overlay-opacity: 1; }

/* ===== ANIMATIONS ===== */
@keyframes moveDotsBackground {
  0% { transform: translate(0, 0); }
  100% { transform: translate(30px, 30px); }
}

@keyframes wavePattern {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(10px, 10px) scale(1.1); }
}

@keyframes gridShift {
  0% { background-position: 0 0, 0 0, 0 0, 0 0; }
  100% { background-position: 20px 20px, 20px 20px, 100px 100px, 100px 100px; }
}

@keyframes geometricShift {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.2); }
  100% { transform: rotate(360deg) scale(1); }
}

@keyframes circuitPulse {
  0%, 100% { opacity: 0.1; transform: translate(0, 0); }
  50% { opacity: 0.3; transform: translate(20px, 20px); }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
  .bg-pattern .bg-layer::before {
    background-size: 50% 50%;
    animation-duration: 1.5s;
  }
}

@media (max-width: 480px) {
  .bg-pattern .bg-layer::before {
    background-size: 30% 30%;
    opacity: 0.2;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-motion: reduce) {
  .bg-layer::before {
    animation: none !important;
  }
}