/* Custom Styles */

/* Base Styles */
* {
  border-color: hsl(120 50% 15%);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: hsl(120 100% 1%);
  color: hsl(120 100% 50%);
  font-family: 'Share Tech Mono', monospace;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Orbitron', sans-serif;
}

/* Glitch Animation */
@keyframes glitch {
  0% {
    text-shadow: 0.05em 0 0 hsl(120 100% 50% / 0.75), -0.05em -0.025em 0 hsl(0 100% 50% / 0.75), -0.025em 0.05em 0 hsl(200 100% 50% / 0.75);
  }
  14% {
    text-shadow: 0.05em 0 0 hsl(120 100% 50% / 0.75), -0.05em -0.025em 0 hsl(0 100% 50% / 0.75), -0.025em 0.05em 0 hsl(200 100% 50% / 0.75);
  }
  15% {
    text-shadow: -0.05em -0.025em 0 hsl(120 100% 50% / 0.75), 0.025em 0.025em 0 hsl(0 100% 50% / 0.75), -0.05em -0.05em 0 hsl(200 100% 50% / 0.75);
  }
  49% {
    text-shadow: -0.05em -0.025em 0 hsl(120 100% 50% / 0.75), 0.025em 0.025em 0 hsl(0 100% 50% / 0.75), -0.05em -0.05em 0 hsl(200 100% 50% / 0.75);
  }
  50% {
    text-shadow: 0.025em 0.05em 0 hsl(120 100% 50% / 0.75), 0.05em 0 0 hsl(0 100% 50% / 0.75), 0 -0.05em 0 hsl(200 100% 50% / 0.75);
  }
  99% {
    text-shadow: 0.025em 0.05em 0 hsl(120 100% 50% / 0.75), 0.05em 0 0 hsl(0 100% 50% / 0.75), 0 -0.05em 0 hsl(200 100% 50% / 0.75);
  }
  100% {
    text-shadow: -0.025em 0 0 hsl(120 100% 50% / 0.75), -0.025em -0.025em 0 hsl(0 100% 50% / 0.75), -0.025em -0.05em 0 hsl(200 100% 50% / 0.75);
  }
}

@keyframes glitch-skew {
  0% {
    transform: skew(0deg);
  }
  10% {
    transform: skew(-2deg);
  }
  20% {
    transform: skew(2deg);
  }
  30% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0deg);
  }
}

@keyframes matrix-fall {
  0% {
    transform: translateY(-100%);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh);
    opacity: 0;
  }
}

@keyframes neon-pulse {
  0%, 100% {
    box-shadow: 0 0 5px hsl(120 100% 50% / 0.5), 0 0 10px hsl(120 100% 50% / 0.3), 0 0 20px hsl(120 100% 50% / 0.2);
  }
  50% {
    box-shadow: 0 0 10px hsl(120 100% 50% / 0.8), 0 0 20px hsl(120 100% 50% / 0.5), 0 0 40px hsl(120 100% 50% / 0.3);
  }
}

@keyframes text-glow {
  0%, 100% {
    text-shadow: 0 0 10px hsl(120 100% 50% / 0.8), 0 0 20px hsl(120 100% 50% / 0.5);
  }
  50% {
    text-shadow: 0 0 20px hsl(120 100% 50% / 1), 0 0 40px hsl(120 100% 50% / 0.8), 0 0 60px hsl(120 100% 50% / 0.5);
  }
}

@keyframes flicker {
  0%, 100% { opacity: 1; }
  41% { opacity: 1; }
  42% { opacity: 0.8; }
  43% { opacity: 1; }
  45% { opacity: 0.3; }
  46% { opacity: 1; }
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

/* Utility Classes */
.glitch-text {
  animation: glitch 1s infinite, glitch-skew 3s infinite;
}

.neon-glow {
  animation: neon-pulse 2s infinite;
}

.text-glow {
  animation: text-glow 2s infinite;
}

.flicker {
  animation: flicker 3s infinite;
}

.matrix-gradient {
  background: linear-gradient(180deg, hsl(120 100% 1%) 0%, hsl(120 50% 5%) 50%, hsl(120 100% 1%) 100%);
}

.card-glow {
  box-shadow: 0 0 20px hsl(120 100% 50% / 0.2), inset 0 0 20px hsl(120 100% 50% / 0.05);
  border: 1px solid hsl(120 100% 50%);
  background-color: hsl(120 50% 3% / 0.5);
  transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.5s ease;
}

.card-glow:hover {
  box-shadow: 0 0 30px hsl(120 100% 50% / 0.4), inset 0 0 30px hsl(120 100% 50% / 0.1);
  border-color: hsl(120 100% 50%);
}

/* Accordion Styles */
.accordion-item[data-open] .accordion-content {
  max-height: 500px;
  padding-top: 0;
}

.accordion-item[data-open] .accordion-trigger svg {
  transform: rotate(180deg);
}

.accordion-item[data-open] {
  border-color: hsl(120 100% 50%);
}

.accordion-item[data-open].card-glow {
  border-color: hsl(120 100% 50%) !important;
}

/* Accordion borders should also be green */
.accordion-item {
  border-color: hsl(120 100% 50%) !important;
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out, padding-top 0.2s ease-out;
}

.accordion-trigger svg {
  transition: transform 0.2s ease-out;
}

/* Button enhancements for pixel-perfect match */
button[class*="neon-glow"] {
  transform-origin: center;
}

button[class*="hover:scale-105"]:hover {
  transform: scale(1.05);
}

/* Ensure SVG icons in buttons are properly sized */
button[class*="neon-glow"] svg {
  pointer-events: none;
  flex-shrink: 0;
}

/* Telegram Button Styling */
.telegram-button {
  border: 2px solid hsl(120 100% 20%) !important;
  border-color: hsl(120 100% 20%) !important;
  color: #000000 !important;
  background-color: hsl(120 100% 50%) !important;
  font-weight: 700;
}

.telegram-button:hover {
  border-color: hsl(120 100% 25%) !important;
  background-color: hsl(120 100% 48%) !important;
}

.telegram-button svg {
  stroke: #000000 !important;
  color: #000000 !important;
}

.telegram-button:hover svg {
  stroke: #000000 !important;
  color: #000000 !important;
}

/* Normal cursor - removed custom green cursor */

/* Responsive adjustments */
@media (max-width: 640px) {
  .glitch-text {
    font-size: 2.5rem;
  }
  
  /* Make character more visible on mobile */
  #hero-section img[src*="facebook-banner"] {
    opacity: 0.6 !important;
    left: -5% !important;
    width: 110% !important;
  }
  
  #hero-section .bg-gradient-to-b {
    background: linear-gradient(to bottom, transparent 0%, hsl(120 100% 1% / 0.2) 50%, hsl(120 100% 1%) 100%) !important;
  }
  
  #hero-section .bg-gradient-to-l {
    background: linear-gradient(to left, hsl(120 100% 1% / 0.1) 0%, hsl(120 100% 1% / 0.1) 50%, transparent 100%) !important;
  }
}