/* ============================================================================
   ws-crt. Standalone lit-screen component.
   Call up anywhere: <p class="ws-crt" data-typeout data-words="> CONTACT"></p>
   Panel size:       <div class="ws-crt ws-crt--panel" data-typeout data-words="..."></div>
   Type-out + block cursor come from ws-typeout.js (shared type-out engine).
   Always a dark screen, so identical in light and dark page modes.
   ========================================================================== */

/* tokens scoped to component. no page-theme dependency. */
.ws-crt {
  --ws-crt-glow: 7px;
  --ws-crt-blur: .5px;
  --ws-crt-color: var(--ws-accent);
  --ws-crt-glow-color: rgba(195,221,34,.55);
  --ws-crt-line: rgba(0,0,0,.28);
  --ws-crt-screen: #0c0e0b;
  --ws-crt-bezel: #2a2f28;

  position: relative;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  padding: .34em .6em;
  margin: 0 0 .7rem;
  border: 1px solid var(--ws-crt-bezel);
  border-radius: 6px;                 /* bezel radius, screen look */
  background: var(--ws-crt-screen);

  font-family: var(--ws-terminal);
  font-size: clamp(1.2rem, 1.05rem + 1.1vw, 1.7rem);
  letter-spacing: .06em;
  line-height: 1.3;                   /* breathes when text wraps */
  color: var(--ws-crt-color);
  text-shadow:
    0 0 1px var(--ws-crt-color),
    0 0 var(--ws-crt-glow) var(--ws-crt-glow-color);
  overflow-wrap: anywhere;            /* long strings never blow out box */

  /* anti-jitter. type-out width never reflows neighbors.       */
  /* stable raster layer keeps scroll smooth on mobile.         */
  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* panel size for hero moments. same tube, bigger, full width. */
.ws-crt--panel {
  display: block;
  padding: 1.8rem 1.9rem;
  border-radius: 10px;
  font-size: clamp(2rem, 6vw, 3rem);
  letter-spacing: .04em;
}

/* blur inner text only, so bezel + scanlines stay crisp */
.ws-crt > span {
  filter: blur(var(--ws-crt-blur));
}

/* scanlines rake whole screen */
.ws-crt::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    transparent 0 2px,
    var(--ws-crt-line) 2px 3px
  );
}

/* block cursor. phosphor rectangle riding through text */
.ws-crt .ws-cursor {
  display: inline-block;
  width: .5em;
  height: .78em;
  margin-left: .08em;
  vertical-align: -.06em;
  background: var(--ws-crt-color);
  box-shadow: 0 0 var(--ws-crt-glow) var(--ws-crt-glow-color);
  filter: blur(var(--ws-crt-blur));
}

/* motion. screen flicker + cursor rest-blink */
@media (prefers-reduced-motion: no-preference) {
  .ws-crt {
    animation: ws-crt-flicker 3.4s step-end infinite;
    will-change: opacity;
  }
  .ws-crt .ws-cursor.is-idle {
    animation: ws-crt-blink 1.05s step-end infinite;
  }
}

@keyframes ws-crt-blink {
  0%, 50%      { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@keyframes ws-crt-flicker {
  0%, 96%  { opacity: 1; }
  96.5%    { opacity: .72; }
  97%      { opacity: 1; }
  98.5%    { opacity: .82; }
  100%     { opacity: 1; }
}