/* THE DEFINITION (js/definition.js)
   2026-10-27 (foreman): the founder's Trailblazer definition, placed before the faction reveal on his word (14:49,
   14:56 GMT).
   Restyled 2026-10-27 on his word (19:40 GMT: "this scrap of paper doesnt fit the brand vibe! looks so out of place /
   ANNDDD there's a whole massaive black space before it show"): the torn cream page, the Newsreader serif and the tilt
   are gone. The entry now stands on Hypha's own dark stage in the page's own type: the headword in the display face
   (css/base.css .display, lower case as written), the pronunciation, part of speech and label in the mono caption
   style (.eyebrow), the senses in the body face (.lede), the "see also" factions as the lineup's own pills
   (css/select.css .lu) in their locked colour and sign (docs/brand/HYPHA-FACTIONS-v1.md; ink on the colour, and once a
   word lifts off into the dark it becomes its colour as light, rule 5).
   The black gap: the stage pins half a screen earlier than the page's other crossfades and stays clear until the
   arrival's window recedes, so the entry arrives as the arrival ends (js/definition.js DROP_AT).
   WOW lab pass 2026-10-29 (the founder 10-27 19:47, "1 lit room + 3 blaze moment + grain from 4"): the room is lit
   (.dc-light), the arrival is a blaze (a cut of light under the headword, then the factions light in turn and spill
   their colour), and the stage carries a still film grain. No word changed. */

/* ---------- the scene: the arrival's night carries on, and the entry arrives as its window recedes ---------- */
/* css/base.css .scene--xfade overlaps by 1.5 screens; this one by 2, so the stage is already pinned (and clear) while
   the arrival's window is still going (eye pass 10-27: 1.05 screens of empty black sat between them) */
.scene.dc-scene { margin-top: calc(-2 * var(--stage-h)); }
.dc { background: transparent; }
/* the dark of the stage, faded in by js/definition.js (--dc-dark) over the arrival's last light, never before it */
.dc::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--void);
  opacity: var(--dc-dark, 0);
  pointer-events: none;
}
.dc-room { position: absolute; inset: 0; z-index: 1; }

/* ---------- the lit room (WOW lab pass, the founder 10-27 19:47: "1 lit room + 3 blaze moment + grain from 4", after
   "there is something..... "flat" about them") ----------
   js/definition.js makes .dc-light at init (it is no part of the entry's words, so it is not in the page): a wide mint
   lamp over the stage's dark that drifts as they read (and, with a mouse, eases toward the pointer), and a bloom behind
   the headword that flares as the blaze cuts. The light comes in with the dark (--dc-dark, set with its opacity by
   js/definition.js), so it never covers the arrival's last light early. Paint order inside .dc: the dark (::before),
   the light, the grain (::after), then the room with the entry. */
