:root {
  --cinema-ink: #101b2b;
  --cinema-mint: #cbefdd;
  --cinema-glass: rgba(255, 255, 255, .13);
}
.reading-progress {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: 3px;
  background: linear-gradient(90deg, #edb7cf, #f3d476, #96dcc5);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}
body > header {
  background: rgba(255, 251, 244, .90);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 8px 28px #1924380a;
}
.cinema-hero.hero {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: 0;
  min-height: 92vh;
  min-height: 92svh;
  padding: clamp(4rem, 8vw, 8rem) max(5vw, calc((100vw - 1250px) / 2));
  overflow: hidden;
  background: radial-gradient(ellipse at 90% 45%, #405364 0, transparent 55%), #101b2b;
  color: #fff9f0;
}
.cinema-wash, .hero-film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.hero-film { z-index: -2; object-fit: cover; object-position: 65% center; }
.cinema-wash {
  z-index: -1;
  background: linear-gradient(100deg, #101b2bf5, #101b2bc2 47%, #18253940);
}
.cinema-hero .hero-copy { position: relative; z-index: 1; }
.cinema-hero .hero-copy h1, .cinema-hero .hero-copy p,
.cinema-hero .hero-notes, .cinema-hero .text-link { color: #fff9f0; }
.cinema-hero .hero-copy h1 em, .cinema-hero .hero-copy .eyebrow { color: var(--cinema-mint); }
.cinema-hero .hero-copy .eyebrow {
  display: inline-flex;
  gap: .6rem;
  align-items: center;
  padding: .65rem .9rem;
  border: 1px solid #ffffff40;
  border-radius: 99px;
  background: var(--cinema-glass);
  backdrop-filter: blur(12px);
}
.cinema-hero .hero-copy .button {
  background: var(--cinema-mint);
  color: var(--cinema-ink);
  border-color: var(--cinema-mint);
  box-shadow: 0 14px 40px #0b151b4d;
}
.cinema-hero .hero-copy .button:hover { background: #f4f9d9; }
.cinema-hero .hero-art {
  border: 1px solid #ffffff3d;
  background: linear-gradient(135deg, #ffffff23, #d6e9dd1f);
  backdrop-filter: blur(8px);
  border-radius: 30px;
  box-shadow: 0 26px 90px #050e1c70;
}
.cinema-hero .art-caption, .cinema-hero .floating-label { color: #fff9f0; }
.film-control {
  position: absolute;
  z-index: 3;
  right: clamp(1rem, 4vw, 3rem);
  bottom: 1rem;
  border-radius: 99px;
  border: 1px solid #ffffff55;
  background: #101b2bd9;
  color: white;
  padding: .7rem 1rem;
  font: inherit;
  cursor: pointer;
}
.real-gallery button, .example-grid button, .benefits article {
  transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
  box-shadow: 0 13px 36px #13233c0c;
}
.real-gallery button:hover, .example-grid button:hover,
.real-gallery button:focus-visible, .example-grid button:focus-visible {
  transform: translateY(-5px);
  border-color: #608e80;
  box-shadow: 0 20px 45px #13233c25;
}
.real-gallery button img { transition: filter .24s ease; }
.real-gallery button:hover img { filter: contrast(1.04) saturate(1.06); }
.cinema-hero .hero-copy { animation: cinema-rise .65s ease-out both; }
@keyframes cinema-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 720px) {
  .cinema-hero.hero { padding: 3.5rem 6vw 4.2rem; gap: 1.6rem; }
  .cinema-hero .hero-copy h1 { font-size: clamp(3.3rem, 13vw, 5rem); }
  .cinema-hero .hero-art { width: min(100%, 420px); justify-self: center; }
  .hero-film { object-position: 68% center; }
  .cinema-wash { background: linear-gradient(180deg, #101b2bf5, #101b2bc4 67%, #101b2b7d); }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-hero .hero-copy { animation: none; }
  .real-gallery button, .example-grid button, .benefits article { transition: none; }
}