/* ==========================================================================
   NEXT PANE WINDOW CLEANING - UNIQUE BACKGROUND SHAPES & AMBIENT EFFECTS
   Ultra-premium geometric shapes, refraction prisms, mesh gradients & glass layers
   ========================================================================== */

:root {
  --prism-cyan: rgba(6, 182, 212, 0.12);
  --prism-sky: rgba(14, 165, 233, 0.15);
  --prism-blue: rgba(2, 132, 199, 0.08);
  --prism-gold: rgba(245, 158, 11, 0.08);
}

/* Base shape container */
.shape-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

/* 1. Geometric Prisms & Faceted Glass Panels */
.prism-shape {
  position: absolute;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.6) 0%, rgba(224, 242, 254, 0.2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 
    0 20px 40px -15px rgba(2, 132, 199, 0.08),
    inset 0 1px 2px rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.prism-1 {
  width: 380px;
  height: 380px;
  top: -80px;
  right: -60px;
  transform: rotate(22deg);
  background: linear-gradient(145deg, rgba(56, 189, 248, 0.15), rgba(255, 255, 255, 0.45));
}

.prism-2 {
  width: 260px;
  height: 260px;
  bottom: 8%;
  left: -80px;
  transform: rotate(-18deg);
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(255, 255, 255, 0.4));
}

.prism-3 {
  width: 160px;
  height: 160px;
  top: 45%;
  right: 6%;
  transform: rotate(45deg);
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(255, 255, 255, 0.5));
}

/* 2. Architectural Pane Grid Motif */
.bg-window-grid {
  position: absolute;
  inset: 0;
  background-image: 
    linear-gradient(to right, rgba(2, 132, 199, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(2, 132, 199, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.8) 0%, transparent 75%);
}

.bg-dot-matrix {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(14, 165, 233, 0.12) 1.5px, transparent 1.5px);
  background-size: 24px 24px;
  opacity: 0.6;
}

/* 3. Radiant Ambient Glow Orbs */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  pointer-events: none;
}

.glow-orb-cyan {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.28) 0%, rgba(6, 182, 212, 0.05) 70%, transparent 100%);
  top: 10%;
  left: 15%;
}

.glow-orb-blue {
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(2, 132, 199, 0.2) 0%, rgba(30, 58, 138, 0.04) 70%, transparent 100%);
  top: -100px;
  right: -100px;
}

.glow-orb-warm {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 70%);
  bottom: 10%;
  right: 25%;
}

/* 4. Hexagonal Crystalline Water Badges */
.crystal-hex {
  position: absolute;
  width: 120px;
  height: 120px;
  background: rgba(255, 255, 255, 0.5);
  border: 1.5px solid rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  box-shadow: 0 10px 30px rgba(2, 132, 199, 0.1);
  animation: floatSlow 8s ease-in-out infinite alternate;
}

.crystal-hex-1 {
  top: 18%;
  left: 4%;
}

.crystal-hex-2 {
  bottom: 25%;
  right: 5%;
  width: 85px;
  height: 85px;
  animation-duration: 11s;
  animation-delay: -3s;
}

@keyframes floatSlow {
  0% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(6deg); }
  100% { transform: translateY(8px) rotate(-4deg); }
}

/* 5. Refraction Glint & Sparkle Accents */
.sparkle-icon {
  position: absolute;
  display: inline-block;
  color: #38bdf8;
  animation: pulseGlint 3s ease-in-out infinite;
}

@keyframes pulseGlint {
  0%, 100% { opacity: 0.3; transform: scale(0.9) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.15) rotate(15deg); }
}

/* 6. Section Glass Wave Dividers */
.shape-divider {
  width: 100%;
  overflow: hidden;
  line-height: 0;
  transform: translateZ(0);
}

.shape-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 64px;
}

.shape-divider-curve path {
  fill: #ffffff;
}

.shape-divider-curve-reverse path {
  fill: #f8fafc;
}

/* 7. Dark Section Shape Atmosphere */
.section-dark .prism-shape {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(14, 165, 233, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.section-dark .bg-window-grid {
  background-image: 
    linear-gradient(to right, rgba(56, 189, 248, 0.07) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(56, 189, 248, 0.07) 1px, transparent 1px);
}

.section-dark .glow-orb-cyan {
  background: radial-gradient(circle, rgba(14, 165, 233, 0.35) 0%, transparent 70%);
}

.section-dark .glow-orb-blue {
  background: radial-gradient(circle, rgba(3, 105, 161, 0.3) 0%, transparent 70%);
}