.dc-light { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.dc-lamp, .dc-bloom {
  position: absolute;
  left: var(--lx, 40%);
  top: var(--ly, 36%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.dc-lamp {
  width: 100vmax;
  height: 74vmax;
  background: radial-gradient(closest-side, rgb(101 219 174 / 0.2), rgb(77 218 199 / 0.095) 26%, rgb(77 218 199 / 0.034) 52%, rgb(77 218 199 / 0) 100%);
  will-change: transform;
}
.dc-bloom {
  width: var(--bw, 60vw);
  height: var(--bh, 36vh);
  background: radial-gradient(closest-side, rgb(205 255 236 / 0.21), rgb(101 219 174 / 0.09) 44%, rgb(101 219 174 / 0) 100%);
  opacity: 0;
  transition: opacity 0.45s ease;
}
.dc.is-dropped .dc-bloom { opacity: 0.62; animation: dc-bloom 2s cubic-bezier(0.2, 0.7, 0.3, 1) 0.5s backwards; }
@keyframes dc-bloom { 0% { opacity: 0; } 26% { opacity: 1; } 100% { opacity: 0.62; } }
/* the film grain: static, over the dark and the light, under the entry (the old paper's noise, white specks) */
.dc::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 2.2 -.75'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
  opacity: calc(var(--dc-dark, 0) * 0.06);
}
/* the entry only lays out once js/definition.js arms it, after the first screens load */
.dc:not(.is-armed) .dc-page { display: none; }
.dc-page {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: min(880px, calc(100% - 2 * var(--gutter)));
  margin: 0;
  opacity: 0;
  transform: translate(-50%, -50%) translateY(24px);
}
/* a short screen shrinks the whole entry to fit (js/definition.js sets the scale), never cuts it */
.dc-fit { position: relative; transform-origin: 50% 50%; }
.dc-text {
  position: relative;
  color: var(--white);
  font-family: var(--f-body);
  text-align: left;
}
:where(.dc-text) :where(p, h2) { margin: 0; }

/* the headword, in the display face, with its pronunciation and part of speech on its baseline */
.dc-hw {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.42em;
  row-gap: 0.32em;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: clamp(56px, 6.8vw, 116px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  color: var(--white);
}
.dc-hw b { font-weight: 700; }
.dc-pron {
  display: inline-flex;
  align-items: baseline;
  gap: 1.1em;
  font-family: var(--f-mono);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--silver);
}
.dc-pos { font-style: normal; letter-spacing: 0.14em; color: var(--steel); }

/* the plain sense, then IN HYPHA on a hairline, then the Hypha sense: the line the page is about */
.dc-sense {
  margin-top: clamp(20px, 3vh, 30px);
  max-width: 36em;
  font-size: clamp(18px, 1.55vw, 24px);
  line-height: 1.45;
  color: var(--silver);
  text-wrap: pretty;
}
.dc-label {
  margin-top: clamp(22px, 3.6vh, 40px);
  padding-top: clamp(16px, 2.6vh, 26px);
  border-top: 1px solid rgb(249 250 250 / 0.14);
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.14em;
  color: var(--mint);
}
.dc-hysense {
  margin-top: 10px;
  max-width: 31em;
  font-size: clamp(21px, 1.95vw, 31px);
  font-weight: 500;
  line-height: 1.34;
  letter-spacing: -0.008em;
  color: var(--white);
  text-wrap: pretty;
}

/* ---------- see also: the four factions (the founder 14:56 GMT), then the original line under them ---------- */
.dc-see {
  margin-top: clamp(24px, 3.8vh, 42px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  row-gap: 12px;
  align-items: center;
}
.dc-see > i {
  grid-column: 1; grid-row: 1;
  font-style: normal;
  font-family: var(--f-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--steel);
}
.dc-xr { position: relative; grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dc-not { grid-column: 2; grid-row: 2; font-size: 15px; line-height: 1.45; color: var(--steel); }
/* the dictionary's dots between the names stay in the text, but the pills part themselves (the lineup has none): a dot
   that wrapped to the head of a phone row read as stray punctuation (eye pass 10-27 at 390) */
.dc-dot { position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none; }
/* one faction: its sign and its name in ink, on a pill of its own colour (the lineup's pill, filled) */
.dc-fx, .dc-flyer {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.42em;
  padding: 0.36em 0.86em 0.36em 0.7em;
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}
.dc-fx::before, .dc-flyer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rc);
  border-radius: 999px;
  box-shadow: 0 0 22px color-mix(in srgb, var(--rc) 26%, transparent);
}
.dc-sg {
  flex: none;
  width: 0.92em;
  height: 0.92em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- the blaze (WOW lab pass): as the entry arrives a line of light cuts under the headword from the left (a
   blaze is a mark cut to show the way) and settles to a faint lit edge, the room's bloom flares with it, then the four
   factions light one by one from their signs, each spilling its colour onto the dark under it. Once per arrival:
   .is-dropped goes with lift(), so scrolling back up and down plays it again. Opacity and transform only ---------- */
.dc-hw b { position: relative; }
.dc-hw b::before, .dc-hw b::after { content: ""; position: absolute; left: 0; pointer-events: none; }
.dc-hw b::after {
  right: 0;
  bottom: var(--cut-y, 0.04em);
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgb(101 219 174 / 0), var(--mint) 9%, #dffff2 72%, var(--mint));
  box-shadow: 0 0 10px rgb(101 219 174 / 0.6), 0 0 28px rgb(101 219 174 / 0.26);
  transform-origin: 0 50%;
  opacity: 0;
  transform: scaleX(0);
}
.dc.is-dropped .dc-hw b::after { opacity: 0.38; transform: none; animation: dc-cut 1.7s 0.42s backwards; }
@keyframes dc-cut {
  0% { opacity: 1; transform: scaleX(0); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  36% { opacity: 1; transform: scaleX(1); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  100% { opacity: 0.38; transform: scaleX(1); }
}
/* the spark at the head of the cut, travelling with it */
.dc-hw b::before {
  width: 100%;
  bottom: calc(var(--cut-y, 0.04em) - 10px);
  height: 22px;
  background: radial-gradient(30px 10px at calc(100% - 15px) 50%, #fff, rgb(170 248 218 / 0.8) 36%, rgb(101 219 174 / 0) 100%);
  opacity: 0;
  transform: translateX(-100%);
}
.dc.is-dropped .dc-hw b::before { animation: dc-spark 1.7s 0.42s backwards; }
@keyframes dc-spark {
  0% { opacity: 0; transform: translateX(-100%); animation-timing-function: cubic-bezier(0.7, 0, 0.2, 1); }
  4% { opacity: 1; }
  36% { opacity: 1; transform: translateX(0); }
  52%, 100% { opacity: 0; transform: translateX(0); }
}
/* the four light in turn (by name: dots sit between the pills, so no nth-child) */
.dc-fx[data-fx="hunter"] { --lit: 1s; }
.dc-fx[data-fx="architect"] { --lit: 1.2s; }
.dc-fx[data-fx="rainmaker"] { --lit: 1.4s; }
.dc-fx[data-fx="commander"] { --lit: 1.6s; }
/* its pool: the colour spilling onto the dark under the pill. On .dc-fx only: js/definition.js clones the pills as
   .dc-flyer, so no pool travels with the words in flight */
.dc-fx::after {
  content: "";
  position: absolute;
  left: -26%;
  right: -26%;
  top: -40%;
  bottom: -150%;
  z-index: -2;
  border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rc) 50%, transparent), color-mix(in srgb, var(--rc) 18%, transparent) 52%, color-mix(in srgb, var(--rc) 0%, transparent) 100%);
  transform-origin: calc(17% + 0.76em) 31%;
  opacity: 0.72;
  pointer-events: none;
}
.dc.is-dropped .dc-fx::before { animation: dc-fill-on 0.7s var(--lit) backwards; }
.dc.is-dropped .dc-fx::after { animation: dc-pool-on 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) var(--lit) backwards; }
.dc.is-dropped .dc-fx > span { animation: dc-fill-on 0.7s var(--lit) backwards; }
.dc.is-dropped .dc-fx .dc-sg { animation: dc-sign-on 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) var(--lit) backwards; }
@keyframes dc-fill-on { 0% { opacity: 0; } 30% { opacity: 0.95; } 44% { opacity: 0.55; } 62%, 100% { opacity: 1; } }
@keyframes dc-pool-on { 0% { opacity: 0; transform: scale(0.5); } 24% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0.72; transform: none; } }
@keyframes dc-sign-on { 0% { opacity: 0; transform: scale(0.3) rotate(-35deg); } 100% { opacity: 1; transform: none; } }

