/* Matrixwear Styles */

/* Fonts (already loaded in HTML) */
.font-orbitron { font-family: 'Orbitron', monospace; }
.font-inter { font-family: 'Inter', sans-serif; }

/* Glitch Animation */
@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
  100% { transform: translate(0); }
}
.glitch {
  animation: glitch 0.3s infinite;
  position: relative;
}
.glitch:before,
.glitch:after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none; /* Make sure glitch copies don't interfere with pointer events */
}
.glitch:before {
  color: #00ff41;
  z-index: -1;
  animation: glitch 0.3s infinite reverse;
}
.glitch:after {
  color: #ff0040;
  z-index: -2;
  animation: glitch 0.3s infinite;
}

/* Hero video responsive & underlay */
.hero-video {
  object-fit: cover;
  width: 100%; height: 100%;
  position: absolute; 
  top: 0; left: 0; 
  z-index: 1;
}

/* Video overlay darkness (semi-transparent black) */
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 5; /* Above video, below content */
}

/* Matrix-style button */
.matrix-btn {
  background: linear-gradient(45deg, #000, #1a1a1a);
  border: 2px solid #00ff41;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  min-width: fit-content;
  padding: 1rem 2rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.matrix-btn:hover {
  box-shadow: 0 0 20px rgba(0,255,65,0.5);
  transform: translateY(-2px);
}
.matrix-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}
.matrix-btn:before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent, rgba(0,255,65,0.1), transparent);
  transform: rotate(45deg);
  transition: all 0.6s ease;
  opacity: 0;
}
.matrix-btn:hover:before {
  animation: shine 0.6s ease-in-out;
}
@keyframes shine {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); opacity: 0;}
  50% { opacity: 1;}
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); opacity: 0;}
}

/* Success Modal/Popup styles */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
}
.modal-content {
  background: linear-gradient(135deg, #000 0%, #1a1a1a 50%, #000 100%);
  border: 2px solid #00ff41;
  box-shadow: 0 0 50px rgba(0, 255, 65, 0.2);
  padding: 2rem;
  border-radius: 1rem;
  max-width: 400px;
  width: 90%;
  text-align: center;
}
.success-card {
  transform: scale(0.8);
  opacity: 0;
  animation: modalAppear 0.5s ease forwards;
}
@keyframes modalAppear {
  to { transform: scale(1); opacity: 1; }
}

/* Fade in animation (for hero elements etc) */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
  animation-fill-mode: forwards;
}
@keyframes fadeInUp {
  to { opacity: 1; transform: translateY(0);}
}

/* "Coming Soon" position */
.coming-soon {
  position: absolute;
  top: 15%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  text-align: center;
  width: 100%;
  pointer-events: none; /* To avoid accidental highlighting */
  user-select: none; /* Prevent text selection */
}

/* Centered hero content */
.hero-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 20;
  width: 100%;
  max-width: 1200px;
  padding: 0 1rem;
  user-select: none;
}

/* Loading spinner */
.loading-spinner {
  border: 2px solid transparent;
  border-top: 2px solid #00ff41;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg);}
  100% { transform: rotate(360deg);}
}

/* Custom Scrollbar (Matrix green) */
::-webkit-scrollbar { width: 8px;}
::-webkit-scrollbar-track { background: #000;}
::-webkit-scrollbar-thumb { background: #00ff41; border-radius: 10px; }

/* Input validation (optional) */
.input-error {
  border-color: #ff0040 !important;
  box-shadow: 0 0 8px rgba(255, 0, 64, 0.4);
}
.input-success {
  border-color: #00ff41 !important;
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

/* Responsive Tweaks */
@media (max-width: 640px) {
  .matrix-btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem;
  }
}

/* Remove native focus outlines, replace with custom */
input:focus, button:focus {
  outline: 2px solid #00ff41;
  outline-offset: 1px;
}