/* ===========================================================================
   experiments.css: styles for the two end-of-page prototypes.
   Loaded after styles-v2.css by index-v2-field.html and index-v2-loop.html.
   =========================================================================== */

/* --- A. Signal field (index-v2-field.html) ---------------------------------- */

/* Bleeds to the viewport edges. The column is for reading; the field is not. */
.signal-field {
  position: relative;
  width: 100vw;
  margin: 0 0 0 calc(50% - 50vw);
  padding: 3rem 0 2.25rem;
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  cursor: crosshair;
  user-select: none;
}

.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
  grid-auto-rows: 1.9rem;
  gap: 0 0.75rem;
  padding: 0 clamp(1rem, 4vw, 3rem);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

/* --lit is 0..1, set by field.js from the cursor distance.
   Noise is light grey; signal is ink, a step heavier, and holds still. */
.signal-grid b {
  --lit: 0;
  display: block;
  overflow: hidden;
  color: color-mix(in oklab, #cfcfc9, var(--ink) calc(var(--lit) * 100%));
  font-weight: 400;
  white-space: pre;
  transform: translateY(calc(var(--lit) * -1px));
  transition: color 120ms linear, transform 120ms linear;
}

.signal-hint {
  margin: 1.75rem 0 0;
  color: var(--muted);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-align: center;
  text-transform: uppercase;
}

@media (hover: none) {
  .signal-field {
    cursor: default;
  }

  .signal-hint {
    display: none;
  }
}

@media (max-width: 600px) {
  .signal-field {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signal-grid b {
    transition: none;
  }
}

/* --- B. Infinite loop (index-v2-loop.html) ---------------------------------- */

/* Lenis housekeeping (from lenis.css). */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

#clone {
  height: 100vh;
  overflow: hidden;
}

.scroll-fade {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  height: 72px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0%), var(--paper));
  pointer-events: none;
}

/* Fade is applied inline by loop.js; keep transitions off so scroll drives it. */
.lenis .prose-section,
.lenis .intro,
.lenis .site-header,
.lenis .site-footer {
  transition: none;
  will-change: opacity;
}

/* Mono lines are rewritten while scrolling. Fixed advance keeps the width stable. */
.lenis .section-label,
.lenis .p-name,
.lenis .p-meta,
.lenis .intro-note,
.lenis .colophon span,
.lenis .contact-links a {
  font-variant-numeric: tabular-nums;
}

.lenis .p-name,
.lenis .p-meta,
.lenis .intro-note {
  white-space: pre;
}

@media (max-width: 767px) {
  #clone,
  .scroll-fade {
    display: none;
  }
}

/* Clone hero uses a <p> so the page keeps a single h1. Match the h1 rules. */
#clone .h1-clone {
  max-width: 34rem;
  margin: 0;
  font-family: var(--editorial);
  font-size: var(--fs-hero);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.025em;
  text-wrap: pretty;
}