:root {
  --red-cyb: #ff003c;
  --bg-dark: #050505;
}

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

body {
  background-color: var(--bg-dark);
  color: #f4f4f4;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ===================================
 SELECTION
=================================== */

::selection {
  background: var(--red-cyb);
  color: #000;
}

/* ===================================
 UTILITIES
=================================== */

.tag {
  border: 1px solid #27272a;
  padding: 4px 12px;
  font-size: 10px;
  text-transform: uppercase;
  font-family: 'Space Mono', monospace;
  color: #a1a1aa;
  letter-spacing: .1em;
}

.tag-red {
  border: 1px solid #27272a;
  padding: 4px 12px;
  font-size: 10px;
  text-transform: uppercase;
  font-family: 'Space Mono', monospace;
  color: var(--red-cyb);
  letter-spacing: .1em;
}

/* ===================================
 NOISE OVERLAY
=================================== */

.noise-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9997;

  opacity: 0.04;

  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ===================================
 CRT SCANLINES
=================================== */

.scanlines {
  position: fixed;
  inset: 0;

  pointer-events: none;
  z-index: 9998;

  background: linear-gradient(
      to bottom,
      rgba(255,255,255,0),
      rgba(255,255,255,0) 50%,
      rgba(0,0,0,0.2) 50%,
      rgba(0,0,0,0.2)
  );

  background-size: 100% 4px;
}

/* ===================================
 GLITCH
=================================== */

.glitch {
  position: relative;
  display: inline-block;
  color: white;
}

.glitch::before,
.glitch::after {
  content: attr(data-text);

  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 100%;

  background: var(--bg-dark);
}

.glitch::before {
  left: 2px;

  text-shadow: -2px 0 #ff00c1;

  clip: rect(44px, 450px, 56px, 0);

  animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;

  text-shadow:
      -2px 0 #00fff9,
      2px 2px var(--red-cyb);

  clip: rect(44px, 450px, 56px, 0);

  animation: glitch-anim2 5s infinite linear alternate-reverse;
}

/* ===================================
 GLITCH KEYFRAMES
=================================== */

@keyframes glitch-anim {

  0%   { clip: rect(10px,9999px,86px,0); }
  5%   { clip: rect(43px,9999px,1px,0); }
  10%  { clip: rect(69px,9999px,26px,0); }
  15%  { clip: rect(3px,9999px,60px,0); }
  20%  { clip: rect(12px,9999px,43px,0); }
  25%  { clip: rect(55px,9999px,7px,0); }
  30%  { clip: rect(98px,9999px,32px,0); }
  35%  { clip: rect(21px,9999px,14px,0); }
  40%  { clip: rect(74px,9999px,89px,0); }
  45%  { clip: rect(8px,9999px,55px,0); }
  50%  { clip: rect(62px,9999px,98px,0); }
  55%  { clip: rect(37px,9999px,41px,0); }
  60%  { clip: rect(85px,9999px,63px,0); }
  65%  { clip: rect(19px,9999px,80px,0); }
  70%  { clip: rect(90px,9999px,11px,0); }
  75%  { clip: rect(50px,9999px,27px,0); }
  80%  { clip: rect(6px,9999px,73px,0); }
  85%  { clip: rect(48px,9999px,91px,0); }
  90%  { clip: rect(77px,9999px,4px,0); }
  95%  { clip: rect(25px,9999px,36px,0); }
  100% { clip: rect(91px,9999px,59px,0); }
}

@keyframes glitch-anim2 {

  0%   { clip: rect(65px,9999px,100px,0); }
  5%   { clip: rect(52px,9999px,74px,0); }
  10%  { clip: rect(79px,9999px,85px,0); }
  15%  { clip: rect(75px,9999px,5px,0); }
  20%  { clip: rect(67px,9999px,61px,0); }
  25%  { clip: rect(14px,9999px,79px,0); }
  30%  { clip: rect(1px,9999px,66px,0); }
  35%  { clip: rect(86px,9999px,30px,0); }
  40%  { clip: rect(23px,9999px,98px,0); }
  45%  { clip: rect(85px,9999px,72px,0); }
  50%  { clip: rect(71px,9999px,75px,0); }
  55%  { clip: rect(2px,9999px,48px,0); }
  60%  { clip: rect(30px,9999px,16px,0); }
  65%  { clip: rect(59px,9999px,50px,0); }
  70%  { clip: rect(41px,9999px,62px,0); }
  75%  { clip: rect(2px,9999px,82px,0); }
  80%  { clip: rect(47px,9999px,73px,0); }
  85%  { clip: rect(3px,9999px,27px,0); }
  90%  { clip: rect(26px,9999px,55px,0); }
  95%  { clip: rect(42px,9999px,97px,0); }
  100% { clip: rect(38px,9999px,49px,0); }
}

/* ===================================
 FLICKER
=================================== */

@keyframes flicker {

  0%,19.999%,22%,62.999%,64%,64.999%,70%,100% {
      opacity:1;
  }

  20%,21.999%,63%,63.999%,65%,69.999% {
      opacity:.3;
  }
}

.animate-flicker {
  animation: flicker 3s infinite;
}

/* ===================================
 TEXT STROKE
=================================== */

.text-stroke {
  -webkit-text-stroke: 1px var(--red-cyb);
  color: transparent;
}

.text-stroke-white {
  -webkit-text-stroke: 1px #ffffff;
  color: transparent;
}

/* ===================================
 MARQUEE
=================================== */

.marquee-track {
  display: flex;
  width: fit-content;

  animation: marquee 20s linear infinite;
}

.marquee-track.reverse {
  animation: marquee-reverse 25s linear infinite;
}

@keyframes marquee {

  0% {
      transform: translateX(0);
  }

  100% {
      transform: translateX(-50%);
  }
}

@keyframes marquee-reverse {

  0% {
      transform: translateX(-50%);
  }

  100% {
      transform: translateX(0);
  }
}

/* ===================================
 SCROLLBAR HIDE
=================================== */

.hide-scroll::-webkit-scrollbar {
  display: none;
}

.hide-scroll {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ===================================
 REVEAL
=================================== */

.reveal {
  opacity: 0;

  transform: translateY(30px);

  transition:
      opacity .8s cubic-bezier(.16,1,.3,1),
      transform .8s cubic-bezier(.16,1,.3,1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===================================
 LOADER BAR
=================================== */

#loader-bar {
  width: 0%;
}

/* ===================================
 IMAGE EFFECTS
=================================== */

.zine-image {
  filter: grayscale(100%);
  transition: all .7s ease;
}

.zine-card:hover .zine-image {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ===================================
 RESPONSIVE
=================================== */

@media (max-width: 768px) {

  .glitch::before,
  .glitch::after {
      display: none;
  }

  .text-stroke,
  .text-stroke-white {
      -webkit-text-stroke-width: 0.5px;
  }

}