@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

body.intro-active {
  overflow: hidden;
}

.matrix-intro,
.matrix-intro * {
  box-sizing: border-box;
}

.matrix-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow: hidden;
  background: #000;
  color: #00ff66;
  font-family: "VT323", monospace;
  isolation: isolate;
}

.matrix-intro.is-hidden {
  display: none;
}

.matrix-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .15;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.04) 0 1px, transparent 2px 4px);
}

#introVideo,
#videoOverlay,
#white-flash,
#matrix,
#startScreen {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#introVideo {
  z-index: 1;
  object-fit: cover;
  background: #000;
}

#videoOverlay {
  z-index: 2;
  background: #000;
  opacity: 1;
  pointer-events: none;
  transition: opacity 2s ease;
}

.matrix-terminal {
  position: absolute;
  top: clamp(20px, 6vw, 60px);
  left: clamp(16px, 5vw, 40px);
  right: clamp(16px, 5vw, 40px);
  z-index: 4;
  font-size: clamp(16px, 4.5vw, 28px);
  line-height: 1.4;
  opacity: 0;
  transition: opacity .6s ease;
  text-shadow: 0 0 3px #00ff66, 0 0 8px rgba(0,255,102,.8), 0 0 16px rgba(0,255,102,.6), 0 0 28px rgba(0,255,102,.35);
  filter: brightness(1.2) contrast(1.15);
}

#matrixText {
  white-space: normal;
  overflow-wrap: anywhere;
}

#matrixCursor {
  display: inline-block;
  width: 12px;
  height: 22px;
  margin-left: 6px;
  vertical-align: middle;
  background: #00ff66;
  animation: matrix-blink .9s infinite;
  box-shadow: 0 0 4px #00ff66, 0 0 10px rgba(0,255,102,.8), 0 0 18px rgba(0,255,102,.5);
}

#startScreen {
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  opacity: 0;
  animation: matrix-start-in 1.2s ease forwards;
  transition: opacity .6s ease;
}

#startBtn {
  position: relative;
  overflow: hidden;
  padding: 14px 38px;
  border: 2px solid #00ff66;
  background: transparent;
  color: #00ff66;
  font: clamp(28px, 5vw, 52px)/1 "VT323", monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
  animation: matrix-btn-in 1.2s .4s ease forwards, matrix-btn-glow 2.5s 1.6s infinite, matrix-float 3s 1.6s ease-in-out infinite;
  text-shadow: 0 0 6px #00ff66, 0 0 14px rgba(0,255,102,.8), 0 0 26px rgba(0,255,102,.45);
  box-shadow: 0 0 8px rgba(0,255,102,.6), 0 0 18px rgba(0,255,102,.25), inset 0 0 8px rgba(0,255,102,.15);
}

#startBtn::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -35%;
  width: 22%;
  height: 140%;
  opacity: 0;
  transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
}

#startBtn:hover {
  background: rgba(0,255,102,.08);
  box-shadow: 0 0 14px rgba(0,255,102,.85), 0 0 34px rgba(0,255,102,.42), inset 0 0 12px rgba(0,255,102,.22);
}

#startBtn:hover::before {
  opacity: 1;
  animation: matrix-shine .9s ease forwards;
}

.start-text {
  display: inline-flex;
  gap: .02em;
}

.scramble-letter {
  display: inline-block;
  min-width: .62em;
  text-align: center;
}

#white-flash {
  z-index: 12;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(circle at center, #fff 0%, rgba(255,255,255,0) 60%);
}

#white-flash.is-active {
  animation: matrix-flash .7s ease-out forwards;
}

#matrix {
  z-index: 10;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity .7s ease;
}

#matrix.is-visible {
  opacity: 1;
}

.glitch-scan {
  position: absolute;
  inset: 0;
  z-index: 15;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 4px, rgba(255,255,255,.08) 5px 6px), linear-gradient(90deg, rgba(0,180,255,.16), transparent 35%, rgba(0,255,100,.14));
}

