/* ════════════════════════════════════════════════════════════
   IMAGE OVERLAY GRADIENTS — Standalone div classes
   Directional shadows for image backgrounds
   Light/dark theme-responsive
   
   Usage: <div class="overlay-left"></div> inside image container
═════════════════════════════════════════════════════════════ */

/* ── Base overlay ──────────────────────────────────────────── */
.overlay-hero {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* ════════════════════════════════════════════════════════════
   LEFT-SIDE OVERLAYS (fade from left)
   Use case: Text on left, image on right
═════════════════════════════════════════════════════════════ */

/* Light theme — fade to page background */
.overlay-left {
  background: linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 15%,
    rgba(var(--bg-rgb), 0.85) 30%,
    rgba(var(--bg-rgb), 0.4) 50%,
    transparent 70%
  );
}

/* Strong left — more coverage */
.overlay-left-strong {
  background: linear-gradient(90deg,
    var(--bg) 0%,
    var(--bg) 25%,
    rgba(var(--bg-rgb), 0.9) 40%,
    rgba(var(--bg-rgb), 0.6) 60%,
    transparent 80%
  );
}

/* Subtle left — minimal fade */
.overlay-left-subtle {
  background: linear-gradient(90deg,
    rgba(var(--bg-rgb), 0.7) 0%,
    rgba(var(--bg-rgb), 0.3) 30%,
    transparent 60%
  );
}

/* Dark theme adjustments for left overlays */
.dark.overlay-left,
[data-theme="dark"] .overlay-left {
  background: linear-gradient(90deg,
    #0d0c0a 0%,
    #0d0c0a 12%,
    rgba(13,12,10,0.88) 28%,
    rgba(13,12,10,0.5) 50%,
    transparent 72%
  );
}

.dark.overlay-left-strong,
[data-theme="dark"] .overlay-left-strong {
  background: linear-gradient(90deg,
    #0d0c0a 0%,
    #0d0c0a 22%,
    rgba(13,12,10,0.92) 38%,
    rgba(13,12,10,0.65) 58%,
    transparent 78%
  );
}

.dark.overlay-left-subtle,
[data-theme="dark"] .overlay-left-subtle {
  background: linear-gradient(90deg,
    rgba(13,12,10,0.75) 0%,
    rgba(13,12,10,0.35) 32%,
    transparent 62%
  );
}


/* ════════════════════════════════════════════════════════════
   RIGHT-SIDE OVERLAYS (fade from right)
   Use case: Text on right, image on left
═════════════════════════════════════════════════════════════ */

.overlay-right {
  background: linear-gradient(270deg,
    var(--bg) 0%,
    var(--bg) 15%,
    rgba(var(--bg-rgb), 0.85) 30%,
    rgba(var(--bg-rgb), 0.4) 50%,
    transparent 70%
  );
}

.overlay-right-strong {
  background: linear-gradient(270deg,
    var(--bg) 0%,
    var(--bg) 25%,
    rgba(var(--bg-rgb), 0.9) 40%,
    rgba(var(--bg-rgb), 0.6) 60%,
    transparent 80%
  );
}

.overlay-right-subtle {
  background: linear-gradient(270deg,
    rgba(var(--bg-rgb), 0.7) 0%,
    rgba(var(--bg-rgb), 0.3) 30%,
    transparent 60%
  );
}

[data-theme="dark"] .overlay-right {
  background: linear-gradient(270deg,
    #0d0c0a 0%,
    #0d0c0a 12%,
    rgba(13,12,10,0.88) 28%,
    rgba(13,12,10,0.5) 50%,
    transparent 72%
  );
}

[data-theme="dark"] .overlay-right-strong {
  background: linear-gradient(270deg,
    #0d0c0a 0%,
    #0d0c0a 22%,
    rgba(13,12,10,0.92) 38%,
    rgba(13,12,10,0.65) 58%,
    transparent 78%
  );
}

[data-theme="dark"] .overlay-right-subtle {
  background: linear-gradient(270deg,
    rgba(13,12,10,0.75) 0%,
    rgba(13,12,10,0.35) 32%,
    transparent 62%
  );
}


/* ════════════════════════════════════════════════════════════
   TOP OVERLAYS (fade from top)
   Use case: Text at top, image below
═════════════════════════════════════════════════════════════ */

