/* ===================================================================
   IMAGE PROTECTION — Prevent casual downloading of asset images
   CSS watermark overlay + interaction blocking
   =================================================================== */

/* --- Protected image container --- */
.img-protected {
  position: relative;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Transparent overlay blocks right-click "Save image as" */
.img-protected::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: default;
}

/* Disable drag on protected images */
.img-protected img,
.img-protected .img-bg {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}

/* --- CSS Watermark overlay --- */
.img-watermark::before {
  content: '\00A9  DIVINE STUDIOS';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-20deg);
  font-family: var(--font-heading, 'Exo 2', sans-serif);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.25);
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
}

/* Larger watermark for hero/full-width images */
.img-watermark--lg::before {
  font-size: 2.2rem;
  letter-spacing: 0.4em;
  color: rgba(255, 255, 255, 0.3);
}

/* --- Background image approach (no <img> to save) --- */
.img-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* --- Page background with dark overlay --- */
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}

.page-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(1px) brightness(0.55) saturate(1.3);
}

.page-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(6, 8, 14, 0.5) 0%,
    rgba(6, 8, 14, 0.3) 30%,
    rgba(6, 8, 14, 0.35) 70%,
    rgba(6, 8, 14, 0.8) 100%
  );
}

/* Per-page backgrounds */
/* Make body & sections transparent so page-bg image shows through */
body.has-page-bg {
  background-color: transparent;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body.has-page-bg main {
  background: transparent;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: calc(var(--nav-height) + var(--space-xl));
}

body.has-page-bg .team-section {
  background: transparent;
  padding-top: 0 !important;
}

body.has-page-bg .footer {
  background: transparent;
  flex-shrink: 0;
}

/* About page — image LEFT, content RIGHT */
.page-bg--about {
  background: rgb(22, 22, 22);
}

/* Character image — full cover, image already has character left + clean right */
.page-bg--about::before {
  background-image: url('/assets/images/Wallpapers/about-hero.png');
  background-size: cover;
  background-position: center 40%;
  filter: brightness(0.7);
}

.page-bg--about::after {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 40%,
      rgba(6, 8, 14, 0.4) 60%,
      rgba(6, 8, 14, 0.6) 80%,
      rgba(6, 8, 14, 0.7) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 8, 14, 0.3) 0%,
      transparent 15%,
      transparent 85%,
      rgba(6, 8, 14, 0.5) 100%
    );
}

/* About page — offset right of hero character, left-aligned */
body.has-page-bg .team-section .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 10%;
}

body.has-page-bg .section-header {
  text-align: left;
  max-width: 500px;
}

body.has-page-bg .team-grid {
  max-width: 560px;
}

/* Mobile: hero character visible at top, content below with bottom fade */
@media (max-width: 768px) {
  .page-bg--about::before {
    background-position: 15% 20%;
    filter: brightness(0.85);
  }

  .page-bg--about::after {
    background:
      linear-gradient(
        180deg,
        rgba(6, 8, 14, 0.1) 0%,
        rgba(6, 8, 14, 0.3) 35%,
        rgba(6, 8, 14, 0.7) 55%,
        rgba(6, 8, 14, 0.9) 75%,
        rgb(6, 8, 14) 100%
      );
  }

  body.has-page-bg .team-section .container {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    align-items: center;
  }

  body.has-page-bg .section-header {
    text-align: center;
  }

  body.has-page-bg .team-grid {
    max-width: 100%;
  }
}

.page-bg--press::before {
  background-image: url('/assets/images/Wallpapers/HomeBG_02.png');
}

.page-bg--blog::before {
  background-image: url('/assets/images/Wallpapers/screen_2560x1440_2021-10-08_19-02-57.png');
}

.page-bg--contact::before {
  background-image: url('/assets/images/Wallpapers/screen_2560x1440_2021-10-08_16-04-28.png');
}