/* ===========================================================
   Cyber intro — animated "video game intro" overlay
   Layers a live CRT screen, screen-light, rain, grain, neon
   flicker and typing motion on top of img/terminal-bg.png
   =========================================================== */

.cyber-intro {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  --glow: 0.08;
  --shake: 0px;
}

/* The stage is sized in JS to cover (or contain) the viewport while
   preserving the source image aspect, so every child can be positioned
   in percentages of the original artwork. */
.ci-stage {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 64.3% 38.6%; /* center of the CRT glass */
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.ci-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.ci-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

/* --- slow camera breathing (a game intro is never perfectly still) --- */
.ci-camera {
  animation: ci-breathe 18s ease-in-out infinite;
}
@keyframes ci-breathe {
  0%, 100% { transform: scale(1.045) translate3d(0.25%, 0.15%, 0); }
  50%      { transform: scale(1.075) translate3d(-0.35%, -0.25%, 0); }
}

/* --- typing hands: feathered copies of the artwork that jitter --- */
.ci-hand {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  will-change: transform;
  pointer-events: none;
}
.ci-hand-l {
  -webkit-mask-image: radial-gradient(ellipse 13% 11% at 38.5% 68%, #000 35%, rgba(0,0,0,0.65) 62%, transparent 82%);
          mask-image: radial-gradient(ellipse 13% 11% at 38.5% 68%, #000 35%, rgba(0,0,0,0.65) 62%, transparent 82%);
}
.ci-hand-r {
  -webkit-mask-image: radial-gradient(ellipse 12% 10% at 51.5% 73%, #000 35%, rgba(0,0,0,0.65) 62%, transparent 82%);
          mask-image: radial-gradient(ellipse 12% 10% at 51.5% 73%, #000 35%, rgba(0,0,0,0.65) 62%, transparent 82%);
}

/* --- the live CRT screen --- */
.ci-screen {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  will-change: transform, filter;
  animation: ci-crt-flicker 5.5s steps(1, end) infinite;
}
@keyframes ci-crt-flicker {
  0%, 96%, 100% { filter: brightness(1); }
  97%           { filter: brightness(1.22) saturate(1.2); }
  98%           { filter: brightness(0.86); }
  99%           { filter: brightness(1.1); }
}

/* Bloom / phosphor spill sitting just outside the glass */
.ci-bloom {
  position: absolute;
  left: 50.5%;
  top: 15%;
  width: 30%;
  height: 48%;
  background: radial-gradient(ellipse at 50% 50%,
      rgba(150, 255, 245, 0.30) 0%,
      rgba(90, 220, 255, 0.16) 38%,
      rgba(40, 160, 220, 0.05) 62%,
      transparent 78%);
  mix-blend-mode: screen;
  filter: blur(12px);
  opacity: calc(0.35 + var(--glow) * 2.6);
  pointer-events: none;
}

/* Screen light thrown back onto the desk, keyboard and his face */
.ci-castlight {
  position: absolute;
  inset: 0;
  mix-blend-mode: screen;
  opacity: calc(0.30 + var(--glow) * 3.2);
  background:
    radial-gradient(ellipse 26% 26% at 46% 62%, rgba(120, 235, 255, 0.20), transparent 70%),
    radial-gradient(ellipse 12% 20% at 17% 26%, rgba(150, 240, 255, 0.16), transparent 72%),
    radial-gradient(ellipse 18% 16% at 30% 46%, rgba(120, 220, 255, 0.10), transparent 75%);
  pointer-events: none;
}

/* --- neon signage flicker in the background city --- */
.ci-neon { position: absolute; inset: 0; mix-blend-mode: screen; pointer-events: none; }
.ci-neon span {
  position: absolute;
  border-radius: 50%;
  filter: blur(14px);
}
.ci-n1 { left: 20%; top: 4%;  width: 12%; height: 16%; background: rgba(255, 60, 70, 0.45);  animation: ci-flick-a 3.7s infinite; }
.ci-n2 { left: 24%; top: 38%; width: 9%;  height: 14%; background: rgba(255, 80, 40, 0.38);  animation: ci-flick-b 5.1s infinite; }
.ci-n3 { left: 60%; top: 0%;  width: 10%; height: 12%; background: rgba(255, 70, 120, 0.35); animation: ci-flick-c 4.3s infinite; }
.ci-n4 { left: 88%; top: 20%; width: 12%; height: 14%; background: rgba(70, 190, 255, 0.42); animation: ci-flick-b 6.2s infinite; }
.ci-n5 { left: 62%; top: 8%;  width: 8%;  height: 10%; background: rgba(120, 255, 220, 0.28); animation: ci-flick-a 5.9s infinite; }

@keyframes ci-flick-a {
  0%, 100% { opacity: 0.55; }
  47% { opacity: 0.62; }
  48% { opacity: 0.15; }
  49% { opacity: 0.7; }
  51% { opacity: 0.25; }
  53% { opacity: 0.6; }
  80% { opacity: 0.5; }
}
@keyframes ci-flick-b {
  0%, 100% { opacity: 0.45; }
  30% { opacity: 0.55; }
  31% { opacity: 0.2; }
  32% { opacity: 0.58; }
  70% { opacity: 0.4; }
  71% { opacity: 0.62; }
}
@keyframes ci-flick-c {
  0%, 100% { opacity: 0.4; }
  12% { opacity: 0.5; }
  13% { opacity: 0.12; }
  15% { opacity: 0.48; }
  62% { opacity: 0.35; }
}

/* --- rain / grain / glitch canvas --- */
.ci-fx { position: absolute; inset: 0; pointer-events: none; }

/* --- grade: vignette + cool shadows, very PS1 pre-render --- */
.ci-grade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 82% at 50% 48%, transparent 42%, rgba(0, 8, 18, 0.55) 100%),
    linear-gradient(180deg, rgba(0, 20, 40, 0.28) 0%, transparent 22%, transparent 72%, rgba(0, 6, 14, 0.45) 100%);
}

/* ===================== cinematic chrome ===================== */

.ci-bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 12%;
  background: #000;
  z-index: 20;
  pointer-events: none;
}
.ci-bar-top    { top: 0;    animation: ci-bar-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
.ci-bar-bottom { bottom: 0; animation: ci-bar-in 1.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes ci-bar-in {
  0%   { height: 52%; }
  100% { height: 8.5%; }
}

/* Title lockup, bottom left, arriving like a game intro card */
.ci-title {
  position: absolute;
  left: 5.5%;
  bottom: 13%;
  z-index: 21;
  pointer-events: none;
  font-family: 'Source Code Pro', 'SFMono-Regular', Menlo, monospace;
  opacity: 0;
  animation: ci-title-in 1s steps(1, end) 2.1s forwards;
}
.ci-title .ci-kicker {
  font-size: clamp(8px, 1vw, 13px);
  letter-spacing: 0.42em;
  color: #6ff2e3;
  text-transform: uppercase;
  margin-bottom: 0.6em;
  opacity: 0.85;
}
.ci-title .ci-name {
  font-size: clamp(24px, 4.4vw, 62px);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1;
  color: #eafffb;
  text-transform: uppercase;
  text-shadow:
    0 0 18px rgba(60, 230, 255, 0.55),
    0 0 46px rgba(0, 160, 255, 0.35);
  animation: ci-title-glitch 6s steps(1, end) infinite;
}
.ci-title .ci-sub {
  margin-top: 0.7em;
  font-size: clamp(9px, 1.1vw, 15px);
  letter-spacing: 0.3em;
  color: #9fb6c9;
  text-transform: uppercase;
}
.ci-title .ci-rule {
  width: 0;
  height: 2px;
  margin-top: 0.9em;
  background: linear-gradient(90deg, #00fff0, rgba(255, 42, 94, 0.9), transparent);
  animation: ci-rule-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.5s forwards;
}
@keyframes ci-rule-in { to { width: 46%; } }
@keyframes ci-title-in { to { opacity: 1; } }
@keyframes ci-title-glitch {
  0%, 92%, 100% { transform: none; text-shadow: 0 0 18px rgba(60,230,255,.55), 0 0 46px rgba(0,160,255,.35); }
  93% { transform: translate(-3px, 1px); text-shadow: 3px 0 rgba(255,42,94,.9), -3px 0 rgba(0,255,240,.9); }
  94% { transform: translate(2px, -1px);  text-shadow: -4px 0 rgba(255,42,94,.9), 4px 0 rgba(0,255,240,.9); }
  95% { transform: none; }
  96% { transform: translate(-2px, 0);   text-shadow: 2px 0 rgba(255,42,94,.8), -2px 0 rgba(0,255,240,.8); }
}

/* "Press start" prompt */
.ci-start {
  position: absolute;
  left: 50%;
  bottom: 15.5%;
  transform: translateX(-50%);
  z-index: 21;
  pointer-events: none;
  font-family: 'Source Code Pro', 'SFMono-Regular', Menlo, monospace;
  font-size: clamp(10px, 1.25vw, 17px);
  font-weight: 700;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: #eafffb;
  text-shadow: 0 0 12px rgba(0, 255, 240, 0.75), 0 0 34px rgba(0, 180, 255, 0.4);
  opacity: 0;
  animation: ci-start-in 0.4s linear 3s forwards, ci-start-blink 1.35s steps(1, end) 3s infinite;
}
@keyframes ci-start-in { to { opacity: 1; } }
@keyframes ci-start-blink {
  0%, 62% { opacity: 1; }
  63%, 100% { opacity: 0.12; }
}

/* Boot-up flash / power-on wipe */
.ci-flash {
  position: absolute;
  inset: 0;
  z-index: 22;
  background: #cffcff;
  opacity: 0;
  pointer-events: none;
}
.ci-flash.on { animation: ci-flash 0.5s ease-out forwards; }
@keyframes ci-flash {
  0%   { opacity: 0.85; }
  100% { opacity: 0; }
}

/* Fade-from-black on load */
.ci-curtain {
  position: absolute;
  inset: 0;
  z-index: 23;
  background: #000;
  pointer-events: none;
  animation: ci-curtain 1.5s ease-out 0.15s both;
}
@keyframes ci-curtain {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ci-camera,
  .ci-screen,
  .ci-neon span,
  .ci-title .ci-name,
  .ci-start { animation: none !important; }
  .ci-start { opacity: 1; }
  .ci-title { opacity: 1; animation: none; }
}

/* --- narrow / portrait screens: stack the lockup, keep it off the art --- */
@media (max-aspect-ratio: 5/4) {
  .ci-title {
    left: 50%;
    right: auto;
    bottom: 17%;
    transform: translateX(-50%);
    text-align: center;
    width: 90%;
  }
  .ci-title .ci-name { font-size: clamp(26px, 9vw, 54px); }
  .ci-title .ci-kicker { font-size: 9px; letter-spacing: 0.3em; }
  .ci-title .ci-sub { font-size: 10px; letter-spacing: 0.22em; }
  .ci-title .ci-rule { margin-left: auto; margin-right: auto; }
  @keyframes ci-rule-in { to { width: 60%; } }
  .ci-start { bottom: 8%; font-size: 12px; letter-spacing: 0.28em; }
}