/* Deskrune v4c — Textured backgrounds (overhaul: actually visible this time)
 *
 * Previous version put noise in `body::before` with `mix-blend-mode: soft-light`
 * which requires a contrasty backdrop AND was being painted behind content
 * via z-index. Visually invisible.
 *
 * v4c approach: noise baked into `body` background-image directly with
 * `background-blend-mode: multiply`. The browser composites the noise onto
 * the background-color before any content paints. Always visible. No
 * z-index gymnastics. Mobile + desktop equivalent.
 *
 * Plus per-section warm gradient washes that breathe slowly. The wash is on
 * `.section.warm` (an existing class on /, /q/, /buy/) so the texture is
 * keyed to the editorial cream sections — not every block.
 */


/* ─── Body paper-grain ─────────────────────────────────────────────────── */

:root.dr-v4 body {
  /* Base color from tokens */
  background-color: var(--dr-paper);

  /* Inline SVG noise filter — much heavier alpha than v4b so it's visible */
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.36  0 0 0 0 0.24  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 360px 360px;
  background-repeat: repeat;
  /* Multiply blends the noise INTO the body color directly */
  background-blend-mode: multiply;
}

/* Dark mode: same blend, lighter color matrix so grain reads on dark paper */
:root.dr-v4[data-theme="dark"] body {
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 360 360' preserveAspectRatio='none'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.95  0 0 0 0 0.93  0 0 0 0 0.89  0 0 0 0.42 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-blend-mode: screen;
}


/* ─── Per-section warm gradient washes (the alive feel) ────────────────── */

:root.dr-v4 .section.warm,
:root.dr-v4 .hero-vp,
:root.dr-v4 .qi-shell,
:root.dr-v4 article.section.warm {
  position: relative;
  isolation: isolate;
  background-color: var(--dr-paper-warm);
}

:root.dr-v4 .section.warm::before,
:root.dr-v4 .hero-vp::before,
:root.dr-v4 .qi-shell::before {
  content: "";
  position: absolute;
  inset: -8%;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 22% 28%, var(--dr-clay-haze) 0%, transparent 65%),
    radial-gradient(72% 60% at 78% 72%, var(--dr-clay-haze) 0%, transparent 70%);
  filter: blur(48px);
  opacity: 0.85;
  animation: dr-mesh-breath 36s var(--dr-ease) infinite;
}

@keyframes dr-mesh-breath {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  50%      { transform: translate3d(2%, 1.2%, 0) scale(1.05); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  :root.dr-v4 .section.warm::before,
  :root.dr-v4 .hero-vp::before,
  :root.dr-v4 .qi-shell::before {
    animation: none;
  }
}


/* ─── Section dividers — subtle texture transitions between sections ───── */

:root.dr-v4 main > section + section,
:root.dr-v4 main > article + section,
:root.dr-v4 main > section + article {
  position: relative;
}
:root.dr-v4 main > section + section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--dr-rule) 18%, var(--dr-rule) 82%, transparent 100%);
  pointer-events: none;
}


/* ─── Mockup / image overflow guards ───────────────────────────────────── */
:root.dr-v4 main { overflow-x: clip; }
:root.dr-v4 main img,
:root.dr-v4 main svg { max-width: 100%; height: auto; }
:root.dr-v4 .live-product,
:root.dr-v4 .qi-card,
:root.dr-v4 .kit-card { overflow: hidden; min-width: 0; }
:root.dr-v4 .hero-product-card { max-width: 100%; min-width: 0; overflow: hidden; }
:root.dr-v4 hr { max-width: 100%; width: 100%; }
:root.dr-v4 .aurora-stage { max-width: 100%; overflow: hidden; }

@media (max-width: 759px) {
  :root.dr-v4 .hero-vp .hero-inner-vp,
  :root.dr-v4 .hero .hero-inner {
    padding-left: clamp(16px, 5vw, 28px);
    padding-right: clamp(16px, 5vw, 28px);
  }
  :root.dr-v4 .hero-product-card { margin-top: 32px; }
}