/* Page-transition overlay -- see assets/transition.js.
 *
 * Four full-viewport layers, copied from the hero so the transition is the same
 * image the homepage zooms: a flat screen, the photograph the hero draws inside
 * its letters, the two pages the label's windows are showing (the one being left
 * in every letter, the one being opened in the single letter it belongs to), and
 * the black "Ti" ink that fades out as the zoom starts. Only the picture inside
 * the letters is masked; nothing here animates, and transition.js writes
 * mask-size / mask-position / opacity every frame.
 *
 * Appended to <html>, never <body>: the boot script runs in <head>, before
 * <body> exists, so that an arrival paints over the page instead of flashing
 * the page first.
 */
.tg-overlay {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  overflow: hidden;
  pointer-events: none;
  /* the hero's flat screen -- the palette's accent, so the two cannot drift */
  background: var(--accent, #FF5A1F);
}
.tg-overlay.is-on { display: block; }
.tg-overlay > div { position: absolute; inset: 0; }

/* The wordmark is the window: the picture shows only inside the letters, and
   the overlay's own background is the flat screen around them.

   For .tg-next this is the DEFAULT, not the whole story: a navigation opens one
   letter, so transition.js masks that layer with the destination letter's own
   file (assets/hero/wordmark-mask-<letter>.svg, written by
   tools/wordmark/build_wordmark.py) before it is ever shown, leaving this layer
   -- and the page it carries -- invisible in all the others. The whole-wordmark
   mask stays as the fallback so that a layer nobody has narrowed yet can only
   ever be the shape the label draws, never the full frame. */
.tg-hole,
.tg-now,
.tg-next {
  -webkit-mask-image: url("/assets/hero/wordmark-mask.svg");
  mask-image: url("/assets/hero/wordmark-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}

.tg-hole {
  background: url("/assets/img/hero-bg.webp") center center / cover no-repeat;
}

/* The page the label is showing. Both are transparent until transition.js says
   otherwise, so a layer it never fills is invisible rather than black: where a
   page does not reach inside the letters, the photograph and then the flat
   screen below it show through, exactly as they did before. */
.tg-now,
.tg-next,
.tg-rest {
  opacity: 0;
}

/* The letters that are NOT the one the dive is aimed at, covered with the flat
   screen colour so that they fade as the zoom closes on that letter. This is the
   live site's own effect -- its hero cross-fades a whole-word copy of the picture
   against a "G"-only copy -- and it is drawn as a COVER rather than a fade
   because a layer carrying the picture at partial alpha is a wash of flat colour
   over it; see the note in the page's own hero, and in transition.js.

   Its mask is the complement of that letter (the build writes one per letter,
   assets/hero/wordmark-rest-<letter>.svg). It sits above .tg-now and .tg-hole so
   that it hides them, and below .tg-next so that the page being opened is never
   covered. transition.js writes its mask and its opacity; the opacity is 0 here
   as well, and its own mask is set before the first frame, because a layer with
   no mask at all would paint the whole frame flat. */
.tg-rest {
  background: var(--accent, #FF5A1F);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}
.tg-frame {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  border: 0;
  background: transparent;
  /* scaled about its own top-left corner: transition.js translates it into the
     label's window and shrinks it, so a whole page fits inside a letter */
  transform-origin: 0 0;
}

/* The ink is the hero's own black (#000, not the palette's --ink): at the wide
   label the transition has to look exactly like the hero it copies, and the
   hero's wordmark paths are filled black. */
.tg-ink {
  background: #000;
  -webkit-mask-image: url("/assets/hero/ti-mask.svg");
  mask-image: url("/assets/hero/ti-mask.svg");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% auto;
  mask-size: 100% auto;
}