/* ==========================================================
   Apple-Style Modern Clip-Path & Glow Reveal Banner
   ========================================================== */

.fullwidth-roof-reveal-banner {
  position: relative;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 650px;
  overflow: hidden;
  background: var(--bg-primary);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}

.roof-banner-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  will-change: clip-path, transform;
}

/* Base Damaged Layer */
.roof-damaged-banner {
  background-image: linear-gradient(rgba(10, 12, 16, 0.55), rgba(10, 12, 16, 0.7)), 
                    url('../../storage/uploads/projectsgallery/basement-waterproofing-mansoura-13.jpg');
  z-index: 1;
}

/* Modern Diagonal Clip-Path Reveal Layer */
.roof-insulated-banner {
  background-image: linear-gradient(rgba(30, 64, 175, 0.3), rgba(10, 12, 16, 0.6)), 
                    url('../../storage/uploads/projectsgallery/al-sawy-waterproofing-egypt-1.jpg');
  z-index: 2;
  /* Diagonal Clip Path driven dynamically by JS */
  clip-path: polygon(0 0, 0% 0, 0% 100%, 0 100%);
  transition: clip-path 0.05s ease-out;
}

/* Laser Scan Line Effect across the transition seam */
.scan-line-laser {
  position: absolute;
  top: 0;
  left: 0%;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, transparent, var(--gold-accent), #ffffff, var(--gold-accent), transparent);
  box-shadow: 0 0 25px var(--gold-accent), 0 0 50px var(--gold-glow);
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  transition: left 0.05s ease-out, opacity 0.3s ease;
}

.roof-banner-overlay-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 90%;
  max-width: 850px;
  pointer-events: none;
}