/* ============================================================
   BROKEHELLA — VISUAL INTELLIGENCE SYSTEM
   A shared vocabulary for turning information into design.

   Two halves:
     1. SIX STATES. Every claim anywhere on the site is one of
        six things. Learn the legend once, read any page.
     2. PRIMITIVES. Masking, assembly, oversized numerals and
        technical annotation — the techniques that let a number
        behave like an image instead of sitting beside one.

   Depends on brand.css for the palette. Add after it.
   Every motion here is opt-out twice: the OS reduced-motion
   setting and the site's own Quiet Mode. Stillness is sacred,
   so the still version must be the readable one — never a
   half-drawn frame left behind by a cancelled animation.
   ============================================================ */

:root {
  --v-reality: #3FE0B0;   /* it exists, you can open it        */
  --v-build:   #E08A3C;   /* started, not finished             */
  --v-plan:    #6E9BD4;   /* drawn, not built                  */
  --v-gap:     #8E948C;   /* we do not have this               */
  --v-receipt: #F3E7D8;   /* evidence                          */
  --v-change:  #A5504A;   /* we deliberately changed or killed */
}

/* ---- 1. THE SIX STATES -------------------------------------------- */

.v-tag {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  font-family: var(--mono); font-size: 9px; letter-spacing: .18em;
  text-transform: uppercase; line-height: 1;
  padding: 5px 9px; border-radius: 2px;
  border: 1px solid currentColor; background: rgba(9, 12, 11, .55);
  white-space: nowrap;
}
/* The dot is decoration; the word carries the meaning. Colour is
   never the only signal, so this survives a colour-blind reader and
   a black-and-white print. */
.v-tag::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

.v-reality { color: var(--v-reality); }
.v-build   { color: var(--v-build);   }
.v-plan    { color: var(--v-plan);    }
.v-gap     { color: var(--v-gap);     }
.v-receipt { color: var(--v-receipt); }
.v-change  { color: var(--v-change);  }

.v-legend { display: flex; flex-wrap: wrap; gap: 8px; }

/* An edge in the state's colour, for any block that belongs to it. */
.v-edge { border-left: 3px solid var(--v-c, var(--hair-soft)); }
.v-edge-reality { --v-c: var(--v-reality); }
.v-edge-build   { --v-c: var(--v-build);   }
.v-edge-plan    { --v-c: var(--v-plan);    }
.v-edge-gap     { --v-c: var(--v-gap);     }
.v-edge-change  { --v-c: var(--v-change);  }

/* ---- 2. OVERSIZED NUMERALS ----------------------------------------
   The number is the artwork, not a label on one. Tabular figures so
   a counting animation cannot make the layout jitter. */

.v-fig { display: block; }
.v-fig .n {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(58px, 13vw, 168px);
  line-height: .82;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
/* Zeros are the honest part of this page. They stay quiet on purpose
   rather than being dressed up to look like achievements. */
.v-fig .n.is-zero { color: var(--cream-faint); opacity: .45; }
.v-fig .k {
  display: block; margin-top: 12px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cream-dim);
}
.v-fig .src { display: block; margin-top: 6px; font-size: 11.5px; color: var(--cream-faint); }
.v-fig .src a { color: inherit; }

/* ---- 3. MASK REVEAL ------------------------------------------------
   The channel's most-repeated technique is masking, so it is the one
   worth stealing: content is wiped in behind a moving edge rather than
   faded. clip-path animates on the compositor, so this stays cheap. */

.v-mask { clip-path: inset(0 100% 0 0); }
.v-mask.in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.05s cubic-bezier(.22, .61, .36, 1);
}
.v-mask-up { clip-path: inset(100% 0 0 0); }
.v-mask-up.in {
  clip-path: inset(0 0 0 0);
  transition: clip-path .9s cubic-bezier(.22, .61, .36, 1);
}

/* ---- 4. ASSEMBLY ---------------------------------------------------
   A big number breaking into the things it counts. Children arrive on
   a stagger driven by --i, set once in JS. */

