/*
 * Garage034.com section backgrounds
 * 00 / About the studio
 * 02 / Signature service
 *
 * This file intentionally contains only the added background treatment.
 * The original site.css and site.js remain unchanged.
 */

.manifesto,
.card-focus {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: var(--paper);
}

.manifesto {
  background-color: var(--ink);
  background-image:
    linear-gradient(rgba(21, 21, 21, 0.76), rgba(21, 21, 21, 0.84)),
    url("./about-maze-1600.webp");
  background-image:
    linear-gradient(rgba(21, 21, 21, 0.76), rgba(21, 21, 21, 0.84)),
    image-set(
      url("./about-maze-1600.avif") type("image/avif") 1x,
      url("./about-maze-1600.webp") type("image/webp") 1x
    );
}

.card-focus {
  background-color: #003b24;
  background-image:
    linear-gradient(rgba(0, 31, 19, 0.72), rgba(0, 22, 14, 0.86)),
    url("./signature-tech-1600.webp");
  background-image:
    linear-gradient(rgba(0, 31, 19, 0.72), rgba(0, 22, 14, 0.86)),
    image-set(
      url("./signature-tech-1600.avif") type("image/avif") 1x,
      url("./signature-tech-1600.webp") type("image/webp") 1x
    );
}

.manifesto > *,
.card-focus > * {
  position: relative;
  z-index: 1;
}

.manifesto .section-index,
.manifesto .glitch-title,
.manifesto .manifesto-note,
.card-focus .card-copy {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.68);
}

/* Keep the animated card readable as an object placed over the new background. */
.card-focus .card-showcase {
  text-shadow: none;
}

/*
 * Let the Signature service artwork remain visible behind the flipping card.
 * Only the stage panel is removed; the card, animation and labels are preserved.
 */
.card-focus .namecard-motion-label {
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.card-focus .namecard-motion-label::before,
.card-focus .namecard-motion-label::after {
  display: none;
}

.card-focus .namecard-side-label {
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.85);
}

@media (max-width: 620px) {
  .manifesto {
    background-image:
      linear-gradient(rgba(21, 21, 21, 0.78), rgba(21, 21, 21, 0.86)),
      url("./about-maze-960.webp");
    background-image:
      linear-gradient(rgba(21, 21, 21, 0.78), rgba(21, 21, 21, 0.86)),
      image-set(
        url("./about-maze-960.avif") type("image/avif") 1x,
        url("./about-maze-960.webp") type("image/webp") 1x
      );
    background-position: 52% center;
  }

  .card-focus {
    background-image:
      linear-gradient(rgba(0, 31, 19, 0.76), rgba(0, 22, 14, 0.88)),
      url("./signature-tech-960.webp");
    background-image:
      linear-gradient(rgba(0, 31, 19, 0.76), rgba(0, 22, 14, 0.88)),
      image-set(
        url("./signature-tech-960.avif") type("image/avif") 1x,
        url("./signature-tech-960.webp") type("image/webp") 1x
      );
    background-position: 58% center;
  }
}

@media (forced-colors: active) {
  .manifesto,
  .card-focus {
    background-image: none;
  }
}