personal_website/src/index.css

/* Pixelify Sans loaded from Google Fonts in index.html */

/* Self-hosted Minecraftia font with font-display: swap for better performance */
@font-face {
  font-family: 'Minecraftia';
  src: url('/fonts/Minecraftia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark Reader extension compatibility - prevent it from breaking our styles */
html[data-darkreader-mode="dynamic"],
html[data-darkreader-scheme="dark"] {
  /* Force our own background */
  background-color: #000 !important;
}

/* Tell Dark Reader to leave our app alone */
html {
  color-scheme: dark;
}

@layer base {
  :root {
    /* Matrix Green Theme - ALL colors are green-based */
    --background: 0 0% 0%;
    --foreground: 0 0% 100%;

    --card: 0 0% 0%;
    --card-foreground: 120 100% 50%;

    --popover: 0 0% 5%;
    --popover-foreground: 120 100% 50%;

    --primary: 120 100% 50%;
    --primary-foreground: 0 0% 0%;

    --secondary: 120 100% 15%;
    --secondary-foreground: 120 100% 50%;

    --muted: 120 20% 10%;
    --muted-foreground: 120 30% 60%;

    --accent: 120 100% 50%;
    --accent-foreground: 0 0% 0%;

    --destructive: 120 100% 50%;
    --destructive-foreground: 0 0% 0%;

    --border: 120 100% 50%;
    --input: 120 100% 25%;
    --ring: 120 100% 50%;

    --radius: 0.5rem;

    /* Custom Matrix Variables */
    --glow-color: 120 100% 50%;
    --scanline-color-1: 120 100% 50%;
    --scanline-color-2: 120 100% 50%;
    
    --sidebar-background: 0 0% 0%;
    --sidebar-foreground: 120 100% 50%;
    --sidebar-primary: 120 100% 50%;
    --sidebar-primary-foreground: 0 0% 0%;
    --sidebar-accent: 120 100% 15%;
    --sidebar-accent-foreground: 120 100% 50%;
    --sidebar-border: 120 100% 50%;
    --sidebar-ring: 120 100% 50%;
  }

  /* Red Theme Variant - ALL colors are red-based */
  .red-theme {
    --card-foreground: 0 100% 50%;

    --popover-foreground: 0 100% 50%;

    --primary: 0 100% 50%;
    --primary-foreground: 0 0% 0%;

    --secondary: 0 100% 15%;
    --secondary-foreground: 0 100% 50%;

    --muted: 0 20% 10%;
    --muted-foreground: 0 30% 60%;

    --accent: 0 100% 50%;
    --accent-foreground: 0 0% 0%;

    --destructive: 0 100% 50%;
    --destructive-foreground: 0 0% 0%;

    --border: 0 100% 50%;
    --input: 0 100% 25%;
    --ring: 0 100% 50%;

    --glow-color: 0 100% 50%;
    --scanline-color-1: 0 100% 50%;
    --scanline-color-2: 0 100% 50%;
    
    --sidebar-foreground: 0 100% 50%;
    --sidebar-primary: 0 100% 50%;
    --sidebar-accent: 0 100% 15%;
    --sidebar-accent-foreground: 0 100% 50%;
    --sidebar-border: 0 100% 50%;
    --sidebar-ring: 0 100% 50%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply bg-background text-foreground;
    font-family: 'Pixelify Sans', monospace;
    overflow-x: hidden;
  }

  h1, h2, h3, h4, h5, h6 {
    font-family: 'Minecraftia', 'Pixelify Sans', monospace;
  }

  /* Ensure text selection follows theme */
  ::selection {
    background: hsl(var(--primary) / 0.3);
    color: hsl(var(--primary));
  }

  /* Ensure focus rings follow theme */
  *:focus {
    outline-color: hsl(var(--primary));
  }

  *:focus-visible {
    outline-color: hsl(var(--primary));
  }

  /* Links should follow theme */
  a {
    color: hsl(var(--primary));
  }
}

/* CRT Scanline Effect - Visible but not overwhelming */
/* Dark Reader compatibility: use explicit colors and isolation */
.crt {
  position: relative;
  isolation: isolate;
}

.crt::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: 
    linear-gradient(
      hsl(var(--scanline-color-1) / 0.08) 50%, 
      transparent 50%
    ), 
    linear-gradient(
      90deg, 
      hsl(var(--scanline-color-2) / 0.04), 
      transparent, 
      hsl(var(--scanline-color-2) / 0.04)
    );
  z-index: 100;
  background-size: 100% 3px, 4px 100%;
  pointer-events: none;
  /* Chromium compatibility */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Force GPU acceleration */
  transform: translateZ(0);
  will-change: transform;
}

.crt::after {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.03);
  opacity: 0;
  z-index: 101;
  pointer-events: none;
  animation: flicker 0.15s infinite;
  /* Chromium compatibility */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* CRT screen curvature and vignette */
.crt > *:first-child::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    ellipse at center,
    transparent 0%,
    transparent 60%,
    rgba(0, 0, 0, 0.4) 100%
  );
  pointer-events: none;
  z-index: 99;
}

@-webkit-keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@-webkit-keyframes blink {
  50% { opacity: 0; }
}

@keyframes blink {
  50% { opacity: 0; }
}

@-webkit-keyframes glow-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
  }
  50% { 
    box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
  }
}

