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

:root {
  --primary-color: #00ffd5;
  --accent-color: #ff00ff;
  --alt-color: #fffc00;
  --dark-color: #0a0a16;
}

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

body {
  min-height: 100vh;
  min-height: 100dvh; /* better on mobile */
  background-color: var(--dark-color);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  font-family: "Orbitron", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.container {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* ===== Glitch text container ===== */
.glitch-container {
  position: absolute;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 1000px;
}

svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Text styles (unchanged) */
.main-text {
  animation: text-shift 10s infinite alternate;
}

.text-path {
  fill: none;
  stroke: var(--primary-color);
  stroke-width: 2;
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 5s linear forwards, glow 4s ease-in-out infinite alternate;
}

.text-path-r {
  stroke: #ff004c;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-1 0.2s ease-in-out infinite alternate;
}

.text-path-g {
  stroke: #00ff3c;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-2 0.3s ease-in-out infinite alternate;
}

.text-path-b {
  stroke: #0033ff;
  filter: blur(1px);
  animation: dash 5s linear forwards,
    glitch-anim-3 0.35s ease-in-out infinite alternate;
}

.glitch-element {
  animation: random-glitch 0.1s ease-in-out infinite;
  opacity: 0;
}

.glitch-element:nth-child(1) { animation-delay: 0.1s; }
.glitch-element:nth-child(2) { animation-delay: 0.2s; }
.glitch-element:nth-child(3) { animation-delay: 0.3s; }
.glitch-element:nth-child(4) { animation-delay: 0.4s; }
.glitch-element:nth-child(5) { animation-delay: 0.5s; }
.glitch-element:nth-child(6) { animation-delay: 0.6s; }

/* Effects layers */
.scanline {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(0, 255, 213, 0.05) 50%
  );
  background-size: 100% 4px;
  z-index: 2;
  pointer-events: none;
  animation: scanlines 0.5s linear infinite;
}

.noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/png;base64,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");
  opacity: 0.05;
  z-index: 1;
  pointer-events: none;
}

.color-shift {
  position: absolute;
  inset: 0;
  mix-blend-mode: hue;
  animation: color-cycle 10s infinite;
  opacity: 0.2;
  pointer-events: none;
  z-index: 3;
}

.grid {
  position: absolute;
  inset: 0;
  background-size: 50px 50px;
  background-image:
    linear-gradient(rgba(0, 255, 213, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 213, 0.05) 1px, transparent 1px);
  z-index: 0;
  pointer-events: none;
}

/* ===== Buttons ===== */
.button-group {
  position: absolute;
  bottom: max(40px, env(safe-area-inset-bottom, 20px));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 90%;
  max-width: 320px;
  z-index: 10;
}

.glitch-button {
  position: relative;
  width: 100%;
  padding: 16px 24px;
  min-height: 52px;          /* good touch target */
  background: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  font-family: "Orbitron", sans-serif;
  font-size: 0.95rem;
  text-transform: uppercase;
  font-weight: bold;
  cursor: pointer;
  overflow: hidden;
  transition: all 0.3s;
  z-index: 5;
  -webkit-tap-highlight-color: transparent;
}

.glitch-button:hover {
  background: rgba(0, 255, 213, 0.1);
  text-shadow: 0 0 8px var(--primary-color);
  box-shadow: 0 0 10px var(--primary-color);
}

.glitch-button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 255, 213, 0.2),
    transparent
  );
  transition: all 0.6s;
}

.glitch-button:hover::before {
  left: 100%;
}

/* Disable hover effect for the second button */
.glitch-button.disable-hover:hover,
.glitch-button.disable-hover:hover::before {
  background: transparent !important;
  text-shadow: none !important;
  box-shadow: none !important;
  left: -100% !important;
  transition: none !important;
}

/* ===== Keyframes (unchanged) ===== */
@keyframes dash {
  to { stroke-dashoffset: 0; }
}

@keyframes glow {
  0%, 100% { filter: drop-shadow(0 0 2px var(--primary-color)); }
  50% { filter: drop-shadow(0 0 8px var(--primary-color)); }
}

@keyframes text-shift {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(1px, -1px); }
  40% { transform: translate(-1px, 1px); }
  60% { transform: translate(2px, 0); }
  80% { transform: translate(0, -2px); }
}

@keyframes glitch-anim-1 {
  0% { transform: translate(0, 0); }
  20% { transform: translate(-2px, 1px); }
  40% { transform: translate(-1px, -1px); }
  60% { transform: translate(1px, 1px); }
  80% { transform: translate(2px, -1px); }
  100% { transform: translate(1px, -1px); }
}

@keyframes glitch-anim-2 {
  0% { transform: translate(0, 0); }
  20% { transform: translate(2px, 1px); }
  40% { transform: translate(1px, -1px); }
  60% { transform: translate(-1px, 1px); }
  80% { transform: translate(-2px, -1px); }
  100% { transform: translate(1px, 1px); }
}

@keyframes glitch-anim-3 {
  0% { transform: translate(0, 0); }
  20% { transform: translate(1px, -2px); }
  40% { transform: translate(-1px, 2px); }
  60% { transform: translate(2px, -1px); }
  80% { transform: translate(-2px, 1px); }
  100% { transform: translate(1px, -1px); }
}

@keyframes scanlines {
  0% { transform: translateY(0); }
  100% { transform: translateY(4px); }
}

@keyframes random-glitch {
  0%, 100% { opacity: 0; }
  30%, 70% { opacity: 0.8; }
}

@keyframes color-cycle {
  0% { background-color: rgba(255, 0, 255, 0.2); }
  25% { background-color: rgba(0, 255, 213, 0.2); }
  50% { background-color: rgba(255, 255, 0, 0.2); }
  75% { background-color: rgba(0, 100, 255, 0.2); }
  100% { background-color: rgba(255, 0, 255, 0.2); }
}

/* ===== Mobile tweaks ===== */
@media (max-width: 600px) {
  .glitch-container {
    width: 96%;
    top: 38%;
  }

  .button-group {
    bottom: max(28px, env(safe-area-inset-bottom, 16px));
    gap: 14px;
  }

  .glitch-button {
    font-size: 0.85rem;
    padding: 14px 18px;
    min-height: 48px;
  }

  /* Slightly calmer effects on mobile for performance */
  .scanline {
    animation-duration: 0.8s;
  }

  .color-shift {
    opacity: 0.15;
  }
}

/* Very small phones */
@media (max-width: 380px) {
  .glitch-container {
    top: 35%;
  }

  .glitch-button {
    font-size: 0.8rem;
  }
}