/* Safe defaults — prevent any decorative overflow from causing horizontal
   scroll, and keep media within their containers. The page CSS already
   handles most layout responsively, but bolt/marquee/yellow-blob shapes
   are intentionally oversized and rely on clipping. */
html, body { overflow-x: hidden; max-width: 100vw; }
img, video, iframe { max-width: 100%; height: auto; }

@media (max-width: 720px) {
  .marquee-strip { overflow: hidden; }
  iframe { width: 100%; min-height: 220px; }
}

/* ============================================================
   Hero brand mark — "atelier signature"
   Oversized faded logo stamped bottom-right of every hero variant.
   Sits at z-index 2 (above per-variant background art at z-index 1,
   below .hero-content at z-index 3 and .hero-meta at z-index 4).
   mix-blend-mode: screen lifts the white-ish brand mark out of the
   dark substrate without ever crossing into "bright" territory.
   A 22s opacity pulse gives it a slow, ambient breath.
   ============================================================ */
.hero::before {
  content: "";
  position: absolute;
  right: -8%;
  bottom: -12%;
  width: 78vw;
  height: 78vw;
  max-width: 1100px;
  max-height: 1100px;
  background: url("../img/logopng.png") no-repeat right bottom / contain;
  mix-blend-mode: screen;
  opacity: 0.085;
  pointer-events: none;
  z-index: 2;
  /* Feather the edges so it dissolves into the canvas instead of
     showing a hard rectangular crop. */
  -webkit-mask-image: radial-gradient(ellipse at 75% 75%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 75% 75%, #000 30%, transparent 78%);
  filter: contrast(1.1) saturate(0.6);
  animation: adindaMarkBreathe 22s ease-in-out infinite;
  will-change: opacity;
}

/* Hero variant 1 has a full-bleed photo. Boost the blend a touch and
   lift opacity slightly so the mark survives over photographic noise. */
.hero-v1::before {
  mix-blend-mode: overlay;
  opacity: 0.18;
  filter: contrast(1.2) brightness(1.1) saturate(0.8);
}

/* Hero variant 2 already has a bright bolt at right; nudge the mark
   to the lower-left corner so they don't overlap. */
.hero-v2::before {
  right: auto;
  left: -10%;
  bottom: -14%;
  background-position: left bottom;
  -webkit-mask-image: radial-gradient(ellipse at 25% 75%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse at 25% 75%, #000 30%, transparent 78%);
}

@keyframes adindaMarkBreathe {
  0%, 100% { opacity: 0.06; }
  50%      { opacity: 0.11; }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before { animation: none; opacity: 0.085; }
}

/* Mobile: shrink, recenter to bottom, soften further so it never
   competes with the stacked CTA buttons or sub-headline. */
@media (max-width: 720px) {
  .hero::before {
    width: 130vw;
    height: 130vw;
    max-width: none;
    max-height: none;
    right: -15vw;
    left: -15vw;
    bottom: -10vh;
    background-position: center bottom;
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(ellipse at 50% 80%, #000 25%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 80%, #000 25%, transparent 72%);
  }
  .hero-v2::before {
    left: -15vw;
    background-position: center bottom;
    -webkit-mask-image: radial-gradient(ellipse at 50% 80%, #000 25%, transparent 72%);
            mask-image: radial-gradient(ellipse at 50% 80%, #000 25%, transparent 72%);
  }
  .hero-v1::before { opacity: 0.14; }
}