/* ---------- the arrival: the lines come up in order, the way the page's captions enter (no drop, no tilt) ---------- */
.dc-text > * {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.3, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.dc.is-dropped .dc-text > * { opacity: 1; transform: none; }
.dc.is-dropped .dc-text > :nth-child(2) { transition-delay: 0.08s; }
.dc.is-dropped .dc-text > :nth-child(3) { transition-delay: 0.16s; }
.dc.is-dropped .dc-text > :nth-child(4) { transition-delay: 0.22s; }
.dc.is-dropped .dc-text > :nth-child(5) { transition-delay: 0.3s; }
.dc-fx { transition: opacity 0.2s ease; }
.dc.is-lifted .dc-fx { opacity: 0; }

/* ---------- the words in flight: a layer over everything, so they can travel into the select below ---------- */
.dc-fly { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.dc-flyer {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  transition: color 0.55s ease, text-shadow 0.55s ease;
}
.dc-flyer::before { transition: opacity 0.45s ease, transform 0.55s ease; }
.dc-flyer .dc-sg { transition: filter 0.55s ease; }
/* off the entry, in the dark: the word becomes its colour (text in a faction colour, on the dark stage only) */
.dc-flyer.is-light { color: var(--rc); text-shadow: 0 0 18px color-mix(in srgb, var(--rc) 55%, transparent); }
.dc-flyer.is-light::before { opacity: 0; transform: scaleX(0.55); }
.dc-flyer.is-light .dc-sg { filter: drop-shadow(0 0 7px color-mix(in srgb, var(--rc) 70%, transparent)); }

/* ---------- the lineup it lands in (css/select.css .lu): empty while the words are on their way, lit where they land ---------- */
.lineup .lu .lu-name, .lineup .lu .lu-cord { transition: opacity .3s ease; }
.lineup.dc-wait .lu:not(.is-lit) .lu-name, .lineup.dc-wait .lu:not(.is-lit) .lu-cord { opacity: 0; }
.lineup .lu.is-lit { border-color: color-mix(in srgb, var(--rc) 55%, transparent); }
.lineup .lu.is-lit .lu-cord { box-shadow: 0 0 14px var(--rc); }
.lineup .lu.is-lit:hover, .lineup .lu.is-lit:focus-visible { border-color: var(--rc); }
.lineup .lu.is-landing { animation: dc-lit 1.5s cubic-bezier(.2, .7, .3, 1) both; }
@keyframes dc-lit {
  0% {
    border-color: var(--rc);
    background: color-mix(in srgb, var(--rc) 18%, transparent);
    box-shadow: 0 0 0 1px var(--rc), 0 0 46px color-mix(in srgb, var(--rc) 62%, transparent);
  }
  100% {
    border-color: color-mix(in srgb, var(--rc) 55%, transparent);
    background: rgb(249 250 250 / 0);
    box-shadow: 0 0 0 0 transparent, 0 0 0 transparent;
  }
}

/* ---------- the blaze: the world behind (our night-globe loop), the trail that draws itself, the word typed in ---------- */
.dc-world { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; overflow: hidden; background: var(--void); }
.dc-loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
/* 2026-10-31: lighter scrim for the slow spinning globe (e-spin): that loop is graded faint at source (mean luma 7 vs the old 26, white text 16.6:1 on it with no scrim at all), so the old 0.7 centre hid the world entirely; the founder wants it seen, faint, with the words on top */
.dc-scrim { position: absolute; inset: 0; background: radial-gradient(ellipse 62% 72% at 50% 50%, rgb(0 0 0 / 0.4), rgb(0 0 0 / 0.14) 72%, transparent), linear-gradient(90deg, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.1) 50%, rgb(0 0 0 / 0.28)); box-shadow: inset 0 0 16vmax 4vmax #000; }
.dc-trail { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.dc-trail path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dc-tg { stroke: color-mix(in srgb, var(--mint) 12%, transparent); stroke-width: 12px; }
.dc-tm { stroke: color-mix(in srgb, var(--mint) 35%, transparent); stroke-width: 4.5px; }
.dc-tc { stroke: #c8f7e2; stroke-width: 1.6px; }
.dc-twig { opacity: 0.5; }
.dc-node { fill: none; stroke: color-mix(in srgb, var(--mint) 30%, transparent); stroke-width: 1.2px; transition: stroke 0.4s, fill 0.4s; }
.dc-node.is-on { stroke: var(--mint); fill: color-mix(in srgb, var(--mint) 22%, transparent); }
.dc-head { fill: url(#dc-hg); transition: opacity 0.2s; }
.dc-land { fill: url(#dc-hg); opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.4); transition: opacity 0.5s, transform 0.7s cubic-bezier(0.3, 1.6, 0.5, 1); }
.dc.is-landed .dc-land { opacity: 1; transform: none; }
/* the line leaves with the page: once the words lift into the select it would point at nothing */
.dc-trail { transition: opacity 0.45s ease; }
.dc.has-trail.is-lifted .dc-trail { opacity: 0; }
/* the headword draws in behind the line's head (--hwx, js/definition.js), the rest and the pronunciation from the dot */
.dc.has-trail .dc-hw b { clip-path: inset(-0.6em calc(100% - var(--hwx, 0px)) -0.6em -0.6em); }
.dc.has-trail .dc-hw b::after { display: none; }
.dc.has-trail .dc-pron { opacity: var(--hwr, 0); }
.dc.has-trail .dc-w { opacity: 0; transition: opacity 0.18s linear, text-shadow 0.5s; }
.dc.has-trail .dc-w.is-on { opacity: 1; }
.dc-w.is-hot { text-shadow: 0 0 12px color-mix(in srgb, var(--mint) 70%, transparent); }
/* the pills are the line's last nodes: hidden until it reaches their row, then their glow runs (own names: a
   same-name animation would not restart) */
.dc.has-trail:not(.is-noded) .dc-fx { opacity: 0; }
.dc.has-trail.is-noded .dc-fx::before { animation: dc-fill-re 0.7s calc(var(--lit) - 1s) backwards; }
.dc.has-trail.is-noded .dc-fx::after { animation: dc-pool-re 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) calc(var(--lit) - 1s) backwards; }
.dc.has-trail.is-noded .dc-fx > span { animation: dc-fill-re 0.7s calc(var(--lit) - 1s) backwards; }
.dc.has-trail.is-noded .dc-fx .dc-sg { animation: dc-sign-re 0.75s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--lit) - 1s) backwards; }
@keyframes dc-fill-re { 0% { opacity: 0; } 30% { opacity: 0.95; } 44% { opacity: 0.55; } 62%, 100% { opacity: 1; } }
@keyframes dc-pool-re { 0% { opacity: 0; transform: scale(0.5); } 24% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0.72; transform: none; } }
@keyframes dc-sign-re { 0% { opacity: 0; transform: scale(0.3) rotate(-35deg); } 100% { opacity: 1; transform: none; } }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .dc-loop { object-position: 50% 30%; }
  /* darker down the screen, where the small type sits (See also: 4.2:1 on the poster under a flat 0.55) */
  .dc-scrim { background: linear-gradient(180deg, rgb(0 0 0 / 0.26), rgb(0 0 0 / 0.38) 50%, rgb(0 0 0 / 0.6)); box-shadow: inset 0 0 30vmax 6vmax #000; } /* 2026-10-31: lighter for the faint e-spin globe (see the desk rule) */
  .dc-page { width: calc(100% - 32px); }
  .dc-hw { font-size: clamp(40px, 12vw, 50px); row-gap: 0.26em; }
  .dc-pron { font-size: 13px; }
  .dc-sense { margin-top: 16px; font-size: 17px; line-height: 1.42; }
  .dc-label { margin-top: 20px; padding-top: 14px; font-size: 11px; }
  .dc-hysense { margin-top: 8px; font-size: 19px; line-height: 1.34; }
  /* "See also:" over the pills, the pills in two rows, the original line under them */
  .dc-see { margin-top: 22px; grid-template-columns: minmax(0, 1fr); row-gap: 10px; }
  .dc-see > i { font-size: 11px; }
  .dc-xr { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: repeat(2, max-content); gap: 8px; }
  .dc-not { grid-column: 1; grid-row: 3; font-size: 14px; }
  .dc-fx, .dc-flyer { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .dc-text > *, .dc.is-dropped .dc-text > * { transition: none; transform: none; }
  .lineup .lu.is-landing { animation: none; }
  .dc-flyer, .dc-flyer::before, .dc-flyer .dc-sg { transition: none; }
  /* the settled lit state at once: the light still (js/definition.js), the bloom on, the blaze's edge shown, the
     pills lit with their pools, the grain as ever */
  .dc.is-dropped .dc-bloom, .dc.is-dropped .dc-hw b::before, .dc.is-dropped .dc-hw b::after,
  .dc.is-dropped .dc-fx::before, .dc.is-dropped .dc-fx::after, .dc.is-dropped .dc-fx > span,
  .dc.is-dropped .dc-fx .dc-sg { animation: none; }
  .dc-bloom { transition: none; }
  .dc-hw b::after { opacity: 0.38; transform: none; }
}