@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@font-face {
  font-family: 'CameraPlainVariable';
  src: local('Helvetica Neue'), local('Arial'); /* Fallback for the decorative font */
}

body {
  font-family: 'Space Mono', monospace;
  background-color: #ffffff;
  color: #111111;
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* VHS Texture Effect */
.vhs-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  mix-blend-mode: overlay;
}

.vhs-texture::before {
  content: ""; 
  position: absolute; 
  inset: 0; 
  pointer-events: none; 
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' 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)' opacity='0.04'/%3E%3C/svg%3E");
}

/* Monochrome Vignette glow */
.monochrome-glow {
  position: fixed;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 100px 20px rgba(0, 0, 0, 0.1);
  z-index: 40;
}

/* Nav Links hover effect */
.retro-nav-link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  font-weight: bold;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: color 0.2s;
}

.retro-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #333333;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s ease-in-out;
}

.retro-nav-link:hover::after {
  transform: scaleX(100%);
}

.retro-nav-link:hover {
  color: #333333; /* retro-coral hover color */
}

.retro-nav-link.active {
  color: #333333;
}
.retro-nav-link.active::after {
  transform: scaleX(100%);
}

/* Base structural flex */
main {
  flex: 1;
}

/* Utilities for Cassette Details */
.cassette-screw {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  position: relative;
}
.cassette-screw::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 2px;
  background-color: #cccccc;
  transform: translate(-50%, -50%) rotate(45deg);
}

.cassette-grill {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cassette-grill-line {
  height: 2px;
  background-color: rgba(0,0,0,0.1);
  width: 100%;
}