/* ============================================================================
   Floom Preloader — the brand curtain
   ----------------------------------------------------------------------------
   A full-bleed field with a percentage readout riding the tip of a rule that
   draws itself across the foot of the screen; then the whole panel lifts away.

   This file is loaded from <head> as a render-blocking stylesheet on purpose:
   the curtain markup is the first thing in <body>, so it has to be styled at
   FIRST paint or the page flashes through before the panel lands on top of it.
   Nothing here depends on a webfont for the same reason — the readout is set
   in the system grotesque, which is present at first paint. A swapped-in
   webfont would re-flow the digits mid-count.

   The script half is FloomFX.preloader() in floom-fx.js; it finds the markup
   by [data-fl-preloader], so a page opts in by including the markup alone.
   ========================================================================== */

:root{
  --fl-pre-bg:   #ff3c00;   /* the field — brand orange, one notch off --orange-500 */
  --fl-pre-ink:  #FFFFFF;
  --fl-pre-lead: #ff3c00;   /* the short accent that runs ahead of the rule */
  --fl-pre-gut:  round(clamp(20px, 4.2vw, 56px), 4px);
  --fl-pre-out:  .42s;      /* curtain dissolve — mirrored by outMs in the script */
}

.fl-pre{
  position: fixed;
  inset: 0;
  z-index: 9990;            /* the nav, the highest thing on the site, is 100 */
  background: var(--fl-pre-bg);
  color: var(--fl-pre-ink);
  overflow: hidden;
  will-change: transform;

  /* Failsafe. If floom-fx.js 404s, fails to parse, or is still in flight on a
     bad connection, nothing would ever take the curtain down — so the curtain
     takes itself down. The script's own exit lands at ~0.9s, well inside this. */
  animation: fl-pre-bail .25s linear 2.2s forwards;
}

@keyframes fl-pre-bail{
  to{ opacity: 0; visibility: hidden; pointer-events: none; }
}

/* The band the readout and the rule share, inset by the page gutter. */
.fl-pre-band{
  position: absolute;
  left:  var(--fl-pre-gut);
  right: var(--fl-pre-gut);
  bottom: round(clamp(20px, 4.4vh, 52px), 4px);
}

/* The readout is inline-block so its natural home is the LEFT gutter: the
   script slides it right, and early on the clamp simply leaves it here —
   which is exactly what the reference does at 12%. */
.fl-pre-read{
  display: inline-block;
  transform: translate3d(0, 0, 0);
  /* Urbanist carries figures too; the system faces stay only as the fallback
     that paints the readout before the webfont arrives. */
  font-family: 'Urbanist', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(44px, 7.4vw, 108px);
  font-weight: 450;
  line-height: 0.95;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  user-select: none;
}
.fl-pre-sym{ margin-left: round(.04em, 4px); }

/* The rule. There is no track behind it — only the drawn part is ever visible,
   so the line reads as being written rather than filled in. */
.fl-pre-rule{
  position: relative;
  height: 1px;
  margin-top: round(clamp(8px, 1.4vh, 20px), 4px);
}
.fl-pre-fill{
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: .92;
  transform: scaleX(0);
  transform-origin: 0 50%;
}
.fl-pre-lead{
  position: absolute;
  top: -1px;
  left: 0;
  width: 34px;
  height: 3px;
  background: var(--fl-pre-lead);
  transform: translate3d(0, 0, 0);
}

/* The exit is a DISSOLVE, not a lift — measured off the reference build frame
   by frame at 50fps: the field thins in place over ~400ms, the readout going
   with it, onto a product shot that is already framed and waiting behind it.
   A lift is a panel leaving; a dissolve means the first thing you see is the
   thing you came for, and the 12%/100% sits over it for a moment on the way
   out. Opacity-only, so it composites. */
.fl-pre.is-out{
  opacity: 0;
  transition: opacity var(--fl-pre-out) cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}

/* Seen once already this session → there is no curtain, and it never paints.
   The class goes on <html> from an inline script in <head>, before the body is
   parsed, which is the only place early enough: a deferred script removing the
   panel would do it one orange frame too late. */
.fl-pre-seen .fl-pre{ display: none; }

/* Asked for less motion → there is no curtain at all. Not a faster curtain:
   display:none means it never paints, so the page is simply there. */
@media (prefers-reduced-motion: reduce){
  .fl-pre{ display: none; }
}