mypage/app/globals.css

@import "tailwindcss";

@theme {
  --color-*: initial;
}

@variant dark (&:where(.dark, .dark *));

@layer base {
  :root {
    /* Light mode colors */
    --bg-primary: 241 245 249;
    --bg-secondary: 226 232 240;
    --bg-tertiary: 203 213 225;
    --text-primary: 15 23 42;
    --text-secondary: 51 65 85;
    --text-muted: 100 116 139;
    --border-primary: 203 213 225;
    --border-subtle: 226 232 240;
  }

  .dark {
    /* Dark mode colors - INDUSTRIAL */
    --bg-primary: 24 24 27;
    --bg-secondary: 15 23 42;
    --bg-tertiary: 30 41 59;
    --text-primary: 241 245 249;
    --text-secondary: 203 213 225;
    --text-muted: 100 116 139;
    --border-primary: 71 85 105;
    --border-subtle: 30 41 59;
  }
}

@layer utilities {
  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  /* Industrial/Terminal aesthetic utilities */
  .grid-bg {
    background-image:
      linear-gradient(rgba(100, 116, 139, 0.1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(100, 116, 139, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
  }

  /* Noise texture */
  .noise-bg {
    background-image: url('/noise.svg');
    opacity: 0.03;
    pointer-events: none;
  }

  /* Scanline effect */
  .scanline {
    background: linear-gradient(
      0deg,
      transparent 0%,
      rgba(6, 182, 212, 0.1) 50%,
      transparent 100%
    );
    background-size: 100% 3px;
    pointer-events: none;
  }

  .scanline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to bottom,
      transparent 0%,
      rgba(6, 182, 212, 0.05) 50%,
      transparent 100%
    );
    animation: scanline 8s linear infinite;
    pointer-events: none;
  }

  /* CRT screen curvature effect */
  .crt-effect {
    animation: flicker 0.15s infinite;
  }

  /* Glitch text effect */
  .glitch-text {
    position: relative;
  }

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

  .glitch-text.active::before {
    color: #06b6d4;
    animation: glitch-1 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
    transform: translate(-2px, -2px);
    opacity: 0.8;
  }

  .glitch-text.active::after {
    color: #10b981;
    animation: glitch-2 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
    transform: translate(2px, 2px);
    opacity: 0.8;
  }

  @keyframes glitch-1 {
    0%, 100% { clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%); transform: translate(0); }
    20% { clip-path: polygon(0 15%, 100% 15%, 100% 65%, 0 65%); }
    40% { clip-path: polygon(0 30%, 100% 30%, 100% 70%, 0 70%); }
    60% { clip-path: polygon(0 5%, 100% 5%, 100% 60%, 0 60%); }
    80% { clip-path: polygon(0 25%, 100% 25%, 100% 40%, 0 40%); }
  }

  @keyframes glitch-2 {
    0%, 100% { clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%); transform: translate(0); }
    20% { clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%); }
    40% { clip-path: polygon(0 40%, 100% 40%, 100% 85%, 0 85%); }
    60% { clip-path: polygon(0 60%, 100% 60%, 100% 100%, 0 100%); }
    80% { clip-path: polygon(0 50%, 100% 50%, 100% 90%, 0 90%); }
  }

  /* Grayscale filter with instant toggle */
  .grayscale {
    filter: grayscale(100%);
  }

  .grayscale-0 {
    filter: grayscale(0%);
  }

  /* Cyberpunk Glitch Effect for Button */
  .glitch-btn {
    position: relative;
    animation: glitch 300ms cubic-bezier(.25, .46, .45, .94);
  }

  .glitch-layer {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
  }

  .glitch-layer:first-of-type {
    animation: glitch-1 300ms cubic-bezier(.25, .46, .45, .94);
    color: rgb(6 182 212); /* cyan-500 */
    transform: translate(-2px, 0);
    clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
  }

  .glitch-layer:last-of-type {
    animation: glitch-2 300ms cubic-bezier(.25, .46, .45, .94);
    color: rgb(16 185 129); /* emerald-500 */
    transform: translate(2px, 0);
    clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
  }

  @keyframes glitch-1 {
    0%, 100% {
      transform: translate(0, 0);
      clip-path: polygon(0 0, 100% 0, 100% 35%, 0 35%);
    }
    25% {
      transform: translate(-3px, 2px);
      clip-path: polygon(0 10%, 100% 10%, 100% 45%, 0 45%);
    }
    50% {
      transform: translate(3px, -2px);
      clip-path: polygon(0 20%, 100% 20%, 100% 55%, 0 55%);
    }
    75% {
      transform: translate(-2px, -1px);
      clip-path: polygon(0 5%, 100% 5%, 100% 40%, 0 40%);
    }
  }

  @keyframes glitch-2 {
    0%, 100% {
      transform: translate(0, 0);
      clip-path: polygon(0 65%, 100% 65%, 100% 100%, 0 100%);
    }
    25% {
      transform: translate(3px, -2px);
      clip-path: polygon(0 55%, 100% 55%, 100% 90%, 0 90%);
    }
    50% {
      transform: translate(-3px, 2px);
      clip-path: polygon(0 45%, 100% 45%, 100% 80%, 0 80%);
    }
    75% {
      transform: translate(2px, 1px);
      clip-path: polygon(0 60%, 100% 60%, 100% 95%, 0 95%);
    }
  }

  /* Border Pulse Animation */
  .border-pulse {
    animation: pulse-border 2s ease-in-out infinite;
  }

  /* Screen Flicker Effect */
  body.screen-flicker {
    animation: flicker 150ms ease-in-out;
  }

  body.screen-flicker::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(6, 182, 212, 0.1);
    pointer-events: none;
    z-index: 9999;
    animation: flicker 150ms ease-in-out;
  }

  /* CRT Noise Texture */
  @supports (filter: url('#noise')) {
    .noise-bg {
      filter: url('#noise');
    }
  }
}