/* Hero background only. The existing copy, type and foreground geometry are preserved. */
.hero {
  --cinema-night: #07120f;
  --cinema-edge: rgba(237, 233, 220, .32);
  --cinema-control: rgba(7, 18, 15, .72);
  isolation: isolate;
}
.hero-cinema {
  position: absolute;
  inset: 0;
  overflow: clip;
  pointer-events: none;
  z-index: -1;
  background: var(--cinema-night, #07120f);
  contain: paint;
}
.hero-cinema-canvas, .hero-cinema-still, .hero-cinema-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero-cinema-lens { position: absolute; inset: 0; }
.hero-cinema-poster {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--cinema-night) url('solar-cinema-poster-desktop.webp') center / cover no-repeat;
}
.hero-cinema-lens, .hero-cinema-canvas, .hero-cinema-shade { visibility: hidden; }
.hero-cinema[data-enhanced="true"] .hero-cinema-lens,
.hero-cinema[data-enhanced="true"] .hero-cinema-canvas,
.hero-cinema[data-enhanced="true"] .hero-cinema-shade { visibility: visible; }
.hero-cinema[data-enhanced="true"] .hero-cinema-poster { visibility: hidden; }
.hero-cinema-still {
  inset: -4%;
  width: 108%;
  height: 108%;
  background: #07120f url('solar-cinema-v2.webp') center center / cover no-repeat;
  transform: scale(1.035);
  transform-origin: 76% 58%;
}
.hero-cinema-canvas { display: block; opacity: 0; }
.hero-cinema[data-enhanced="true"] .hero-cinema-canvas { opacity: 1; }
.hero-cinema[data-enhanced="true"] .hero-cinema-still { will-change: transform; }
.hero-cinema[data-enhanced="true"] .hero-cinema-lens { will-change: transform; }
.hero-cinema-shade {
  background:
    linear-gradient(180deg, rgba(3, 10, 8, .58), rgba(3, 10, 8, .13) 19%, rgba(3, 10, 8, .2) 32%, rgba(3, 10, 8, .76) 48%, rgba(3, 10, 8, .76) 61%, rgba(3, 10, 8, .1) 77%, rgba(3, 10, 8, .36)),
    linear-gradient(90deg, rgba(3, 10, 8, .17), rgba(3, 10, 8, .14) 65%, transparent 90%);
}
.hero-cinema-toggle {
  position: absolute;
  left: 24px;
  bottom: 24px;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  margin: 0;
  border: 1px solid var(--cinema-edge);
  border-radius: 50%;
  background: var(--cinema-control);
  color: var(--cream);
  transition: border-color 160ms;
}
.hero-cinema-toggle[hidden] { display: none; }
.hero-cinema-toggle:hover { background: var(--cinema-control); border-color: var(--gold); transform: none; }
.hero-cinema-toggle:active { border-color: var(--cream); }
.hero-cinema-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.hero-cinema-toggle .cinema-play { display: none; }
.hero-cinema-toggle[aria-pressed="true"] .cinema-play { display: block; }
.hero-cinema-toggle[aria-pressed="true"] .cinema-pause { display: none; }
@media (min-width: 761px) and (max-width: 1100px) and (max-aspect-ratio: 6/5) {
  .hero-cinema-still { background-position: 92% center; transform-origin: 90% 58%; }
}
@media (max-width: 760px) {
  .hero-cinema-poster { background-image: url('solar-cinema-poster-mobile.webp'); }
  .hero-cinema-still { background-position: 92% center; transform-origin: 90% 58%; }
  .hero-cinema-shade {
    background: linear-gradient(180deg, rgba(3, 10, 8, .58), rgba(3, 10, 8, .26) 16%, rgba(3, 10, 8, .6) 25%, rgba(3, 10, 8, .89) 44%, rgba(3, 10, 8, .83) 59%, rgba(3, 10, 8, .04) 73%, rgba(3, 10, 8, .4));
  }
  .hero-cinema-toggle { left: 16px; bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-cinema-canvas { display: none; }
  .hero-cinema-toggle { display: none; }
}