/* CYBERNETIC NEXUS EDITION - style.css */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700&family=Share+Tech+Mono&display=swap');

:root {
  /* Define CSS variables for easier theming and consistency */
  --color-dark-bg: #0a0a0a;
  --color-container-bg: rgba(20, 20, 20, 0.6);
  --color-input-bg: rgba(25, 25, 25, 0.7);
  --color-result-box-bg: rgba(25, 25, 25, 0.7);
  --color-link-content-bg: rgba(15, 15, 15, 0.8);
  --color-neon-green: #00ff64; /* Primary accent */
  --color-neon-green-light: #33ff88;
  --color-neon-green-dark: #00cc55;
  --color-neon-blue: #00e0ff; /* Secondary accent */
  --color-neon-magenta: #ff00c1; /* Glitch accent */
  --color-neon-red: #ff3300; /* Clear button accent */
  --color-text-light: #e0e0e0;
  --color-text-medium: #c0c0c0;
  --blur-strong: 15px;
  --blur-medium: 10px;
  --border-radius-large: 25px;
  --border-radius-medium: 12px;
  --border-radius-small: 8px;
  --shadow-intensity-low: 0.2;
  --shadow-intensity-medium: 0.4;
  --shadow-intensity-high: 0.6;
}

body {
  margin: 0;
  padding: 0;
  font-family: 'Share Tech Mono', monospace;
  color: var(--color-text-light);
  overflow-x: hidden;
  display: flex;
  justify-content: center;
  align-items: center; /* Centered vertically for better aesthetic on all screen sizes */
  min-height: 100vh;
  padding: 2rem 1rem; /* Use rem for responsive padding */
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

/* Full-screen background video styling */
.background-video {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -3;
  filter: brightness(0.5) contrast(1.4) grayscale(0.4); /* Stronger visual impact */
}

/* Semi-transparent dark overlay on top of the video for readability */
.video-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8); /* More opaque overlay for better contrast */
  z-index: -2;
}

/* Animated scanline effect */
.scanline-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 255, 100, 0.01) 0px, /* Very subtle neon green lines */
    rgba(0, 255, 100, 0.03) 1px,
    rgba(0, 255, 100, 0.01) 2px
  );
  background-size: 100% 4px; /* Height of each scanline pair */
  pointer-events: none;
  z-index: 2; /* Above container for screen effect */
  animation: scanlineAnimation 10s linear infinite; /* Slower animation for subtlety */
  opacity: 0.7;
}

@keyframes scanlineAnimation {
  0% { background-position: 0 0; }
  100% { background-position: 0 100%; }
}

/* Cybernetic mouse effect canvas */
canvas#cyberMouseCanvas {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999; /* Always on top */
}

/* Main content container with glassmorphism effect */
.container {
  background: var(--color-container-bg);
  backdrop-filter: blur(var(--blur-strong));
  -webkit-backdrop-filter: blur(var(--blur-strong));
  padding: 3rem; /* Use rem for responsive padding */
  margin: 1.5rem auto; /* Adjusted margin */
  max-width: 800px; /* Wider container for desktop */
  border: 1px solid rgba(0, 255, 100, var(--shadow-intensity-medium));
  border-radius: var(--border-radius-large);
  box-shadow: 0 0 100px rgba(0, 255, 100, var(--shadow-intensity-medium)), inset 0 0 50px rgba(0, 255, 100, var(--shadow-intensity-low));
  position: relative;
  z-index: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  animation: fadeIn 1.5s ease-out forwards; /* Slower, smoother fade in */
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(3rem); }
  to { opacity: 1; transform: translateY(0); }
}

/* Corner accents - adjusted for new container style */
.container::before,
.container::after {
  content: '';
  position: absolute;
  width: 3.5rem; /* Use rem for responsive sizing */
  height: 3.5rem; /* Use rem for responsive sizing */
  border: 4px solid var(--color-neon-green);
  z-index: 2;
  pointer-events: none;
}

.container::before {
  top: -4px;
  left: -4px;
  border-right: none;
  border-bottom: none;
  border-top-left-radius: calc(var(--border-radius-large) - 5px); /* Match container radius */
}

.container::after {
  bottom: -4px;
  right: -4px;
  border-left: none;
  border-top: none;
  border-bottom-right-radius: calc(var(--border-radius-large) - 5px); /* Match container radius */
}

