:root {
    --color-bg-dark: #0f1012;
    --color-text-light: #C0C0C0;
    --color-accent-neon: #00FF99;
    --color-accent-blue: #00CFFF;
    --color-accent-red: #FF00FF;
    --color-border-grid: #2e3034;
    --font-mono: 'Inconsolata', 'Courier New', monospace;
    --screen-height: 1080px;
    --screen-width: 1920px;
      --scale-page: 1;
}

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

html {
 overflow: hidden; 
}

body{
  transform: scale(var(--scale-page));
  transform-origin: top left;
  background-color: #000;
  background-size: var(--screen-width) var(--screen-height);
  width: var(--screen-width);
  height: var(--screen-height);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-mono);
    cursor: url('images/32cursor4.png'), auto;
	opacity: 0;
}


.cursor-1 {
    cursor: url('images/32cursor3.png'), auto;
}

.cursor-2 {
    cursor: url('images/32cursor2.png'), auto;
}

.cursor-3 {
    cursor: url('images/32cursor1.png'), auto;
}


#backgroundContainer{
  background-image: url('images/background.png');
  background-size: var(--screen-width) var(--screen-height);
  background-repeat: no-repeat;
  width: var(--screen-width);
  height: var(--screen-height);
  z-index: 1;
}

#titleBoard{
  background: #333;
  background-image: url(images/static.gif);
  background-blend-mode: difference;
  color: #FFF;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  padding: 10px;
  left: 0;
  top: 0;
  width: 269px;
  height: 143px;
  color: var(--color-text-light);
  opacity: 0;
}

#titleBoard h1{
  font-size: 20px;
  cursor: inherit;
}

a{
  text-decoration: none;
  color: inherit;
}

#spaceheyLayoutEditor{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-light);
  width: 118px;
  height: 98px;
  left: 0;
  top: 0;
  opacity: 0;
  filter: saturate(0.3);
}

#youtubeGenerator{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-light);
  width: 129px;
  height: 93px;
  left: 0;
  top: 0;
  opacity: 0;
  filter: saturate(0.3);
}

#youtubeGeneratorContainer{
  background-image: url('images/youtubegenerator.png');
  background-size: 140%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#youtubeGeneratorOverlay{
  background-image: url(images/static.gif);
  background-size: 110%;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 0.7;
}

#titleContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#spaceheyContainer{
  background-image: url('images/sle.png');
  background-size: 140%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
#spaceheyOverlay{
  background-image: url(images/static.gif);
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 0.3;
}

.glitch-text {
    position: relative;
    display: inline-block;
    color: var(--color-accent-neon);
    text-shadow: 0 0 5px var(--color-accent-neon);
    overflow: hidden;
    animation: data-corrupt-main 4s infinite alternate; 
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation-play-state: paused; 
}

.glitch-text::before {
    left: 2px;
    text-shadow: -2px 0 var(--color-accent-blue);
    /* Faster vertical slice/clip path animation */
    animation: clip-slice 0.6s infinite linear alternate-reverse, data-corrupt-color 4s infinite alternate;
}

.glitch-text::after {
    left: -2px;
    text-shadow: 2px 0 var(--color-accent-red);
    animation: clip-slice 0.7s infinite linear alternate-reverse, data-corrupt-color 4s infinite alternate;
}

#main-title {
    display: flex;
    justify-content: center;
    animation: data-corrupt-main 4s infinite alternate;
}

#main-title::before, #main-title::after {
    display: flex;
    justify-content: center;
}



/* 1. Core Distortion/Corrupt Effect (Jitter and Skew) */
@keyframes data-corrupt-main {
    0%, 100% {
        transform: translate(0, 0) skewX(0deg);
        opacity: 1;
    }
    10% {
        transform: translate(2px, 1px) skewX(1deg);
        opacity: 0.95;
    }
    10.1% {
        transform: translate(-3px, 0) skewX(-2deg);
        opacity: 0.3; /* Quick black-out flash */
    }
    10.2% {
        transform: translate(0, 0) skewX(0deg);
        opacity: 1;
    }
    50% {
        transform: translate(1px, -1px) skewX(0.5deg);
    }
    50.5% {
        transform: translate(-5px, 2px) skewX(4deg); /* Aggressive distortion jump */
        opacity: 0.8;
    }
    51% {
        transform: translate(0, 0) skewX(0deg);
        opacity: 1;
    }
}

/* 2. Color/Layer Corruption Effect (Faster Vertical Slices) */
@keyframes clip-slice {
    0% { clip-path: inset(80% 0 0 0); }
    10% { clip-path: inset(5% 0 85% 0); }
    20% { clip-path: inset(25% 0 65% 0); }
    30% { clip-path: inset(90% 0 0 0); }
    40% { clip-path: inset(10% 0 70% 0); }
    50% { clip-path: inset(55% 0 35% 0); }
    52% { clip-path: inset(0 0 100% 0); }
    54% { clip-path: inset(70% 0 10% 0); }
    100% { clip-path: inset(80% 0 0 0); }
}

