/* ============================================================
   SITOT — Background drift layer
   Three brand-flavored marks behind all content, on the paper plane.
     • Mark A — large ring + centered brick dot   (wordmark echo)
     • Mark B — medium ring + "RING · 02" label   (printer's frame index)
     • Mark C — small broken-arc compass + spin    (atelier compass)

   Sits at z-index:-1 inside body's isolated stacking context
   (system.css sets `body { isolation: isolate }`), where the stock dot
   grid lived. Opaque sections (peach/ink) and the mobile menu overlay
   naturally veil it; only paper areas reveal it.

   Motion = SCROLL ONLY, via CSS scroll-driven animations
   (Chromium 115+, Safari 26+). Pure CSS + inline SVG — no JS, no GSAP.

   DESIGN INVARIANT: the base (0% / no-support / no-scroll) state is
   already a tasteful ON-SCREEN composition. Scroll only nudges marks a
   modest extra distance. Guarantees visibility on short legal pages and
   on browsers without animation-timeline support.
   ============================================================ */

body.has-drift::before { display: none !important; }   /* replace stock dot grid */

.drift {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;          /* clips drifting marks → no horizontal scrollbar */
  contain: strict;           /* cheap paint/layout isolation; never reflows page */
}

/* Shared ring primitive */
.d-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(184, 92, 60, 0.30);   /* rgba(--brick) */
  will-change: transform;
}

/* Mark A — large, slow, brick dot centered. Straddles left edge (~70% on paper). */
.d-ring--a {
  top: 12vh; left: -90px; width: 380px; height: 380px;
  border-color: rgba(184, 92, 60, 0.18);
  display: flex; align-items: center; justify-content: center;
}
.d-ring__dot { width: 14px; height: 14px; border-radius: 50%; background: var(--brick); opacity: 0.55; }

/* Mark B — medium, monospace label. Anchored from the right, fully on-screen. */
.d-ring--b { top: 50vh; right: 6vw; width: 200px; height: 200px; border-color: rgba(184, 92, 60, 0.30); }
.d-ring__label {
  position: absolute; top: 12px; left: 14px;
  font: 600 9px/1 ui-monospace, "SFMono-Regular", "Menlo", monospace;
  letter-spacing: 0.18em; color: var(--brick); opacity: 0.7; white-space: nowrap;
}

/* Mark C — small, counter-drift, broken-arc compass. Lower-left, on-screen. */
.d-compass { position: absolute; top: 70vh; left: 8vw; width: 140px; height: 140px; color: var(--brick); will-change: transform; }
.d-compass svg { display: block; width: 100%; height: 100%; opacity: 0.55; }

/* Scroll-driven motion (progressive enhancement). Marks start at on-screen
   base (0%) and drift a MODEST extra distance to 100% (page bottom). */
@supports (animation-timeline: scroll()) {
  .d-ring, .d-compass {
    animation-timeline: scroll(root block);
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-duration: 1ms;     /* timeline drives it; duration irrelevant */
  }
  .d-ring--a { animation-name: d-drift-a; }
  .d-ring--b { animation-name: d-drift-b; }
  .d-compass { animation-name: d-drift-c; }
}
@keyframes d-drift-a { to { transform: translateX(18vw); } }
@keyframes d-drift-b { to { transform: translateX(-30vw); } }
@keyframes d-drift-c { to { transform: translateX(-14vw) rotate(120deg); } }

/* Static fallback — browsers without animation-timeline keep the on-screen base. */
@supports not (animation-timeline: scroll()) {
  .d-ring, .d-compass { transform: none; }
}

/* Responsive — shrink marks, drop compass on phones. */
@media (max-width: 768px) {
  .d-ring--a { width: 240px; height: 240px; top: 10vh; left: -70px; }
  .d-ring--b { width: 130px; height: 130px; top: 52vh; right: 4vw; }
  .d-compass { width: 96px;  height: 96px;  top: 74vh; left: 5vw; }
  @supports (animation-timeline: scroll()) { .d-ring--b { animation-name: d-drift-b-sm; } }
}
@keyframes d-drift-b-sm { to { transform: translateX(-18vw); } }
@media (max-width: 600px) {
  .d-compass { display: none; }
  .d-ring--a { width: 200px; height: 200px; }
  .d-ring--b { width: 110px; height: 110px; }
}

/* Hide the whole drift layer on phones — clean paper, no horizontal scroll. */
@media (max-width: 768px) {
  .drift { display: none; }
}

/* Motion / print safety */
@media (prefers-reduced-motion: reduce) {
  .d-ring, .d-compass { animation: none !important; transform: none !important; }
}
@media print { .drift { display: none; } }