/* ==========================================================================
   Özün Çağan Altun — ozunaltun.com — polish layer
   Scroll progress · scrollspy · card tilt · toast · odin.
   Companion to js/effects.js — load after style.css.
   ========================================================================== */

:root {
  --fx-progress-h: 2px;
  --fx-toast-gap: 24px;
}

/* ---------- scroll progress ---------- */

.fx-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 80; /* above the nav (50–60), below the skip link (100) */
  width: 100%;
  height: var(--fx-progress-h);
  background: var(--klein);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- scrollspy ---------- */

.nav__links a.is-active { color: var(--klein); }

/* ---------- copy toast — ink bar on paper ---------- */

.fx-toast {
  position: fixed;
  bottom: var(--fx-toast-gap);
  left: 50%;
  z-index: 90;
  max-width: calc(100vw - 40px);
  padding: 12px 22px;
  background: var(--ink);
  border: 0;
  border-radius: var(--radius-s);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, 12px);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s 220ms;
}

.fx-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}

/* ---------- broadcast mode (type "odin") ---------- */

.nav__mark { transition: color 400ms var(--ease-out); }
.fx-broadcast .nav__mark { color: var(--klein); }
.fx-broadcast .section__index { text-decoration: underline; text-underline-offset: 6px; }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .fx-toast {
    transform: translate(-50%, 0);
    transition: opacity 200ms ease, visibility 0s 200ms;
  }
  .fx-toast.is-visible { transition: opacity 200ms ease; }
}