/* cornOS full-screen intro overlay (js/cornos-intro.js).
   Hidden unless <html> has .ci-pending (set in <head> for first-time visitors)
   or .ci-open (set by the script while the intro plays). */
#cornos-intro {
  --ci-void: #02050b;
  --ci-grid: #35e6ff;
  --ci-cycle: #ff8a2a;
  --ci-ink: #d8fbff;
  --ci-dim: #1f5d6a;
  --ci-panel: #030c14;
  --ci-display: "Orbitron", "Eurostile", "Arial Black", sans-serif;
  --ci-mono: "Share Tech Mono", ui-monospace, Menlo, Consolas, monospace;
  display: none;
  position: fixed; inset: 0; z-index: 10000;
  background: var(--ci-void); color: var(--ci-ink);
  color-scheme: dark;
  opacity: 1; transition: opacity .7s ease;
}
html.ci-pending #cornos-intro,
html.ci-open #cornos-intro { display: block; }
html.ci-pending, html.ci-open { overflow: hidden; }
#cornos-intro.ci-fading { opacity: 0; }

#cornos-intro canvas { display: block; width: 100%; height: 100%; }
#cornos-intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0,0,0,.22) 2px 3px),
    radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.7) 100%);
}
#cornos-intro .ci-hud {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
}
#cornos-intro .ci-hud button {
  font: 13px/1 var(--ci-mono); letter-spacing: .14em; text-transform: uppercase;
  color: var(--ci-grid); background: rgba(3,12,20,.72);
  border: 1px solid var(--ci-dim); border-radius: 0; padding: 9px 15px; cursor: pointer;
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
#cornos-intro .ci-hud button:hover { color: var(--ci-ink); border-color: var(--ci-grid); box-shadow: inset 0 0 14px rgba(53,230,255,.35); }
#cornos-intro .ci-hud button:focus-visible { outline: 2px solid var(--ci-cycle); outline-offset: 2px; }
#cornos-intro .ci-hud button[data-ci="enter"] { color: var(--ci-cycle); border-color: var(--ci-cycle); }
#cornos-intro [hidden] { display: none !important; }
#cornos-intro .ci-bar {
  position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 3;
  background: var(--ci-grid); box-shadow: 0 0 8px var(--ci-grid);
}