/* ============================================================================
   we-teaser.css — the global teaser layer.

   Loaded from layouts/theme.liquid only while the teaser switch is ON, and
   scoped under html.teaser-mode so every rule in here is inert the moment the
   switch is flipped off. Nothing else in the theme references it.

   Two jobs:
     1. The compact countdown BANNER that rides above the nav on every page
        that stays live during the teaser.
     2. Containment — hiding the nav links that would otherwise walk a visitor
        straight into the fully built-out site. (The hrefs themselves are
        repointed in we-teaser.js; these rules stop the links being SEEN, so
        there is no flash of them before JS runs.)

   The countdown PAGE opts out of both via html.is-teaser-page — it is the
   destination, so it must not carry a banner pointing at itself.
   ============================================================================ */

html.teaser-mode {
  --we-teaser-h: 46px;
}
@media (max-width: 700px) {
  html.teaser-mode { --we-teaser-h: 42px; }
}

/* The bar sits ABOVE the nav (Chey, 2026-07-28) and everything fixed below it
   moves down by exactly its height. What made this read as broken the first
   time was not the order — it was the bar carrying its own torn edge, which
   left a rag between two dark strips and looked like a seam. It has no tear
   now: it is a flat coloured strip, so the nav reads as sitting under a
   deliberate announcement rather than being pushed off the top.

   The nav keeps its OWN rag, tearing onto the page exactly as it always has. */
html.teaser-mode:not(.is-teaser-page) body { padding-top: var(--we-teaser-h); }
html.teaser-mode:not(.is-teaser-page) header.nav { top: var(--we-teaser-h); }
html.teaser-mode:not(.is-teaser-page) .prog { top: var(--we-teaser-h); }
html.teaser-mode:not(.is-teaser-page) {
  /* the chapter rail's anchor jumps have to clear the bar as well as the nav */
  scroll-padding-top: calc(var(--we-teaser-h) + 78px);
}

/* --------------------------------------------------------------------------
   THE NAV during the teaser.

   The site is three destinations: the homepage, the coming-soon page, and the
   teardowns. The nav markup is duplicated across 22 section files, so it is
   shaped here rather than edited in each one — flip the switch and all of it
   reverts with no file to clean up.

     Home  (…5415650)  stays. It is the homepage, which is live.
     Mist  (…5409646)  stays, RELABELLED to "Coming soon" in we-teaser.js —
                       that template renders the countdown while the switch is
                       on. Relabelling in JS rather than with a CSS content
                       swap keeps the nav's own type scale, which differs per
                       page (.92rem here, other values on the teardowns).
     Tour  (…5415651)  hidden — not one of the three.

   The Intelligence dropdown and Book a demo are untouched.
   -------------------------------------------------------------------------- */
html.teaser-mode header.nav .nav-actions > a.nav-link[href*="5415651"] { display: none; }

/* The footer "Fluid Story" link on the homepage is a fourth destination. */
html.teaser-mode footer .foot-nav a[href*="5405990"] { display: none; }

/* --------------------------------------------------------------------------
   THE BAR — a halftone mesh-gradient print, flat-edged.

   Fill is we-fc-print-blue-navy.jpg (the on-brand one of the six: it runs cyan
   into the same navy as --we-accent). The raw print swings from L~180 at the
   light end to L~30 at the dark end, which would strand white text at the left
   — so a horizontal scrim rides over it, heaviest where the print is lightest.
   That flattens luminance without flattening hue: the dot screen and the colour
   both stay legible. Measured after the fact on real pixels, not eyeballed —
   see the contrast note in TEASER-SWITCH.md.
   -------------------------------------------------------------------------- */