.overlay-top {
  background: linear-gradient(180deg,
    var(--bg) 0%,
    var(--bg) 12%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

.overlay-top-strong {
  background: linear-gradient(180deg,
    var(--bg) 0%,
    var(--bg) 20%,
    rgba(var(--bg-rgb), 0.9) 35%,
    rgba(var(--bg-rgb), 0.6) 55%,
    transparent 75%
  );
}

.overlay-top-subtle {
  background: linear-gradient(180deg,
    rgba(var(--bg-rgb), 0.75) 0%,
    rgba(var(--bg-rgb), 0.35) 28%,
    transparent 58%
  );
}

[data-theme="dark"] .overlay-top {
  background: linear-gradient(180deg,
    #0d0c0a 0%,
    #0d0c0a 10%,
    rgba(13,12,10,0.88) 24%,
    rgba(13,12,10,0.5) 44%,
    transparent 66%
  );
}

[data-theme="dark"] .overlay-top-strong {
  background: linear-gradient(180deg,
    #0d0c0a 0%,
    #0d0c0a 18%,
    rgba(13,12,10,0.92) 33%,
    rgba(13,12,10,0.65) 53%,
    transparent 73%
  );
}

[data-theme="dark"] .overlay-top-subtle {
  background: linear-gradient(180deg,
    rgba(13,12,10,0.78) 0%,
    rgba(13,12,10,0.38) 30%,
    transparent 60%
  );
}


/* ════════════════════════════════════════════════════════════
   BOTTOM OVERLAYS (fade from bottom)
   Use case: Text at bottom, image above
═════════════════════════════════════════════════════════════ */

.overlay-bottom {
  background: linear-gradient(0deg,
    var(--bg) 0%,
    var(--bg) 12%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

.overlay-bottom-strong {
  background: linear-gradient(0deg,
    var(--bg) 0%,
    var(--bg) 20%,
    rgba(var(--bg-rgb), 0.9) 35%,
    rgba(var(--bg-rgb), 0.6) 55%,
    transparent 75%
  );
}

.overlay-bottom-subtle {
  background: linear-gradient(0deg,
    rgba(var(--bg-rgb), 0.75) 0%,
    rgba(var(--bg-rgb), 0.35) 28%,
    transparent 58%
  );
}

[data-theme="dark"] .overlay-bottom {
  background: linear-gradient(0deg,
    #0d0c0a 0%,
    #0d0c0a 10%,
    rgba(13,12,10,0.88) 24%,
    rgba(13,12,10,0.5) 44%,
    transparent 66%
  );
}

[data-theme="dark"] .overlay-bottom-strong {
  background: linear-gradient(0deg,
    #0d0c0a 0%,
    #0d0c0a 18%,
    rgba(13,12,10,0.92) 33%,
    rgba(13,12,10,0.65) 53%,
    transparent 73%
  );
}

[data-theme="dark"] .overlay-bottom-subtle {
  background: linear-gradient(0deg,
    rgba(13,12,10,0.78) 0%,
    rgba(13,12,10,0.38) 30%,
    transparent 60%
  );
}


/* ════════════════════════════════════════════════════════════
   RADIAL OVERLAYS (vignette from center)
   Use case: Centered text, atmospheric darkening
═════════════════════════════════════════════════════════════ */

/* Center vignette — darkens edges */
.overlay-vignette {
  background: radial-gradient(ellipse at center,
    transparent 25%,
    rgba(0,0,0,0.15) 60%,
    rgba(0,0,0,0.35) 100%
  );
}

.overlay-vignette-strong {
  background: radial-gradient(ellipse at center,
    transparent 20%,
    rgba(0,0,0,0.25) 55%,
    rgba(0,0,0,0.55) 100%
  );
}

.overlay-vignette-subtle {
  background: radial-gradient(ellipse at center,
    transparent 30%,
    rgba(0,0,0,0.08) 65%,
    rgba(0,0,0,0.20) 100%
  );
}

/* Inverse vignette — lightens edges (rare, but useful for dark images) */
.overlay-vignette-inverse {
  background: radial-gradient(ellipse at center,
    transparent 25%,
    rgba(255,255,255,0.08) 60%,
    rgba(255,255,255,0.18) 100%
  );
}

[data-theme="dark"] .overlay-vignette {
  background: radial-gradient(ellipse at center,
    transparent 28%,
    rgba(0,0,0,0.20) 62%,
    rgba(0,0,0,0.45) 100%
  );
}

[data-theme="dark"] .overlay-vignette-strong {
  background: radial-gradient(ellipse at center,
    transparent 22%,
    rgba(0,0,0,0.32) 58%,
    rgba(0,0,0,0.65) 100%
  );
}


/* ════════════════════════════════════════════════════════════
   CORNER OVERLAYS (diagonal fades)
   Use case: Text in one corner, image in opposite
═════════════════════════════════════════════════════════════ */

/* Top-left corner fade */
.overlay-corner-tl {
  background: radial-gradient(ellipse at 0% 0%,
    var(--bg) 0%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

/* Top-right corner fade */
.overlay-corner-tr {
  background: radial-gradient(ellipse at 100% 0%,
    var(--bg) 0%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

/* Bottom-left corner fade */
.overlay-corner-bl {
  background: radial-gradient(ellipse at 0% 100%,
    var(--bg) 0%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

/* Bottom-right corner fade */
.overlay-corner-br {
  background: radial-gradient(ellipse at 100% 100%,
    var(--bg) 0%,
    rgba(var(--bg-rgb), 0.85) 25%,
    rgba(var(--bg-rgb), 0.4) 45%,
    transparent 65%
  );
}

[data-theme="dark"] .overlay-corner-tl,
[data-theme="dark"] .overlay-corner-tr,
[data-theme="dark"] .overlay-corner-bl,
[data-theme="dark"] .overlay-corner-br {
  background: radial-gradient(ellipse,
    #0d0c0a 0%,
    rgba(13,12,10,0.88) 26%,
    rgba(13,12,10,0.45) 46%,
    transparent 66%
  );
}


/* ════════════════════════════════════════════════════════════
   FULL OVERLAYS (entire section darkening/lightening)
   Use case: Low contrast images needing readability boost
═════════════════════════════════════════════════════════════ */

.overlay-darken {
  background: rgba(0,0,0,0.25);
}

.overlay-darken-strong {
  background: rgba(0,0,0,0.45);
}

.overlay-darken-subtle {
  background: rgba(0,0,0,0.12);
}

.overlay-lighten {
  background: rgba(255,255,255,0.20);
}

.overlay-lighten-strong {
  background: rgba(255,255,255,0.35);
}

.overlay-lighten-subtle {
  background: rgba(255,255,255,0.10);
}

[data-theme="dark"] .overlay-darken {
  background: rgba(0,0,0,0.35);
}

[data-theme="dark"] .overlay-darken-strong {
  background: rgba(0,0,0,0.55);
}


/* ════════════════════════════════════════════════════════════
   COMBINED OVERLAYS (stack multiple effects)
   Use case: Apply via multiple div classes for complex fades
   Example: <div class="overlay overlay-left"></div>
            <div class="overlay overlay-vignette"></div>
═════════════════════════════════════════════════════════════ */

/* Multiple overlays work via stacking — each div gets z-index: 1 */
/* Layer them in HTML order — first div = bottom layer */


/* ════════════════════════════════════════════════════════════
   USAGE EXAMPLES
═════════════════════════════════════════════════════════════ */

/*
<!-- Left fade (text on left, image on right) -->
<div class="image-section">
  <img src="image.jpg" alt="">
  <div class="overlay overlay-left"></div>
  <div class="content">Your text here</div>
</div>

<!-- Vignette + bottom fade (centered text at bottom) -->
<div class="image-section">
  <img src="image.jpg" alt="">
  <div class="overlay overlay-vignette"></div>
  <div class="overlay overlay-bottom"></div>
  <div class="content">Your text here</div>
</div>

<!-- Strong right fade (dark theme aware) -->
<div class="image-section">
  <img src="image.jpg" alt="">
  <div class="overlay overlay-right-strong"></div>
  <div class="content">Your text here</div>
</div>

<!-- Corner fade from top-left -->
<div class="image-section">
  <img src="image.jpg" alt="">
  <div class="overlay overlay-corner-tl"></div>
  <div class="content">Your text here</div>
</div>

<!-- Darken entire image for readability -->
<div class="image-section">
  <img src="image.jpg" alt="">
  <div class="overlay overlay-darken"></div>
  <div class="content">Your text here</div>
</div>
*/