/* Wolf Road, the shared effects (2026-10-01): what the home and the case pages have in common now. The dot-density
   background (js/hero-light.js) and its dust (js/dust.js) fixed behind the page; the grey square cursor and the
   cursor tags (js/cursor.js). Loaded after door.css on every page that runs them. */

/* The background: one fixed canvas of dots behind the whole page, the dust over it; the page sits above both. */
.nebula { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; image-rendering: pixelated; }
.dust { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; pointer-events: none; }
.has-nebula main, .has-nebula .foot { position: relative; z-index: 1; }

/* The cursor (2026-10-02): the 40px see-through grey square IS the system pointer, a cursor image macOS draws at
   full speed, so it never trails the mouse and there is no arrow to hide. It replaced a square moved by script,
   which lagged the real pointer on busy pages. With a mouse only; touch keeps its own. Text fields keep their caret.
   Three declarations so each browser takes the best it understands: the plain image, then the sharp Retina pair. */
@media (hover: hover) and (pointer: fine) {
  html, html * {
    cursor: url("../assets/cursor/square.png") 20 20, auto !important;
    cursor: -webkit-image-set(url("../assets/cursor/square.png") 1x, url("../assets/cursor/square@2x.png") 2x) 20 20, auto !important;
    cursor: image-set(url("../assets/cursor/square.png") 1x, url("../assets/cursor/square@2x.png") 2x) 20 20, auto !important;
  }
  /* held down: a smaller square, the click's squeeze (js/cursor.js sets the class) */
  html.is-pressing, html.is-pressing * {
    cursor: url("../assets/cursor/square-down.png") 16 16, auto !important;
    cursor: -webkit-image-set(url("../assets/cursor/square-down.png") 1x, url("../assets/cursor/square-down@2x.png") 2x) 16 16, auto !important;
    cursor: image-set(url("../assets/cursor/square-down.png") 1x, url("../assets/cursor/square-down@2x.png") 2x) 16 16, auto !important;
  }
  html input, html textarea, html [contenteditable] { cursor: text !important; }
}

/* The cursor tag (after exf.studio): over anything marked data-cursor a white tag eases after the pointer, opening
   out of a thin line, its label running past in black mono capitals. */
.cm { position: fixed; left: 0; top: 0; z-index: 200; pointer-events: none; will-change: transform; }
.cm__card { position: absolute; left: 0; top: 0; display: flex; overflow: hidden; background: var(--white); color: var(--black); font-family: var(--digital); font-size: 0.95rem; letter-spacing: 0.02em; opacity: 0; transform: translate(-50%, -50%) rotate(0.001deg); clip-path: inset(calc(50% - 0.25em) round 0); transition: all 0.4s cubic-bezier(0.75, 0, 0.25, 1); will-change: clip-path; }
.cm.is-on .cm__card { opacity: 1; clip-path: inset(0 round 0); transform: translate(-50%, -75%) rotate(0.001deg); }
.cm__text { position: relative; display: block; padding: 4px 0.5em; line-height: 1; white-space: nowrap; text-transform: uppercase; opacity: 0; transition: opacity 0.15s ease-in-out 0.25s; animation: cmRun 10s linear infinite paused; }
.cm__text.is-dup { position: absolute; left: 100%; }
.cm.is-on .cm__text { opacity: 1; transition-delay: 0s; }
@keyframes cmRun { to { transform: translateX(-100%); } }

@media (hover: none) { .cm { display: none; } }

/* The decode alphabet (js/glyphs.js), for the slogan and the nav: kana, kanji and hangul drawn as red outlines, the "red wireframe" the code
   runs through before the real letter lands. A little smaller than the type so a full-width glyph keeps to its slot. */
.cj, .mx__c.is-code, .mx__c.is-cover {
  color: transparent !important; -webkit-text-stroke: 1px var(--red-text); paint-order: stroke;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", "Apple SD Gothic Neo", sans-serif;
  font-weight: 600; letter-spacing: 0;
}
.cj { display: inline-block; font-size: 0.86em; line-height: 1; vertical-align: baseline; }
.mx__c.is-code, .mx__c.is-cover { font-size: 0.86em; transform: scaleX(0.58); } /* narrowed to the slot of the letter it stands in for */
/* The nav decodes (js/nav-glyph.js): each word holds its English width so the bar never jumps. */
.top__nav a.is-glyph { display: inline-block; white-space: nowrap; text-align: left; }

