gridpilot.gg/apps/website/app/globals.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

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

@layer base {
  :root {
    --color-deep-graphite: #0E0F11;
    --color-iron-gray: #181B1F;
    --color-charcoal-outline: #22262A;
    --color-primary-blue: #198CFF;
    --color-performance-green: #6FE37A;
    --color-warning-amber: #FFC556;
    --color-neon-aqua: #43C9E6;
    --sat: env(safe-area-inset-top);
    --sar: env(safe-area-inset-right);
    --sab: env(safe-area-inset-bottom);
    --sal: env(safe-area-inset-left);
  }

  * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
  }

  html {
    overscroll-behavior: none;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  body {
    @apply bg-deep-graphite text-white antialiased;
    overscroll-behavior: none;
  }

  button, a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .scroll-container {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }

  /* Mobile typography optimization - lighter and more spacious */
  @media (max-width: 640px) {
    h1 {
      font-size: clamp(1.5rem, 6vw, 2rem);
      font-weight: 600;
      line-height: 1.2;
    }
    
    h2 {
      font-size: clamp(1.125rem, 4.5vw, 1.5rem);
      font-weight: 600;
      line-height: 1.3;
    }
    
    h3 {
      font-size: 1rem;
      font-weight: 500;
    }
    
    p {
      font-size: 0.8125rem; /* 13px */
      line-height: 1.6;
    }
  }
}

@layer utilities {
  .animate-spring {
    transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  
  /* Racing stripe patterns */
  .racing-stripes {
    background: linear-gradient(
      45deg,
      transparent 25%,
      rgba(25, 140, 255, 0.03) 25%,
      rgba(25, 140, 255, 0.03) 50%,
      transparent 50%,
      transparent 75%,
      rgba(25, 140, 255, 0.03) 75%
    );
    background-size: 60px 60px;
  }
  
  /* Checkered flag pattern */
  .checkered-pattern {
    background-image:
      linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
      linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%),
      linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  }
  
  /* Speed lines animation */
  @keyframes speed-lines {
    0% {
      transform: translateX(0) scaleX(0);
      opacity: 0;
    }
    50% {
      opacity: 0.3;
    }
    100% {
      transform: translateX(100px) scaleX(1);
      opacity: 0;
    }
  }
  
  .animate-speed-lines {
    animation: speed-lines 1.5s ease-out infinite;
  }
  
  /* Racing accent line */
  .racing-accent {
    position: relative;
  }
  
  .racing-accent::before {
    content: '';
    position: absolute;
    left: -16px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, #FF0000, #198CFF);
    border-radius: 2px;
  }
  
  /* Carbon fiber texture */
  .carbon-fiber {
    background-image:
      linear-gradient(27deg, rgba(255,255,255,0.02) 5%, transparent 5%),
      linear-gradient(207deg, rgba(255,255,255,0.02) 5%, transparent 5%),
      linear-gradient(27deg, rgba(0,0,0,0.05) 5%, transparent 5%),
      linear-gradient(207deg, rgba(0,0,0,0.05) 5%, transparent 5%);
    background-size: 10px 10px;
  }

  /* Racing red-white-blue animated gradient */
  @keyframes racing-gradient {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-racing-gradient {
    background: linear-gradient(
      90deg,
      #DC0000 0%,
      #FFFFFF 25%,
      #0066FF 50%,
      #DC0000 75%,
      #FFFFFF 100%
    );
    background-size: 300% 100%;
    animation: racing-gradient 12s linear infinite;
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* Static red-white-blue gradient (no animation) */
  .static-racing-gradient {
    background: linear-gradient(
      90deg,
      #DC0000 0%,
      #FFFFFF 50%,
      #2563eb 100%
    );
    -webkit-background-clip: text;
    background-clip: text;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-racing-gradient {
      animation: none;
    }
  }

  /* Entrance animations */
  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fade-in {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.6s ease-out forwards;
  }

  .animate-fade-in {
    animation: fade-in 0.4s ease-out forwards;
  }

  @media (prefers-reduced-motion: reduce) {
    .animate-fade-in-up,
    .animate-fade-in {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}