/* Encore Cinema additions to the shared Encore look: warmer projector colours alongside the brand blue. */
:root { --grad: linear-gradient(100deg, #5b96ff 0%, #8b5cf6 50%, #f59e0b 100%); }
.blob.b3 { background: #f59e0b; }
.badge:nth-child(3) { border-color: rgba(245, 158, 11, .6); color: #f7c06a; }

/* Hero: headline, then the TV app on a "screen" with a projector glow */
.hero.cinema { padding-bottom: 28px; }
.hero.cinema .hero-copy { max-width: 820px; }
.tv { position: relative; margin: 40px auto 0; max-width: 1040px; }
.tv .screen { border-radius: 14px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 0 40px 120px -30px rgba(91, 150, 255, .55), 0 0 0 10px #05080e, 0 0 0 11px #1b2436; }
.tv .screen img { display: block; width: 100%; height: auto; }
.tv .stand { width: 22%; height: 10px; margin: 18px auto 0; border-radius: 0 0 10px 10px; background: #1b2436; }
.tv::before { content: ""; position: absolute; z-index: -1; left: 10%; right: 10%; top: -30px; height: 70%;
  background: radial-gradient(ellipse at top, rgba(245, 158, 11, .18), transparent 70%); filter: blur(20px); }
.caption { color: var(--muted); font-size: 14.5px; text-align: center; margin-top: 14px; font-weight: 600; }

/* Film strip divider */
.filmstrip { height: 26px; margin: 34px 0 6px; opacity: .5;
  background: radial-gradient(circle at 12px 13px, var(--bg) 4px, transparent 4.5px) 0 0 / 24px 26px repeat-x, var(--panel2);
  border-block: 1px solid var(--line); }

/* Screens gallery */
.screens { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.screens figure { margin: 0; }
.screens img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line); }
.screens figcaption { color: var(--muted); font-size: 14.5px; margin-top: 8px; font-weight: 600; }

/* Register interest */
.interest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 36px; align-items: start; }
@media (max-width: 860px) { .interest { grid-template-columns: 1fr; } }
.small-print { font-size: 12.5px; opacity: .8; }
section[id] { scroll-margin-top: 80px; }
html { overflow-x: clip; } /* the glows and the projector beam spill past the edges on purpose */

/* ---------- Movement (everything here stops for visitors who ask for reduced motion) ---------- */
/* The TV cycles through the app's screens */
.tv .screen { position: relative; aspect-ratio: 16 / 9; background: #0a0f18; }
.tv .screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: slides 20s infinite; }
.tv .screen img:nth-child(1) { animation-delay: 0s; }
.tv .screen img:nth-child(2) { animation-delay: 5s; }
.tv .screen img:nth-child(3) { animation-delay: 10s; }
.tv .screen img:nth-child(4) { animation-delay: 15s; }
@keyframes slides { 0% { opacity: 0; transform: scale(1.02); } 4% { opacity: 1; } 25% { opacity: 1; } 30% { opacity: 0; transform: scale(1); } 100% { opacity: 0; } }
/* A projector beam sweeping gently behind the screen, with dust in the light */
.beam { position: absolute; z-index: -1; left: 50%; top: -120px; width: 140%; height: 130%; transform: translateX(-50%); pointer-events: none;
  background: conic-gradient(from 180deg at 50% 0%, transparent 160deg, rgba(255, 214, 140, .10) 175deg, rgba(255, 214, 140, .18) 180deg, rgba(255, 214, 140, .10) 185deg, transparent 200deg);
  filter: blur(8px); animation: sweep 9s ease-in-out infinite alternate; transform-origin: 50% 0; }
@keyframes sweep { from { transform: translateX(-50%) rotate(-7deg); } to { transform: translateX(-50%) rotate(7deg); } }
.tv .screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(255, 255, 255, .02); animation: flicker 3.2s steps(2) infinite; }
@keyframes flicker { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* A film reel of posters, rolling past */
.reel { overflow: hidden; margin: 22px 0 8px; padding: 14px 0; background: #05080e; border-block: 1px solid var(--line); position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.reel::before, .reel::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 1;
  background: radial-gradient(circle at 9px 4px, #1b2436 3px, transparent 3.5px) 0 0 / 18px 8px repeat-x; }
.reel::before { top: 3px; } .reel::after { bottom: 3px; }
.reel .track { display: flex; gap: 12px; width: max-content; animation: scroll 60s linear infinite; }
.reel:hover .track { animation-play-state: paused; }
.reel img { width: 120px; height: 180px; border-radius: 6px; display: block; }

@media (prefers-reduced-motion: reduce) {
  .tv .screen img { animation: none; }
  .tv .screen img:first-child { opacity: 1; }
  .beam, .tv .screen::after, .reel .track { animation: none; }
}