/* ============================================
   LAB (2026-10-16, round 3): preloader + page transitions modelled on the
   REAL lusion.co, recorded with the REA skill (Site_CSS/research/loaders/
   lusion-real-*.png). Lusion's "L" logo is our battery:
   - first visit: UG Black screen, a small battery charging in the centre,
     a rolling 3-digit counter in the bottom-left; at 100 the battery turns
     solid UG Green with a small spring pop, then it becomes a WINDOW onto
     the site that grows and tilts until the screen is open;
   - link click: the page shrinks back into the battery window, the battery
     empties, "LOADING" types in, the next page loads; there the battery
     charges, turns green and opens onto the new page.
   ug-transitions.js draws the window (an SVG mask) every frame.
   Round 4 (2026-10-19): pages load on hover, quicker page changes, the
   page's top section plays an intro as the window opens, a real loading
   counter, the logo's green "G" as an alternative mark (?shape=g), skip with
   a click or Escape, and a soft shadow inside the window's edge.
   Round 5 (2026-10-19): the battery turns into the G, a % beside the
   battery, a bigger counter, the G opens straight.
   Round 6 (2026-10-19): preloader = battery → G → the rest of UNIGRID slides
   out (white), then the wordmark flies straight at you from the middle while
   the cover fades; no %; counter bigger and step for step with the battery;
   page changes use the battery only (straight). Then (Aaron): a % after the
   counter, counter slightly smaller (4.5-10.5rem).
   Round 5 is in git at a0c0f1d, round 4 at c4a5944, round 3 at 894420b, round 2 (diagonal wipe) at fd766bc, round 1
   at bc25c2f.
   2026-10-26: the battery PAGE CHANGE is retired (Aaron's CEO; Aaron picked
   "soft cross-fade + rise"). Page changes are now the browser's own View
   Transitions cross-fade (0.3s), a thin UG Green line along the top if the
   next page is slow (over 0.3s), and the new page's top section rising in.
   The first-visit preloader is unchanged. Battery version: git ec96cd5.
   ============================================ */

/* ---------- Page changes: cross-fade between pages ---------- */

/* Chrome, Edge and Safari 18.2+ cross-fade same-site page changes when both
   pages opt in (every page loads this file). Other browsers just load. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }

  /* The new page fades in OVER the old one, which stays solid underneath
     until it is covered. (Fading both at once let the white page canvas show
     through in the middle: a white flash.) */
  ::view-transition-old(root),
  ::view-transition-new(root) {
    mix-blend-mode: normal;
  }

  ::view-transition-old(root) {
    animation: none;
  }

  ::view-transition-new(root) {
    animation: ug-vt-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  }
}

@keyframes ug-vt-in {
  from { opacity: 0; }
}

/* The line along the top while a slow page loads. */
.ug-tx-line {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 2147483002;
  block-size: 2px;
  background-color: #00B03C;
  transform: scaleX(0);
  transform-origin: 0 50%;
  opacity: 0;
  pointer-events: none;
}

.ug-tx-line.is-on {
  opacity: 1;
  transform: scaleX(0.85);
  transition: transform 4s cubic-bezier(0.1, 0.7, 0.2, 1), opacity 0.2s ease;
}

/* Arriving from a link: the top section's eyebrow, heading, text and buttons
   rise into place one after another, starting on the page's first frame
   (pure CSS, so nothing waits for the rest of the page). The first section
   or block of each page: Home .home-hero, About .tp-hero, Products .hero,
   News .block--hero, Contact .ug-contact-form. */
