@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");
@import url("https://fonts.cdnfonts.com/css/pp-neue-montreal");

:root{
  --bg:#0b0b0b;
  --fg:#f0f0f0;
  --muted:#b3b3b3;
  --accent:#ffe600;
  --accent-grad: linear-gradient(90deg,#FFE55C 0%, #FF9900 100%);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html,body{ height:100%; }

body{
  font-family:"TheGoodMonolith", monospace;
  background-color:var(--bg);
  color:var(--fg);
  overflow:hidden;
  position:relative;
}

/* Dust/Scratches overlay */
body::after{
  content:"";
  position:fixed; inset:0;
  background-image:url("https://img.freepik.com/premium-photo/white-dust-scratches-black-background_279525-2.jpg?w=640");
  background-repeat:repeat;
  opacity:.08;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:1;
}

/* Animated noise */
body::before{
  content:"";
  position:fixed;
  top:-50%; left:-50%;
  width:200%; height:200%;
  background:url("http://assets.iceable.com/img/noise-transparent.png") repeat 0 0;
  background-size:300px 300px;
  animation:noise 0.3s steps(5) infinite;
  opacity:.9;
  will-change:transform;
  z-index:100;
  pointer-events:none;
}

@keyframes noise{
  0%{transform:translate(0,0)}
  10%{transform:translate(-2%,-3%)}
  20%{transform:translate(-4%,2%)}
  30%{transform:translate(2%,-4%)}
  40%{transform:translate(-2%,5%)}
  50%{transform:translate(-4%,2%)}
  60%{transform:translate(3%,0)}
  70%{transform:translate(0,3%)}
  80%{transform:translate(-3%,0)}
  90%{transform:translate(2%,2%)}
  100%{transform:translate(1%,0)}
}

p{
  text-transform:uppercase;
  font-size:13px;
  letter-spacing:.05em;
  -webkit-font-smoothing:antialiased;
}

footer{
  position:fixed;
  width:100vw;
  padding:2em;
  display:flex;
  justify-content:flex-end;
  align-items:center;
  z-index:2;
  mix-blend-mode:difference;
  bottom:0; right:0;
  opacity:0;
  transition:opacity .5s ease;
}

#canvas{
  position:fixed; inset:0;
  width:100vw; height:100vh;
  overflow:hidden;
  cursor:grab;
  opacity:0;
  transition:opacity .5s ease;
}
#canvas:active{ cursor:grabbing; }

.particles{
  position:fixed; inset:0;
  z-index:0; pointer-events:none;
  opacity:0; transition:opacity .5s ease;
}
.particle{ position:absolute; background:rgba(255,255,255,.12); border-radius:50%; }

/* Tweakpane default position */
.tp-dfwv{ position:fixed; top:10px; right:10px; z-index:10; }

/* Titles */
#titles-container{
  position:fixed; inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0; transition:opacity .5s ease;
}
.slide-title{
  position:absolute; color:white; pointer-events:none;
  transition:opacity .3s ease, filter .3s ease, transform .3s ease;
}
.title-text{
  font-family:"PP Neue Montreal", sans-serif;
  text-transform:uppercase;
  font-size: clamp(28px, 6vw, 92px);
  line-height:.9; font-weight:600; letter-spacing:-.03em;
  margin:0; white-space:nowrap;
  background:var(--accent-grad);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 0 0.25rem rgba(255,230,0,0.15));
}
.title-number{
  font-family:"TheGoodMonolith", monospace;
  font-size: clamp(10px, .8vw, 14px);
  margin:0; position:relative; padding-top:10px;
  display:flex; align-items:center; color:var(--muted);
}
.title-number::before{
  content:""; display:block; width:40px; height:3px;
  background:var(--accent-grad);
  margin-right:10px; border-radius:2px;
}

/* Preloader */
.preloader{
  position:fixed; inset:0;
  background-color:#000;
  z-index:9999;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
}
.circle-container{ position:relative; width:200px; height:200px; margin-bottom:30px; }

.initializing-text-container{ position:relative; margin-top:30px; overflow:hidden; }
.initializing-text{
  font-family:"TheGoodMonolith", monospace; color:#fff; font-size:12px; letter-spacing:3px;
  position:relative; z-index:2; mix-blend-mode:difference;
}
.initializing-progress{
  position:absolute; top:0; left:0; height:100%; width:0%;
  background:var(--accent-grad); z-index:1;
}

.dot{ position:absolute; width:6px; height:6px; border-radius:50%; background-color:var(--accent); opacity:0; }

@keyframes fadeIn{ 0%{opacity:0; transform:scale(0)} 100%{opacity:1; transform:scale(1)} }
@keyframes fadeOut{ 0%{opacity:1; transform:scale(1)} 100%{opacity:0; transform:scale(0)} }
@keyframes pulse{ 0%{transform:scale(.85)} 50%{transform:scale(1.15)} 100%{transform:scale(.85)} }

/* Small screens polish */
@media (max-width: 640px){
  footer{ padding:1rem; }
}