/*
Theme Name: [FILM TITLE]
Theme URI:
Author: [YOUR NAME]
Author URI:
Description: Single-page theme for the film [FILM TITLE]. Classic PHP templates, no block editor.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: horrorfilm
*/

/* ---------------------------------------------------------------
   TOKENS
   --------------------------------------------------------------- */
:root {
  --base:       #0a0a0b;   /* desaturated near-black, not pure #000 */
  --surface:    #141416;   /* raised fields */
  --text:       #e8e6e1;   /* warm off-white */
  --meta:       #6b6b70;   /* captions, roles, meta */
  --line:       #5c1a1a;   /* clotted red — hairline only, never fill */
  --line-quiet: #232326;   /* neutral divider */

  --measure:    62ch;      /* max reading width for prose */
  --gutter:     clamp(1.25rem, 5vw, 4rem);
  --rhythm:     clamp(6rem, 16vh, 12rem);   /* vertical space between sequence beats */

  --face-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --face-serif:   "Newsreader", Georgia, "Times New Roman", serif;
  --face-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------------------------------------------------------------
   RESET / BASE
   --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--base);
  color: var(--text);
  font-family: var(--face-serif);
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }

/* ---------------------------------------------------------------
   SCROLL REVEAL — the only motion on the page
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s ease;
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------------------------------------------------------------
   HERO / POSTER
   --------------------------------------------------------------- */
.hero {
  min-height: 92vh;
  display: grid;
  grid-template-rows: 1fr auto;
  padding: var(--gutter);
  position: relative;
  overflow: hidden;
}
.hero__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__poster img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* held back so title reads; not a decorative filter */
  filter: grayscale(20%) brightness(0.55);
}
.hero__poster::after {
  /* floor gradient so the title sits in shadow, no red, no glow */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.35) 0%, rgba(10,10,11,0.15) 45%, var(--base) 100%);
}
.hero__title {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0;
  font-family: var(--face-display);
  font-weight: 600;
  font-size: clamp(2.75rem, 9vw, 8rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hero__logline {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 1.25rem 0 0;
  max-width: 34ch;
  font-family: var(--face-serif);
  font-style: italic;
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
  color: var(--text);
}

/* ---------------------------------------------------------------
   GENERIC SECTION
   --------------------------------------------------------------- */
.section {
  padding-block: var(--rhythm);
  padding-inline: var(--gutter);
}
.section__label {
  font-family: var(--face-mono);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 1.75rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--line);
  display: inline-block;
}
.prose {
  max-width: var(--measure);
  margin-inline: auto;
}
.prose p { margin: 0 0 1.25rem; }
.prose p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------
   TRAILER
   --------------------------------------------------------------- */
.trailer__frame {
  max-width: 1100px;
  margin-inline: auto;
  aspect-ratio: 16 / 9;
  background: var(--surface);
}
.trailer__frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------------------------------------------------------------
   CREW — vertical cinematic sequence
   --------------------------------------------------------------- */
.crew {
  padding-block: var(--rhythm);
}
.crew > .section__label {
  margin-inline: var(--gutter);
}
.beat {
  margin-top: var(--rhythm);
}
.beat:first-of-type { margin-top: 2.5rem; }
.beat__still img {
  width: 100%;
  max-height: 88vh;
  object-fit: cover;
  filter: grayscale(30%) contrast(1.02);
}
.beat__caption {
  max-width: var(--measure);
  margin: 1.5rem auto 0;
  padding-inline: var(--gutter);
}
.beat__role {
  font-family: var(--face-mono);
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 0.35rem;
}
.beat__name {
  font-family: var(--face-display);
  font-weight: 500;
  font-size: clamp(1.4rem, 4vw, 2.25rem);
  letter-spacing: 0.01em;
  margin: 0;
  line-height: 1.1;
}
.beat__note {
  margin: 0.6rem 0 0;
  color: var(--meta);
  font-size: 0.95rem;
}

/* ---------------------------------------------------------------
   COLOPHON / FOOTER
   --------------------------------------------------------------- */
.colophon {
  padding: var(--rhythm) var(--gutter) 4rem;
  border-top: 1px solid var(--line-quiet);
  text-align: center;
}
.colophon__title {
  font-family: var(--face-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  font-size: clamp(1.5rem, 5vw, 2.5rem);
  margin: 0 0 0.75rem;
}
.colophon__meta {
  font-family: var(--face-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0;
}

/* ---------------------------------------------------------------
   FOCUS — quality floor
   --------------------------------------------------------------- */
a:focus-visible,
iframe:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------
   GALLERY — contact sheet. Captions always visible.
   --------------------------------------------------------------- */
.gallery {
  padding-block: var(--rhythm);
}
.gallery > .section__label {
  margin-inline: var(--gutter);
}
.gallery__grid {
  margin: 2.5rem var(--gutter) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}
.plate {
  margin: 0;
}
.plate__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--surface);
  filter: grayscale(30%) contrast(1.02);
}
.plate__cap {
  margin: 0.85rem 0 0;
  padding-top: 0.65rem;
  border-top: 1px solid var(--line);
  font-family: var(--face-mono);
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.06em;
  color: var(--meta);
}
.plate__cap b {
  display: block;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.15rem;
}