/* Millie Kent. Loading screen: her name fills in red from the bottom up on cream, in the exact spot
   where it sits on the hero photo. When the page is ready the cream fades away and the red turns cream,
   so the loader hands over to the hero logotype in place.
   The page sets html[data-load] and .is-loading before first paint. main.js measures the hero logotype,
   places the loader's copy on top of it (.is-placed), and adds .is-loaded once everything has arrived
   (never sooner than 1.4s), which plays the handover.
   If the hero logotype is not fully on screen (a reload part way down the page), the name sits centred
   and the screen lifts away instead, as before.
   A CSS failsafe clears the screen after 6s even if the script never runs.
   The centred, lift-away version is in Archived/loader_lift-away-centred.css. */

.loader { display: none; }
[data-load] .loader {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  padding: var(--gutter); overflow: hidden;
  background-color: var(--cream);
  transition: transform .8s var(--ease) .15s, background-color .7s ease .1s;
  animation: loader-failsafe 0s 6s forwards;
}
[data-load] .loader > * { grid-area: 1 / 1; width: min(72vw, 56rem); transition: background-color .7s ease .1s, opacity .4s ease; }
[data-load] .loader__ghost { --logo: color-mix(in srgb, var(--red) 14%, transparent); }
[data-load] .loader__fill { clip-path: inset(100% 0 0 0); animation: loader-fill 1.25s var(--ease) .1s forwards; } /* fills from the bottom up */

/* Sitting exactly on the hero logotype */
[data-load] .loader.is-placed { display: block; padding: 0; } /* not a grid here, so the copy is measured from the screen edge, not from a grid cell */
[data-load] .loader.is-placed > * { position: absolute; grid-area: auto; left: var(--lx); top: var(--ly); width: var(--lw); }

/* The hero photo does not slide in under the loader, so the logotype is already in its final place */
[data-load] .hero__media[data-reveal] { opacity: 1; transform: none; transition: none; }

.is-loading { overflow: hidden; }
.is-loaded .loader { pointer-events: none; }
.is-loaded .loader.is-placed { background-color: transparent; }              /* the photo appears behind the name */
.is-loaded .loader.is-placed .loader__fill { --logo: var(--cream); }        /* red turns cream, matching the hero */
.is-loaded .loader.is-placed .loader__ghost { opacity: 0; }
.is-loaded .loader:not(.is-placed) { transform: translateY(-100%); }       /* fallback: lift away */

@keyframes loader-fill { to { clip-path: inset(0 0 0 0); } }
@keyframes loader-failsafe { to { visibility: hidden; } }