globals.css

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

@layer base {
  :root {
    --fs-content-max-width: 80rem;
    --fs-section-inline: clamp(1rem, 2vw, 1.5rem);
    --fs-section-inline-wide: clamp(1.25rem, 3vw, 3rem);
    --fs-card-surface: color-mix(in srgb, var(--fs-surface) 90%, transparent);
    --fs-card-surface-strong: color-mix(in srgb, var(--fs-surface) 96%, transparent);
    --fs-card-border-strong: color-mix(in srgb, var(--fs-border) 78%, var(--fs-surface) 22%);
  }

  html {
    scroll-behavior: smooth;
  }

  body {
    background-color: var(--fs-background);
    color: var(--fs-text-primary);
    font-family: var(--fs-font-sans);
    @apply transition-colors duration-300;
  }

  body[data-scroll-lock='true'] {
    overflow: hidden;
  }

  *:focus-visible {
    outline: 2px solid var(--fs-primary);
    outline-offset: 2px;
  }
}

@layer components {
  .marketing-card {
    background-color: var(--fs-card-surface);
    border: 1px solid var(--fs-card-border-strong);
    box-shadow: var(--fs-shadow-soft);
    @apply rounded-3xl backdrop-blur-md transition-all duration-300;
  }

  .marketing-card:hover {
    box-shadow: var(--fs-shadow-elevated);
    @apply -translate-y-1 border-[var(--fs-border)] shadow-xl;
  }

  .glass-panel {
    background-color: var(--fs-card-surface-strong);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--fs-card-border-strong);
    box-shadow: var(--fs-shadow-soft);
  }

  .card-royal {
    background-color: var(--fs-surface);
    border: 1px solid var(--fs-border);
    box-shadow: var(--fs-shadow-soft);
    @apply rounded-2xl transition-all duration-300;
  }

  .card-royal:hover {
    box-shadow: var(--fs-shadow-elevated);
    @apply -translate-y-1;
  }

  .brutal-accent-border {
    border: 2px solid var(--fs-border-hard);
  }
  .brutal-accent-line {
    border-left: 4px solid var(--fs-primary);
  }

  .btn-royal {
    @apply rounded-xl px-7 py-3.5 font-bold transition-all duration-200 active:scale-95;
    background: linear-gradient(135deg, var(--fs-primary), var(--fs-primary-hover));
    color: white;
    box-shadow: 0 4px 15px -5px var(--fs-primary);
    position: relative;
    overflow: hidden;
  }

  .btn-royal::after {
    content: '';
    @apply absolute left-1 right-1 top-px h-px rounded-full bg-white opacity-40;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-xl border px-7 py-3.5 font-bold text-white transition-all duration-200 backdrop-blur-md;
    border-color: color-mix(in srgb, var(--fs-border) 82%, white 18%);
    background-color: color-mix(in srgb, var(--fs-surface) 90%, transparent);
  }

  .btn-secondary:hover {
    background-color: color-mix(in srgb, var(--fs-surface) 96%, transparent);
    border-color: color-mix(in srgb, var(--fs-primary) 30%, var(--fs-border) 70%);
  }

  .eyebrow-label {
    @apply inline-flex items-center gap-2 rounded-full px-4 py-2 text-[0.65rem] font-bold uppercase tracking-[0.25em];
    border: 1px solid color-mix(in srgb, var(--fs-primary) 28%, var(--fs-border) 72%);
    background-color: color-mix(in srgb, var(--fs-primary) 10%, var(--fs-surface) 90%);
    color: var(--fs-primary);
  }

  .neo-border {
    border: 4px solid var(--fs-text-primary);
    box-shadow: 4px 4px 0px 0px var(--fs-text-primary);
  }

  .neo-pop-hover {
    @apply cursor-pointer transition-all duration-200;
  }

  .neo-pop-hover:hover {
    @apply -translate-y-1 border-white/20 shadow-2xl;
  }

  .neo-pop-hover-purple:hover {
    box-shadow: 8px 8px 0px 0px rgba(168, 85, 247, 1);
  }

  .neo-pop-hover-cyan:hover {
    box-shadow: 8px 8px 0px 0px rgba(6, 182, 212, 1);
  }

  .neo-pop-hover-yellow:hover {
    box-shadow: 8px 8px 0px 0px rgba(234, 179, 8, 1);
  }

  .neo-shadow-purple {
    @apply shadow-[0_0_20px_rgba(168,85,247,0.15)] hover:shadow-[0_0_30px_rgba(168,85,247,0.25)];
  }

  .neo-shadow-cyan {
    @apply shadow-[0_0_20px_rgba(34,211,238,0.15)] hover:shadow-[0_0_30px_rgba(34,211,238,0.25)];
  }

  .neo-shadow-yellow {
    @apply shadow-[0_0_20px_rgba(250,204,21,0.15)] hover:shadow-[0_0_30px_rgba(250,204,21,0.25)];
  }

  .grid-bg {
    background-image:
      linear-gradient(to right, var(--fs-border) 1px, transparent 1px),
      linear-gradient(to bottom, var(--fs-border) 1px, transparent 1px);
    background-size: 40px 40px;
    opacity: 0.15;
  }

  .glitch-text {
    @apply relative inline-block;
    text-shadow:
      0.05em 0 0 rgba(255, 0, 0, 0.75),
      -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
      0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    animation: glitch 1s infinite linear alternate-reverse;
  }

  @keyframes glitch {
    0% {
      text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
        0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    14% {
      text-shadow:
        0.05em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 255, 0, 0.75),
        0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }
    15% {
      text-shadow:
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    49% {
      text-shadow:
        -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
        0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
        -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    50% {
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    99% {
      text-shadow:
        0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
        0.05em 0 0 rgba(0, 255, 0, 0.75),
        0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }
    100% {
      text-shadow:
        -0.025em 0 0 rgba(255, 0, 0, 0.75),
        -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
        -0.025em -0.05em 0 rgba(0, 0, 255, 0.75);
    }
  }
}

@media (min-width: 768px) and (max-width: 1180px) {
  .tablet-tight-grid {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 24rem);
  }
}