.we-teaser-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2200;                      /* over the nav (100) and the reading
                                         progress bar (2100); under the
                                         steal-this modal (2300) */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 22px);
  height: var(--we-teaser-h);
  padding: 0 clamp(12px, 2.4vw, 30px);
  text-decoration: none;
  color: #fff;
  background-color: #070c16;
  background-image:
    linear-gradient(90deg,
      rgba(4, 8, 17, .84),
      rgba(4, 8, 17, .58) 30%,
      rgba(4, 8, 17, .50) 55%,
      rgba(4, 8, 17, .82)),
    var(--we-teaser-print, none);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  transition: color .2s;
}
html.is-teaser-page .we-teaser-bar { display: none; }


/* The live mist mark, at a coarse grid so it reads as a print screen rather
   than a logo. Measured against the running canvas: the solid grains occupy
   x 0.276-0.569 and y 0.349-0.668 of the element's 16:9 box, so the canvas is
   oversized and offset to bring that core onto the centre of a small window.
   The window is taller than the core so the mist can still drift up out of it
   before it clips. */
.we-teaser-mark {
  position: relative;
  flex: none;
  width: 46px;
  height: 36px;
  overflow: hidden;
}
.we-teaser-mark mist-logo {
  position: absolute;
  display: block;
  width: 138px;
  left: -35px;
  top: -22px;
  pointer-events: none;
}

.we-teaser-say {
  font-family: "FLBold", "Arial Black", sans-serif;
  font-size: clamp(.82rem, 1.15vw, .96rem);
  letter-spacing: .015em;
  white-space: nowrap;
}

/* the compact clock. Digits are tabular and the unit cells are fixed-width so
   the bar's contents never shift as the numbers tick. */
.we-teaser-clock {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-family: var(--mono, "WeHaas", "Neue Haas Display", Helvetica, Arial, sans-serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(.8rem, 1.1vw, .93rem);
  font-weight: 700;
  letter-spacing: .01em;
  color: #fff;
}
.we-teaser-clock b {
  display: inline-block;
  min-width: 2ch;
  text-align: right;
  font-weight: 700;
}
.we-teaser-clock i {
  font-style: normal;
  font-weight: 500;
  font-size: .82em;
  color: rgba(255, 255, 255, .5);
  margin-left: 1px;
  margin-right: 3px;
}

.we-teaser-when {
  font-family: var(--mono, "WeHaas", "Neue Haas Display", Helvetica, Arial, sans-serif);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .46);
  white-space: nowrap;
}

.we-teaser-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono, "WeHaas", "Neue Haas Display", Helvetica, Arial, sans-serif);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  /* a step lighter than --we-accent: measured against the actual fill, the
     brand blue lands at 4.3:1 here and this clears AA. */
  color: #7ccbff;
  white-space: nowrap;
}
.we-teaser-go svg {
  width: 13px; height: 13px;
  fill: none; stroke: currentColor;
  stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .22s cubic-bezier(.2, .8, .3, 1);
}
.we-teaser-bar:hover .we-teaser-go svg { transform: translateX(3px); }
.we-teaser-bar:hover .we-teaser-say { color: #fff; }

/* the T-0 fallback: if the switch hasn't been flipped the instant the clock
   runs out, the bar says so rather than showing a row of zeroes. */
.we-teaser-bar .we-teaser-live { display: none; }
html.teaser-live .we-teaser-bar .we-teaser-clock,
html.teaser-live .we-teaser-bar .we-teaser-when { display: none; }
html.teaser-live .we-teaser-bar .we-teaser-live {
  display: inline;
  font-family: "FLBold", "Arial Black", sans-serif;
  font-size: clamp(.82rem, 1.15vw, .96rem);
  color: var(--we-accent, #42b1ff);
}

/* --------------------------------------------------------------------------
   Narrow. Drop the date line first, then the teaser line, so the clock and
   the arrow — the two things that have to survive — always fit.
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .we-teaser-when { display: none; }
}
@media (max-width: 560px) {
  .we-teaser-say { font-size: .78rem; }
  .we-teaser-go span { display: none; }
}
@media (max-width: 400px) {
  .we-teaser-say { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .we-teaser-bar:hover .we-teaser-go svg { transform: none; }
}