/* ============================================================
   CodeRain Lab — Custom Styles
   Matrix-inspired dark theme for IT outsourcing company
   Color Palette:
     Vampire Black  #0D0208  — primary background
     Dark Green     #003B00  — secondary bg, shadows
     Islam Green    #008F11  — text, borders, UI elements
     Erin           #00FF41  — primary accent, CTAs, glow
   ============================================================ */

/* --- CSS Custom Properties --------------------------------- */
:root {
  --cr-black: #0D0208;
  --cr-dark-green: #003B00;
  --cr-green: #008F11;
  --cr-erin: #00FF41;
  --cr-white: #E0E0E0;
  --cr-glow: 0 0 8px rgba(0, 255, 65, 0.6), 0 0 20px rgba(0, 255, 65, 0.3);
  --cr-glow-strong: 0 0 12px rgba(0, 255, 65, 0.8), 0 0 40px rgba(0, 255, 65, 0.4);
}

/* --- Base -------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cr-black);
  color: var(--cr-white);
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  overflow-x: hidden;
}

/* --- Matrix Rain Canvas ------------------------------------ */
#matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.12;
}

/* --- Glitch Text Effect ------------------------------------ */
.glitch {
  position: relative;
  display: inline-block;
}

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

.glitch::before {
  animation: glitch-shift-1 3s infinite linear alternate-reverse;
  clip-path: inset(0 0 60% 0);
  color: var(--cr-erin);
  text-shadow: -2px 0 rgba(0, 255, 65, 0.7);
}

.glitch::after {
  animation: glitch-shift-2 2.5s infinite linear alternate-reverse;
  clip-path: inset(60% 0 0 0);
  color: var(--cr-green);
  text-shadow: 2px 0 rgba(0, 143, 17, 0.7);
}

@keyframes glitch-shift-1 {
  0%, 90%, 100% { transform: translate(0); }
  92% { transform: translate(-3px, 1px); }
  94% { transform: translate(3px, -1px); }
  96% { transform: translate(-2px, 0); }
  98% { transform: translate(2px, 1px); }
}

@keyframes glitch-shift-2 {
  0%, 88%, 100% { transform: translate(0); }
  90% { transform: translate(2px, -1px); }
  93% { transform: translate(-3px, 1px); }
  95% { transform: translate(1px, 0); }
  97% { transform: translate(-2px, -1px); }
}

/* --- Glow Utilities ---------------------------------------- */
.glow-text {
  text-shadow: var(--cr-glow);
}

.glow-text-strong {
  text-shadow: var(--cr-glow-strong);
}

.glow-border {
  box-shadow: var(--cr-glow);
}

.glow-border-strong {
  box-shadow: var(--cr-glow-strong);
}

/* --- Scanline Overlay -------------------------------------- */
.scanlines::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.08) 2px,
    rgba(0, 0, 0, 0.08) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* --- Terminal Cursor Blink --------------------------------- */
.cursor-blink::after {
  content: '_';
  animation: blink 1s step-end infinite;
  color: var(--cr-erin);
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

/* --- Pulse Glow Animation ---------------------------------- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 5px rgba(0, 255, 65, 0.4); }
  50% { box-shadow: 0 0 20px rgba(0, 255, 65, 0.8), 0 0 40px rgba(0, 255, 65, 0.3); }
}

.pulse-glow {
  animation: pulse-glow 2.5s ease-in-out infinite;
}

/* --- Fade-In on Scroll (JS toggles .visible) --------------- */
.fade-in-section {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- Card Hover Effect ------------------------------------- */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 20px rgba(0, 255, 65, 0.25);
  border-color: var(--cr-erin);
}

/* --- Navigation -------------------------------------------- */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background-color: var(--cr-erin);
  box-shadow: 0 0 6px rgba(0, 255, 65, 0.5);
  transition: width 0.3s ease;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* --- Mobile Menu ------------------------------------------- */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}

.mobile-menu.open {
  max-height: 300px;
}

/* --- Form Inputs ------------------------------------------- */
.matrix-input {
  background-color: rgba(0, 59, 0, 0.2);
  border: 1px solid var(--cr-green);
  color: var(--cr-white);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.matrix-input:focus {
  outline: none;
  border-color: var(--cr-erin);
  box-shadow: 0 0 8px rgba(0, 255, 65, 0.4);
}

.matrix-input::placeholder {
  color: rgba(0, 143, 17, 0.6);
}

/* --- CTA Button -------------------------------------------- */
.cta-btn {
  background-color: transparent;
  border: 2px solid var(--cr-erin);
  color: var(--cr-erin);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cta-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.15), transparent);
  transition: left 0.5s ease;
}

.cta-btn:hover {
  background-color: var(--cr-erin);
  color: var(--cr-black);
  box-shadow: var(--cr-glow-strong);
}

.cta-btn:hover::before {
  left: 100%;
}

/* --- Divider ----------------------------------------------- */
.matrix-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cr-green), var(--cr-erin), var(--cr-green), transparent);
  opacity: 0.6;
}

/* --- Scrollbar --------------------------------------------- */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--cr-black);
}

::-webkit-scrollbar-thumb {
  background: var(--cr-dark-green);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--cr-green);
}

/* --- Selection --------------------------------------------- */
::selection {
  background-color: var(--cr-erin);
  color: var(--cr-black);
}