/* ====================================================
   Section dividers — diagonal, hex-edge, light-beam, radial-fade
   (Wave divider lives in EnergyFlow.css)
   ==================================================== */

/* --- 2. DIAGONAL CUT — 7° angle between two sections ---
   Apply to the START of a section. The section's top edge
   becomes a slanted line via clip-path. */
.divider-diagonal {
  position: relative;
  /* slice 60px tall, leans down-right */
  --slope: 60px;
  margin-top: calc(var(--slope) * -1);
  padding-top: calc(var(--slope) + 2rem);
  clip-path: polygon(0 var(--slope), 100% 0, 100% 100%, 0 100%);
}

/* --- 3. HEXAGONAL EDGE — row of PV cells at bottom of a section --- */
.divider-hex {
  position: relative;
}
.divider-hex::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -16px;
  height: 32px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3Cpattern id='h' x='0' y='0' width='28' height='32' patternUnits='userSpaceOnUse'%3E%3Cpath d='M14 1 L26 8 L26 24 L14 31 L2 24 L2 8 Z' fill='none' stroke='%2310B981' stroke-width='1' opacity='0.5'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23h)'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
}

/* --- 4. LIGHT BEAM — horizontal emerald bar with glow --- */
.divider-beam {
  position: relative;
  height: 100px;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, transparent 0%, rgba(241, 245, 249, 0.30) 50%, transparent 100%);
}
.divider-beam::before {
  content: '';
  width: min(60%, 600px);
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, #6EE7B7 25%, #10B981 50%, #FCD34D 75%, transparent 100%);
  box-shadow:
    0 0 20px rgba(110, 231, 183, 0.7),
    0 0 60px rgba(16, 185, 129, 0.55),
    0 0 100px rgba(252, 211, 77, 0.30);
  border-radius: 999px;
}
.divider-beam::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF7CC, #FCD34D);
  box-shadow:
    0 0 30px #FCD34D,
    0 0 60px rgba(252, 211, 77, 0.7);
}

/* --- 5. RADIAL FADE — section melts into the next via radial gradient blur --- */
.divider-radial {
  position: relative;
  height: 140px;
  background: radial-gradient(ellipse at 50% 0%, rgba(16, 185, 129, 0.18), transparent 70%);
  /* Strong blur on this band to "melt" content */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, black 50%, transparent 100%);
}
.divider-radial::before {
  content: '';
  position: absolute; inset: 0;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}