/* ===================================================================
   LOADER — Playground principle: one big phrase split in two, a small
   image cycling in the gap between the halves, letters rising into
   place from behind their own masks, thin progress bar underneath.
   Shared by the hero load and the page transition back to the hero.
   =================================================================== */

html[data-loading="true"] { overflow: hidden; }

.loader {
  position: fixed;
  inset: 0;
  z-index: 400;
  /* black only as the base the blurred still is laid over, so there is
     never a frame where the panel is transparent */
  background: var(--black);
  color: var(--white);
  display: grid;
  place-items: center;
  transform: translateY(0);
  transition: transform 0.6s var(--ease-in-out);
  overflow: hidden;
}
/* The hero's own still frame, heavily defocused: the loader now leads
   into the video it hands over to instead of cutting from a black
   rectangle. Inset past the edges and scaled up so the blur has no
   soft border of its own. */
/* The blur is baked into the file, not applied by CSS.
   filter: blur(40px) on a full-screen element is re-evaluated on every
   composited frame, and in WebKit that was enough to make the letters
   stutter while they rose. A pre-blurred image costs nothing per frame
   and looks the same. */
.loader::before {
  content: "";
  position: absolute;
  inset: -4%;
  background: url("/media/hero/poster-blur.jpg") center / cover no-repeat;
}
/* A scrim over it, because a photograph is an unpredictable ground for
   white type: this one guarantees the letters read regardless of which
   part of the frame sits behind them. */
.loader::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.52);
}
/* everything the loader draws sits above both layers */
.loader > * { position: relative; z-index: 2; }
.loader.is-done { transform: translateY(-100%); }

.loader__row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 clamp(10px, 1.8vw, 26px);
  padding: 0 var(--gutter);
  width: 100%;
}

/* the display size lives here so that em-based children (the word
   space) resolve against it rather than against the inherited body
   size — that's what collapsed "CREATE TO" into "CREATETO" */
.loader__half,
.loader__word {
  display: inline-flex;
  font-size: clamp(2rem, 0.4rem + 7.2vw, 7rem);
}

.loader__mask {
  display: inline-block;
  overflow: hidden;
  line-height: 0.9;
}
.loader__glyph {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-stretch: var(--width-display);
  font-size: inherit;
  line-height: 0.9;
  letter-spacing: -0.02em;
  transform: translateY(110%);
  animation: loader-rise 0.66s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes loader-rise { to { transform: translateY(0); } }

.loader__space { display: inline-block; width: 0.3em; }

.loader__thumb {
  flex: none;
  width: clamp(58px, 9vw, 132px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1a1a1f;
  opacity: 0;
  animation: loader-thumb-in 0.4s var(--ease-out) 0.18s forwards;
}
@keyframes loader-thumb-in { to { opacity: 1; } }
.loader__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.loader__bar {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  bottom: 9%;
  height: 2px;
  background: rgba(255, 255, 255, 0.2);
}
.loader__bar i {
  display: block;
  height: 100%;
  background: var(--white);
  transform: scaleX(0);
  transform-origin: left;
}

.loader__pct {
  position: absolute;
  right: var(--gutter);
  bottom: calc(9% + 1.2rem);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: var(--w-label);
  letter-spacing: var(--tracking-label);
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.72);
}

@media (prefers-reduced-motion: reduce) {
  .loader__glyph { animation: none; transform: none; }
  .loader__thumb { animation: none; opacity: 1; }
  .loader { transition: none; }
}