.v-assemble > * {
  opacity: 0;
  transform: translateY(9px) scale(.97);
}
/* The stagger is capped in JS at 24 steps. Uncapped, a 44-tile grid
   spends ~1s before the last tile starts, so anyone scrolling at normal
   speed reads it as an empty box. */
.v-assemble.in > * {
  opacity: 1;
  transform: none;
  transition: opacity .42s var(--ease, ease) calc(var(--i, 0) * 13ms),
              transform .42s var(--ease, ease) calc(var(--i, 0) * 13ms);
}

/* ---- 5. TECHNICAL ANNOTATION --------------------------------------
   Registration marks and measurement rules — the drawing-office layer
   that makes a picture read as a document. Decorative only, so it is
   hidden from assistive tech at the point of use. */

.v-rule {
  position: relative; height: 1px; background: var(--hair-soft); margin: 26px 0;
}
.v-rule::before, .v-rule::after {
  content: ''; position: absolute; top: -3px; width: 1px; height: 7px; background: var(--accent);
}
.v-rule::before { left: 0; }
.v-rule::after  { right: 0; }

.v-mark {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--cream-faint);
}

/* ---- 6. THE KILLED ARCHIVE ----------------------------------------
   Struck through, numbered, and given the same weight as the wins.
   A project that only shows what it kept is a brochure. */

.v-killed { border-top: 1px solid var(--hair-soft); padding: 26px 0 24px; position: relative; }
.v-killed:last-child { border-bottom: 1px solid var(--hair-soft); }
/* block, not inline: the h3 below is inline-block, so an inline index
   lands on the same line and sits on top of the headline. */
.v-killed .idx {
  display: block;
  font-family: var(--mono); font-size: 10px; letter-spacing: .2em; color: var(--v-change);
}
.v-killed h3 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.01em;
  font-size: clamp(21px, 3.6vw, 38px); line-height: 1.06; color: var(--cream-dim);
  margin-top: 10px; display: inline-block; max-width: 24ch;
  /* Real line-through, not an absolutely-positioned bar. These headings
     wrap to two or three lines, and a single bar lands in the gap between
     them — striking nothing. text-decoration is drawn per line, so it is
     correct at any wrap and any font size. */
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
}
/* The strike arrives with the row: the decision landing, rather than a
   line that was always there. */
.v-killed.in h3 {
  text-decoration-color: var(--v-change);
  transition: text-decoration-color .55s cubic-bezier(.22,.61,.36,1) .14s;
}
.v-killed .why { display: block; margin-top: 14px; max-width: 62ch; font-size: 14px; line-height: 1.65; color: var(--cream-dim); }
.v-killed .cause {
  display: inline-block; margin-top: 14px;
  font-family: var(--mono); font-size: 10px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--v-change);
  border: 1px solid currentColor; border-radius: 2px; padding: 5px 9px;
}

/* ---- 7. TILE FIELDS ------------------------------------------------ */

.v-tiles { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
.v-tile {
  border: 1px solid var(--hair-soft); border-radius: 2px;
  padding: 9px 8px; background: rgba(9, 12, 11, .55);
  font-family: var(--mono); font-size: 9px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--cream-faint);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.v-tile.on { color: var(--cream-dim); border-color: var(--v-reality); }

/* ---- 8. THE STILL VERSION -----------------------------------------
   Under reduced motion or Quiet Mode everything is simply present.
   No transitions to cancel, no clip-path left half-closed. */

@media (prefers-reduced-motion: reduce) {
  .v-mask, .v-mask-up { clip-path: none !important; transition: none !important; }
  .v-assemble > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .v-killed h3 { text-decoration-color: var(--v-change) !important; transition: none !important; }
}
[data-quiet="on"] .v-mask,
[data-quiet="on"] .v-mask-up { clip-path: none !important; transition: none !important; }
[data-quiet="on"] .v-assemble > * { opacity: 1 !important; transform: none !important; transition: none !important; }
[data-quiet="on"] .v-killed h3 { text-decoration-color: var(--v-change) !important; transition: none !important; }