/* ============================================================
   HEARTLINE FILMS — homepage-only styles
   Loaded by index.html AFTER css/site.css.
   Hero + leader dial · regret hook · hours vanish · take list ·
   why cards · the film strip · vibe · makers · closing.
   ============================================================ */

/* full-bleed blocks that must escape the shared measure */
.hero > .hero-screen { max-width: none; margin: 0; }
.reel > .strip-scroller {
  max-width: none;
  margin-left: calc(-1 * var(--pad-x));
  margin-right: calc(-1 * var(--pad-x));
}
/* narrower blocks stay flush with the measure's left edge, not centered */
.regret-note, .vanish-copy, .vibe-list, .maker-grid {
  margin-left: max(0px, calc((100% - var(--measure)) / 2));
  margin-right: auto;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding: 7rem var(--pad-x) 5.5rem;
  overflow: hidden;
}
.hero-screen { position: absolute; inset: 0; z-index: 0; }
.hero-poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.35) saturate(1.15) contrast(1.05) brightness(0.6);
}
/* the background loop autoplays muted after page load (js/site.js sets
   the src from data-bg-src); the poster stays painted underneath so
   there is never a blank frame. The iframe is sized as a 16:9 cover so
   the player never letterboxes inside the hero. */
.hero-slot { position: absolute; inset: 0; overflow: hidden; }
.hero-slot iframe {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: 16 / 9;
  width: auto; height: auto;
  min-width: 100%; min-height: 100%;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero-slot iframe.is-loaded { opacity: 1; }
.hero::after { /* warm wash + legibility scrim over any state */
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 16, 8, 0.92) 0%, rgba(20, 16, 8, 0.35) 45%, rgba(20, 16, 8, 0.55) 100%),
    radial-gradient(ellipse at 20% 80%, rgba(194, 47, 62, 0.18), transparent 55%);
  pointer-events: none;
}
.hero-inner, .hero-slate-l, .hero-slate-r { position: relative; z-index: 2; }

.hero-slate-l, .hero-slate-r {
  position: absolute; top: 4.6rem;
  border: 0; padding: 0; margin: 0;
  font-size: 0.68rem; color: var(--bone-dim);
}
.hero-slate-l { left: var(--pad-x); }
.hero-slate-r { right: var(--pad-x); text-align: right; }

.hero-inner { max-width: var(--measure); margin: 0 auto; width: 100%; }

.hero-title {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 0.88;
  letter-spacing: 0.005em;
  font-size: clamp(3.4rem, 11.5vw, 9rem);
  margin: 0 0 1.6rem;
}
.ht-line { display: block; }
.hero-title .ht-red {
  transform: skewX(-8deg);
  transform-origin: left bottom;
  text-shadow: 6px 0 0 rgba(194, 47, 62, 0.35), 12px 0 0 rgba(194, 47, 62, 0.15);
}
.hero-title .ht-amber { text-decoration: underline;
  text-decoration-thickness: 0.06em; text-underline-offset: 0.08em; }

.hero-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 700;
  max-width: 38em; margin-bottom: 0.75rem;
}
.hero-line { color: var(--bone-dim); max-width: 44em; margin-bottom: 1.9rem; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.9rem; }

.hero-scarcity {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--kodak);
  border: 1px dashed rgba(242, 193, 78, 0.45);
  padding: 0.55rem 0.9rem;
  margin: 0;
}

@media (max-width: 700px) {
  .hero-slate-r { display: none; }
}

/* ============================================================
   REGRET HOOK — darkroom safelight panel
   ============================================================ */
