/* =========================================================
   MOTION — split-text scaffolding + global overlays
   ========================================================= */

/* Split word: outer clips, inner travels. */
.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  /* a hair of breathing room so descenders aren't guillotined */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}

.sw-i {
  display: inline-block;
  will-change: transform;
}

.sc-w {
  display: inline-block;
  white-space: nowrap;
}

.sc {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}

.sc-i {
  display: inline-block;
  will-change: transform, opacity;
}

/* =========================================================
   GRAIN — a real animated film grain, drawn on canvas.
   Not a noise PNG at 4% opacity; that reads as static texture.
   This moves, so the whole page feels photographed.
   ========================================================= */
.grain {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.055;
  mix-blend-mode: overlay;
}

/* Vignette — pulls the eye to centre, hides the browser edges */
.vignette {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-grain) - 1);
  pointer-events: none;
  background: radial-gradient(
    115% 90% at 50% 45%,
    transparent 42%,
    rgba(6, 5, 4, 0.42) 100%
  );
}

/* =========================================================
   CURSOR
   ========================================================= */
.cursor {
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-cursor);
  pointer-events: none;
  mix-blend-mode: difference;
  will-change: transform;
}

.cursor__dot {
  position: absolute;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--bone-100);
}

.cursor__ring {
  position: absolute;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  border: 1px solid rgba(244, 239, 230, 0.55);
}

.cursor__labelwrap {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
}

.cursor__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--bone-100);
  opacity: 0;
  white-space: nowrap;
}

@media (hover: none), (pointer: coarse) {
  .cursor {
    display: none;
  }
}

/* =========================================================
   SCROLL PROGRESS — a core-sample gauge pinned to the edge
   ========================================================= */
.core-gauge {
  opacity: 0;
  position: fixed;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--z-nav) - 1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  pointer-events: none;
  mix-blend-mode: difference;
}

.core-gauge__label {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bone-300);
  writing-mode: vertical-rl;
}

.core-gauge__track {
  position: relative;
  width: 1px;
  height: 26vh;
  background: rgba(237, 231, 219, 0.18);
  overflow: hidden;
}

.core-gauge__fill {
  position: absolute;
  inset: 0;
  background: var(--gold-200);
  transform: scaleY(0);
  transform-origin: top center;
}

.core-gauge__depth {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .core-gauge {
    display: none;
  }
}