/* Animated Stained Glass Background */

.animated-glass-bg {
  display: grid !important;
  grid-template-columns: repeat(8, 1fr);
  grid-auto-rows: minmax(100px, 1fr);
  gap: 8px;
  padding: 6px;
}

/* Panel sizes for irregular grid */
.size-1x1 { grid-column: span 1; grid-row: span 1; }
.size-2x1 { grid-column: span 2; grid-row: span 1; }
.size-1x2 { grid-column: span 1; grid-row: span 2; }
.size-2x2 { grid-column: span 2; grid-row: span 2; }
.size-3x1 { grid-column: span 3; grid-row: span 1; }
.size-1x3 { grid-column: span 1; grid-row: span 3; }
.size-3x2 { grid-column: span 3; grid-row: span 2; }
.size-2x3 { grid-column: span 2; grid-row: span 3; }

.bg-panel {
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 30px rgba(0,0,0,0.75);
  filter: saturate(1.2) contrast(1.1);
  isolation: isolate; /* Creates new stacking context */
}

/* Sun glow - each shard has gradient from upper-left corner */
.bg-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 230, 0.65) 0%,
    rgba(255, 250, 200, 0.35) 30%,
    rgba(255, 240, 180, 0.12) 60%,
    transparent 100%
  );
}

/* Subtle glass texture */
.bg-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.6' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: overlay;
  z-index: 15;
}

.bg-split {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  transform-origin: center center;
  z-index: 5;
  isolation: isolate; /* Own stacking context for split */
}

.bg-split-color {
  position: absolute;
  top: 8px;
  left: 8px;
  right: 8px;
  height: calc(50% - 8px);
  border: 8px solid #1a1a1a;
  overflow: hidden;
}

/* Glow on the animated split-color shapes */
.bg-split-color::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 230, 0.65) 0%,
    rgba(255, 250, 200, 0.35) 30%,
    rgba(255, 240, 180, 0.12) 60%,
    transparent 100%
  );
}

/* Circle/ellipse shapes for some panels */
.bg-panel:nth-child(5n) .bg-split-color {
  border-radius: 50%;
  height: 80%;
  width: 80%;
  left: 10%;
}

/* Oval shapes */
.bg-panel:nth-child(7n) .bg-split-color {
  border-radius: 50%;
  height: 60%;
  width: 120%;
  left: -10%;
}

/* Glow float animation - gentle movement */
@keyframes glowFloat {
  0%, 100% { opacity: 0.85; transform: translate(0, 0) scale(1); }
  50% { opacity: 1; transform: translate(2%, 2%) scale(1.05); }
}

/* Slow sway animations - 8 variations for variety */
@keyframes bgSway1 {
  0%, 100% { transform: rotate(-80deg); }
  50% { transform: rotate(80deg); }
}

@keyframes bgSway2 {
  0%, 100% { transform: rotate(75deg); }
  50% { transform: rotate(-75deg); }
}

@keyframes bgSway3 {
  0%, 100% { transform: rotate(-70deg); }
  50% { transform: rotate(90deg); }
}

@keyframes bgSway4 {
  0%, 100% { transform: rotate(85deg); }
  50% { transform: rotate(-65deg); }
}

@keyframes bgSway5 {
  0%, 100% { transform: rotate(-60deg); }
  50% { transform: rotate(80deg); }
}

@keyframes bgSway6 {
  0%, 100% { transform: rotate(70deg); }
  50% { transform: rotate(-85deg); }
}

@keyframes bgSway7 {
  0%, 100% { transform: rotate(-90deg); }
  50% { transform: rotate(60deg); }
}

@keyframes bgSway8 {
  0%, 100% { transform: rotate(65deg); }
  50% { transform: rotate(-70deg); }
}

/* Responsive adjustments */
@media (max-width: 900px) {
  .animated-glass-bg {
    grid-template-columns: repeat(6, 1fr);
  }
}

@media (max-width: 600px) {
  .animated-glass-bg {
    grid-template-columns: repeat(4, 1fr);
  }
}