@keyframes glow-pulse {
  0%, 100% { 
    box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
  }
  50% { 
    box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
  }
}

@-webkit-keyframes text-glow {
  0%, 100% { 
    text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
  }
  50% { 
    text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6);
  }
}

@keyframes text-glow {
  0%, 100% { 
    text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
  }
  50% { 
    text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6);
  }
}

/* Custom Matrix Scrollbar */
* {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--primary) / 0.5) hsl(var(--background));
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: hsl(var(--background));
  border-left: 1px solid hsl(var(--primary) / 0.2);
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.3) 0%,
    hsl(var(--primary) / 0.6) 50%,
    hsl(var(--primary) / 0.3) 100%
  );
  border: 1px solid hsl(var(--primary) / 0.5);
  box-shadow: 
    0 0 8px hsl(var(--primary) / 0.4),
    inset 0 0 4px hsl(var(--primary) / 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    180deg,
    hsl(var(--primary) / 0.5) 0%,
    hsl(var(--primary) / 0.8) 50%,
    hsl(var(--primary) / 0.5) 100%
  );
  box-shadow: 
    0 0 12px hsl(var(--primary) / 0.6),
    inset 0 0 6px hsl(var(--primary) / 0.3);
}

::-webkit-scrollbar-corner {
  background: hsl(var(--background));
}

/* Utility classes - with webkit prefixes for Chromium compatibility */
.text-glow {
  text-shadow: 0 0 10px hsl(var(--glow-color) / 0.8), 0 0 20px hsl(var(--glow-color) / 0.4);
  -webkit-font-smoothing: antialiased;
}

.text-glow-strong {
  text-shadow: 0 0 15px hsl(var(--glow-color) / 1), 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 45px hsl(var(--glow-color) / 0.3);
  -webkit-font-smoothing: antialiased;
}

.box-glow {
  box-shadow: 0 0 20px hsl(var(--glow-color) / 0.4), 0 0 40px hsl(var(--glow-color) / 0.2);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.box-glow-strong {
  box-shadow: 0 0 30px hsl(var(--glow-color) / 0.6), 0 0 60px hsl(var(--glow-color) / 0.3);
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.animate-glow-pulse {
  animation: glow-pulse 2s ease-in-out infinite;
  -webkit-animation: glow-pulse 2s ease-in-out infinite;
}

.animate-text-glow {
  animation: text-glow 2s ease-in-out infinite;
  -webkit-animation: text-glow 2s ease-in-out infinite;
}

/* Custom Matrix Crosshair Cursor - Only on non-touch devices */
@media (pointer: fine) {
  .matrix-cursor,
  .matrix-cursor * {
    cursor: none !important;
  }
}

/* On touch devices, use default cursor */
@media (pointer: coarse) {
  .matrix-cursor,
  .matrix-cursor * {
    cursor: auto !important;
  }
}

.matrix-cursor-crosshair {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
}

/* Crosshair lines */
.matrix-cursor-crosshair::before,
.matrix-cursor-crosshair::after {
  content: "";
  position: absolute;
  background: hsl(var(--primary));
  box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
}

/* Vertical line */
.matrix-cursor-crosshair::before {
  width: 2px;
  height: 20px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: hsl(var(--primary)) !important;
  box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
}

/* Horizontal line */
.matrix-cursor-crosshair::after {
  width: 20px;
  height: 2px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: hsl(var(--primary)) !important;
  box-shadow: 0 0 6px hsl(var(--primary)), 0 0 12px hsl(var(--primary) / 0.5);
}

/* Center dot */
.matrix-cursor-dot {
  position: fixed;
  width: 4px;
  height: 4px;
  background: hsl(var(--primary));
  pointer-events: none;
  z-index: 10000;
  box-shadow: 0 0 8px hsl(var(--primary)), 0 0 16px hsl(var(--primary) / 0.6);
  transform: translate(-50%, -50%);
  transition: transform 0.1s;
}

.matrix-cursor-dot.hovering {
  transform: translate(-50%, -50%) scale(2);
}

/* Moving Scanline - Only active when CRT is on */
@keyframes scanline-move {
  0% {
    top: -10%;
  }
  100% {
    top: 110%;
  }
}

.crt .moving-scanline {
  position: fixed;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    hsl(var(--primary) / 0.1) 50%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 102;
  animation: scanline-move 4s linear infinite;
}

/* Hide moving scanline when CRT is disabled */
.moving-scanline {
  display: none;
}

.crt .moving-scanline {
  display: block;
}

/* Glitch Text Effect */
.glitch-active {
  animation: glitch 0.3s ease-in-out;
}

@keyframes glitch {
  0%, 100% { 
    transform: translate(0);
    filter: none;
  }
  20% { 
    transform: translate(-2px, 2px);
    filter: hue-rotate(90deg);
  }
  40% { 
    transform: translate(2px, -2px);
    filter: hue-rotate(-90deg);
  }
  60% { 
    transform: translate(-2px, -2px);
    filter: hue-rotate(180deg);
  }
  80% { 
    transform: translate(2px, 2px);
    filter: hue-rotate(-180deg);
  }
}

/* Konami Code Easter Egg Effect */
.konami-active {
  animation: konami-flash 0.5s ease-in-out 3;
}

@keyframes konami-flash {
  0%, 100% {
    filter: none;
  }
  50% {
    filter: invert(1) hue-rotate(180deg);
  }
}