/* Metaphor Pictures — custom styles layered on top of Tailwind */

:root {
  --surface: #131313;
  --surface-container-lowest: #0e0e0e;
  --primary-container: #c6e100;
  --accent-lime: #D4FF00;
  --outline-variant: #474747;
}

html {
  background-color: var(--surface);
}

body {
  background-color: var(--surface);
  color: #e2e2e2;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Custom scrollbar to match the brutalist aesthetic */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: #131313; }
::-webkit-scrollbar-thumb { background: #474747; }
::-webkit-scrollbar-thumb:hover { background: #c6e100; }

/* Marquee — used on Home page section divider */
.marquee-container {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-content {
  display: inline-block;
  animation: marquee 40s linear infinite;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Fluid display typography — keeps headlines legible on mobile */
.text-display {
  font-size: clamp(3rem, 12vw, 12rem);
  line-height: 0.85;
  letter-spacing: -0.04em;
}
.text-display-lg {
  font-size: clamp(2.5rem, 8vw, 8rem);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.text-display-md {
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.02em;
}

/* Subtle cinematic vignette for hero sections without a video yet */
.hero-vignette {
  background:
    radial-gradient(ellipse at center, rgba(255,255,255,0.03) 0%, transparent 70%),
    linear-gradient(180deg, #0e0e0e 0%, #131313 100%);
}

/* Brutalist FAQ accordion — replaces the default disclosure triangle */
details.faq {
  border-bottom: 1px solid rgba(71, 71, 71, 0.4);
  padding: 1.5rem 0;
}
details.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  font-size: 1rem;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+";
  font-size: 1.5rem;
  color: #c6e100;
  transition: transform 0.3s ease;
}
details.faq[open] summary::after { content: "—"; }
details.faq p {
  margin-top: 1rem;
  max-width: 52rem;
  color: #c6c6c6;
  font-size: 0.95rem;
  line-height: 1.7;
}

/* Form inputs — bottom hairline only per DESIGN.md */
.input-hairline {
  background: transparent;
  border: 0;
  border-bottom: 1px solid #474747;
  padding: 0.75rem 0;
  width: 100%;
  color: #ffffff;
  font-family: "Inter", sans-serif;
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}
.input-hairline:focus {
  outline: 0;
  border-bottom-color: #c6e100;
}
.input-hairline::placeholder { color: #6b6b6b; }
select.input-hairline { appearance: none; background-image: none; }

/* Film card hover — subtle scale on image, no shadow */
.film-card:hover img {
  transform: scale(1.04);
}
.film-card img {
  transition: transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hide class used by film filters */
.film-card.filtered-out { display: none !important; }