/* ==================== GLITCH INTRO OVERLAY ==================== */
    /* Boot sequence locks page scroll until the visitor clicks HACK IN */
    html.js-boot:not(.boot-done),
    html.js-boot:not(.boot-done) body { overflow: hidden; }

    .glitch-intro {
      position: fixed; inset: 0; z-index: 99999;
      background: color-mix(in srgb, var(--cyber-void-900) 90%, transparent);
      backdrop-filter: blur(2px) saturate(120%);
      -webkit-backdrop-filter: blur(2px) saturate(120%);
      display: flex; align-items: center; justify-content: center;
      flex-direction: column; gap: var(--space-md);
      padding: var(--space-md);
      transition: opacity 0.45s ease, visibility 0.45s ease;
    }
    /* No-JS safety net: never trap a visitor behind the overlay */
    html:not(.js-boot) .glitch-intro { animation: intro-fade-out 0.5s ease 3.2s forwards; }
    .glitch-intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

    .glitch-intro__core {
      position: relative; z-index: 2;
      width: min(92vw, 640px);
      display: flex; flex-direction: column; align-items: center;
      gap: var(--space-sm);
    }
    .glitch-intro__text {
      font-family: var(--font-display);
      font-size: clamp(1.5rem, 4vw + 0.5rem, 4rem);
      font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--cyber-red-500);
      text-shadow: var(--glow-text-cyan);
      position: relative;
      max-width: 100%; overflow-wrap: anywhere; text-align: center;
      animation: intro-glitch-text 0.3s steps(2) infinite;
    }

    /* Hacker Terminal Scan Effect */
    .glitch-intro__terminal {
      position: absolute;
      top: 10%;
      left: 5%;
      font-family: var(--font-mono);
      font-size: clamp(0.5rem, 1vw + 0.2rem, 0.75rem);
      color: var(--cyber-red-500);
      opacity: 0.4;
      line-height: 1.4;
      pointer-events: none;
      overflow: hidden;
      max-width: 25%;
      text-shadow: 0 0 5px var(--cyber-red-500);
      animation: terminal-scroll 0.1s linear infinite;
    }
    .glitch-intro__terminal-right {
      left: auto;
      right: 5%;
      text-align: right;
    }
    @keyframes terminal-scroll {
      0% { transform: translateY(0); }
      100% { transform: translateY(-10px); }
    }
    .glitch-intro__bar {
      width: 60%; max-width: 500px; height: 4px;
      background: var(--cyber-void-300);
      border-radius: 2px; overflow: hidden;
    }
    .glitch-intro__bar-fill {
      height: 100%; width: 0%;
      background: var(--cyber-red-500);
      box-shadow: 0 0 10px var(--cyber-red-500), 0 0 20px color-mix(in srgb, var(--cyber-red-500) 50%, transparent);
      transition: width 0.25s ease-out;
    }

    /* ---- Status readout under the progress bar ---- */
    .glitch-intro__status {
      width: 60%; max-width: 500px;
      display: flex; justify-content: space-between; gap: var(--space-2xs);
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: 0.12em; color: var(--cyber-chrome-500);
      text-transform: uppercase;
    }
    .glitch-intro__status b {
      color: var(--cyber-red-500); font-weight: 400;
      text-shadow: 0 0 8px color-mix(in srgb, var(--cyber-red-500) 60%, transparent);
    }

    /* ---- Hacker terminal: live-typed boot log ---- */
    .hack-term {
      width: 100%;
      background: color-mix(in srgb, var(--cyber-void-900) 80%, transparent);
      border: var(--border-thin) solid var(--cyber-red-700);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cyber-red-500) 12%, transparent),
        0 0 28px color-mix(in srgb, var(--cyber-red-500) 20%, transparent),
        inset 0 0 44px rgb(0 0 0 / 55%);
      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
      overflow: hidden;
    }
    .hack-term__bar {
      display: flex; align-items: center; gap: 6px;
      padding: var(--space-3xs) var(--space-2xs);
      background: linear-gradient(180deg, var(--cyber-void-200), var(--cyber-void-400));
      border-bottom: var(--border-thin) solid var(--cyber-red-700);
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--cyber-chrome-500); letter-spacing: 0.08em;
    }
    .hack-term__dot {
      width: 8px; height: 8px; border-radius: 50%;
      background: var(--cyber-red-700); box-shadow: 0 0 6px var(--cyber-red-500);
      flex: none;
    }
    .hack-term__dot:nth-of-type(2) { background: var(--cyber-red-500); }
    .hack-term__dot:nth-of-type(3) { background: var(--cyber-void-100); box-shadow: none; }
    .hack-term__title { margin-left: var(--space-3xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hack-term__body {
      display: flex; flex-direction: column; justify-content: flex-end;
      height: clamp(140px, 30vh, 230px);
      padding: var(--space-xs) var(--space-sm);
      overflow: hidden;
      font-family: var(--font-mono);
      font-size: clamp(0.62rem, 0.56rem + 0.55vw, 0.84rem);
      line-height: 1.75;
      color: var(--cyber-chrome-300);
      text-shadow: 0 0 6px color-mix(in srgb, var(--cyber-red-500) 32%, transparent);
      white-space: pre-wrap; word-break: break-word;
    }
    .hack-line { display: block; }
    .hack-line--cmd { color: var(--cyber-chrome-400); }
    .hack-line--cmd::before { content: '$ '; color: var(--cyber-red-500); }
    .hack-line--ok { color: var(--cyber-chrome-100); }
    .hack-line--warn {
      color: var(--cyber-red-500);
      text-shadow: 0 0 8px var(--cyber-red-500);
      animation: hack-line-flash 0.24s steps(2) 2;
    }
    .hack-line--final {
      margin-top: var(--space-3xs);
      color: var(--cyber-red-500); font-weight: 700; letter-spacing: 0.12em;
      text-shadow: 0 0 10px var(--cyber-red-500), 0 0 26px color-mix(in srgb, var(--cyber-red-500) 55%, transparent);
    }
    .hack-caret {
      display: inline-block; width: 0.5em; height: 1em;
      vertical-align: -0.16em; margin-left: 1px;
      background: var(--cyber-red-500);
      box-shadow: 0 0 8px var(--cyber-red-500);
      animation: blink 0.8s step-end infinite;
    }

    /* ---- HACK IN gate dialog (translucent popover) ---- */
    .hack-gate {
      position: relative; z-index: 3;
      width: min(88vw, 400px);
      margin-top: var(--space-sm);
      background: color-mix(in srgb, var(--cyber-void-900) 70%, transparent);
      backdrop-filter: blur(10px) saturate(130%);
      -webkit-backdrop-filter: blur(10px) saturate(130%);
      border: 1px solid var(--cyber-red-500);
      box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cyber-red-500) 16%, transparent),
        0 0 46px color-mix(in srgb, var(--cyber-red-500) 26%, transparent),
        inset 0 0 44px rgb(0 0 0 / 52%);
      clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
      opacity: 0; transform: translateY(20px) scale(0.94);
      pointer-events: none;
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.18);
    }
    .glitch-intro.is-ready .hack-gate {
      opacity: 1; transform: none; pointer-events: auto;
      animation: hack-gate-pop 0.5s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    }
    @keyframes hack-gate-pop {
      0%   { opacity: 0; transform: translateY(24px) scale(0.88); }
      60%  { opacity: 1; transform: translateY(-4px) scale(1.02); }
      100% { opacity: 1; transform: none; }
    }
    .hack-gate__bar {
      display: flex; align-items: center; gap: 6px;
      padding: var(--space-3xs) var(--space-2xs);
      background: linear-gradient(180deg, var(--cyber-void-200), var(--cyber-void-400));
      border-bottom: 1px solid var(--cyber-red-700);
      font-family: var(--font-mono); font-size: var(--text-xs);
      color: var(--cyber-chrome-500); letter-spacing: 0.08em;
    }
    .hack-gate__title { margin-left: var(--space-3xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .hack-gate__body {
      display: flex; flex-direction: column; align-items: center;
      gap: var(--space-sm); padding: var(--space-md) var(--space-sm) var(--space-md);
    }
    .hack-gate__prompt {
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: 0.1em; color: var(--cyber-chrome-400);
      text-transform: uppercase; text-align: center;
      text-shadow: 0 0 6px color-mix(in srgb, var(--cyber-red-500) 30%, transparent);
    }

    /* ---- HACK IN gate button (translucent) ---- */
    .hack-in {
      position: relative; z-index: 3;
      padding: var(--space-xs) clamp(1.5rem, 1.2rem + 2.4vw, 3rem);
      font-family: var(--font-display);
      font-size: clamp(0.95rem, 0.82rem + 1vw, 1.45rem);
      letter-spacing: 0.3em; text-transform: uppercase;
      color: var(--cyber-chrome-100);
      background: color-mix(in srgb, var(--cyber-red-500) 15%, transparent);
      border: 1px solid var(--cyber-red-500);
      backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
      clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
      cursor: pointer;
      text-shadow: 0 0 10px var(--cyber-red-500);
      transition: background 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
    }
    .hack-in::after {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background: repeating-linear-gradient(
        0deg, transparent 0, transparent 2px,
        rgb(227 16 54 / 7%) 2px, rgb(227 16 54 / 7%) 4px
      );
    }
    .glitch-intro.is-ready .hack-in {
      animation: hack-in-pulse 2.4s ease-in-out infinite;
    }
    .hack-in:hover, .hack-in:focus-visible {
      outline: none;
      background: color-mix(in srgb, var(--cyber-red-500) 36%, transparent);
      box-shadow:
        0 0 0 1px var(--cyber-red-500),
        0 0 26px color-mix(in srgb, var(--cyber-red-500) 60%, transparent),
        inset 0 0 24px color-mix(in srgb, var(--cyber-red-500) 30%, transparent);
      animation: hack-in-glitch 0.18s steps(2) infinite;
    }
    .hack-in:active { transform: scale(0.97); }
    .hack-in__hint {
      display: block; margin-top: var(--space-3xs);
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: 0.18em; color: var(--cyber-chrome-400);
      text-shadow: none;
    }
    .glitch-intro__skip {
      position: absolute; bottom: var(--space-sm); left: 50%; transform: translateX(-50%);
      z-index: 2;
      font-family: var(--font-mono); font-size: var(--text-xs);
      letter-spacing: 0.2em; color: var(--cyber-chrome-600);
      text-transform: uppercase; pointer-events: none;
      transition: opacity 0.3s ease;
    }
    .glitch-intro.is-ready .glitch-intro__skip { opacity: 0; }
    .glitch-intro__scanline {
      position: absolute; inset: 0;
      background: repeating-linear-gradient(
        0deg, transparent 0, transparent 2px,
        rgba(227, 16, 54, 0.03) 2px, rgba(227, 16, 54, 0.03) 4px
      );
      pointer-events: none;
      animation: intro-scanlines 0.1s steps(4) infinite;
    }
    .glitch-intro__noise {
      position: absolute; inset: 0;
      opacity: 0.06;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-repeat: repeat; background-size: 256px 256px;
      pointer-events: none;
    }
    .glitch-intro__flash {
      position: absolute; inset: 0;
      background: var(--cyber-red-500);
      opacity: 0;
      pointer-events: none;
    }
    .glitch-intro.is-entering .glitch-intro__flash { animation: intro-flash 0.42s ease forwards; }
    @keyframes intro-fade-out {
      0%   { opacity: 1; visibility: visible; }
      80%  { opacity: 1; visibility: visible; }
      100% { opacity: 0; visibility: hidden; }
    }
    @keyframes intro-bar-fill {
      0%   { width: 0%; }
      10%  { width: 5%; }
      20%  { width: 3%; }
      35%  { width: 42%; }
      45%  { width: 38%; }
      55%  { width: 67%; }
      65%  { width: 72%; }
      75%  { width: 70%; }
      85%  { width: 90%; }
      95%  { width: 95%; }
      100% { width: 100%; }
    }
    @keyframes intro-glitch-text {
      0%   { transform: translate(0); clip-path: inset(0 0 90% 0); }
      20%  { transform: translate(-3px, 1px); clip-path: inset(20% 0 50% 0); }
      40%  { transform: translate(3px, -1px); clip-path: inset(60% 0 10% 0); }
      60%  { transform: translate(-1px, 2px); clip-path: inset(10% 0 70% 0); }
      80%  { transform: translate(2px, -2px); clip-path: inset(80% 0 0 0); }
      100% { transform: translate(0); clip-path: inset(0 0 90% 0); }
    }
    @keyframes intro-scanlines {
      0%   { transform: translateY(0); }
      100% { transform: translateY(4px); }
    }
    @keyframes intro-flash {
      0%   { opacity: 0.82; }
      100% { opacity: 0; }
    }
    @keyframes hack-in-pulse {
      0%, 100% {
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--cyber-red-500) 50%, transparent),
                    0 0 18px color-mix(in srgb, var(--cyber-red-500) 32%, transparent);
      }
      50% {
        box-shadow: 0 0 0 1px var(--cyber-red-500),
                    0 0 34px color-mix(in srgb, var(--cyber-red-500) 62%, transparent);
      }
    }
    @keyframes hack-in-glitch {
      0%   { transform: translate(0, 0); }
      50%  { transform: translate(-1px, 1px); }
      100% { transform: translate(1px, -1px); }
    }
    @keyframes hack-line-flash {
      0%, 100% { opacity: 1; }
      50%      { opacity: 0.3; }
    }

    @media (max-width: 560px) {
      .glitch-intro { gap: var(--space-sm); padding: var(--space-sm); }
      .glitch-intro__terminal { display: none; }
      .glitch-intro__core { width: 100%; }
      /* 开屏标题在窄屏上字距过大会顶出屏幕，收紧字号与字距 */
      .glitch-intro__text { font-size: clamp(1rem, 5.5vw, 1.75rem); letter-spacing: 0.08em; }
      .hack-term__body { height: clamp(120px, 26vh, 180px); padding: var(--space-2xs); }
      .hack-gate { width: 100%; }
      .hack-in { letter-spacing: 0.22em; }
    }

    @media (prefers-reduced-motion: reduce) {
      .glitch-intro__text { animation: none; }
      .glitch-intro__scanline, .glitch-intro__terminal { animation: none; }
      .hack-line--warn { animation: none; }
      .glitch-intro.is-ready .hack-gate { animation: none; }
      .glitch-intro.is-ready .hack-in { animation: none; }
      .hack-in:hover, .hack-in:focus-visible { animation: none; }
      .hack-caret { animation: none; }
    }