/* Site-wide ambient backdrop — leather-and-gilded-edge, heavily darkened to read as warm-dark texture rather than a photograph. Image drifts at ~half scroll speed (parallax) only while the user actually scrolls; idle = perfectly still. */

/* Give body its own stacking context so the pseudos with z-index:-1 sit above body's bg-color (otherwise they'd escape to html's context and get hidden). */
html body {
  isolation: isolate;
}

html body::before,
html body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

html body::before {
  /* Extend beyond the viewport (~20%) so parallax translate (±15%) plus scale (up to 1.10) never exposes a hard edge. */
  inset: -20% 0;
  background-image: url("/agps/image5.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

html body::after {
  background:
    radial-gradient(
      ellipse 130% 105% at 50% 50%,
      rgba(12, 13, 15, 0.66) 0%,
      rgba(12, 13, 15, 0.90) 65%,
      #0c0d0f 100%
    );
}

/* Scroll-driven parallax: drift the image vertically as the document scrolls. Tied to scroll progress, so the image is still when you stop. Gated on @supports so older browsers (no scroll-timeline) just get a static backdrop — graceful no-op. */
@keyframes tubo-bg-parallax {
  from { transform: translateY(15%) scale(1.00); }
  50%  { transform: translateY(0%)   scale(1.05); }
  to   { transform: translateY(-15%) scale(1.10); }
}

@keyframes tubo-bg-parallax-mobile {
  from { transform: translateY(0%)   scale(1.00); }
  to   { transform: translateY(-25%) scale(1.12); }
}

@supports (animation-timeline: scroll()) {
  html body::before {
    animation: tubo-bg-parallax linear both;
    animation-timeline: scroll(root);
    animation-duration: auto;
    will-change: transform;
  }
}

/* Mobile: dedicated 1080x1351 portrait crop framing both halves of the key visual — carved spine panel + leather transition band + gilded page-edge "gold wall". Use `contain` (not `cover`) so the entire book fits inside the viewport at once — the user reads it as "a book sitting at depth in the frame", not a zoomed-in close-up. */
@media (max-width: 768px) {
  html body::before {
    background-image: url("/agps/image5-mobile.jpg");
    background-size: contain;
    background-position: center;
  }
  /* Mobile overlay: contain-fit puts the book in the middle band of viewport with bg-color above/below. Keep it dark at the top (hero copy contrast) and bottom (sticky CTA contrast), and let the middle stay relatively transparent so the book reads. */
  html body::after {
    background:
      linear-gradient(
        to bottom,
        rgba(12, 13, 15, 0.93) 0%,
        rgba(12, 13, 15, 0.78) 22%,
        rgba(12, 13, 15, 0.62) 50%,
        rgba(12, 13, 15, 0.82) 85%,
        rgba(12, 13, 15, 0.94) 100%
      );
  }
}

@supports (animation-timeline: scroll()) {
  @media (max-width: 768px) {
    html body::before {
      animation-name: tubo-bg-parallax-mobile;
    }
  }
}

/* Respect users who prefer no motion. */
@media (prefers-reduced-motion: reduce) {
  html body::before {
    animation: none;
  }
}