/* ==========================================================================
   PowerTrans Industrial — CINEMATIC LAYER (effects, tier 2)
   Loaded after effects.css. Motivated by the subject: this is the machine's
   own instrumentation — boot sequence, HUD, live telemetry, optical readouts.
     H. Boot sequence      — the control unit powers up and calibrates
     I. Machine HUD        — live travel/section/rpm telemetry in the corners
     J. Decode readout     — headings resolve out of scrambled glyphs
     K. Velocity skew      — momentum visible as a shear on type
     L. Parallax depth     — drawing layers separate in depth
     M. Rule dividers      — measured rule with ticks, drawn between chapters
     N. Inspection torch   — a soft lamp following the pointer over dark metal
   Rules: transform/opacity only, no window scroll listeners (ScrollTrigger/IO/
   rAF), pauses offscreen, DPR-aware, full prefers-reduced-motion collapse.
   ========================================================================== */

/* ---------- H. Boot sequence ---------- */
.boot {
  position: fixed; inset: 0; z-index: 300;
  background: var(--ink); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px;
  transition: opacity .55s ease, visibility .55s ease;
}
.boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.no-js .boot { display: none; }
.boot-mark { display: flex; align-items: center; gap: 12px; }
.boot-mark svg { width: 34px; height: 34px; }
.boot-mark .boot-ring { animation: bootSpin 2.6s linear infinite; transform-origin: 50% 50%; }
@keyframes bootSpin { to { transform: rotate(360deg); } }
.boot-title {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .34em;
  text-transform: uppercase; color: rgba(255, 255, 255, .82);
}
.boot-log {
  width: min(420px, 86vw); font-family: var(--font-mono); font-size: 10.5px;
  line-height: 2; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255, 255, 255, .42); min-height: 84px;
}
.boot-log b { color: var(--accent); font-weight: 500; }
.boot-log .boot-ok { color: rgba(255, 255, 255, .74); }
.boot-bar {
  width: min(420px, 86vw); height: 2px; background: rgba(255, 255, 255, .14);
  position: relative; overflow: hidden;
}
.boot-fill {
  position: absolute; inset: 0 100% 0 0; background: var(--accent);
  box-shadow: 0 0 14px rgba(224, 86, 11, .8);
}
.boot-meta {
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .22em;
  text-transform: uppercase; color: rgba(255, 255, 255, .26);
}

/* ---------- I. Machine HUD ---------- */
.hud {
  position: fixed; inset: 0; z-index: 58; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink);
  opacity: 0; transition: opacity .6s ease .2s;
}
.hud.is-on { opacity: 1; }
.hud-block { position: fixed; display: flex; align-items: center; gap: 9px; }
.hud-block--tr { top: 60px; right: 18px; flex-direction: row-reverse; }
.hud-block--bl { bottom: 16px; left: 18px; }
.hud-block--br { bottom: 16px; right: 18px; flex-direction: row-reverse; }
.hud-tag {
  background: rgba(11, 16, 20, .82); color: rgba(255, 255, 255, .82);
  padding: 4px 8px; border-radius: 4px; backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hud-tag em { color: var(--accent); font-style: normal; }
.hud-dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 8px rgba(224, 86, 11, .9); animation: hudPulse 1.9s ease-in-out infinite;
}
@keyframes hudPulse { 0%, 100% { opacity: 1; } 50% { opacity: .28; } }
.hud-rail {
  position: fixed; top: 0; bottom: 0; left: 0; width: 34px;
  border-right: 1px solid rgba(11, 16, 20, .1);
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .16));
}
.hud-rail i {
  position: absolute; left: 9px; width: 16px; height: 1px;
  background: rgba(11, 16, 20, .26);
}
.hud-rail i.is-major { width: 24px; background: rgba(11, 16, 20, .44); }
.hud-mark {
  position: absolute; left: 0; width: 34px; height: 0;
  border-top: 1.5px solid var(--accent);
}
.hud-mark::after {
  content: ""; position: absolute; left: -3px; top: -4px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
@media (max-width: 1023px) { .hud-rail, .hud-block--tr, .hud-block--br { display: none; } }

/* ---------- J. Decode readout ---------- */
.decode { display: inline; }
/* Each word carries two layers: an in-flow ghost that owns the FINAL text (and
   therefore the width), plus an out-of-flow live layer for the scrambled glyphs.
   Because the live layer is absolutely positioned it can never change the box
   size, so the heading stops reflowing (and nudging the whole page) mid-scramble. */
.decode-word { display: inline-block; position: relative; white-space: pre; vertical-align: top; }
.decode-word .dw-live {
  position: absolute; left: 0; top: 0;
  white-space: pre; pointer-events: none;
  visibility: hidden; color: var(--accent);
}
.decode-word.is-live .dw-live { visibility: visible; }
.decode-word.is-live .dw-ghost { visibility: hidden; }

/* ---------- K. Velocity skew ---------- */
.vel { will-change: transform; }

/* ---------- L. Parallax ---------- */
.par { will-change: transform; }

/* ---------- M. Rule dividers ---------- */
.rule-divider {
  position: relative; height: 34px; overflow: hidden; background: transparent;
}
.rule-divider svg { display: block; width: 100%; height: 34px; }
.rule-divider .rd-line { stroke: rgba(11, 16, 20, .16); stroke-width: 1; }
.rule-divider .rd-major { stroke: rgba(11, 16, 20, .34); stroke-width: 1; }
.rule-divider .rd-mid { stroke: var(--accent); stroke-width: 1.4; }
.rule-divider.is-dark .rd-line { stroke: rgba(255, 255, 255, .13); }
.rule-divider.is-dark .rd-major { stroke: rgba(255, 255, 255, .3); }
.rule-draw { opacity: 0; }

/* ---------- N. Inspection torch ---------- */
.torch {
  position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 57;
  pointer-events: none; opacity: 0; transition: opacity .45s ease;
}
.torch.is-on { opacity: 1; }
.torch::before {
  content: ""; position: absolute; left: -260px; top: -260px;
  width: 520px; height: 520px; border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 86, 11, .16) 0%, rgba(224, 86, 11, .06) 38%, transparent 68%);
}
@media (hover: none) { .torch { display: none; } }

/* ---------- Reduced motion: collapse tier 2 ---------- */
@media (prefers-reduced-motion: reduce) {
  .boot { display: none; }
  .hud-dot { animation: none; }
  .boot-mark .boot-ring { animation: none; }
  .torch { display: none; }
  .rule-draw { opacity: 1; }
}