/* Dark Zone Films - a dark screening room.
   Typographic identity: solid DARK, outlined ZONE, red FILMS.
   Production DNA: scene numbers, timecodes, marquee, grain. */

:root {
  --bg: #0a0a0c;
  --panel: #131316;
  --panel-lift: #1a1a1f;
  --line: #26262c;
  --text: #ededea;
  --text-dim: #9c9ca6;
  --red: #e5372b;
  --red-dim: #b02a21;
  --mega: "Archivo Black", "Arial Black", sans-serif;
  --display: "Space Grotesk", "Helvetica Neue", sans-serif;
  --body: "Inter", "Helvetica Neue", sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--body);
  font-size: 1.0425rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--red); color: #fff; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- wordmark (nav + footer) ---------- */

.brand { text-decoration: none; }

.wm-dark, .wm-zone, .wm-films {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
}
.wm-dark { color: var(--text); }
.wm-zone {
  color: transparent;
  -webkit-text-stroke: 1px var(--text);
  margin-left: 0.12em;
}
.wm-films { color: var(--red); margin-left: 0.3em; font-weight: 500; }

/* ---------- nav ---------- */

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.2rem clamp(1.25rem, 4vw, 2.5rem);
}

.nav-links {
  display: flex;
  gap: clamp(1rem, 2.5vw, 2rem);
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.nav-links a { color: var(--text-dim); text-decoration: none; }
.nav-links a:hover { color: var(--text); }

/* ---------- buttons & chips ---------- */

.btn {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--red);
  padding: 0.8rem 1.7rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.btn:hover {
  background: var(--red-dim);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -10px rgba(229, 55, 43, 0.5);
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.05); box-shadow: none; }

.btn-big { font-size: 1.15rem; padding: 1rem 2.2rem; }

.chip {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  text-decoration: none;
  transition: color 140ms ease, border-color 140ms ease;
}
.chip:hover { color: var(--text); border-color: var(--red); }
.chip-wink { border-style: dashed; }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.2rem;
}
.chip-row.center { justify-content: center; }

/* ---------- hero: the typographic ident ---------- */

.hero {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem) clamp(2.5rem, 6vh, 4rem);
}

/* film grain + red projector leak, hero only */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(55% 40% at 78% 18%, rgba(229, 55, 43, 0.13) 0%, transparent 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.slate-line {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 0.5rem 0;
  margin-bottom: clamp(1.5rem, 4vh, 3rem);
}

.mega {
  font-family: var(--mega);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(4.2rem, 15.5vw, 12.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
}

.mega-line { display: block; }

.mega-dark { color: var(--text); }

.mega-zone {
  color: transparent;
  -webkit-text-stroke: clamp(1.5px, 0.32vw, 3px) var(--text);
}
@supports not (-webkit-text-stroke: 1px black) {
  .mega-zone { color: var(--text-dim); }
}

.mega-films {
  color: var(--red);
  text-shadow: 0 0 60px rgba(229, 55, 43, 0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .mega-zone { animation: flicker 7s steps(1) infinite; }
  @keyframes flicker {
    0%, 91%, 94%, 100% { opacity: 1; }
    92%, 93% { opacity: 0.55; }
    96.5% { opacity: 0.8; }
  }
}

.hero-foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-top: clamp(1.8rem, 5vh, 3.2rem);
}

.strapline {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  line-height: 1.25;
}
.strapline .red { color: var(--red); }

.hero-sub {
  color: var(--text-dim);
  max-width: 46ch;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.4rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: fadeup 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero > *:nth-child(2) { animation-delay: 100ms; }
  .hero > *:nth-child(3) { animation-delay: 220ms; }
}
@keyframes fadeup {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

/* ---------- marquee ---------- */

.marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  padding: 0.55rem 0;
}

.marquee-track {
  display: flex;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  width: max-content;
}

@media (prefers-reduced-motion: no-preference) {
  .marquee-track { animation: marquee 36s linear infinite; }
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
}

/* ---------- scene labels ---------- */

.scene-label {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 1.2rem;
}
.scene-label b { color: var(--red); font-weight: 600; margin-right: 0.5em; }
.scene-label.center { text-align: center; }

/* ---------- sections shared ---------- */

.section-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
}
.section-title.center { text-align: center; }

.outline-word {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--red);
}
@supports not (-webkit-text-stroke: 1px black) {
  .outline-word { color: var(--red); }
}

