/* Site finish: the rules the homepage set, carried to every other page.
   Loaded last on every page except index.html (which has home-finish.css).
   1 palette (in the shared stylesheets), 2 footer logo (theme.css), 3 text sizes,
   4 one heading and caption system, 5 movement, 6 artworks shown whole. */

/* ---------- Font: smaller woff2 first, the original otf as fallback ---------- */
@font-face {
  font-family: Williwaw;
  src: url('../assets/fonts/williwaw-book.woff2') format('woff2'),
       url('../assets/fonts/williwaw-book.otf') format('opentype');
  font-display: swap;
}

/* ---------- 1. Palette: the homepage's two tones per theme ---------- */
html[data-theme="light"] body:not(.home-01) { --sf-paper: #fff; --sf-panel: #f2f2f2; --sf-ink: #000; --sf-soft: #555; }
html[data-theme="dark"]  body:not(.home-01) { --sf-paper: #000; --sf-panel: #111;    --sf-ink: #fff; --sf-soft: #bdbdbd; }
html[data-theme] body:not(.home-01) .ft-site { background: var(--sf-panel); color: var(--sf-soft); }
html[data-theme] body:not(.home-01) .ft-site .ft-base { color: var(--sf-soft); }
html[data-theme="light"] body:not(.home-01) .ft-mark img { filter: brightness(0) !important; opacity: 1 !important; }
html[data-theme="dark"]  body:not(.home-01) .ft-mark img { filter: none !important; opacity: 1 !important; }

/* ---------- 3. Minimum sizes: labels 13px, never lighter than the soft grey ---------- */
body:not(.home-01) .fig .lbls span { font-size: 13px !important; color: var(--sf-soft) !important; }
body:not(.home-01) .contact dt { font-size: 13px !important; }
html[data-theme="dark"] body:not(.home-01) figcaption { color: #bdbdbd; }

/* ---------- 4. One heading system ----------
   Headings are upright Williwaw in the case they are written. Titles of works inside a
   heading keep their italic through <em>. Captions are upright. */
html[data-theme] body:not(.home-01) main :is(h1, h2, h3):not(.sr) { font-style: normal !important; text-transform: none !important; }
html[data-theme] body:not(.home-01) main :is(h1, h2, h3) :is(em, i, cite) { font-style: italic !important; }
html[data-theme] body:not(.home-01) :is(figcaption, .cap, .dcap, .film-cap) { font-style: normal !important; }
html[data-theme] body:not(.home-01) :is(figcaption, .cap, .dcap, .film-cap) :is(em, i, cite) { font-style: italic !important; }
body:not(.home-01) main :is(h1, h2, h3) { text-wrap: balance; }

/* ---------- 6. Artworks shown whole ---------- */
body:not(.home-01) .c1-row img { object-fit: contain !important; }
body:not(.home-01) .ud-grid img { object-fit: contain !important; background: var(--sf-panel) !important; }

/* ---------- 5. Movement ---------- */
:root { --sf-ease: cubic-bezier(.19, 1, .22, 1); }

/* Arriving: the page settles in from the paper colour (matches the homepage's exit) */
@keyframes sf-arrive { from { opacity: 0; } to { opacity: 1; } }
body:not(.home-01) > :is(main, footer) { animation: sf-arrive .7s ease both; }

/* Leaving */
body:not(.home-01) > :is(main, footer) { transition: opacity .38s ease; }
body:not(.home-01).sf-leaving > :is(main, footer) { opacity: 0; animation: none; }

/* The older fade-up gives way to the homepage's language */
html.sf-motion body:not(.home-01) .rise { opacity: 1 !important; transform: none !important; transition: none !important; }

/* Titles rise word by word, line by line, through a mask */
.sf-w { display: inline-block; overflow: clip; vertical-align: top; padding: .06em .09em .14em 0; margin: -.06em -.09em -.14em 0; }
.sf-wi { display: inline-block; }
html.sf-motion .sf-split .sf-wi { transform: translate3d(0, 112%, 0); transition: transform 1.25s var(--sf-ease); transition-delay: var(--d, 0s); }
html.sf-motion .sf-split.sf-in .sf-wi { transform: none; }

/* Copy follows */
html.sf-motion .sf-rise { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 1s ease, transform 1.2s var(--sf-ease); transition-delay: var(--d, 0s); }
html.sf-motion .sf-rise.sf-in { opacity: 1; transform: none; }

/* Images wipe up and settle from a slight zoom */
html.sf-motion .sf-fig { overflow: hidden; clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--sf-ease); transition-delay: var(--d, 0s); }
html.sf-motion .sf-fig.sf-in { clip-path: inset(0 0 0 0); }
html.sf-motion .sf-fig .sf-img { background: var(--sf-panel); scale: 1.12; transition: scale 2s var(--sf-ease); transition-delay: var(--d, 0s); }
html.sf-motion .sf-fig.sf-in .sf-img { scale: 1; }

/* Text links draw their underline the same way as the homepage */
@keyframes sf-line {
  0%   { background-size: 100% 1px; background-position: 100% 100%; }
  45%  { background-size: 0 1px;    background-position: 100% 100%; }
  46%  { background-size: 0 1px;    background-position: 0 100%; }
  100% { background-size: 100% 1px; background-position: 0 100%; }
}
html.sf-motion body:not(.home-01) main :is(.txtlink, .text-link, .go):hover {
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; animation: sf-line .75s cubic-bezier(.65,0,.35,1);
}

@media (prefers-reduced-motion: reduce) {
  body:not(.home-01) > :is(main, footer) { animation: none !important; }
}

/* Skip link: hidden until a keyboard user tabs to it (Film showed it permanently) */
body:not(.home-01) a.skip { position: absolute; left: 16px; top: -100px; z-index: 100; padding: 10px 14px; background: var(--sf-ink); color: var(--sf-paper); font: 14px Arial, Helvetica, sans-serif; }
body:not(.home-01) a.skip:focus { top: 12px; }

/* ================= Batch 1: text that could not be read (tracker WRK-01, ORD-01, PRC-02, PRC-03) ================= */

/* WRK-01 Work (scoped to the Work tiles only; Process also has a .door): collection titles are white in both modes, over a soft shade at the foot of each image */
body:not(.home-01) .doors > .door > img { z-index: 0; }
body:not(.home-01) .doors > .door::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 60%; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.28) 45%, transparent);
}
html[data-theme] body:not(.home-01) .doors > .door > :not(img) { position: relative; z-index: 2; color: #fff !important; text-shadow: 0 1px 14px rgba(0,0,0,.45); }
html[data-theme] body:not(.home-01) .doors > .door > :not(img) * { color: #fff !important; }

/* ORD-01 Ordinary: "Scroll to continue" and "Read the letter" sit on a dark glass pill over any painting */
html[data-theme] body.ordinary-page .encounter .stage-controls :is(button, a) {
  background: rgba(0,0,0,.52) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important;
  padding: 10px 18px !important; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-shadow: none !important;
}

/* PRC-02 Process: the chapter list reads over the painting */
body.process-page .rail { isolation: isolate; }
body.process-page .rail::before {
  content: ""; position: absolute; inset: -30% -60% -30% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent);
}
body.process-page .rail button { opacity: .66; }
body.process-page .rail button.done { opacity: .82; }
body.process-page .rail button.on { opacity: 1; }

/* PRC-03 Process: chapter text sits on a soft shade instead of bare paint texture */
body.process-page .chap { isolation: isolate; }
body.process-page .chap::before {
  content: ""; position: absolute; inset: -35% -30% -30% -25%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0,0,0,.58), transparent);
}