.skip-intro {
  position: absolute;
  right: clamp(18px, 3vw, 42px);
  bottom: clamp(18px, 3vw, 34px);
  z-index: 22;
  padding: 11px 16px;
  border: 1px solid rgba(0,255,102,.08);
  border-radius: 6px;
  background: rgba(0,0,0,.03);
  color: rgba(205,255,222,.2);
  font: 18px/1 "VT323", monospace;
  letter-spacing: .12em;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, color .25s ease, border-color .25s ease, background .25s ease, box-shadow .25s ease, text-shadow .25s ease;
}

.skip-intro.is-visible {
  opacity: 1;
  visibility: visible;
}

.skip-intro:hover,
.skip-intro:focus-visible {
  color: rgba(225,255,235,.96);
  border-color: rgba(0,255,102,.58);
  background: rgba(0,20,8,.58);
  text-shadow: 0 0 8px rgba(0,255,102,.85);
  box-shadow: 0 0 10px rgba(0,255,102,.32), inset 0 0 10px rgba(0,255,102,.08);
  outline: none;
}

.matrix-intro.is-glitching {
  animation: intro-glitch-out .82s steps(2, end) forwards;
}

.matrix-intro.is-glitching .glitch-scan {
  animation: glitch-scan .82s steps(2, end) forwards;
}

body.intro-revealing > :not(.matrix-intro) {
  animation: bfixit-glitch-in .82s steps(2, end) both;
}

@keyframes matrix-blink { 50%, 100% { opacity: 0; } }
@keyframes matrix-start-in { to { opacity: 1; } }
@keyframes matrix-btn-in { to { opacity: 1; } }
@keyframes matrix-btn-glow { 0%,100% { opacity: 1; } 7% { opacity: .65; } 12% { opacity: 1; } 17% { opacity: .7; } }
@keyframes matrix-float { 50% { transform: translateY(-4px); } }
@keyframes matrix-shine { to { left: 115%; } }
@keyframes matrix-flash {
  0% { opacity: 0; transform: scale(.05); }
  35% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.4); }
}
@keyframes glitch-scan {
  0% { opacity: 0; transform: translateX(0); }
  15% { opacity: 1; transform: translateX(-14px); }
  32% { opacity: .45; transform: translateX(18px); }
  55% { opacity: .9; transform: translateX(-8px); }
  100% { opacity: 0; transform: translateX(0); }
}
@keyframes intro-glitch-out {
  0% { opacity: 1; transform: translate(0); filter: none; clip-path: inset(0); }
  20% { transform: translate(-9px, 3px); filter: hue-rotate(55deg) contrast(1.6); clip-path: inset(8% 0 62%); }
  38% { transform: translate(12px, -2px); filter: hue-rotate(-50deg) contrast(2); clip-path: inset(48% 0 22%); }
  56% { transform: translate(-6px, 4px); clip-path: inset(72% 0 4%); }
  72% { opacity: .8; transform: translate(7px); clip-path: inset(0); }
  100% { opacity: 0; transform: scale(1.025); filter: brightness(2); clip-path: inset(0); }
}
@keyframes bfixit-glitch-in {
  0% { opacity: 0; transform: translateX(12px); filter: hue-rotate(80deg) brightness(1.8); }
  35% { opacity: .45; transform: translateX(-8px); filter: hue-rotate(-60deg) contrast(1.6); }
  65% { opacity: .85; transform: translateX(3px); }
  100% { opacity: 1; transform: translateX(0); filter: none; }
}

@media (prefers-reduced-motion: reduce) {
  .matrix-intro.is-glitching,
  .matrix-intro.is-glitching .glitch-scan,
  body.intro-revealing > :not(.matrix-intro) {
    animation-duration: .25s;
  }
}

@media (hover: none) {
  .skip-intro.is-visible {
    color: rgba(205,255,222,.34);
    border-color: rgba(0,255,102,.13);
  }

  .skip-intro:active {
    color: #e7ffef;
    border-color: rgba(0,255,102,.65);
    background: rgba(0,20,8,.7);
    box-shadow: 0 0 12px rgba(0,255,102,.35);
  }
}