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

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

body, header, footer, .circle-btn, main h1, main p, .header-text, #footer-secret {
  transition: background-color 1s ease, color 1s ease, box-shadow 1s ease, border-color 1s ease, text-shadow 1s ease;
}

body {
  font-family: 'Orbitron', sans-serif;
  min-height: 100vh;
  background: #000;
  color: #f0eaff;
  display: flex;
  flex-direction: column;
  overflow: auto;
}

#matrix-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: #000;
  overflow: hidden;
}

.page-wrapper {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  padding-top: 140px;
  padding-bottom: 100px;
  background: transparent;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0.5rem 1rem;
  border-bottom: 3px solid #ff00ff;
  background: rgba(20, 0, 40, 0.9);
  box-shadow: 0 0 25px #ff00ff, 0 0 50px #00ffff inset;
  z-index: 10;

  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.header-text {
  font-size: clamp(1.2rem, 4vw, 2.2rem);
  letter-spacing: 2px;
  color: #00ffff;
  text-align: center;
  text-shadow: 0 0 8px #00ffff, 0 0 25px #ff00ff, 0 0 40px #ff33cc;
  animation: cyberpunk-glitch 5s infinite;
  max-width: 90%;
  word-break: break-word;
}

.logo {
  width: clamp(50px, 15vw, 90px);
  height: clamp(50px, 15vw, 90px);
  margin: 0 0.5rem;
  cursor: pointer;
  border-radius: 50%;
  background: radial-gradient(circle, #ff00ff33, #000);
  box-shadow: 0 0 20px #ff00ff, 0 0 40px #00ffff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 600px) {
  header {
    padding: 0.5rem;
    flex-direction: column;
  }

  .header-text {
    font-size: clamp(1rem, 5vw, 1.5rem);
    letter-spacing: 1px;
  }

  .logo {
    margin-bottom: 0.5rem;
  }
}

.logo:hover {
  transform: scale(1.1) rotate(5deg);
  box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff, 0 0 90px #ff33cc;
}

.mini-logo {
  position: absolute;
  width: 40px;
  height: 40px;
  pointer-events: none;
  border-radius: 50%;
  filter: drop-shadow(0 0 10px #ff00ff);
  z-index: 20;
  animation: mini-flicker 2s infinite;
}

#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999;
  animation: reference-flicker 0.4s infinite, neon-shift 1.8s infinite alternate;
  background: repeating-linear-gradient(
    0deg,
    rgba(128, 0, 128, 0.1),
    rgba(0, 0, 0, 0.3) 2px
  );
  animation: reference-flicker 0.4s infinite;
  backdrop-filter: blur(2px);
  flex-direction: column;
  overflow: hidden;
}

@keyframes neon-shift {
  0%   { filter: hue-rotate(0deg) blur(0px); }
  50%  { filter: hue-rotate(90deg) blur(2px); }
  100% { filter: hue-rotate(0deg) blur(0px); }
}

.reference-distort {
  font-size: 3rem;
  color: #ff99ff;
  text-shadow:
    0 0 5px #ff99ff,
    0 0 15px #bb00ff,
    0 0 25px #8800ff,
    0 0 40px #ff33ff,
    0 0 60px #bb33ff;
  animation: relic-text-vivid 0.9s infinite;
  z-index: 1000;
}

@keyframes reference-text-vivid {
  0%, 100% { transform: scale(1) skewX(0deg); }
  20% { transform: scale(1.05) skewX(3deg); }
  40% { transform: scale(1.02) skewX(-2deg); }
  60% { transform: scale(1.03) skewX(2deg); }
  80% { transform: scale(1.01) skewX(-1deg); }
}

.reference-static {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("https://i.ibb.co/7bQQYkX/tv-static.gif") repeat;
  background-size: cover;
  opacity: 0.12;
  mix-blend-mode: screen;
  animation: static-burst 1.8s infinite;
}

.reference-scanlines {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(187, 0, 255, 0.08) 0px,
    rgba(0, 0, 0, 0.2) 2px
  );
  pointer-events: none;
  z-index: 1001;
}

@keyframes reference-flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

@keyframes reference-text {
  0%, 100% { transform: none; }
  30% { transform: skewX(5deg); }
  60% { transform: translateX(2px); }
}

@keyframes static-burst {
  0%, 95%, 100% { opacity: 0.12; }
  96% { opacity: 0.35; }
  98% { opacity: 0.2; }
}

@keyframes mini-flicker {
  0%, 90%, 100% { filter: drop-shadow(0 0 10px #ff00ff); }
  92% { filter: drop-shadow(0 0 15px #bb00ff); }
  96% { filter: drop-shadow(0 0 15px #ff0033); }
}

main h1 {
  font-size: 2.5rem;
  color: #39ff14;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px #39ff14, 0 0 25px #00ffff, 0 0 40px #ff00ff;
  animation: flicker 6s infinite;
}

main p {
  font-size: 1.2rem;
  color: #ccc;
  margin-bottom: 2rem;
}

.button-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
}

.circle-btn {
  position: relative;
  background: transparent;
  border: 2px solid #ff00ff;
  border-radius: 50%;
  width: 160px;
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px #ff00ff, 0 0 35px #00ffff, inset 0 0 15px #ff33cc;
  overflow: hidden;
  perspective: 800px;
}
.circle-btn img {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}
.circle-btn span {
  position: relative;
  z-index: 2;
  font-size: clamp(0.7rem, 2vw, 1rem);
  color: #fff;
  text-align: center;
  text-shadow: 0 0 3px #ff00ff, 0 0 6px #00ffff;
  animation: subtle-glitch 10s infinite;
}
.circle-btn:hover {
  transform: scale(1.1);
  box-shadow: 0 0 40px #ff00ff, 0 0 70px #00ffff, inset 0 0 20px #39ff14;
  transform: scale(1.15) rotateX(10deg) rotateY(-10deg);
  box-shadow: 0 0 50px #ff00ff, 0 0 90px #00ffff, inset 0 0 25px #39ff14;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55), 
              box-shadow 0.4s ease;
}

footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  border-top: 3px solid #00ffff;
  background: rgba(0, 20, 40, 0.9);
  box-shadow: 0 0 25px #00ffff, 0 0 50px #ff00ff inset;
  z-index: 10;
  overflow: hidden;
}

#footer-secret {
  font-size: 1rem;
  color: #ff33cc;
  cursor: pointer;
  text-shadow: 0 0 8px #ff33cc, 0 0 25px #00ffff;
  animation: flicker 8s infinite;
}
#footer-secret:hover {
  color: #39ff14;
  text-shadow: 0 0 12px #39ff14, 0 0 35px #ff00ff;
}

@keyframes subtle-glitch {
  0%, 95%, 100% { text-shadow: 0 0 3px #ff00ff, 0 0 6px #00ffff; }
  96% { text-shadow: 2px 0 #ff00ff, -2px 0 #00ffff; }
  98% { text-shadow: -2px 0 #ff00ff, 2px 0 #00ffff; }
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.3; }
}

@keyframes cyberpunk-glitch {
  0%, 95%, 100% { transform: none; }
  96% { transform: skewX(10deg) translateX(-5px); }
  97% { transform: skewX(-10deg) translateX(5px); }
  98% { transform: none; }
}

@keyframes footer-glitch-out {
  0% { opacity: 1; transform: none; }
  20% { opacity: 0.8; transform: skewX(15deg); }
  40% { opacity: 0.6; transform: skewX(-15deg); }
  60% { opacity: 0.3; transform: translateX(20px); }
  80% { opacity: 0.1; transform: translateX(-20px); }
  100% { opacity: 0; transform: scale(0.9); }
}

.cyber-ripple {
  position: fixed;
  width: 20px;
  height: 20px;
  border: 2px solid #0ff;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  animation: ripple-expand 1s ease-out forwards;
  pointer-events: none;
  z-index: 2000;
  box-shadow: 0 0 10px #0ff, 0 0 20px #ff00ff;
}

@keyframes ripple-expand {
  to {
    transform: translate(-50%, -50%) scale(12);
    opacity: 0;
  }
}

.reference-distort::before,
.reference-distort::after {
  content: attr(data-text);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
}

.reference-distort::before {
  color: #f0f;
  clip: rect(0, 900px, 0, 0);
  animation: glitch-top 1s infinite linear alternate-reverse;
}

.reference-distort::after {
  color: #0ff;
  clip: rect(0, 900px, 0, 0);
  animation: glitch-bottom 1.3s infinite linear alternate-reverse;
}

@keyframes glitch-top {
  0% { clip: rect(10px, 9999px, 50px, 0); transform: translate(-2px, -2px); }
  50% { clip: rect(60px, 9999px, 80px, 0); transform: translate(2px, 2px); }
  100% { clip: rect(20px, 9999px, 70px, 0); transform: translate(-2px, 0); }
}

@keyframes glitch-bottom {
  0% { clip: rect(80px, 9999px, 100px, 0); transform: translate(2px, 2px); }
  50% { clip: rect(10px, 9999px, 40px, 0); transform: translate(-2px, -1px); }
  100% { clip: rect(60px, 9999px, 90px, 0); transform: translate(1px, 1px); }
}

.mini-logo {
  filter: drop-shadow(0 0 6px #ff00ff) drop-shadow(0 0 12px #00ffff);
  animation: mini-flicker 2s infinite, trail-glow 0.8s infinite alternate;
}

@keyframes trail-glow {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.7; transform: scale(1.2); }
}

.h1-wrapper {
  position: relative;
  display: inline-block;
}

.flavor-text {
  position: absolute;
  top: -40%;
  left: -6rem;
  transform: translateY(-50%) rotate(-20deg);
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.9rem, 3vw, 1.5rem);
  font-weight: 700;
  color: #ffdd33;
  text-shadow:
    0 0 6px #ff00ff,
    0 0 12px #00ffff,
    0 0 20px #ff33cc,
    0 0 30px #39ff14;
  animation: splash-bounce 2s infinite ease-in-out;
  pointer-events: none;
  white-space: nowrap;
  z-index: 2;
}

@media (max-width: 600px) {
  .flavor-text {
    left: -1rem;
    font-size: clamp(0.7rem, 4vw, 1rem);
  }
}

@keyframes splash-bounce {
  0%, 100% { transform: rotate(-20deg) scale(1); }
  50% { transform: rotate(-20deg) scale(1.1); }
}

.lang-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 11;

  font-family: 'Orbitron', sans-serif;
  font-size: clamp(0.8rem, 2vw, 1rem);
  padding: 0.45rem 0.9rem;
  background: rgba(20, 0, 40, 0.9);
  color: #00ffff;
  border: 2px solid #ff00ff;
  border-radius: 8px;
  cursor: pointer;
  text-shadow: 0 0 6px #00ffff, 0 0 12px #ff00ff;
  box-shadow: 0 0 12px #ff00ff, inset 0 0 8px #00ffff;
  transition: all 0.3s ease;
  backdrop-filter: blur(2px);
}

.lang-btn:hover {
  background: rgba(0,0,0,0.75);
  color: #39ff14;
  border-color: #39ff14;
  text-shadow: 0 0 8px #39ff14, 0 0 15px #ff00ff;
  box-shadow: 0 0 20px #39ff14, 0 0 30px #ff00ff inset;
  transform: translateY(-50%) scale(1.06);
}
.lang-btn:active { transform: translateY(-50%) scale(0.98); }

.header-text {
  max-width: calc(100% - 200px);
}

@media (max-width: 600px) {
  .lang-btn {
    position: static;
    transform: none;
    margin-top: 0.5rem;
    display: inline-block;
  }
  .header-text { max-width: 100%; }
}

.social-links {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 0.5rem;
}

.social-icon img {
  width: 28px;
  height: 28px;
  filter: drop-shadow(0 0 6px #00ffff);
  transition: transform 0.3s ease, filter 0.3s ease;
}

.social-icon:hover img {
  transform: scale(1.2);
  filter: drop-shadow(0 0 10px #ff00ff) drop-shadow(0 0 20px #39ff14);
}