/* 3. Text Jitter/Flicker (Used for H2s and P/LI elements) */
@keyframes dataFlicker {
    0%, 100% { opacity: 1; text-shadow: none; }
    1% { opacity: 0.5; text-shadow: 0 0 4px var(--color-accent-neon); }
    1.5% { opacity: 1; text-shadow: none; }
    4% { opacity: 0.3; text-shadow: 0 0 5px var(--color-accent-blue); }
    4.2% { opacity: 1; text-shadow: none; }
    10% { transform: translate(1px, 0); }
    10.1% { transform: translate(-1px, 0); }
    10.2% { transform: translate(0, 0); }
    15% { color: var(--color-accent-neon); }
    15.1% { color: var(--color-text-light); }
}

#dropoutNav{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: top;
  gap: 40px;
  position: absolute;
  background: linear-gradient(#000000, transparent);
  top: 0;
  left: 0;
  width: var(--screen-width);
  height: 0px;
  z-index: 10;
  transition: 0.3s;
  overflow: hidden;
  color: var(--color-accent-neon);
  opacity: 0.4;
}
#dropoutNav a, #dropoutNav p{
  padding: 5px 0 0 0;
}
#dropoutNav a:hover{
  color: var(--color-text-light);
}

#audioPlayerGenerator {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--color-text-light);
  width: 183px;
  height: 113px;
  left: 0;
  top: 0;
  opacity: 0;
  filter: saturate(0.3);
  z-index: 1;
}

#audioPlayerContainer{
  background-image: url('images/apg.png');
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

#activePlayer{
	width: 400px; 
	height: 195px; 
	top: 0px;
	left: 0px;
	position: absolute; 
	z-index: 2;
	overflow: hidden;
	opacity: 0;
	
}

#activePlayerOverlay {
position: absolute;
top: 0;
left: 0;
  background-image: url(images/static.gif);
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 1;
  z-index: 1;
  
}

#audioPlayerOverlay{
	position: absolute;
top: 0;
left: 0;
  background-image: url(images/static.gif);
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  z-index: 1;
  filter: invert(0);
}
.glitch-wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  background: #000; /* This provides the black for the blackout */
  overflow: hidden;
  border: 2px solid #333;
 
}

.img-holder,
.glitch-img {
  width: 100%;
  height: 100%;
}

.glitch-img {
  background-image: var(--img);
  background-size: 100% 100%;
  background-position: center;
  position: relative;
  opacity: 1;
  transition: opacity 0.05s linear;
}

/* 1. Blackout State */
.state-blackout .glitch-img {
  opacity: 0;
}

/* 2. Glitch Layers (Pseudo-elements) */
.is-corrupting .glitch-img::before,
.is-corrupting .glitch-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--img);
  background-size: cover;
  background-position: center;
  mix-blend-mode: screen;
}

/* Magenta / Red Shift */
.is-corrupting .glitch-img::before {
  left: 5px;
  filter: hue-rotate(90deg) brightness(1.3);
  animation: glitch-anim-1 0.2s infinite linear;
}

/* Cyan / Blue Shift */
.is-corrupting .glitch-img::after {
  left: -5px;
  filter: hue-rotate(-90deg) brightness(1.3);
  animation: glitch-anim-2 0.2s infinite linear;
}

/* Violent Shaking & Slicing Keyframes */
@keyframes glitch-anim-1 {
  0% {
    clip-path: inset(10% 0 70% 0);
    transform: translate(-10px, 2px);
  }
  20% {
    clip-path: inset(60% 0 10% 0);
    transform: translate(10px, -2px);
  }
  40% {
    clip-path: inset(20% 0 40% 0);
    transform: translate(-5px, 5px);
  }
  60% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(5px, -5px);
  }
  80% {
    clip-path: inset(40% 0 30% 0);
    transform: translate(-10px, 0);
  }
  100% {
    clip-path: inset(0% 0 90% 0);
    transform: translate(0, 0);
  }
}

@keyframes glitch-anim-2 {
  0% {
    clip-path: inset(80% 0 5% 0);
    transform: translate(10px, -2px);
  }
  25% {
    clip-path: inset(15% 0 60% 0);
    transform: translate(-10px, 2px);
  }
  50% {
    clip-path: inset(50% 0 20% 0);
    transform: translate(5px, -5px);
  }
  75% {
    clip-path: inset(5% 0 80% 0);
    transform: translate(-5px, 5px);
  }
  100% {
    clip-path: inset(30% 0 40% 0);
    transform: translate(0, 0);
  }
}

#glitch-link{
  position: aboslute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#sitesOverlay{
  position: absolute;
top: 0;
left: 0;
  background-image: url(images/static.gif);
  background-size: 100%;
  background-position: center;
  width: 100%;
  height: 100%;
  opacity: 0.4;
  z-index: 1;
}