@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@600;700;900&family=Orbitron:wght@400;500;600;700&display=swap");

:root {
  --black: #020304;
  --dark: #07090b;
  --panel: rgba(10, 13, 16, .9);
  --grey: #89939b;
  --silver: #dce2e7;
  --white: #f7f9fa;
  --line: rgba(190, 202, 212, .25);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: var(--white);
  background: var(--black);
  font-family: Arial, sans-serif;
  perspective: 1800px;
}

body::before,
body::after {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  content: "";
}

body::before {
  background:
    radial-gradient(ellipse at center, transparent 12%, rgba(0, 0, 0, .42) 70%, #000 120%),
    repeating-linear-gradient(0deg, transparent 0 4px, rgba(220, 225, 230, .035) 5px);
  mix-blend-mode: screen;
}

body::after {
  z-index: 21;
  box-shadow: inset 0 0 170px #000;
}

button {
  font: inherit;
  cursor: pointer;
}

.hacker-background,
.hacker-lines,
#velvetRain {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

.hacker-background {
  z-index: 0;
  background:
    linear-gradient(rgba(160, 170, 180, .14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160, 170, 180, .14) 1px, transparent 1px),
    #050607;
  background-size: 88px 88px;
  animation: gridMove 9s linear infinite;
}

.hacker-background::before {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(115deg, transparent 0 42%, rgba(210, 220, 230, .17) 42.1%, transparent 42.3%),
    linear-gradient(295deg, transparent 0 64%, rgba(210, 220, 230, .14) 64.1%, transparent 64.3%);
  animation: circuitMove 7s ease-in-out infinite alternate;
}

.hacker-background::after {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 2px;
  content: "";
  background: #e5e9ed;
  box-shadow: 0 0 14px #fff, 0 0 45px #aab3bb;
  animation: scanBeam 6s linear infinite;
}

.hacker-lines {
  z-index: 1;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 119px, rgba(190, 198, 205, .23) 120px 121px),
    repeating-linear-gradient(0deg, transparent 0 119px, rgba(190, 198, 205, .21) 120px 121px);
  animation: lineShift 12s linear infinite;
}

#velvetRain {
  z-index: 2;
  pointer-events: none;
}

.code-stream {
  position: absolute;
  color: rgba(210, 218, 225, .42);
  white-space: nowrap;
  font: 11px Orbitron, monospace;
  letter-spacing: 3px;
  text-shadow: 0 0 10px rgba(220, 225, 230, .65);
  animation: codeFloat 13s linear infinite;
}

.stream-one { top: 17%; left: -5%; }
.stream-two { top: 32%; right: -8%; animation-delay: -4s; }
.stream-three { top: 49%; left: 8%; animation-delay: -8s; }
.stream-four { top: 67%; right: 5%; animation-delay: -2s; }
.stream-five { top: 82%; left: -10%; animation-delay: -6s; }
.stream-six { top: 91%; right: -5%; animation-delay: -10s; }

.rain-flower,
.velvet-flower {
  position: absolute;
}

.rain-flower {
  top: -100px;
  width: var(--size);
  height: var(--size);
  opacity: var(--opacity);
  filter: blur(var(--blur));
  animation: fall var(--duration) linear var(--delay) infinite;
}

.petal,
.flower-petal {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 42%;
  height: 68%;
  transform-origin: 50% 100%;
  border-radius: 72% 28% 76% 24%;
  background: linear-gradient(125deg, #b9c0c6, #343a40 28%, #080a0c 68%, #000);
  box-shadow: inset 4px 4px 12px rgba(255, 255, 255, .2), inset -12px -15px 20px #000;
}

.petal:nth-child(1),
.flower-petal:nth-child(1) { transform: translate(-50%, -100%) rotate(0deg); }
.petal:nth-child(2),
.flower-petal:nth-child(2) { transform: translate(-50%, -100%) rotate(60deg); }
.petal:nth-child(3),
.flower-petal:nth-child(3) { transform: translate(-50%, -100%) rotate(120deg); }
.petal:nth-child(4),
.flower-petal:nth-child(4) { transform: translate(-50%, -100%) rotate(180deg); }
.petal:nth-child(5),
.flower-petal:nth-child(5) { transform: translate(-50%, -100%) rotate(240deg); }
.petal:nth-child(6),
.flower-petal:nth-child(6) { transform: translate(-50%, -100%) rotate(300deg); }

#startScreen {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: rgba(2, 3, 4, .38);
  transition: opacity 1s ease, visibility 1s ease;
}

#startScreen.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.start-card {
  width: min(90vw, 475px);
  padding: 55px 34px 47px;
  transform: translateY(12vh);
  border: 1px solid rgba(210, 215, 220, .4);
  background: linear-gradient(145deg, rgba(45, 50, 55, .86), rgba(3, 4, 5, .94));
  box-shadow: 0 25px 90px #000, 0 0 50px rgba(190, 200, 210, .18);
  text-align: center;
}

.crest {
  color: var(--silver);
  font-size: 34px;
  text-shadow: 0 0 20px #fff;
}

.eyebrow {
  margin: 13px 0 23px;
  color: #aeb5bb;
  font: 600 11px Orbitron, sans-serif;
  letter-spacing: 4px;
}

.start-card h1 {
  margin: 0;
  font: 900 clamp(38px, 11vw, 70px) / .9 Cinzel, Georgia, serif;
  letter-spacing: 5px;
  text-shadow: 0 0 8px #fff, 0 0 25px #89939b;
}

.start-card h1 span,
.accent {
  color: #b9c1c8;
}

.start-copy {
  margin: 28px 0 33px;
  color: #aeb4ba;
  letter-spacing: 1px;
}

