/* ATLAS · components/feather.css
 * Provenance: AuditHunt v3 · Phase 1.4 · amended Phase 10 2026-04-29
 * Spec: bible §V.2 — vertical hairline drifts down right margin, sways with scroll.
 *       Color shifts per act via --accent-depth from depth.css.
 *       Phase 10: feather evolves per act — bifurcates III, locks IV, bookmarks V, stops VI.
 */

.feather {
  position: fixed; top: 0; right: 32px;
  width: 1px; height: 100vh;
  background: linear-gradient(180deg,
    transparent 0%,
    color-mix(in oklab, var(--accent-depth, var(--shield-hi)) 60%, transparent) 12%,
    color-mix(in oklab, var(--accent-depth, var(--shield-hi)) 60%, transparent) 88%,
    transparent 100%);
  opacity: calc(0.35 + var(--depth, 0) * 0.4);
  transform: translateX(calc((var(--drift, 0.5) - 0.5) * 6px));
  pointer-events: none;
  z-index: 5;
  transition: background 600ms var(--ease-depth), opacity 600ms var(--ease-depth);
}

/* ── Act III — feather bifurcates: a second hairline splits off ── */
body[data-act="3"] .feather::after {
  content: "";
  position: absolute; top: 0; left: -8px;
  width: 1px; height: 100%;
  background: inherit;
  opacity: 0.38;
  transform: translateX(calc((var(--drift, 0.5) - 0.5) * -4px));
}

/* ── Act IV — both lines freeze: no drift, locked in place ── */
body[data-act="4"] .feather {
  transform: none;
}
body[data-act="4"] .feather::after {
  content: "";
  position: absolute; top: 0; left: -8px;
  width: 1px; height: 100%;
  background: inherit;
  opacity: 0.28;
  transform: none;
}

/* ── Act V — bookmark: single horizontal tick at 62vh ── */
body[data-act="5"] .feather {
  transform: none;
  opacity: calc(0.35 + var(--depth, 0) * 0.3);
}
body[data-act="5"] .feather::before {
  content: "";
  position: absolute;
  top: 62vh; left: -8px;
  width: 18px; height: 1px;
  background: color-mix(in oklab, var(--accent-depth, var(--shield-hi)) 80%, transparent);
}

/* ── Act VI — feather stops: opacity floor, no transform, no drift ── */
body[data-act="6"] .feather {
  transform: none;
  opacity: 0.10;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .feather { transform: none; }
  body[data-act="3"] .feather::after { transform: none; }
}
@media (max-width: 720px) { .feather { display: none; } }