@import "tailwindcss";
@import "lenis/dist/lenis.css";

@theme inline {
  --color-brass: #c4a35a;
  --color-brass-deep: #8c7030;
  --color-ink: #070807;
  --color-ink-2: #101210;
  --color-olive: #3a4633;
  --color-ranger: #6b7c4e;
  --color-paper: #ece7da;
  --color-paper-2: #d9d2c2;
  --color-mute: #8a867c;
  --color-line: #2a2c28;
  --font-display: var(--font-barlow);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

html,
body {
  background: var(--color-ink);
  color: var(--color-paper);
}

html.lenis,
html.lenis body {
  height: auto;
}

::selection {
  background: var(--color-brass);
  color: var(--color-ink);
}

body {
  font-family: var(--font-sans), system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

.font-display {
  font-family: var(--font-display), var(--font-sans), system-ui, sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.grain {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 80;
  opacity: 0.11;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.scanlines {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 79;
  opacity: 0.04;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    #000 3px
  );
}

.hud-frame {
  position: relative;
}

.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: 1px solid var(--color-brass);
  z-index: 2;
  pointer-events: none;
}

.hud-frame::before {
  top: 12px;
  left: 12px;
  border-right: 0;
  border-bottom: 0;
}

.hud-frame::after {
  right: 12px;
  bottom: 12px;
  border-top: 0;
  border-left: 0;
}

.cursor-cross,
.cursor-dot {
  pointer-events: none;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
}

.cursor-dot {
  width: 5px;
  height: 5px;
  background: #ff1a1a;
  border-radius: 999px;
  margin: -2.5px 0 0 -2.5px;
}

.cursor-cross {
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border: 1px solid rgba(255, 26, 26, 0.85);
  border-radius: 999px;
  transition:
    width 0.2s ease,
    height 0.2s ease,
    margin 0.2s ease,
    background 0.2s ease;
}

.cursor-cross::before,
.cursor-cross::after {
  content: "";
  position: absolute;
  background: #ff1a1a;
  left: 50%;
  top: 50%;
}

.cursor-cross::before {
  width: 1px;
  height: 12px;
  transform: translate(-50%, -50%);
}

.cursor-cross::after {
  width: 12px;
  height: 1px;
  transform: translate(-50%, -50%);
}

.cursor-cross.is-hover {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(255, 26, 26, 0.16);
}

@media (pointer: coarse) {
  .cursor-dot,
  .cursor-cross {
    display: none;
  }
}

.marquee-track {
  animation: marquee 28s linear infinite;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.film-strip {
  scrollbar-width: thin;
  scrollbar-color: #c4a35a transparent;
  scroll-snap-type: x mandatory;
}

.film-strip > * {
  scroll-snap-align: start;
}

.snoopy-waddle {
  animation: snoopy-waddle 0.36s ease-in-out infinite;
  transform-origin: 50% 100%;
}

.snoopy-idle {
  animation: snoopy-idle 1.6s ease-in-out infinite;
  transform-origin: 50% 100%;
}

@keyframes snoopy-waddle {
  0%,
  100% {
    transform: translateY(0) rotate(-7deg);
  }
  50% {
    transform: translateY(-18px) rotate(7deg);
  }
}

@keyframes snoopy-idle {
  0%,
  100% {
    transform: translateY(0) rotate(-2deg);
  }
  50% {
    transform: translateY(-4px) rotate(2deg);
  }
}

.snoopy-bubble {
  background: #fff;
  color: #111;
  border: 2.5px solid #111;
  border-radius: 22px;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: 4px 4px 0 #ff1a1a;
}

.snoopy-bubble::after {
  content: "";
  position: absolute;
  left: 18px;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2.5px solid #111;
  border-bottom: 2.5px solid #111;
  transform: rotate(45deg);
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .snoopy-waddle,
  .snoopy-idle {
    animation: none;
  }
}