.regret {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(194, 47, 62, 0.28), transparent 65%),
    linear-gradient(var(--safelight-deep), #3c1017);
  border-top: 1px solid rgba(194, 47, 62, 0.5);
  border-bottom: 1px solid rgba(194, 47, 62, 0.5);
}
.regret .slate { border-left-color: var(--kodak); color: #e8b9a8; }
.regret-note { max-width: 46em; }
.regret-note p {
  font-size: clamp(1.2rem, 2.4vw, 1.65rem);
  line-height: 1.55;
  color: #f7e3d2;
  margin: 0;
}
.regret-note strong { color: var(--kodak); }

/* ============================================================
   HOURS VANISH
   ============================================================ */
.vanish { text-align: left; }
.dh-fade, .dh-stay { display: block; }
.dh-fade {
  color: var(--bone-dim);
  opacity: 0.55;
  text-decoration: line-through;
  text-decoration-color: rgba(194, 47, 62, 0.75);
  text-decoration-thickness: 0.045em;
}
.dh-stay { color: var(--kodak); }
.vanish-copy { max-width: 42em; color: var(--bone); }
.vanish-punch strong { color: var(--amber); font-size: 1.15em; }

/* ============================================================
   NOT JUST ANOTHER — take list
   ============================================================ */
.take-list {
  --take-line: clamp(1.25rem, 2.6vw, 1.8rem);
  display: grid; gap: 0; border-top: 1px solid var(--line);
}
.take {
  display: grid;
  grid-template-columns: 8.5rem 1fr;
  /* baseline alignment put the tag's *border box* on the copy's baseline,
     which read as a half-line drop. Align to the top instead and give the
     tag the exact height of the copy's first line so it centres on it. */
  align-items: start;
  gap: 1.25rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
}
.take-tag {
  display: flex; align-items: center; justify-content: center;
  min-height: calc(var(--take-line) * 1.2);
  font-family: var(--mono); font-weight: 700; font-size: 0.8rem;
  letter-spacing: 0.14em; color: var(--safelight);
  border: 1px solid rgba(194, 47, 62, 0.55);
  padding: 0.25rem 0.55rem;
  text-align: center;
  white-space: nowrap;
}
.take p {
  margin: 0;
  font-family: var(--display); font-weight: 700;
  font-size: var(--take-line);
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.2;
}
@media (max-width: 560px) {
  .take { grid-template-columns: 1fr; gap: 0.5rem; }
  .take-tag { justify-self: start; }
}

/* ============================================================
   WHY — lab report cards
   ============================================================ */
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}
.why-card {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 1.75rem 1.5rem 1.5rem;
  /* no overflow clipping: the stamp hangs past the card corner on purpose */
}
.why-card h3 {
  font-family: var(--display); font-weight: 800;
  font-size: 1.55rem; text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--amber);
  margin-bottom: 0.75rem;
}
.why-card p:last-child { margin-bottom: 0; color: var(--bone); }

.includes {
  background: var(--ink-2);
  border: 1px dashed rgba(232, 160, 76, 0.4);
  padding: 1.75rem 1.75rem 1.5rem;
}
.includes-h {
  font-family: var(--mono); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--kodak);
  margin-bottom: 1rem;
}
.includes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0.6rem 2rem;
}
.includes-list li { display: flex; gap: 0.7rem; align-items: baseline; }
.tick {
  color: var(--safelight); font-weight: 700;
  transform: rotate(4deg); display: inline-block;
}

/* ============================================================
   THE FILM STRIP — centerpiece
   (single-frame styles live in the shared layer; this file has
   the strip chassis: scroller, perfs, edge print, frame sizing)
   ============================================================ */
/* The section keeps the shared padding so its copy lines up with every other
   section on the page; only the strip breaks out to full bleed. (Zeroing the
   padding and pushing it back onto each child had left this whole block sitting
   one --pad-x to the right of the rest of the page.) */
.reel-sub { color: var(--bone-dim); font-size: 1.05rem; margin-bottom: 1.9rem; }

/* the first-watch reaction film — the thing the heading is actually about */
.reel-feature .frame { max-width: 52rem; }

.reel-strip-h {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 2.6vw, 1.75rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  color: var(--bone);
  margin: 3.2rem auto 0.35rem;
}
.reel-hint {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--safelight);
  margin-bottom: 2rem;
}

.strip-scroller {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: var(--safelight) var(--ink-2);
  padding-bottom: 0.75rem;
}
/* pointer drag-to-scroll (js/site.js). The grab cursor only appears once
   JS has wired it up, and only where a mouse is actually in use. */
@media (hover: hover) {
  .strip-scroller.is-draggable { cursor: grab; }
  .strip-scroller.is-dragging { cursor: grabbing; }
}
/* while dragging, swallow clicks on the frames so a drag never fires a play */
.strip-scroller.is-dragging { user-select: none; }
.strip-scroller.is-dragging .frame-face { pointer-events: none; }
.strip {
  position: relative;
  width: max-content;
  min-width: 100%;
  background: linear-gradient(#2a2013, #241b10 55%, #2a2013);
  border-top: 3px solid #0c0905;
  border-bottom: 3px solid #0c0905;
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.55), 0 0 60px rgba(232, 160, 76, 0.07);
  padding: 3.1rem clamp(1.25rem, 4vw, 3rem) 2.4rem;
}
/* sprocket perforations along the top edge (Super 8: one row) */
.strip-perfs {
  position: absolute; top: 0.55rem; left: 0; right: 0; height: 1.5rem;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='56' height='24'><rect x='18' y='3' width='20' height='18' rx='4' fill='%23141008'/><rect x='18' y='3' width='20' height='18' rx='4' fill='none' stroke='%23f2c14e' stroke-opacity='0.18'/></svg>");
  background-repeat: repeat-x;
}
.frames {
  display: flex;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  align-items: flex-start;
}
.frames .frame { width: clamp(17rem, 74vw, 33rem); flex: 0 0 auto; }

/* edge print marquee along the bottom of the strip */
.strip-edge {
  position: absolute; left: 0; right: 0; bottom: 0.45rem;
  overflow: hidden;
}
.edge-track {
  display: flex; width: max-content;
  animation: edge-scroll 46s linear infinite;
}
.edge-track span {
  font-family: var(--mono); font-weight: 700; font-size: 0.66rem;
  letter-spacing: 0.34em; text-transform: uppercase;
  color: rgba(242, 193, 78, 0.5);
  white-space: nowrap;
  padding-right: 2rem;
}
@keyframes edge-scroll { to { transform: translateX(-50%); } }

