/* ── BLACK SYNTAX — privacy, adrift ──────────────────────────────
   The policy comes apart and floats in the dark. One fragment at a
   time surfaces somewhere new; a tap summons the next; a long press
   holds it still to read, and lets you carry it across the void.
   (Layered on top of the readable document in legal.css — that
   document stays for screen readers, crawlers, and reduced motion.) */

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* only once JS confirms motion is welcome does the page go full-void */
.is-drift, .is-drift body { height: 100%; overflow: hidden; }

.is-drift .wrap {
  position: relative;
  z-index: 10;
  min-height: 0;
  pointer-events: none;        /* taps fall through to the stage… */
}
.is-drift .top { pointer-events: auto; }  /* …but the masthead stays live */

.drift-stage {
  position: fixed;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  touch-action: none;
}

.drift-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(31rem, 84vw);
  padding: 0 0.5rem;
  transform: translate(-50%, -50%) scale(0.985);
  opacity: 0;
  filter: blur(11px);
  transition:
    opacity 0.95s ease,
    filter 0.95s ease,
    transform 1.05s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: opacity, filter, transform;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.drift-card.is-in {
  opacity: 1;
  filter: none;
  transform: translate(-50%, -50%) scale(1);
}

.drift-card.is-out {
  opacity: 0;
  filter: blur(13px);
  transform: translate(-50%, -50%) scale(1.03);
}

.drift-card.is-held { cursor: grab; }
.drift-card.is-dragging {
  cursor: grabbing;
  transition: filter 0.4s ease;   /* position tracks the finger instantly */
}
.drift-card.is-held .drift-card__text { color: var(--glow); }
.drift-card.is-held .drift-card__label { color: var(--grey); }

.drift-card__label {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--grey-dim);
  margin-bottom: 0.85rem;
  transition: color 0.6s ease;
}

.drift-card__text {
  color: var(--grey-lit);
  font-size: clamp(0.98rem, 0.6rem + 1vw, 1.14rem);
  line-height: 1.9;
  letter-spacing: 0.01em;
  transition: color 0.6s ease;
}

.drift-card--title .drift-card__text {
  font-size: clamp(1.4rem, 5vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: 0.06em;
  text-shadow: 0 0 42px rgba(233, 233, 233, 0.12);
}

/* the whispered instruction, low on the screen */
.drift-hint {
  position: fixed;
  left: 50%;
  bottom: clamp(1.4rem, 4vh, 2.6rem);
  transform: translateX(-50%);
  z-index: 8;
  max-width: 90vw;
  font-size: 0.6rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--grey-dim);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.drift-hint.is-on { opacity: 1; }