/* Cutting Room — opening screen: crossfading photo collage, scrim, grain, title */

.opening {
  position: relative; overflow: hidden;
  min-height: 100svh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  padding: 120px var(--edge) 80px;
}
.opening-bg { position: absolute; inset: 0; z-index: 0; }
.bg-frame {
  position: absolute; inset: -6%; opacity: 0;
  filter: contrast(1.1) saturate(1.15);
  animation: bgcycle 89.6s ease-in-out infinite;
}
@keyframes bgcycle {
  0%, 100% { opacity: 0; }
  4% { opacity: 1; }
  16% { opacity: 1; }
  21% { opacity: 0; }
}
.hf1 { background-image: url(../assets/images/hero/hero-01.jpg); background-size: cover; background-position: center; }
.hf2 { background-image: url(../assets/images/hero/hero-02.jpg); background-size: cover; background-position: center; }
.hf3 { background-image: url(../assets/images/hero/hero-03.jpg); background-size: cover; background-position: center; }
.hf4 { background-image: url(../assets/images/hero/hero-04.jpg); background-size: cover; background-position: center; }
.hf5 { background-image: url(../assets/images/hero/hero-05.jpg); background-size: cover; background-position: center; }
.hf6 { background-image: url(../assets/images/hero/hero-06.jpg); background-size: cover; background-position: center; }
.hf7 { background-image: url(../assets/images/hero/hero-07.jpg); background-size: cover; background-position: center; }
.hf8 { background-image: url(../assets/images/hero/hero-08.jpg); background-size: cover; background-position: center; }
.hf9 { background-image: url(../assets/images/hero/hero-09.jpg); background-size: cover; background-position: center; }
.hf10 { background-image: url(../assets/images/hero/hero-10.jpg); background-size: cover; background-position: center; }
.hf11 { background-image: url(../assets/images/hero/hero-11.jpg); background-size: cover; background-position: center; }
.hf12 { background-image: url(../assets/images/hero/hero-12.jpg); background-size: cover; background-position: center; }
.hf13 { background-image: url(../assets/images/hero/hero-13.jpg); background-size: cover; background-position: center; }
.hf14 { background-image: url(../assets/images/hero/hero-14.jpg); background-size: cover; background-position: center; }
.opening-bg .bg-scrim {
  position: absolute; inset: 0; background: #000; opacity: 0.7; z-index: 1;
}
.opening-bg .grain {
  position: absolute; inset: 0; opacity: 0.5; mix-blend-mode: overlay; z-index: 1;
}
.opening-bg::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 30%, transparent 68%, var(--bg) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .bg-frame { animation: none; opacity: 0; }
  .bg-frame:first-child { opacity: 0.7; }
}
.opening .kicker, .opening h1, .opening .role { position: relative; z-index: 1; }
.opening .kicker {
  font-size: 11px; color: var(--ink-dim);
  letter-spacing: 0.16em; text-transform: uppercase;
  margin-bottom: 22px; font-weight: 400;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}
.opening h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.95; letter-spacing: -0.03em; max-width: 20ch;
}
.opening .role {
  margin-top: 26px; font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-dim);
  font-weight: 400; letter-spacing: 0.01em;
  text-shadow: 0 2px 14px rgba(0,0,0,0.55);
}

@media (max-width: 700px) {
  .opening { padding: 96px var(--edge) 56px; min-height: 100svh; }
  .opening h1 { font-size: clamp(42px, 12vw, 64px); }
  .opening .kicker { margin-bottom: 16px; }
  .opening .role { margin-top: 18px; max-width: 28ch; }
  .opening-bg .grain { opacity: 0.28; }
}