/* A projected screen, framed posters and low aisle light. Consumer app only.
   The room stays still; only a user's selection changes the reflected light. */
.cinema-app {
  --auditorium-white: oklch(.96 .012 85);
  --auditorium-amber: oklch(.78 .065 72);
  --auditorium-ease: cubic-bezier(.23, 1, .32, 1);
  background: var(--bg);
}
.cinema-app .site-header {
  background: oklch(.13 .005 270 / .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.cinema-app .desktop-nav a[aria-current] { box-shadow: inset 0 -1px var(--ink); }
.cinema-app .lobby-intro.cinema-spotlight {
  min-height: calc(var(--header-height) + 25 * var(--space-unit));
  padding-top: calc(var(--header-height) + 3 * var(--space-unit));
  padding-bottom: calc(4 * var(--space-unit));
  background: var(--bg);
}
.cinema-app .spotlight-art {
  inset: calc(var(--header-height) + 2 * var(--space-unit)) var(--gutter) calc(4 * var(--space-unit)) 34%;
  border-radius: 3px;
}
.cinema-app .spotlight-art img { border-radius: inherit; object-position: 65% 42%; }
.cinema-app .spotlight-art::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, oklch(.96 .012 85 / .26), transparent) top / 100% 1px no-repeat,
    linear-gradient(90deg, transparent 35%, oklch(.96 .012 85 / .13), transparent) bottom / 100% 1px no-repeat;
}
.cinema-app .cinema-spotlight::after {
  background: linear-gradient(90deg, var(--bg) 18%, oklch(.13 .005 270 / .96) 30%, oklch(.13 .005 270 / .64) 44%, transparent 70%),
    linear-gradient(0deg, var(--bg) 5%, transparent 29%);
}
/* The light opens from a narrow projector source, not a radial glow. */
.cinema-app .cinema-spotlight::before {
  content: ''; pointer-events: none; position: absolute; z-index: 0;
  inset: calc(var(--header-height) - var(--space-unit)) var(--gutter) 0 25%;
  background: radial-gradient(ellipse 3px 2px at 96% 4%, oklch(.96 .012 85 / .5), transparent 8px),
    conic-gradient(from 216deg at 96% 4%, transparent 0deg, oklch(.96 .012 85 / .025) 2deg, oklch(.96 .012 85 / .09) 13deg, oklch(.96 .012 85 / .025) 27deg, transparent 30deg);
  mask-image: linear-gradient(230deg, #000, transparent 72%);
  -webkit-mask-image: linear-gradient(230deg, #000, transparent 72%);
}
.cinema-app .spotlight-copy { position: relative; z-index: 1; max-width: 46%; }
.cinema-app .spotlight-copy h1 { font-weight: 500; letter-spacing: -.03em; }
.cinema-app .spotlight-summary { max-width: 40ch; }
.cinema-app .spotlight-room { border: 0; border-radius: 0; padding: 0; }
.cinema-app .spotlight-meta { gap: 1em; }
.cinema-app .spotlight-selector {
  z-index: 1; bottom: calc(.75 * var(--space-unit)); gap: var(--space-unit);
}
.cinema-app .spotlight-choice {
  position: relative; padding: .75em 0; border: 0; border-radius: 0;
  background: transparent; color: var(--muted); gap: 0;
}
.cinema-app .spotlight-choice img { display: none; }
.cinema-app .spotlight-choice span { display: block; max-width: 18ch; }
.cinema-app .spotlight-choice small { display: none; }
.cinema-app .spotlight-choice::before {
  content: ''; position: absolute; pointer-events: none; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, var(--auditorium-white), transparent); opacity: .16;
  transition: opacity 180ms var(--auditorium-ease);
}
.cinema-app .spotlight-choice[aria-pressed='true'] { color: var(--ink); }
.cinema-app .spotlight-choice[aria-pressed='true']::before { opacity: .8; }
.cinema-app .lobby-genres { gap: calc(1.25 * var(--space-unit)); padding-block: .5rem 1.5rem; }
.cinema-app .lobby-genres .filter {
  padding-inline: .2em; border: 0; border-radius: 0; background: transparent;
}
.cinema-app .lobby-genres .filter:first-child {
  background: transparent; box-shadow: inset 0 -1px oklch(.96 .012 85 / .6);
}
.cinema-app .lobby-genres .filter::after { display: none; }
.cinema-app .room-plaque .room-status { display: none; }
.cinema-app .room-plaque { gap: .65em; align-items: center; justify-content: flex-start; }
.cinema-app .room-plaque::before {
  content: ''; width: 3px; height: .8em; flex-shrink: 0;
  background: var(--auditorium-amber); opacity: .45; border-radius: 1px;
}
/* Reflected poster colour is restricted to the ledge below the frame. */
.cinema-app .poster-button::before {
  inset: 98% 7% auto; height: calc(1.5 * var(--space-unit));
  background-position: center bottom; background-size: 100% auto;
  filter: blur(9px) saturate(.45); transform: scaleY(-1);
  mask-image: linear-gradient(0deg, #000, transparent);
  -webkit-mask-image: linear-gradient(0deg, #000, transparent);
  opacity: .1; transition: opacity 180ms var(--auditorium-ease);
}
.cinema-app .poster-button:is(.tilting, :focus-visible)::before { opacity: .18; }
.cinema-app .poster-surface::before {
  box-shadow: inset 0 1px oklch(.96 .012 85 / .4), inset 1px 0 oklch(.96 .012 85 / .14), inset -1px 0 oklch(0 0 0 / .3);
}
.cinema-app .card-trailer, .cinema-app .card-save {
  background: transparent; backdrop-filter: none; box-shadow: none;
}
.cinema-app .card-trailer { justify-content: flex-start; padding-inline: 0; }
.cinema-app .card-save { color: var(--muted); }
.cinema-app .card-save[aria-pressed='true'] { background: var(--surface-hi); color: var(--ink); }
.cinema-app .section::after {
  background: linear-gradient(90deg, oklch(.78 .065 72 / .32), transparent 12%, transparent 88%, oklch(.78 .065 72 / .32));
}
.cinema-app .cinema-session-strip { border-color: oklch(.78 .065 72 / .14); }
.cinema-app .footer-inner::before {
  background: linear-gradient(90deg, oklch(.78 .065 72 / .4), oklch(.78 .065 72 / .08) 12%, oklch(.78 .065 72 / .08) 88%, oklch(.78 .065 72 / .4));
}
.cinema-app dialog::backdrop { backdrop-filter: blur(8px) saturate(.6); }
.cinema-app .detail-art::after {
  display: block; content: ''; pointer-events: none; position: absolute; inset: 0;
  background: conic-gradient(from 234deg at 98% 0%, transparent, oklch(.96 .012 85 / .07) 11deg, transparent 24deg);
}
.cinema-app .detail-media.playing .detail-art::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cinema-app .spotlight-choice:hover::before { opacity: .6; }
  .cinema-app .lobby-genres .filter:hover { background: transparent; color: var(--ink); }
  .cinema-app .card-trailer:hover, .cinema-app .card-save:hover { background: var(--glass); color: var(--ink); }
}
/* Keyboard selection is immediate; focus retains its independent solid outline. */
.cinema-app :is(button, a):focus-visible,
.cinema-app :is(button, a):focus-visible::before,
.cinema-app :is(button, a):focus-visible::after,
.cinema-app .poster-button:focus-visible :is(.poster-surface, .poster-light),
.cinema-app .poster-button:focus-visible .poster-light::after { transition: none; }
@media (max-width: 1100px) {
  .cinema-app .spotlight-copy { max-width: 58%; }
  .cinema-app .spotlight-choice[aria-pressed='true'] span { display: block; }
  .cinema-app .spotlight-art { left: 28%; }
}
@media (max-width: 767px) {
  .cinema-app .lobby-intro.cinema-spotlight { min-height: 390px; padding-top: 145px; padding-bottom: 1rem; }
  .cinema-app .spotlight-art { inset: calc(var(--header-height) + .75rem) var(--gutter) auto; height: 175px; }
  .cinema-app .spotlight-art img { object-position: 65% 30%; }
  .cinema-app .cinema-spotlight::after { background: linear-gradient(0deg, var(--bg) 20%, oklch(.13 .005 270 / .97) 33%, oklch(.13 .005 270 / .4) 66%, transparent 90%); }
  .cinema-app .cinema-spotlight::before { inset: var(--header-height) 0 30% 0; opacity: .8; }
  .cinema-app .spotlight-copy { max-width: 100%; }
  .cinema-app .spotlight-selector { gap: .5rem; margin-top: .5rem; }
  .cinema-app .spotlight-choice span, .cinema-app .spotlight-choice[aria-pressed='true'] span { display: none; }
  .cinema-app .spotlight-choice::before { display: none; }
  .cinema-app .spotlight-choice::after { height: 2px; }
  .cinema-app .lobby-genres { gap: 1.25rem; padding-bottom: 1rem; }
}
.cinema-app[data-view='tv'] .spotlight-art { left: 30%; }
.cinema-app[data-view='tv'] .poster-button:focus::before { opacity: .18; transition: none; }
.cinema-app[data-view='tv'] :is(button, a):focus,
.cinema-app[data-view='tv'] :is(button, a):focus::before,
.cinema-app[data-view='tv'] :is(button, a):focus::after,
.cinema-app[data-view='tv'] .poster-button:focus :is(.poster-surface, .poster-light),
.cinema-app[data-view='tv'] .poster-button:focus .poster-light::after { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .cinema-app .spotlight-choice::before, .cinema-app .poster-button::before { transition: none; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .cinema-app .cinema-spotlight::before, .cinema-app .spotlight-art::after,
  .cinema-app .poster-button::before, .cinema-app .detail-art::after { display: none; }
  .cinema-app .site-header, .cinema-app .spotlight-copy { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cinema-app .card-trailer, .cinema-app .card-save { background: var(--surface-hi); }
  .cinema-app dialog::backdrop { background: oklch(.08 .003 270 / .96); backdrop-filter: none; }
}

/* A low aisle-light reflection travels once along the side on pointer entry.
   Only transform/opacity change. No timers, perpetual loops or image wash. */
.cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a)::before {
  background: none; filter: none; box-shadow: inset 0 0 0 1px oklch(.96 .012 85 / .1);
  transition: opacity 160ms var(--auditorium-ease);
}
.cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a)::after,
.cinema-app .poster-light::after {
  inset: 10% auto auto -3px; width: 5px; height: 30%; z-index: 2;
  background: radial-gradient(ellipse closest-side, oklch(.96 .012 85 / .64), oklch(.78 .065 72 / .28) 40%, transparent);
  filter: none; pointer-events: none; opacity: 0; transform: translateY(0);
  transition: opacity 160ms var(--auditorium-ease), transform 200ms var(--auditorium-ease);
}
.cinema-app .poster-light { background: none; filter: none; transition: opacity 160ms var(--auditorium-ease); }
.cinema-app .poster-light::before { box-shadow: inset 0 0 0 1px oklch(.96 .012 85 / .12); }
.cinema-app .poster-light::after { height: 24%; width: 6px; }
@media (hover: hover) and (pointer: fine) {
  .cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a):hover:not(:disabled)::before { opacity: .45; }
  .cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a):hover:not(:disabled)::after {
    opacity: .55; transform: translateY(160%);
    transition: opacity 220ms var(--auditorium-ease), transform 2400ms cubic-bezier(.25, .1, .25, 1);
  }
  .cinema-app .poster-button:hover .poster-light { opacity: .7; }
  .cinema-app .poster-button:hover .poster-light::after {
    opacity: .65; transform: translateY(250%);
    transition: opacity 220ms var(--auditorium-ease), transform 2800ms cubic-bezier(.25, .1, .25, 1);
  }
}
/* Keyboard/TV do not wait for the travelling reflection; solid focus remains. */
.cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a):focus-visible:not(:disabled)::after,
.cinema-app[data-view='tv'] :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a):focus::after {
  opacity: .4; transform: translateY(80%); transition: none;
}
.cinema-app .poster-button:focus-visible .poster-light::after,
.cinema-app[data-view='tv'] .poster-button:focus .poster-light::after {
  opacity: .5; transform: translateY(100%); transition: none;
}
@media (hover: none), (pointer: coarse) {
  .cinema-app :is(.button, .card-trailer, .card-save, .tv-toggle):active:not(:disabled)::after {
    opacity: .4; transform: translateY(80%); transition: none;
  }
  .cinema-app .poster-button:active .poster-light::after { opacity: .5; transform: translateY(100%); transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cinema-app :is(button, a)::after,
  .cinema-app :is(button, a):hover::after,
  .cinema-app .poster-button .poster-light::after,
  .cinema-app .poster-button:hover .poster-light::after { transform: none !important; transition: none !important; }
}
@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
  .cinema-app .poster-light,
  .cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a)::before,
  .cinema-app :is(.button, .card-trailer, .card-save, .room-link, .tv-toggle, .header-actions .icon-button, .avatar, .desktop-nav a, .filter, .text-button, .dialog-close, .trailer-toolbar button, .trailer-toolbar a)::after { display: none; }
}