/* ==========================================================================
   AkhilJ.ca — flow.css  (shared by Home, Work and About)
   The "colour flow": a wrapper [data-wk] holds chapters [data-wk-ch] that each
   carry a background (data-bg) and a tone (.wk-ch--light / .wk-ch--dark).
   flow.js hands the chapter crossing mid-screen to the wrapper, and the
   registered colour properties below animate the change for every child.
   Images marked [data-wk-media] grow from an inset card as they scroll in.
   ========================================================================== */

/* Registered so the colours themselves animate and every child inherits the in-between value */
@property --wk-bg { syntax: "<color>"; inherits: true; initial-value: #141311; }
@property --wk-ink { syntax: "<color>"; inherits: true; initial-value: #F4F1EC; }
@property --wk-ink-2 { syntax: "<color>"; inherits: true; initial-value: rgba(244, 241, 236, 0.78); }
@property --wk-muted { syntax: "<color>"; inherits: true; initial-value: rgba(244, 241, 236, 0.56); }
@property --wk-dim { syntax: "<color>"; inherits: true; initial-value: rgba(244, 241, 236, 0.22); }
@property --wk-line { syntax: "<color>"; inherits: true; initial-value: rgba(244, 241, 236, 0.16); }

/* Tone tokens. Without JS each chapter sets its own; with JS the wrapper and nav set them. */
.wk:not(.is-live) .wk-ch--light,
.wk.is-live[data-tone="light"],
.wk-nav[data-tone="light"] {
  --wk-ink: #181715;
  --wk-ink-2: #3A3733;
  --wk-muted: #645F58;
  --wk-dim: rgba(24, 23, 21, 0.2);
  --wk-line: rgba(24, 23, 21, 0.14);
}
.wk:not(.is-live) .wk-ch--dark,
.wk.is-live[data-tone="dark"],
.wk-nav[data-tone="dark"] {
  --wk-ink: #F4F1EC;
  --wk-ink-2: rgba(244, 241, 236, 0.78);
  --wk-muted: rgba(244, 241, 236, 0.56);
  --wk-dim: rgba(244, 241, 236, 0.22);
  --wk-line: rgba(244, 241, 236, 0.16);
}
.wk, .wk-nav {
  transition: --wk-bg 900ms var(--ease), --wk-ink 900ms var(--ease), --wk-ink-2 900ms var(--ease),
    --wk-muted 900ms var(--ease), --wk-dim 900ms var(--ease), --wk-line 900ms var(--ease), top 500ms var(--ease-out);
}

/* Chapters */
.wk { background: var(--wk-bg); }
.wk-ch { background: var(--ch-bg); color: var(--wk-ink); }
.wk.is-live .wk-ch { background: transparent; }

/* The image: grows from an inset card to full width as it scrolls in (--p: 0 → 1, set by work.js) */
.wk-media { --p: 1; display: block; margin-top: clamp(48px, 6vw, 88px); cursor: pointer; }
.wk-media__frame {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: calc(6px + 22px * (1 - var(--p)));
  scale: calc(0.86 + 0.14 * var(--p));
  background: rgba(127, 127, 127, 0.12);
  will-change: scale;
}
.wk-media__frame img { width: 100%; height: 100%; object-fit: cover; scale: calc(1 + 0.14 * (1 - var(--p))); transition: filter 600ms var(--ease); }
.wk-media:hover img { filter: brightness(1.04) saturate(1.05); }
.js .wk-ch .wk-media { --p: 0; }


@media (prefers-reduced-motion: reduce) {
  .js .wk-ch .wk-media { --p: 1; }
  .wk, .wk-nav { transition: none; }
}