/* Décor Phantom original : sanctuaire, brume et lumières violettes. */
.hero-cinema {
  min-height: 100svh;
  padding: 160px clamp(24px, 7vw, 110px) 115px;
  background: #08060e;
}
.hero-cinema::after { content: none; }
.hero-media, .hero-shade { position: absolute; inset: 0; pointer-events: none; }
.hero-media { z-index: -3; overflow: hidden; }
.hero-film {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 72% center;
  filter: brightness(.94) saturate(.95);
}
.hero-shade {
  z-index: -2;
  background: linear-gradient(90deg, rgba(7,5,13,.87) 0%, rgba(9,5,18,.65) 28%, rgba(9,5,18,.33) 48%, transparent 72%),
    linear-gradient(0deg, #09070d 0%, transparent 25%, transparent 78%, rgba(7,5,13,.55) 100%);
}
.hero-cinema .hero-copy { max-width: 800px; }
.hero-cinema .eyebrow { color: #d5b0ff; font-size: 15px; letter-spacing: .22em; }
.hero-cinema h1 { font-size: clamp(68px, 7.5vw, 115px); line-height: .91; margin: 28px 0; text-shadow: 0 4px 35px rgba(0,0,0,.35); }
.hero-cinema h1 em { -webkit-text-stroke: 1px #cabbd8; }
.hero-cinema .hero-lead { max-width: 530px; color: #d0c8d9; font-size: 17px; line-height: 1.8; }
.hero-cinema .actions { margin-top: 30px; gap: 14px; }
.hero-cinema .button { min-height: 55px; }
.hero-cinema .button.primary { background: linear-gradient(115deg, #7625dc, #9943f0); border-color: #a65bf7; box-shadow: 0 8px 32px #7828e833; }
.hero-cinema .button.primary:hover { background: #9344ed; }
.hero-cinema .button.ghost { background: #0d081d55; border-color: #ffffff50; backdrop-filter: blur(8px); }
.hero-cinema .hero-badge { right: 7vw; bottom: 120px; padding-left: 24px; width: auto; text-shadow: 0 2px 10px #000; }
.hero-cinema .scroll-cue { left: clamp(24px, 7vw, 110px); bottom: 35px; display: flex; align-items: center; gap: 20px; color: #cdc0d9; font-size: 11px; }
.hero-cinema .scroll-cue span { border: 1px solid #ffffff40; display: grid; place-items: center; width: 30px; height: 38px; margin: 0; font: 18px var(--body); }
.hero-film-toggle { position: absolute; right: 7vw; bottom: 35px; display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 9px 14px; background: #0b071bb3; border: 1px solid #ffffff30; color: #d5c9e2; font: 12px var(--body); cursor: pointer; }
.hero-film-toggle[hidden] { display: none; }
.hero-film-toggle:hover { border-color: #b36cff; color: #fff; }
.hero-cinema a:focus-visible, .hero-film-toggle:focus-visible { outline: 2px solid #d5b0ff; outline-offset: 6px; }
@media (max-width: 850px) {
  .hero-cinema { padding-top: 135px; }
  .hero-cinema h1 { font-size: clamp(64px, 11vw, 92px); }
  .hero-film { object-position: 74% center; }
  .hero-shade { background: linear-gradient(90deg, #090510c9, #09051055), linear-gradient(0deg, #09070d, #09070d33 55%, #09070d55); }
}
@media (max-width: 520px) {
  .hero-cinema { padding: 120px 22px 105px; }
  .hero-cinema h1 { font-size: clamp(49px, 13.5vw, 70px); line-height: .97; margin: 25px 0; }
  .hero-cinema .eyebrow { font-size: 12px; letter-spacing: .13em; }
  .hero-cinema .hero-lead { font-size: 15px; line-height: 1.7; }
  .hero-cinema .actions { margin-top: 24px; gap: 10px; }
  .hero-cinema .button { min-height: 50px; }
  .hero-cinema .scroll-cue { left: 22px; bottom: 25px; font-size: 9px; gap: 10px; }
  .hero-film-toggle { right: 22px; bottom: 25px; padding: 9px 10px; font-size: 10px; }
}