h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 3.5rem; /* Use rem for responsive font size */
  margin-bottom: 2.5rem; /* Use rem for responsive margin */
  color: var(--color-text-light);
  text-align: center;
  text-shadow: 0 0 3rem rgba(0, 255, 100, 1.2); /* Stronger neon glow */
  letter-spacing: 0.25rem; /* Use rem for letter spacing */
  position: relative;
  display: inline-block;
  width: 100%;
}

.h1-accent {
    color: var(--color-neon-green);
}

/* Glitch effect for heading */
.glitch {
  animation: pulseGlow 2s infinite alternate;
}

@keyframes pulseGlow {
  from { text-shadow: 0 0 2rem rgba(0, 255, 100, 1), 0 0 3rem rgba(0, 255, 100, 0.8); }
  to { text-shadow: 0 0 4rem rgba(0, 255, 100, 1.5), 0 0 5rem rgba(0, 255, 100, 1); }
}

.glitch::before,
.glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-shadow: 0 0 2rem rgba(0, 255, 100, 0.8);
  pointer-events: none;
}

.glitch::before {
  left: 2px;
  text-shadow: -2px 0 var(--color-neon-magenta);
  /* clip values are dynamic, set by JS for more realistic glitch */
  animation: glitch-anim-1 2s infinite linear alternate-reverse;
}

.glitch::after {
  left: -2px;
  text-shadow: -2px 0 var(--color-neon-blue);
  /* clip values are dynamic, set by JS for more realistic glitch */
  animation: glitch-anim-2 3s infinite linear alternate-reverse;
}

/* Glitch keyframes remain the same as they are effective */
@keyframes glitch-anim-1 {
  0% { clip: rect(44px, 9999px, 56px, 0); }
  10% { clip: rect(135px, 9999px, 160px, 0); }
  20% { clip: rect(100px, 9999px, 120px, 0); }
  30% { clip: rect(50px, 9999px, 70px, 0); }
  40% { clip: rect(10px, 9999px, 30px, 0); }
  50% { clip: rect(150px, 9999px, 170px, 0); }
  60% { clip: rect(20px, 9999px, 40px, 0); }
  70% { clip: rect(180px, 9999px, 200px, 0); }
  80% { clip: rect(70px, 9999px, 90px, 0); }
  90% { clip: rect(110px, 9999px, 130px, 0); }
  100% { clip: rect(0px, 9999px, 20px, 0); }
}

@keyframes glitch-anim-2 {
  0% { clip: rect(25px, 9999px, 40px, 0); }
  15% { clip: rect(10px, 9999px, 30px, 0); }
  30% { clip: rect(70px, 9999px, 90px, 0); }
  45% { clip: rect(140px, 9999px, 160px, 0); }
  60% { clip: rect(50px, 9999px, 70px, 0); }
  75% { clip: rect(100px, 9999px, 120px, 0); }
  90% { clip: rect(0px, 9999px, 20px, 0); }
  100% { clip: rect(170px, 9999px, 190px, 0); }
}


input {
  width: 100%;
  padding: 1.2rem; /* Use rem */
  background: var(--color-input-bg);
  color: var(--color-neon-green);
  border: 1px solid var(--color-neon-green);
  border-radius: var(--border-radius-small);
  font-size: 1.1rem; /* Use rem */
  margin-bottom: 1.8rem; /* Use rem */
  box-shadow: 0 0 1.5rem rgba(0, 255, 100, var(--shadow-intensity-high)); /* Use rem */
  box-sizing: border-box;
  transition: all 0.4s ease;
}

input::placeholder {
  color: rgba(0, 255, 100, 0.9);
  opacity: 1;
}

input:focus {
  outline: none;
  border-color: var(--color-neon-green-light);
  box-shadow: 0 0 3rem rgba(0, 255, 100, 1.8); /* More intense glow */
  background: rgba(34, 34, 34, 0.9);
  transform: scale(1.005); /* Subtle scale */
}

.button-group {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem; /* Use rem */
    margin-bottom: 2.5rem; /* Use rem */
    flex-wrap: wrap;
}

