/* Lacuna Productions — homepage.
   The page runs like a film: a vanity card, a letterboxed opening shot,
   a title card for the current production, the filmography, what's coming,
   and the end credits. "Lacuna" is the gap; the black bars are that gap. */

/* --frame-ratio and --frame-w live in site.css: the menu on every page follows the frame. */

.is-home { background: var(--black); }


/* ── the opening shot ───────────────────────────────────────── */

.cine {
  position: relative; background: var(--black);
  height: 100svh; min-height: 32rem;
  display: grid; grid-template-rows: minmax(7rem, 1fr) auto minmax(5.5rem, 1fr);
}

.cine__frame {
  grid-row: 2; position: relative; overflow: hidden;
  width: var(--frame-w); aspect-ratio: var(--frame-ratio); margin-inline: auto;
  background: #0b0b0b;
}
.cine__shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.cine__shot.is-active { opacity: 1; }
.cine__shot img { width: 100%; height: 100%; object-fit: cover; }
.cine__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 45%, transparent 50%, rgba(0,0,0,.5) 100%),
    linear-gradient(to top, rgba(0,0,0,.55), transparent 45%);
}


.cine__card {
  position: absolute; z-index: 2; left: clamp(1.25rem, 4%, 3.5rem); bottom: clamp(1.25rem, 8%, 3.5rem);
  max-width: 17em; margin: 0;
  font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 11; font-style: italic;
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.35rem); line-height: 1.15;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.45); text-wrap: balance;
}

.cine__bar {
  grid-row: 3; align-self: start;
  width: var(--frame-w); margin-inline: auto; padding-top: 1.1rem;
  display: flex; justify-content: space-between; align-items: baseline; gap: 1.5rem;
  font-size: .875rem; color: var(--smoke);
}
.cine__caption a { text-decoration: none; transition: opacity .6s; }
.cine__caption.is-changing a { opacity: 0; }
.cine__title { font-family: var(--serif); font-weight: 500; font-variation-settings: "opsz" 11; font-style: italic; font-size: 1.15rem; color: var(--paper); }
.cine__caption a:hover .cine__title { text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: .25em; text-decoration-thickness: 1px; }
.cine__year { margin-left: .5rem; }

.cine__count { display: flex; align-items: center; gap: .75rem; font-variant-numeric: tabular-nums; }
.cine__progress { position: relative; width: clamp(3rem, 8vw, 7rem); height: 1px; background: rgba(239,237,233,.25); overflow: hidden; }
.cine__progress span { position: absolute; inset: 0; background: var(--red); transform-origin: left; transform: scaleX(0); }
.cine.is-playing .cine__progress span { animation: progress var(--shot-ms, 7000ms) linear forwards; }
@keyframes progress { to { transform: scaleX(1); } }

/* the vanity card: a production logo before the first shot */
.cine__vanity { display: none; }
.wordmark--vanity .wordmark__name { font-size: clamp(2.4rem, 1.5rem + 4vw, 4.25rem); }
.wordmark--vanity .wordmark__sub { font-size: clamp(.7rem, .5rem + .6vw, 1.05rem); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.seen) .cine__vanity {
    display: grid; place-items: center; position: absolute; inset: 0; z-index: 5; background: var(--black);
    animation: fade-out .9s 1.7s ease both;
  }
  html:not(.seen) .cine__vanity .wordmark { animation: fade-in .9s .15s ease both; }
  html:not(.seen) .cine__frame { animation: open 1.3s 2.1s cubic-bezier(.7, 0, .2, 1) both; }
  html:not(.seen) .cine__card,
  html:not(.seen) .cine__bar,
  html:not(.seen) .is-home .site-header { animation: fade-in 1s 3.1s ease both; }

  .cine__shot.is-active img { animation: push 5s ease-out both; }
}
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; visibility: hidden; } }
@keyframes open { from { clip-path: inset(49.6% 0 49.6% 0); } to { clip-path: inset(0); } }
@keyframes push { from { transform: scale(1.06); } to { transform: scale(1); } }

/* ── sections ───────────────────────────────────────────────── */

.opening .statement { font-size: clamp(1.55rem, 1.05rem + 2vw, 2.9rem); line-height: 1.28; }
.opening .link-row { margin-top: clamp(2.5rem, 4vw, 3.5rem); }