/* Motion layer v3. Needs tokens.css first. Plain CSS: works on any host.
   Rule of the system: content is calm (small, soft reveals); the brand moves
   (the quarter-round is the only thing that sweeps, wipes or rotates). */

/* 1. Scroll reveals ------------------------------------------------------
   Add data-reveal to anything that should rise in. reveal.js adds .is-in.
   Content stays visible if JavaScript fails (only hidden when html.js is set). */
html.js [data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--rise), 0);
  transition:
    opacity var(--d-slow) var(--e-out),
    transform var(--d-slow) var(--e-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
  will-change: opacity, transform;
}
html.js [data-reveal].is-in { opacity: 1; transform: none; }

/* 2. Work cards: a slow, slight zoom inside a fixed frame --------------- */
.card__frame { position: relative; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--r-none); }
.card__frame img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.001);
  transition: transform var(--d-slow) var(--e-out);
}
.card:hover .card__frame img,
.card:focus-visible .card__frame img { transform: scale(1.035); }
.card__title { transition: color var(--d-fast) var(--e-out); }
.card:hover .card__title { color: var(--c-teal); }

/* 3. Links: underline grows from the left -------------------------------- */
.link-grow {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d-base) var(--e-out);
  text-decoration: none;
}
.link-grow:hover, .link-grow:focus-visible { background-size: 100% 1px; }

/* 4. Quarter-round marker (Index button, progress rail, "you are here") --
   A 12px quarter-circle that turns 90° per state. */
.qr-mark {
  display: inline-block; width: 12px; height: 12px;
  background: currentColor; border-radius: var(--r-quarter);
  transition: transform var(--d-base) var(--e-out);
}
[aria-expanded="true"] .qr-mark { transform: rotate(-90deg); }  /* closed: arc up; open: arc down, like the P mark's foot */

/* 5. Index overlay: opens as a quarter-circle sweep from the P mark (top-left) */
.index-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: var(--c-phthalo); color: var(--c-paper);
  clip-path: circle(0% at 0% 0%);
  visibility: hidden;
  transition: clip-path var(--d-page) var(--e-inout), visibility 0s linear var(--d-page);
}
.index-overlay.is-open {
  clip-path: circle(150% at 0% 0%);
  visibility: visible;
  transition: clip-path var(--d-page) var(--e-inout), visibility 0s;
}
/* Hover preview: the empty right side of the overlay shows the hovered project's cover */
.index-overlay__preview img {
  opacity: 0; transform: scale(1.04);
  transition: opacity var(--d-base) var(--e-out), transform var(--d-slow) var(--e-out);
}
.index-overlay__preview img.is-active { opacity: 1; transform: none; }