#startBtn,
#skipBtn {
  border: 1px solid #aab2b9;
  color: #fff;
  background: linear-gradient(135deg, #555d64, #070809);
  font-family: Orbitron, sans-serif;
  transition: .25s ease;
}

#startBtn {
  min-width: 210px;
  padding: 16px 35px;
  letter-spacing: 6px;
}

#skipBtn {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 1100;
  display: none;
  padding: 9px 15px;
  color: #c4c9ce;
  background: rgba(0, 0, 0, .72);
  font-size: 11px;
  letter-spacing: 2px;
}

#startBtn:hover,
#skipBtn:hover {
  border-color: #fff;
  box-shadow: 0 0 32px rgba(255, 255, 255, .6);
  transform: translateY(-3px);
}

.label,
#mainTitle {
  position: fixed;
  left: 50%;
  pointer-events: none;
  text-align: center;
  opacity: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  will-change: transform, opacity;
}

.label {
  top: 70vh;
  z-index: 100;
  width: min(96%, 1500px);
  color: #edf0f2;
  font: 900 clamp(28px, 5.8vw, 88px) / 1.08 Cinzel, Georgia, serif;
  letter-spacing: 2px;
  text-shadow:
    0 0 3px #fff,
    0 0 10px rgba(230, 235, 238, .85),
    0 0 25px rgba(150, 160, 168, .7);
}

.label.playing {
  animation: sentence 7s linear forwards;
}

.char {
  display: inline-block;
  opacity: 0;
  animation: assemble 1900ms cubic-bezier(.2, .75, .18, 1) forwards;
  animation-delay: calc(100ms + var(--char-index) * 38ms);
}

.space {
  width: .35em;
}

#mainTitle {
  top: 70vh;
  z-index: 120;
  width: 96%;
  color: #eef1f3;
  font: 900 clamp(38px, 9vw, 125px) Cinzel, Georgia, serif;
  letter-spacing: clamp(3px, 1vw, 15px);
  text-shadow: 0 0 5px #fff, 0 0 18px #fff, 0 0 42px #899198;
}

.title-reveal {
  animation: titleReveal 12s linear forwards;
}

.title-fade {
  animation: titleFade 4s ease-in forwards !important;
}

#fallingFlower {
  position: fixed;
  inset: -15vh 0 0;
  z-index: 180;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

#fallingFlower.visible {
  opacity: 1;
  visibility: visible;
}

.velvet-flower {
  top: -100px;
  width: var(--flower-size);
  height: var(--flower-size);
  animation: curtain var(--flower-duration) linear var(--flower-delay) forwards;
}

.flower-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20%;
  height: 20%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, #f1f3f4 0 12%, #555d63 35%, #050607 70%);
  box-shadow: 0 0 12px #dce2e7;
}

.splash {
  position: fixed;
  z-index: 10;
  width: 18px;
  height: 18px;
  pointer-events: none;
  border: 2px solid rgba(220, 220, 220, .9);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: splash 900ms ease-out forwards;
  box-shadow: 0 0 10px #fff;
}

.drop {
  position: absolute;
  width: 4px;
  height: 13px;
  border-radius: 50%;
  background: #ddd;
  box-shadow: 0 0 8px #fff;
  animation: drop 700ms ease-out forwards;
}

@keyframes gridMove {
  to { background-position: 88px 88px, 88px 88px; }
}

@keyframes circuitMove {
  to { transform: translateX(35px) scale(1.03); opacity: .45; }
}

@keyframes scanBeam {
  to { transform: translateY(125vh); }
}

@keyframes codeFloat {
  0%, 100% { opacity: .08; transform: translateX(-20px); }
  50% { opacity: .55; transform: translateX(80px); }
}

@keyframes lineShift {
  to { background-position: -120px 120px; }
}

@keyframes fall {
  to { transform: translate3d(var(--sway), 120vh, -20px) rotate(360deg); }
}

@keyframes assemble {
  from {
    opacity: 0;
    transform: translateZ(-900px) rotateX(80deg) scale(.05);
    filter: blur(7px);
  }

  to {
    opacity: 1;
    transform: translateZ(0) rotateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes sentence {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, -1200px) scale(.05);
    filter: blur(8px);
  }

  18%,
  58% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 2800px) scale(2.8);
    filter: blur(5px);
  }
}

@keyframes titleReveal {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, -1500px) scale(.04);
    filter: blur(8px);
  }

  70% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 0) scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: translate3d(-50%, -50%, 250px) scale(1.12);
  }
}

@keyframes titleFade {
  to {
    opacity: 0;
    transform: translate3d(-50%, -50%, 650px) scale(1.45);
    filter: blur(8px);
  }
}

@keyframes curtain {
  0% {
    opacity: 0;
    transform: translate3d(var(--start-x), -12vh, 0) scale(.35);
  }

  12% { opacity: 1; }

  72% {
    opacity: .95;
    transform: translate3d(var(--end-x), 78vh, 0) rotate(240deg) scale(1);
  }

  100% {
    opacity: 0;
    transform: translate3d(var(--final-x), 125vh, 0) rotate(470deg) scale(1.25);
  }
}

@keyframes splash {
  to {
    opacity: 0;
    transform: translate(-50%, -50%) scale(7);
  }
}

@keyframes drop {
  to {
    opacity: 0;
    transform: rotate(var(--angle)) translateY(var(--distance)) scale(.2);
  }
}

@media (max-width: 600px) {
  .start-card {
    padding: 42px 22px 36px;
    transform: translateY(7vh);
  }

  .label,
  #mainTitle {
    top: 75vh;
  }

  #skipBtn {
    top: 14px;
    right: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}