/* ---------- featured ---------- */

.featured {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 4.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.featured-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
}

.featured-art img {
  border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
}

.featured-copy h2 {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  letter-spacing: -0.01em;
  display: inline-block;
  margin-right: 0.7rem;
}

/* scoped to the heading and prose only - the chips live in .featured-copy too
   and keep their own hover treatment */
.featured-copy h2 a,
.featured-copy p a {
  text-decoration: none;
  transition: color 140ms ease;
}
.featured-copy h2 a:hover,
.featured-copy p a:hover { color: var(--red); }

.badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  border: 1px solid rgba(229, 55, 43, 0.5);
  border-radius: 3px;
  padding: 0.25rem 0.6rem;
  vertical-align: middle;
  transform: translateY(-0.4rem);
}

.logline {
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.25rem;
  margin: 0.9rem 0 1rem;
}

.featured-copy p { color: var(--text-dim); margin-bottom: 0.9rem; }
.featured-copy .logline { color: var(--text); }
.featured-copy b { color: var(--text); }

.credit-line {
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--text-dim) !important;
  border-top: 1px solid var(--line);
  padding-top: 0.9rem;
}

/* ---------- filmstrip ---------- */

.filmstrip-wrap { margin-top: 1.4rem; }

.strip-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.6rem;
}

.filmstrip {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding: 14px 0.25rem;
  background:
    repeating-linear-gradient(90deg, transparent 0 14px, var(--panel-lift) 14px 22px, transparent 22px 36px) top / 100% 8px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 14px, var(--panel-lift) 14px 22px, transparent 22px 36px) bottom / 100% 8px no-repeat,
    var(--bg);
  scrollbar-width: thin;
}

.filmstrip img {
  flex: 0 0 auto;
  width: clamp(130px, 16vw, 180px);
  height: auto;
  border-radius: 6px;
  border: 1px solid var(--line);
}

/* ---------- work grid ---------- */

.work {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);
}

.work .section-title { margin-bottom: 0.4rem; }

.poster-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  margin-top: 2rem;
}

.poster-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.poster-card:hover {
  transform: translateY(-4px);
  border-color: rgba(229, 55, 43, 0.45);
  box-shadow: 0 24px 60px -20px rgba(229, 55, 43, 0.25);
}

.poster-frame { overflow: hidden; }
.poster-frame img { transition: transform 400ms ease; }
.poster-card:hover .poster-frame img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .poster-card, .poster-frame img { transition: none; }
}

.poster-meta { padding: 1.3rem 1.4rem 1.5rem; }

.poster-kicker {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 0.35rem;
}

.poster-meta h3, .music h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.35rem;
  margin-bottom: 0.5rem;
}

.poster-meta p, .music p { color: var(--text-dim); font-size: 0.95rem; }
.music b { color: var(--text); }

/* ---------- behind the scenes ----------
   Shares .featured-card's grid, gap and padding on purpose: the photo then
   lands in the same column as the key art above it, and the copy in the same
   column as the title, so both cards align down the page. */

.bts-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  margin-top: 1.4rem;
}

.bts-frame { position: relative; line-height: 0; }

.bts-frame img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
}

.bts-rec,
.bts-tc {
  position: absolute;
  font-family: var(--mono);
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--text);
  background: rgba(10, 10, 12, 0.72);
  padding: 0.25rem 0.55rem;
  border-radius: 3px;
  line-height: 1.4;
}

.bts-rec {
  top: 0.7rem;
  left: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.bts-tc {
  bottom: 0.7rem;
  right: 0.7rem;
  letter-spacing: 0.04em;
}

.bts-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 6px rgba(229, 55, 43, 0.8);
}
@media (prefers-reduced-motion: no-preference) {
  .bts-dot { animation: rec-pulse 1.8s ease-in-out infinite; }
  @keyframes rec-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }
}

.bts-copy .scene-label { margin-bottom: 0.6rem; }

.bts-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  letter-spacing: -0.01em;
  margin-bottom: 0.7rem;
}

.bts-copy p { color: var(--text-dim); margin-bottom: 0.9rem; }
.bts-copy b { color: var(--text); }
.bts-copy .credit-line { margin-bottom: 0; }

/* music band */