/* The HUD (js/hud-bits.js): small instruments, mono, grey with red where it matters. Desktop only. */
.hud-edge, .hud-corner { display: none; }
@media (min-width: 1024px) and (hover: hover) {

  /* the number of the section in view, on the right edge between two hairlines */
  .hud-edge { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; position: fixed; right: clamp(0.7rem, 1.2vw, 1.4rem); top: 50%; transform: translateY(-50%); z-index: 60; pointer-events: none; }
  .hud-edge__n { font-family: var(--digital); font-size: 0.58rem; letter-spacing: 0.1em; color: var(--red-text); }
  .hud-edge::before, .hud-edge::after { content: ""; width: 1px; height: 2.4rem; background: var(--hairline-strong); }

  /* the corner readouts */
  .hud-corner { display: grid; gap: 0.35rem; position: fixed; bottom: clamp(0.9rem, 2vh, 1.4rem); z-index: 60; pointer-events: none; font-family: var(--digital); font-size: 0.58rem; letter-spacing: 0.14em; color: var(--grey); text-transform: uppercase; white-space: nowrap; transition: opacity 0.4s var(--ease); }
  .hud-corner.is-away { opacity: 0; }
  .hud-corner--l { left: var(--gutter); }
  .hud-corner--r { right: var(--gutter); text-align: right; }
  .hud-tc { color: var(--white); font-variant-numeric: tabular-nums; }
  .hud-gauge { display: flex; gap: 2px; }
  .hud-gauge i { width: 7px; height: 4px; background: var(--hairline); }
  .hud-gauge i.is-on { background: var(--grey); }
  .hud-gauge i.is-tip { background: var(--red); }
}

/* The nav's braille (js/nav-glyph.js): the dot cells in red, set a touch larger so the dots read. */
.top__nav .bl { display: inline-block; color: var(--red-text); font-family: "Apple Braille", "Segoe UI Symbol", "DejaVu Sans", var(--body); font-size: 1.05em; line-height: 1; vertical-align: -0.05em; }
.top .top__nav a.is-glyph { white-space: nowrap; overflow: visible; }

/* The nav in the mono (2026-10-02): spaced capitals like the title dividers, no commas, a short hairline between the
   words. */
.top .top__nav { gap: 0; align-items: center; font-family: var(--digital); font-weight: 400; font-size: clamp(0.68rem, 0.6rem + 0.25vw, 0.84rem); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; }
.top .top__nav a { display: inline-flex; align-items: center; padding: calc((44px - 1em) / 2) 0.4rem; margin: calc((44px - 1em) / -2) -0.4rem; } /* a full 44px hit area on each word, cancelled by the margin so nothing moves */
.top .top__nav a:not(:last-child)::after { content: none; }
.top .top__nav a + a::before { content: ""; display: inline-block; flex: none; width: 1px; height: 0.95em; margin: 0 1.05em 0 0.85em; background: var(--grey); opacity: 0.7; }

/* The world clock (js/clock.js): all in white, a size down, the city's braille in red as it changes. */
.top .top__clock { color: var(--white); font-size: clamp(0.6rem, 0.55rem + 0.18vw, 0.72rem); letter-spacing: 0.18em; }
.top__clock #clock { color: var(--white); }
.top__clock .bl { display: inline-block; color: var(--red-text); font-family: "Apple Braille", "Segoe UI Symbol", "DejaVu Sans", var(--body); font-size: 1.05em; line-height: 1; letter-spacing: 0.18em; }
/* On a small phone (under 400px) the four words would run into the W: the dividers sit closer. */
@media (max-width: 399px) { .top .top__nav a + a::before { margin: 0 0.6em 0 0.45em; } .top .top__nav { letter-spacing: 0.16em; } }
@media (max-width: 349px) { .top .top__nav a + a::before { margin: 0 0.4em 0 0.3em; } .top .top__nav { letter-spacing: 0.08em; } }