/* ============================================================
   WE MIGHT VIBE — compatibility test form
   ============================================================ */
.vibe {
  background: linear-gradient(var(--ink-2), var(--ink));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.vibe-list { max-width: 46rem; }
.vibe-item {
  display: flex; align-items: baseline; gap: 1rem;
  padding: 1.1rem 0.25rem;
  border-bottom: 1px dashed rgba(232, 160, 76, 0.3);
}
.vibe-check { color: var(--kodak); font-size: 1.35rem; line-height: 1; flex: 0 0 auto; }
.vibe-text {
  font-family: var(--display); font-weight: 800;
  font-size: clamp(1.3rem, 3vw, 2rem);
  text-transform: uppercase; letter-spacing: 0.02em;
  line-height: 1.15;
}
.vibe-note {
  margin-left: auto;
  font-family: var(--mono); font-weight: 700; font-size: 0.72rem;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bone-dim);
  transform: rotate(-2deg);
  white-space: nowrap;
}
.vibe-note-red { color: var(--safelight); }
@media (max-width: 640px) {
  .vibe-item { flex-wrap: wrap; }
  .vibe-note { margin-left: 2.35rem; }
}

/* ============================================================
   FILMMAKERS — contact-sheet portraits
   ============================================================ */
.maker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 2rem;
  max-width: 62rem;
}
.maker-card { text-align: left; }
.maker-photo {
  position: relative;
  border: 2px solid #0c0905;
  outline: 1px solid rgba(242, 193, 78, 0.25);
  outline-offset: 6px;
  overflow: hidden;
  margin-bottom: 1.1rem;
  background: var(--ink-3); /* visible frame while the photo paints */
  aspect-ratio: 4 / 5;
}
.maker-photo img {
  width: 100%; height: 100%; object-fit: cover;
  filter: sepia(0.3) saturate(1.08) contrast(1.03) brightness(0.95);
  /* transform only: animating `filter` re-runs the whole pixel pipeline
     every frame and drops the framerate on image-heavy pages */
  transition: transform 0.4s ease;
}
@media (hover: hover) {
  .maker-card:hover .maker-photo img { transform: scale(1.03); }
}

/* Igor's placeholder: a film-slate frame in place of a headshot */
.maker-slate {
  display: flex; flex-direction: column;
  background: linear-gradient(#241b10, #17110a 70%);
}
.maker-slate-clap {
  height: 2.4rem; flex: 0 0 auto;
  background: repeating-linear-gradient(-55deg,
    #0c0905 0 16px, rgba(240, 228, 206, 0.85) 16px 32px);
  border-bottom: 2px solid #0c0905;
}
.maker-slate-body {
  display: flex; flex-direction: column; justify-content: center;
  flex: 1 1 auto;
  gap: 0.9rem;
  padding: 1.5rem 1.25rem;
}
.maker-slate-row {
  display: flex; align-items: baseline; gap: 0.75rem;
  font-family: var(--mono); font-weight: 700; font-size: 0.82rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bone);
  border-bottom: 1px dashed rgba(232, 160, 76, 0.35);
  padding-bottom: 0.55rem;
}
.maker-slate-row > span:first-child {
  flex: 0 0 auto;
  font-size: 0.66rem; letter-spacing: 0.22em;
  color: var(--bone-dim);
}
.maker-name {
  font-family: var(--display); font-weight: 900; font-size: 2.1rem;
  text-transform: uppercase; letter-spacing: 0.03em;
}
.maker-role {
  font-family: var(--mono); font-weight: 700; font-size: 0.75rem;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--safelight);
  margin: 0.15rem 0 0.7rem;
}
.maker-bio { color: var(--bone-dim); margin: 0; max-width: 30em; }

/* ============================================================
   CLOSING CTA — projector beam
   ============================================================ */
.closing {
  text-align: center;
  background:
    radial-gradient(ellipse 60% 90% at 50% -10%, rgba(242, 193, 78, 0.16), transparent 70%),
    linear-gradient(var(--ink), #0e0a05);
  border-top: 1px solid var(--line);
}
.closing-h { font-size: clamp(2.8rem, 8vw, 6rem); }
.closing-price { font-size: 1.15rem; max-width: 40em; }
.closing-price strong { color: var(--kodak); font-size: 1.25em; }
.closing-soft { color: var(--bone-dim); max-width: 44em; }

/* ============================================================
   REDUCED MOTION — homepage-only animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .edge-track { animation: none; }
  .maker-photo img { transition: none; }
  .maker-card:hover .maker-photo img { transform: none; }
  /* no autoplaying background motion: keep the still poster instead */
  .hero-slot { display: none; }
}