/* The direct site's shared effects (25 October 2026): the yellow ink and the developing prints (assets/develop.js) and the
   text entrances (assets/reveal.js). Used by the home page and the case files. Loaded after portfolio.css and home-bold.css. */

/* ── the highlighter: a flat slab until develop.js draws it as ink (and always under the still state) ── */
.hl { background: linear-gradient(transparent 58%, var(--gold) 58%, var(--gold) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .04em; }
.dev-on .hl { background: none; }
[data-ink] { position: relative; }
[data-ink] > *:not(.ink-cv) { position: relative; z-index: 1; }

/* ── a print: the photograph, and over it the canvas it develops in ── */
.dev { position: relative; margin: 0; background: var(--bg); overflow: hidden; }
.dev > img, .dev > .dev-cv { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.dev-on .dev > img { opacity: 0; }   /* kept in the accessibility tree for its alt text */
.dev-still .dev > .dev-cv { display: none; }

/* the custom cursor only exists once cursor.js has run; without script it would sit in the top-left corner */
html:not(.js) .cursor-ring, html:not(.js) .cursor-dot { display: none; }

/* ── text entrances: labels and headlines rise out of masks (the kinetic classes in portfolio.css), hairlines draw from
   the left (.rv-r a top rule, .rv-rb a bottom one), copy fades up once the headline has landed ── */
@media (prefers-reduced-motion: no-preference) {
  /* a first-screen block waits for its split (rv-pre is set in the head only when motion is on), with a 2.5s backstop */
  .rv-pre:not(.rv-on) .rv-hold > * { animation: kin-pre 0s 2.5s both; }
  .rv-on .rv-f { opacity: 0; transform: translateY(30px); filter: blur(6px);
    transition: opacity .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms), transform .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms), filter .9s cubic-bezier(.22, 1, .36, 1) var(--rd, 0ms); }
  .rv-on .rv-go .rv-f { opacity: 1; transform: none; filter: none; }
  .rv-on .rv-r { position: relative; border-top-color: transparent; }
  .rv-on .rv-rb { position: relative; border-bottom-color: transparent; }
  /* :where keeps the drawn-out state lighter than the drawn one below */
  .rv-on :where(.rv-r)::before, .rv-on :where(.rv-rb)::after {
    content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--divider);
    transform: scaleX(0); transform-origin: 0 50%; transition: transform .9s cubic-bezier(.16, 1, .3, 1) var(--rd, 0ms); }
  .rv-on :where(.rv-rb)::after { top: auto; bottom: -1px; }
  .rv-on .rv-r.rv-go::before, .rv-on .rv-go .rv-r::before, .rv-on .rv-go .rv-rb::after { transform: none; }
}