html.ug-tx-in .entry-content > :is(section, div):first-of-type :is(.eyebrow, h1, h2, p, .button, .tp-btn) {
  animation: ug-tx-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

html.ug-tx-in .entry-content > :is(section, div):first-of-type :is(h1, h2) {
  animation-delay: 0.04s;
}

html.ug-tx-in .entry-content > :is(section, div):first-of-type p:not(.eyebrow) {
  animation-delay: 0.1s;
}

html.ug-tx-in .entry-content > :is(section, div):first-of-type :is(.button, .tp-btn) {
  animation-delay: 0.16s;
}

@keyframes ug-tx-up {
  from {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
  }
}

/* While the overlay is up, the page is held still and clipped to the screen
   with a UG Black background behind it. iPhone Safari draws the page UNDER
   its status bar and its floating bottom bar, outside any fixed element, so
   the page's own content showed there; now only this background can (the
   same thing lusion.co does: its page never extends under the bars). Checked
   in the iOS Simulator (Aaron, 2026-10-19). The script keeps the scroll
   position (body.scrollTop) and gives it back afterwards. */
html.ug-tx-lock,
html.ug-tx-pre {
  block-size: 100%;
  overflow: hidden;
  background-color: #002B2E;
}

html.ug-tx-lock body,
html.ug-tx-pre body {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* Covers the very first paint until the script has built the overlay. */
html.ug-tx-pre::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  background-color: #002B2E;
}

.ug-tx {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  pointer-events: none;
  visibility: hidden;
}

.ug-tx.is-on {
  visibility: visible;
  pointer-events: auto;
}

/* While the overlay fully covers the screen it also has a real background
   colour: iPhone Safari colours its status bar and bottom bar from fixed
   elements' CSS backgrounds (a canvas doesn't count), so the bars turn
   UG Black too, like lusion.co's bars take its colour. */
.ug-tx.is-on.is-solid {
  /* UG Green (Aaron): only Safari's bars show it; the canvas paints the
     screen itself UG Black on top. */
  background-color: #00B03C;
}

.ug-tx__canvas,
.ug-tx__svg {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: 100%;
  block-size: 100%;
}

.ug-tx__cover {
  fill: #002B2E;
}

.ug-tx__wash {
  fill: #00B03C;
}

.ug-tx__shell {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 2;
}

.ug-tx__nub {
  fill: #FFFFFF;
}

/* The G's bar before it charges. */
.ug-tx__track {
  fill: #FFFFFF;
  fill-opacity: 0.18;
}

/* The soft shadow inside the window's edge. */
.ug-tx__shade {
  fill: none;
  stroke: #002B2E;
  stroke-opacity: 0.6;
  stroke-width: 36;
}

.ug-tx__level {
  fill: #00B03C;
}

/* The battery that turns into the G. */
.ug-tx__m-case {
  fill: none;
  stroke: #FFFFFF;
}

.ug-tx__m-level {
  fill: #00B03C;
}

.ug-tx__m-nub {
  fill: #FFFFFF;
}

/* The white letters of UNIGRID (the G stays UG Green). */
.ug-tx__letter {
  fill: #FFFFFF;
}

/* ---------- The counter (bottom-left, rolling digits) ---------- */

.ug-tx__count {
  position: absolute;
  left: clamp(1rem, 2.5vw, 2rem);
  bottom: clamp(0.75rem, 2vw, 1.5rem);
  display: flex;
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 400;
  font-size: clamp(4.5rem, 11vw, 10.5rem);
  line-height: 1;
  color: #FFFFFF;
  font-variant-numeric: tabular-nums;
  transition: opacity 0.3s ease;
}

/* The % after the number: the same type, smaller, at the top of the line. */
.ug-tx__unit {
  align-self: flex-start;
  margin-inline-start: 0.06em;
  font-size: 0.4em;
  line-height: 1.6;
}

.ug-tx__digit {
  display: block;
  block-size: 1em;
  overflow: hidden;
}

.ug-tx__reel {
  display: flex;
  flex-direction: column;
  transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1);
  will-change: transform;
}

.ug-tx__reel span {
  display: block;
  block-size: 1em;
  text-align: center;
}

.ug-tx.is-opening .ug-tx__count {
  opacity: 0;
}

/* ---------- The page's own intro (its top section) ---------- */

/* Heading, text and buttons wait below their place, then rise one after
   another as the window opens; the big picture settles from a slight zoom. */
.ug-tx-rise {
  opacity: 0;
  transform: translate3d(0, 3rem, 0);
}

.ug-tx-rise.ug-tx-risen {
  opacity: 1;
  transform: none;
  transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--ug-tx-i, 0) * 0.1s);
}

.ug-tx-settle {
  transform: scale(1.12);
}

.ug-tx-settle.ug-tx-risen {
  transform: none;
  transition: transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: reduce) {
  .ug-tx,
  .ug-tx-line {
    display: none;
  }
}