.button {
  flex: 1;
  min-width: 10rem; /* Use rem */
  background: rgba(51, 51, 51, 0.7);
  color: var(--color-neon-green);
  border: 2px solid var(--color-neon-green);
  padding: 1rem 1.5rem; /* Use rem */
  font-size: 1rem; /* Use rem */
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.4s ease;
  border-radius: var(--border-radius-small);
  box-shadow: 0 0 1rem rgba(0, 255, 100, var(--shadow-intensity-medium));
  letter-spacing: 0.15rem; /* Use rem */
  text-align: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-weight: 700;
}

/* Animated border effect for buttons */
.button::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(transparent 0deg, transparent 90deg, var(--color-neon-green) 90deg, var(--color-neon-green) 180deg, transparent 180deg, transparent 270deg, var(--color-neon-green) 270deg, var(--color-neon-green) 360deg);
  transform-origin: center center;
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
  opacity: 0.7;
}

@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.button:hover:not(.disabled) {
  background: var(--color-neon-green);
  color: var(--color-dark-bg);
  box-shadow: 0 0 3rem rgba(0, 255, 100, 2);
  transform: translateY(-0.3rem) scale(1.02); /* Subtle lift and scale */
}

.button.disabled {
  opacity: 0.2;
  cursor: not-allowed;
  box-shadow: none;
  border-color: #555;
  color: #888;
}

.clear-button {
  border-color: var(--color-neon-red);
  color: var(--color-neon-red);
  box-shadow: 0 0 1rem rgba(255, 51, 0, var(--shadow-intensity-medium));
}

.clear-button::before {
  background: conic-gradient(transparent 0deg, transparent 90deg, var(--color-neon-red) 90deg, var(--color-neon-red) 180deg, transparent 180deg, transparent 270deg, var(--color-neon-red) 270deg, var(--color-neon-red) 360deg);
}

.clear-button:hover:not(.disabled) {
  background: var(--color-neon-red);
  color: var(--color-dark-bg);
  box-shadow: 0 0 3rem rgba(255, 51, 0, 2);
}

.result-section {
  display: grid;
  gap: 2rem; /* Use rem */
}

.result-box {
  background: var(--color-result-box-bg);
  backdrop-filter: blur(var(--blur-medium));
  -webkit-backdrop-filter: blur(var(--blur-medium));
  border: 1px solid rgba(0, 255, 100, var(--shadow-intensity-medium));
  border-radius: var(--border-radius-medium);
  padding: 2rem; /* Use rem */
  box-shadow: 0 0 2rem rgba(0, 255, 100, var(--shadow-intensity-medium)), inset 0 0 1.5rem rgba(0, 255, 100, var(--shadow-intensity-low));
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease;
}

.result-box:hover {
    box-shadow: 0 0 3rem rgba(0, 255, 100, var(--shadow-intensity-high)), inset 0 0 2rem rgba(0, 255, 100, var(--shadow-intensity-medium));
    transform: translateY(-0.2rem); /* Subtle lift on hover */
}

/* Inner glow effect for result boxes - more subtle */
.result-box::before {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  background: linear-gradient(45deg, transparent, rgba(0, 255, 100, 0.1), transparent);
  z-index: 0;
  filter: blur(0.8rem); /* Use rem */
  pointer-events: none;
}

.result-box h3.box-title {
  margin-top: 0;
  margin-bottom: 1.5rem; /* Use rem */
  color: var(--color-neon-green);
  text-shadow: 0 0 1rem rgba(0, 255, 100, 1);
  font-size: 1.3rem; /* Use rem */
  text-transform: uppercase;
  letter-spacing: 0.1rem; /* Use rem */
}

.result-box p {
  color: var(--color-text-light);
  font-size: 1rem; /* Use rem */
  word-break: break-all;
  background: var(--color-link-content-bg);
  padding: 1rem; /* Use rem */
  border-radius: var(--border-radius-small);
  border: 1px dashed rgba(0, 255, 100, 0.7);
  box-shadow: inset 0 0 0.8rem rgba(0, 255, 100, var(--shadow-intensity-medium)); /* Use rem */
  transition: all 0.4s ease;
}

.result-box p:hover {
    box-shadow: inset 0 0 1.2rem rgba(0, 255, 100, 1); /* More intense inner shadow on hover */
}

.source-link-content {
  color: var(--color-neon-green);
}

/* Styling for the new static loqen.me link */
.static-link-box .source-link-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.5rem; /* Use rem for consistent height */
}

