* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --cubeSize: 300px;
  --halfCube: calc(var(--cubeSize) / 2);
  --rotationAmplitude: 360deg;
}
html,
body {
  width: 100%;
  height: 100%;
  background: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
body.fade-out {
  opacity: 0;
  transition: opacity 1.5s ease;
}
#animation-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
#tesseract {
  position: absolute;
  width: var(--cubeSize);
  height: var(--cubeSize);
  transform-style: preserve-3d;
  animation: rotateTesseract 8s infinite linear;
  transition: filter 0.15s;
}
#tesseract:before,
#tesseract:after,
#tesseract .side1,
#tesseract .side2,
#tesseract .side3,
#tesseract .side4 {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  box-sizing: border-box;
  transform-origin: center;
}
#tesseract:before {
  transform: rotateX(90deg) translateZ(var(--halfCube));
}
#tesseract:after {
  transform: rotateX(-90deg) translateZ(var(--halfCube));
}
#tesseract .side1 {
  transform: rotateY(90deg) translateZ(var(--halfCube));
}
#tesseract .side2 {
  transform: rotateY(-90deg) translateZ(var(--halfCube));
}
#tesseract .side3 {
  transform: rotateZ(90deg) translateZ(var(--halfCube));
}
#tesseract .side4 {
  transform: rotateZ(-90deg) translateZ(var(--halfCube));
}
@keyframes rotateTesseract {
  0% { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  50% { transform: rotateX(calc(var(--rotationAmplitude) / 2)) rotateY(calc(var(--rotationAmplitude) / 2)) rotateZ(calc(var(--rotationAmplitude) / 2)); }
  100% { transform: rotateX(var(--rotationAmplitude)) rotateY(var(--rotationAmplitude)) rotateZ(var(--rotationAmplitude)); }
}
#title {
  position: relative;
  display: inline-block;
  font-size: clamp(2rem, 10vw, 5rem);
  color: white;
  font-family: 'Georgia', serif;
  opacity: 0;
  line-height: 1;
  z-index: 1;
  transition: opacity 1s ease;
}
.base,
.glitch-layer {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 1;
}
.base {
  position: relative;
  z-index: 2;
}
.glitch-layer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}
#title span.glitch-layer:nth-of-type(2) {
  color: red;
  animation: glitchMoveAll 0.1s infinite linear alternate;
}
#title span.glitch-layer:nth-of-type(3) {
  color: cyan;
  animation: glitchMove 0.15s infinite linear alternate-reverse;
}
#title span.glitch-layer:nth-of-type(4) {
  color: lime;
  animation: glitchMove 0.2s infinite linear alternate;
}
@keyframes glitchMove {
  0% { transform: translate(0, 0); clip-path: inset(0% 0% 0% 0%); }
  25% { transform: translate(-2px, 2px); clip-path: inset(10% 0% 10% 0%); }
  50% { transform: translate(2px, -2px); clip-path: inset(5% 0% 5% 0%); }
  75% { transform: translate(-1px, 1px); clip-path: inset(15% 0% 15% 0%); }
  100% { transform: translate(1px, -1px); clip-path: inset(0% 0% 0% 0%); }
}
@keyframes glitchMoveAll {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2px, 2px); }
  50% { transform: translate(2px, -2px); }
  75% { transform: translate(-1px, 1px); }
  100% { transform: translate(1px, -1px); }
}
@keyframes morphText {
  0% { filter: blur(0px) url(#liquid); opacity: 1; transform: scale(1); }
  30% { filter: blur(5px) url(#liquid); opacity: 0.8; transform: scale(1.05); }
  70% { filter: blur(15px) url(#liquid); opacity: 0.3; transform: scale(1.1); }
  100% { filter: blur(30px); opacity: 0; transform: scale(1.2); }
}
#title.morph { animation: morphText 2s forwards; }
@keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } }
#main-content {
  display: none;
  color: white;
  text-align: center;
  z-index: 2;
  transition: opacity 1s ease;
}
@media (max-width: 628px) {
  :root { --cubeSize: 200px; }
  #title { font-size: 2rem; }
}
@media (max-width: 480px) {
  :root { --cubeSize: 175px; }
  #title { font-size: 1.5rem; }
}
#infoBtn {
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #222;
  color: #fff;
  border: 2px solid #444;
  border-radius: 5px;
  font-size: 1rem;
  cursor: pointer;
  transition: opacity 0.5s ease, transform 0.3s ease;
  opacity: 0;
  pointer-events: none;
}
#infoBtn.show {
  opacity: 1;
  pointer-events: auto;
}
#infoBtn:hover {
  background-color: #333;
  transform: scale(1.05);
}
#glitch-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.1) 0, rgba(255,255,255,0.1) 1px, transparent 1px, transparent 3px);
}
#glitch-overlay.active { animation: glitchOverlay 0.5s ease-out; }
@keyframes glitchOverlay {
  0% { opacity: 0; transform: translate(0,0); }
  25% { opacity: 1; transform: translate(-5px,5px); }
  50% { opacity: 0.5; transform: translate(5px,-5px); }
  75% { opacity: 1; transform: translate(-3px,3px); }
  100% { opacity: 0; transform: translate(0,0); }
}
#extra-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 150;
  opacity: 0;
}
#extra-glitch.active { animation: extraGlitch 0.5s ease-out; }
@keyframes extraGlitch {
  0% { opacity: 0; filter: none; transform: none; }
  20% { opacity: 1; filter: hue-rotate(90deg) invert(0.8); transform: skew(5deg,5deg); }
  40% { opacity: 0.8; filter: hue-rotate(180deg) invert(0.7); transform: skew(-5deg,-5deg); }
  60% { opacity: 0.8; filter: hue-rotate(270deg) invert(0.6); transform: skew(5deg,-5deg); }
  80% { opacity: 1; filter: hue-rotate(360deg) invert(0.8); transform: skew(-5deg,5deg); }
  100% { opacity: 0; filter: none; transform: none; }
}
#shatter-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 250;
  opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,0.2) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0.2) 75%, transparent 75%);
  background-size: 20px 20px;
}
#shatter-glitch.active { animation: shatterGlitch 0.6s ease-out; }
@keyframes shatterGlitch {
  0% { opacity: 0; transform: translate(0,0) rotate(0deg); }
  15% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  30% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  45% { opacity: 0.5; transform: translate(0,0) rotate(0deg); }
  60% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  75% { opacity: 1; transform: translate(0,0) rotate(0deg); }
  90% { opacity: 0; transform: translate(0,0) rotate(0deg); }
  100% { opacity: 0; }
}
#mega-glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 300;
  opacity: 0;
  background: radial-gradient(circle, rgba(255,0,255,0.3), rgba(0,255,255,0.3) 70%);
}
#mega-glitch.active { animation: megaGlitch 3s ease-out forwards; }
@keyframes megaGlitch {
  0% { opacity: 0; transform: scale(1) rotate(0deg); filter: none; }
  10% { opacity: 1; transform: scale(1.2) rotate(0deg); filter: contrast(200%) blur(2px); }
  30% { opacity: 1; transform: scale(1.4) rotate(0deg); filter: contrast(250%) blur(4px); }
  50% { opacity: 1; transform: scale(1.6) rotate(0deg); filter: contrast(300%) blur(6px); }
  70% { opacity: 1; transform: scale(1.6) rotate(0deg); filter: contrast(300%) blur(6px); }
  90% { opacity: 1; transform: scale(1.2) rotate(0deg); filter: contrast(250%) blur(3px); }
  100% { opacity: 0; transform: scale(2.5) rotate(0deg); filter: none; }
}
.hack-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,0,0,0.8), transparent 70%);
  opacity: 0;
  z-index: 400;
  pointer-events: none;
  animation: hackFlicker 0.3s infinite;
}
.hack-overlay.active {
  opacity: 1;
}
@keyframes hackFlicker {
  0% { opacity: 0.4; filter: contrast(1) blur(0); }
  50% { opacity: 0.8; filter: contrast(2) blur(1px); }
  100% { opacity: 0.4; filter: contrast(1) blur(0); }
}
.hack-mode {
  animation: screenCrash 2s forwards;
}
@keyframes screenCrash {
  0% { filter: none; }
  50% { filter: invert(100%) hue-rotate(180deg) saturate(200%); }
  100% { filter: grayscale(100%) brightness(0.3) contrast(300%); }
}
#toggleBtn {
  position: fixed;
  top: 17px;
  right: 17px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #222;
  border: 2px solid #444;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.3s ease;
}
#toggleBtn.show {
  opacity: 1;
}
#toggleBtn.active {
  opacity: 0.14;
}