.music {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 2rem;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: clamp(1.4rem, 3vw, 2.2rem);
  margin-top: 1.4rem;
}
.music .chip-row { justify-content: flex-end; margin-top: 0; }

/* ---------- about ---------- */

.about {
  max-width: 1000px;
  margin: 0 auto;
  padding: clamp(2.5rem, 7vh, 5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.about-statement p { color: var(--text-dim); margin-top: 1.2rem; max-width: 62ch; }

.motto {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--red) !important;
}

.do-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 2.4rem;
}

.do-item {
  position: relative;
  border-top: 2px solid var(--red);
  background: var(--panel);
  border-radius: 0 0 10px 10px;
  padding: 1.2rem 1.2rem 1.4rem;
}
.do-num {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-dim);
}
.do-item h3 {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 0.4rem;
}
.do-item p { color: var(--text-dim); font-size: 0.9rem; }

/* ---------- packages: the rate card ----------
   Builds on .do-grid / .do-item. Red stays the structural accent; each tier
   gets one metallic tone on its top rule and name, and nothing else. */

.packages {
  max-width: 1200px;
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 4rem) clamp(1.25rem, 4vw, 2.5rem);
}

.packages-lede {
  color: var(--text-dim);
  max-width: 68ch;
  margin-top: 0.8rem;
}
.packages-lede b { color: var(--text); }

.tiers { margin-top: 2rem; }

.tier { display: flex; flex-direction: column; }

.tier-name {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.tier-price {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-dim) !important;
  margin: 0.7rem 0 0.15rem;
}
.tier-price b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-top: 0.1rem;
}

.tier-spec {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-dim) !important;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.7rem;
  margin-bottom: 0.7rem;
  /* two lines' worth, so the rule lands at the same height on every card */
  min-height: 3.1rem;
}

.tier.bronze   { border-top-color: #b3763f; }
.tier.silver   { border-top-color: #b9bdc6; }
.tier.gold     { border-top-color: #d8a52e; }
.tier.platinum { border-top-color: #cdd6e8; }

.tier.bronze   .tier-name { color: #b3763f; }
.tier.silver   .tier-name { color: #b9bdc6; }
.tier.gold     .tier-name { color: #d8a52e; }
.tier.platinum .tier-name { color: #cdd6e8; }

.packages-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.packages-note {
  color: var(--text-dim);
  font-size: 0.85rem;
  max-width: 62ch;
}

@media (max-width: 900px) {
  .packages-foot { justify-content: flex-start; }
}

/* ---------- team: end credits ---------- */

.team {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(229, 55, 43, 0.06) 0%, transparent 100%),
    var(--panel);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(3rem, 8vh, 5.5rem) clamp(1.25rem, 4vw, 2.5rem);
}

.credits-roll {
  max-width: 620px;
  margin: 2.5rem auto 0;
  text-align: center;
  display: grid;
  gap: 2.6rem;
}

.credit-role {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-dim);
}

.credit-name {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: 0.02em;
  margin: 0.25rem 0 0.6rem;
}

.credit-bio { color: var(--text-dim); font-size: 0.95rem; }

.credit-block .chip { margin-top: 0.9rem; }

.credit-photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1.2rem;
  border: 3px solid var(--line);
}

/* ---------- contact ---------- */

.contact {
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(3rem, 9vh, 5.5rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
}

.contact-sub { color: var(--text-dim); margin: 0.8rem 0 1.8rem; }

.contact .chip-row { margin-top: 1.6rem; }

/* ---------- footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  padding: 2.4rem 1.25rem 2.8rem;
  text-align: center;
}

.footer-line {
  font-size: 0.85rem;
  color: var(--text-dim);
  margin-top: 0.5rem;
}
.footer-line a { color: var(--text); text-decoration: none; }
.footer-line a:hover { color: var(--red); }

/* ---------- reveals ---------- */

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity 640ms ease, transform 640ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
}

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  .nav-links { display: none; }
  .hero-foot { grid-template-columns: 1fr; align-items: start; }
  .featured-card, .bts-card { grid-template-columns: 1fr; }
  .poster-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  .music { grid-template-columns: 1fr; }
  .music .chip-row { justify-content: flex-start; }
  .do-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .do-grid { grid-template-columns: 1fr; }
  .cta-row .btn { width: 100%; text-align: center; }
}