.static-link {
    color: var(--color-neon-blue);
    text-decoration: none;
    font-size: 1.1rem; /* Use rem */
    letter-spacing: 0.1rem; /* Use rem */
    text-shadow: 0 0 0.8rem rgba(0, 224, 255, 0.8); /* Use rem */
    transition: all 0.3s ease;
    padding: 0.6rem 1rem; /* Use rem */
    border-radius: var(--border-radius-small);
    background: rgba(0, 0, 0, 0.4); /* Slightly darker background for the link */
    border: 1px solid rgba(0, 224, 255, 0.5);
    box-shadow: 0 0 1rem rgba(0, 224, 255, 0.4); /* Use rem */
}

.static-link:hover {
    color: #ffffff;
    text-shadow: 0 0 1.5rem rgba(0, 224, 255, 1.5), 0 0 2rem rgba(0, 224, 255, 1); /* Use rem */
    background: rgba(0, 224, 255, 0.25);
    border-color: var(--color-neon-blue);
    box-shadow: 0 0 2rem rgba(0, 224, 255, 0.8); /* Use rem */
    transform: translateY(-0.1rem); /* Subtle lift */
}


/* Adjust anchor buttons to look like buttons */
a.button {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 3.5rem; /* Use rem for consistent height */
  box-sizing: border-box;
}

/* Custom Modal Pop-up Styles */
.modal-overlay {
  display: none; /* Hidden by default */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* Very dark, semi-transparent background */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 10000; /* Above everything else */
  justify-content: center;
  align-items: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.modal-overlay.show {
  display: flex;
  opacity: 1;
}

.modal-content {
  background: rgba(30, 30, 30, 0.9); /* Darker background for modal content */
  border: 2px solid var(--color-neon-green);
  border-radius: var(--border-radius-medium);
  padding: 2rem;
  box-shadow: 0 0 3rem rgba(0, 255, 100, 0.8), inset 0 0 1.5rem rgba(0, 255, 100, 0.4);
  text-align: center;
  max-width: 400px;
  width: 90%;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.modal-overlay.show .modal-content {
  transform: translateY(0);
  opacity: 1;
}

.modal-content .box-title {
  color: var(--color-neon-green);
  text-shadow: 0 0 1rem var(--color-neon-green);
  margin-bottom: 1rem;
  font-size: 1.5rem;
}

.modal-content p {
  color: var(--color-text-light);
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

.modal-content .button {
  margin-top: 1rem;
  padding: 0.8rem 1.5rem;
  font-size: 0.9rem;
  min-width: 100px; /* Ensure button is not too small */
}


/* Responsive adjustments */
@media (max-width: 768px) {
  body {
    padding: 1.5rem 0.5rem;
  }
  .container {
    margin: 1rem auto;
    padding: 2rem;
    border-radius: 1.2rem;
  }
  h1 {
    font-size: 2.8rem;
    margin-bottom: 2rem;
    letter-spacing: 0.15rem;
  }
  .button-group {
      flex-direction: column;
      gap: 1rem;
  }
  .button {
    font-size: 0.95rem;
    padding: 0.8rem 1.2rem;
    min-width: unset;
    letter-spacing: 0.1rem;
  }
  input {
    font-size: 1rem;
    padding: 1rem;
  }
  .result-box h3.box-title {
    font-size: 1.1rem;
    letter-spacing: 0.08rem;
  }
  .result-box p {
    font-size: 0.95rem;
    padding: 0.8rem;
  }
  .static-link {
    font-size: 1rem;
  }
  .modal-content {
    padding: 1.5rem;
    width: 85%;
  }
  .modal-content .box-title {
    font-size: 1.2rem;
  }
  .modal-content p {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.2rem;
        letter-spacing: 0.08rem;
    }
    .container {
        padding: 1.5rem;
        border-radius: 1rem;
    }
    .button {
        font-size: 0.85rem;
        padding: 0.7rem 1rem;
        letter-spacing: 0.05rem;
    }
    input {
        font-size: 0.9rem;
        padding: 0.8rem;
    }
    .result-box h3.box-title {
        font-size: 1rem;
    }
    .result-box p {
        font-size: 0.85rem;
    }
    .static-link {
      font-size: 0.9rem;
    }
    .modal-content {
      padding: 1rem;
    }
    .modal-content .box-title {
      font-size: 1.1rem;
    }
    .modal-content p {
      font-size: 0.8rem;
    }
}