/* Homepage finish: palette, fixes, motion and details. index.html only, with js/home-finish.js.
   Everything that moves is scoped to html.hf-motion, which the script only sets when
   reduced motion is off. Without it the page reads exactly as a still page. */

/* ---------- 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;
}

/* ---------- Palette: two tones per theme, plus black for the film ---------- */
html[data-theme="light"] body.home-01 { --hf-paper: #fff; --hf-panel: #f2f2f2; --hf-ink: #000; --hf-soft: #555; }
html[data-theme="dark"]  body.home-01 { --hf-paper: #000; --hf-panel: #111;    --hf-ink: #fff; --hf-soft: #bdbdbd; }
html[data-theme] body.home-01 { --hf-cinema: #000; background: var(--hf-bg, var(--hf-paper)); transition: background-color .9s cubic-bezier(.2,.7,.2,1); }

/* Sections sit on the page colour, so there are no stray bands at their edges.
   The page colour blends between paper and panel as each section takes the centre of the screen. */
html[data-theme] body.home-01 :is(.ordinary, .statement, .about, .exhibitions, .contact, .ft-site) { background: transparent; }
html[data-theme] body.home-01 .ordinary-feature { background: var(--hf-panel); }
html[data-theme] body.home-01 :is(.ordinary, .statement, .about, .exhibitions, .contact) { color: var(--hf-ink); }
html[data-theme] body.home-01 .about { max-width: none; padding-inline: max(var(--home-gutter), calc((100% - 1600px) / 2 + var(--home-gutter))); }

/* ---------- Film: always black, always readable ---------- */
html[data-theme] body.home-01 .film { position: relative; z-index: 21; background: var(--hf-cinema); color: #fff; }
html[data-theme] body.home-01 .film :is(h2, p, .film__credit) { color: #fff; }
html[data-theme] body.home-01 .film .film__credit { color: #bdbdbd; }
html[data-theme] body.home-01 .film__frame { background: #111; }

/* Lights down: the rest of the page dims while the film is centred */
.hf-dim { position: fixed; inset: 0; z-index: 20; background: #000; opacity: 0; pointer-events: none; }

/* ---------- Titles never leave a word stranded ---------- */
.hf-keep { white-space: nowrap; }
body.home-01 main :is(h2, h3), body.home-01 .statement blockquote p { text-wrap: balance; }

/* ---------- Footer: same tones, visible logo, closing wordmark ---------- */
html[data-theme] body.home-01 .ft-site { color: var(--hf-soft); }
html[data-theme] body.home-01 .ft-site .ft-base { color: var(--hf-soft); }
body.home-01 .ft-mark { display: none; }
body.home-01 .ft-grid { grid-template-columns: minmax(100px,.62fr) minmax(130px,.68fr) minmax(260px,1.15fr); }
.hf-wordmark { display: block; max-width: 1500px; margin: clamp(56px, 8vw, 120px) auto 0; overflow: hidden; line-height: 0; }
.hf-wordmark img { display: block; width: 100%; height: auto; }
html[data-theme="light"] .hf-wordmark img { filter: brightness(0); }
html[data-theme="dark"] .hf-wordmark img { filter: none; }
@media (max-width: 800px) { body.home-01 .ft-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Links: one underline, drawn the same way everywhere ---------- */
body.home-01 main :is(.text-link, .ordinary-link) {
  text-decoration: none; padding-bottom: 5px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
}
body.home-01 main :is(.text-link, .ordinary-link) span { display: inline-block; transition: transform .35s cubic-bezier(.2,.7,.2,1); }
body.home-01 main :is(.text-link, .ordinary-link):hover span { transform: translateX(5px); }
html.hf-motion body.home-01 main :is(.text-link, .ordinary-link):hover { animation: hf-line .75s cubic-bezier(.65,0,.35,1); }
@keyframes hf-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%; }
}

/* ---------- Image placeholders: a soft blur of the picture until it has loaded ---------- */
.hf-fig { position: relative; isolation: isolate; }
.hf-fig::before {
  content: ""; position: absolute; inset: -30px; z-index: -1;
  background: var(--hf-lqip, none) center / cover no-repeat; filter: blur(22px); transform: scale(1.1);
}
.hf-fig { overflow: hidden; }
.hf-fig > img { opacity: 0; transition: opacity .6s ease; }
.hf-fig.hf-loaded > img { opacity: 1; }
html:not(.hf-motion) .hf-fig > img { opacity: 1; }

/* ================= Motion (only with html.hf-motion) ================= */
:root { --hf-ease: cubic-bezier(.19, 1, .22, 1); }

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

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

/* Images wipe up into view and settle from a slight zoom */
html.hf-motion .hf-fig { clip-path: inset(100% 0 0 0); transition: clip-path 1.4s var(--hf-ease); transition-delay: var(--d, 0s); }
html.hf-motion .hf-fig > img { scale: 1.14; transition: opacity .6s ease, scale 2s var(--hf-ease); transition-delay: 0s, var(--d, 0s); }
html.hf-motion .hf-fig.hf-in { clip-path: inset(0 0 0 0); }
html.hf-motion .hf-fig.hf-in > img { scale: 1; }

/* The Ordinary portrait drifts inside its frame */
html.hf-motion body.home-01 .ordinary-feature-art img { height: 116%; translate: 0 var(--hf-drift, 0px); will-change: translate; }

/* Film poster grows towards full width as it arrives */
html.hf-motion body.home-01 .film__frame { scale: var(--hf-grow, 1); transform-origin: 50% 50%; will-change: scale; }

/* Custom Play cursor over the film */
.hf-cursor {
  position: fixed; left: 0; top: 0; z-index: 60; width: 104px; height: 104px; margin: -52px 0 0 -52px;
  display: grid; place-items: center; border-radius: 50%; background: #fff; color: #000;
  font: 13px/1 Arial, Helvetica, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  pointer-events: none; opacity: 0; scale: .4; transition: opacity .3s ease, scale .45s var(--hf-ease);
}
.hf-cursor.on { opacity: 1; scale: 1; }
html.hf-cursor-ready body.home-01 .film__play { cursor: none; }

/* Exhibition feature: the picture leans in on hover */
body.home-01 .exhibition-feature figure img { transition: transform 1.1s var(--hf-ease), opacity .6s ease, scale 2s var(--hf-ease); }
html.hf-motion body.home-01 .exhibition-feature:hover figure img { transform: scale(1.035); }

/* Footer wordmark rises into place */
html.hf-motion .hf-wordmark img { transform: translate3d(0, 101%, 0); transition: transform 1.6s var(--hf-ease); }
html.hf-motion .hf-wordmark.hf-in img { transform: none; }

/* Leaving the page: content settles away before the next page loads */
html.hf-motion body.home-01 :is(main, footer) { transition: opacity .38s ease, translate .38s ease; }
html.hf-motion body.home-01.hf-leaving :is(main, footer) { opacity: 0; translate: 0 -10px; }
body.home-01.hf-leaving .hl-stage { visibility: hidden; }

/* ---------- Ordinary: a slower, more deliberate arrival ----------
   Panel settles, painting unveiled from below as its light comes up, a beat, then the words. */
html.hf-motion .ordinary-feature.hf-cer { opacity: 0; translate: 0 56px; transition: opacity 1.3s ease, translate 1.8s var(--hf-ease); }
html.hf-motion .ordinary-feature.hf-cer.hf-in { opacity: 1; translate: 0 0; }
html.hf-motion body.home-01 .ordinary-feature-art.hf-fig { transition: clip-path 2.2s var(--hf-ease) .5s; }
html.hf-motion body.home-01 .ordinary-feature-art.hf-fig > img {
  scale: 1.18; filter: brightness(.3) saturate(.7);
  transition: opacity .6s ease, scale 3.6s var(--hf-ease) .5s, filter 3s ease .7s;
}
html.hf-motion body.home-01 .ordinary-feature-art.hf-fig.hf-in > img { scale: 1; filter: none; }
html.hf-motion body.home-01 .ordinary .hf-split .hf-wi { transition-duration: 1.5s; }

/* ---------- Ordinary: hold, and let the painting step back to be seen whole (801px and up) ---------- */
@media (min-width: 801px) {
  html.hf-motion.hf-holding .hf-hold > .ordinary { position: sticky; }
  html.hf-motion.hf-holding body.home-01 .ordinary-feature { min-height: 0; height: var(--hf-card-h); }
  html.hf-motion.hf-holding body.home-01 .ordinary-feature-art { position: relative; min-height: 0; height: 100%; background: var(--hf-panel); }
  html.hf-motion.hf-holding body.home-01 .ordinary-feature-art img {
    position: absolute; max-width: none; object-fit: fill; translate: none; transform-origin: 0 0; will-change: transform;
  }
}
.hf-fig.hf-loaded::before { opacity: 0; transition: opacity .8s ease; }