/* Spotlight: the site's red, glass and midnight palette, in a layered poster stage. */
.cinema-hero { --signal: #ff2038; position: relative; isolation: isolate; display: flex; flex-direction: column; margin: 88px 32px 26px; padding: 24px 32px 0; width: calc(100% - 64px); color: var(--text-primary); background: #0d121d; border: 1px solid #ffffff14; border-radius: 26px; overflow: hidden; box-shadow: 0 24px 80px #0005; }
.cinema-hero::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 1px; background: linear-gradient(90deg, transparent, #ff345e85, transparent); }
.cinema-hero button { font-family: var(--font-body); cursor: pointer; }
.cinema-hero :is(button,a):focus-visible { outline: 2px solid #80e8f8; outline-offset: 4px; }
.cinema-hero button:disabled { cursor: default; opacity: .5; }
.cinema-art { position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.cinema-art-image { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(16px); opacity: .23; }
.cinema-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #0d121df2 0%, #0d121db3 45%, #0d121d38 75%), linear-gradient(0deg, #0d121d 4%, transparent 70%); }
.cinema-masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cinema-edition { display: flex; align-items: center; gap: 9px; font-size: 10px; font-weight: 700; letter-spacing: .16em; }
.cinema-edition > i { color: var(--signal); font-size: 17px; }
.cinema-edition > span { margin-left: 8px; padding-left: 16px; border-left: 1px solid #ffffff25; font-size: 11px; letter-spacing: 0; color: var(--text-secondary); font-weight: 400; }
.cinema-live { display: inline-flex; align-items: center; gap: 7px; border: 1px solid #10b98130; border-radius: 30px; color: #71dfbc; background: #10b98109; padding: 6px 10px; font-size: 9px; white-space: nowrap; }
.cinema-live > span { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.cinema-live[data-status='offline'] { color: #dfb780; border-color: #dfb78040; }
.cinema-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 38px; min-height: 490px; padding: 36px 18px 28px; }
.cinema-copy { max-width: 620px; min-width: 0; }
.cinema-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 19px; font-size: 9px; letter-spacing: .11em; color: #9aa6bd; text-transform: uppercase; }
.cinema-kicker b { color: #ff7585; border: 1px solid #ff294039; background: #ff203813; border-radius: 6px; padding: 5px 9px; font-size: 9px; font-weight: 600; }
.cinema-title { font-family: var(--font-heading); font-size: clamp(42px, 4.7vw, 76px); font-weight: 800; line-height: 1.04; letter-spacing: -.045em; margin: 0 0 22px; overflow-wrap: anywhere; text-wrap: balance; }
.cinema-title-line { display: block; }
.cinema-title-line:last-child { color: #fff; }
.cinema-title-line:first-child:not(:last-child) { color: #c7cede; }
.cinema-title.is-long { font-size: clamp(32px, 3.4vw, 56px); }
.cinema-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; font-size: 11px; color: #b3bed0; margin-bottom: 18px; }
.cinema-meta > span:empty { display: none; }
.cinema-meta > span + span::before { content: '·'; margin-right: 9px; color: #5d6e89; }
.cinema-meta .cinema-quality { color: #91dbee; border: 1px solid #79d4e74d; background: #2fb5d50d; border-radius: 4px; font-size: 9px; padding: 2px 6px; }
.cinema-meta .cinema-quality::before { display: none; }
.cinema-description { color: #9daac0; font-size: 13px; line-height: 1.85; max-width: 450px; margin-bottom: 26px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cinema-actions { display: flex; align-items: center; gap: 10px; }
.cinema-action { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; padding: 0 21px; font-size: 12px; font-weight: 600; color: #e7edf8; border: 1px solid #ffffff1f; background: #19223399; border-radius: 12px; text-decoration: none; white-space: nowrap; transition: transform .2s, background .2s, box-shadow .2s; }
.cinema-action:hover { transform: translateY(-2px); background: #273249; }
.cinema-action-primary { background: linear-gradient(120deg, #ff263d, #db061e); color: white; border-color: #ff536153; box-shadow: 0 8px 26px #ee123328, inset 0 1px #ffffff25; }
.cinema-action-primary:hover { background: #f72b43; box-shadow: 0 10px 32px #ee123350; }
.cinema-action-primary > i:first-child { font-size: 16px; }
.cinema-action-primary > i:last-child { margin-left: 14px; opacity: .75; }
.cinema-action-save { width: 48px; padding: 0; font-size: 20px; }
.cinema-action-save[aria-pressed='true'] { color: #ff6d80; border-color: #ff203879; }
.cinema-benefits { display: flex; flex-wrap: wrap; gap: 19px; margin-top: 24px; font-size: 10px; color: #8594ac; }
.cinema-benefits span { display: inline-flex; align-items: center; gap: 6px; }
.cinema-benefits i { color: #a8b6cc; font-size: 14px; }
.cinema-benefits span:first-child i { color: #ff4f66; }
.cinema-gallery { position: relative; width: 100%; height: 430px; display: flex; align-items: center; justify-content: center; perspective: 1400px; transform-style: preserve-3d; }
.cinema-gallery::before { content: ''; position: absolute; width: 390px; height: 390px; border-radius: 50%; background: radial-gradient(circle, #ff274335 0 2%, #ff274315 24%, #ff274308 49%, transparent 70%); filter: blur(7px); animation: vault-breathe 3s ease-in-out infinite; }
.cinema-gallery::after { content: ''; position: absolute; left: 50%; bottom: 22px; width: 350px; height: 55px; border-radius: 50%; background: #000c; filter: blur(17px); transform: translateX(-50%) rotateX(68deg); }
.cinema-orbit { position: absolute; z-index: 0; width: 388px; height: 388px; border: 1px solid #ffffff10; border-radius: 50%; background: repeating-conic-gradient(from -10deg, #ffffff15 0 1deg, transparent 1deg 18deg); -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 62.3% 63%, transparent 63.3% 75%, #000 75.3% 76%, transparent 76.3%); mask: radial-gradient(circle, transparent 0 62%, #000 62.3% 63%, transparent 63.3% 75%, #000 75.3% 76%, transparent 76.3%); animation: vault-spin 32s linear infinite; }
.cinema-orbit span { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: #ff3d57; box-shadow: 0 0 0 5px #ff203814, 0 0 18px #ff2038; }
.cinema-orbit span:nth-child(1) { left: 29px; top: 95px; }
.cinema-orbit span:nth-child(2) { right: 16px; top: 185px; background: #74d8e8; box-shadow: 0 0 0 5px #74d8e814, 0 0 18px #74d8e8; }
.cinema-orbit span:nth-child(3) { left: 143px; bottom: 8px; width: 4px; height: 4px; }
.cinema-ghost-number { position: absolute; z-index: 0; right: 2%; top: -24px; font-family: var(--font-heading); font-size: 178px; font-weight: 800; letter-spacing: -.09em; line-height: 1; color: transparent; -webkit-text-stroke: 1px #ffffff0d; pointer-events: none; }
.cinema-vault-label { position: absolute; z-index: 4; top: 36px; left: calc(50% + 108px); display: flex; align-items: center; gap: 7px; color: #8e9bb0; font-size: 7px; line-height: 1.25; letter-spacing: .14em; }
.cinema-vault-label i { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #ffffff1c; border-radius: 50%; color: #ff6075; background: #0c1320d9; box-shadow: 0 8px 18px #0007; }
.cinema-poster-shell { position: relative; z-index: 3; width: 252px; height: 362px; padding: 6px; border-radius: 23px; background: linear-gradient(145deg, #ffffff46, #ffffff05 32%, #ff345d6b 70%, #ffffff20); box-shadow: 0 36px 75px #000b, 0 0 0 1px #ffffff08, 0 0 70px #ff203820; transform: rotateX(1deg) translateZ(42px); transition: transform .55s cubic-bezier(.22,1,.36,1), box-shadow .55s ease; }
.cinema-poster-shell::before { content: ''; position: absolute; inset: -12px; z-index: -1; border: 1px solid #ffffff0b; border-radius: 30px; clip-path: polygon(0 0, 38% 0, 38% 1px, 100% 1px, 100% 63%, calc(100% - 1px) 63%, calc(100% - 1px) 100%, 66% 100%, 66% calc(100% - 1px), 0 calc(100% - 1px)); }
.cinema-poster-shell:hover { transform: translateY(-9px) translateZ(70px) rotateX(0); box-shadow: 0 44px 85px #000d, 0 0 0 1px #ffffff14, 0 0 90px #ff203839; }
.cinema-scanline { position: absolute; z-index: 7; left: 14px; right: 14px; top: 12px; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent, #ff5471, transparent); box-shadow: 0 0 15px #ff2038; opacity: .8; animation: vault-scan 3s cubic-bezier(.4,0,.2,1) infinite; }
.cinema-poster { position: relative; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 17px; overflow: hidden; background: linear-gradient(135deg, #222e43, #151b29); text-align: left; }
.cinema-poster-image { width: 100%; height: 100%; object-fit: cover; transition: transform .75s cubic-bezier(.22,1,.36,1), filter .5s ease; }
.cinema-poster-shell:hover .cinema-poster-image { transform: scale(1.035); filter: saturate(1.08) contrast(1.03); }
.cinema-poster-quality { position: absolute; top: 13px; left: 13px; font-size: 8px; font-weight: 800; letter-spacing: .06em; color: white; padding: 6px 9px; border-radius: 20px; background: #07101dcc; border: 1px solid #ffffff2e; backdrop-filter: blur(12px); }
.cinema-poster-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 16px 17px; display: flex; align-items: end; gap: 10px; background: linear-gradient(0deg, #070b14fc, #070b14c7 47%, transparent); }
.cinema-poster-caption > span:first-child { flex: 1; min-width: 0; }
.cinema-poster-caption small { display: block; color: #ff7487; font-size: 7px; font-weight: 700; letter-spacing: .16em; margin-bottom: 7px; }
.cinema-poster-caption strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-family: var(--font-heading); font-size: 17px; line-height: 1.15; color: white; font-weight: 650; }
.cinema-poster-play { width: 41px; height: 41px; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; color: white; background: linear-gradient(145deg,#ff3850,#d80725); box-shadow: 0 0 0 5px #ff203817, 0 8px 28px #e5091466; font-size: 15px; transition: transform .35s cubic-bezier(.22,1,.36,1); }
.cinema-poster-shell:hover .cinema-poster-play { transform: scale(1.1) rotate(-4deg); }
.cinema-wing { position: absolute; z-index: 2; width: 143px; height: 220px; top: 106px; padding: 0; background: #101827; border: 1px solid #ffffff1c; border-radius: 15px; overflow: hidden; box-shadow: 0 23px 45px #0009; transition: transform .6s cubic-bezier(.16,1,.3,1), filter .45s ease, box-shadow .55s ease, border-color .4s ease, z-index 0s .55s; filter: brightness(.52) saturate(.58); transform-origin: center; }
.cinema-wing img { width: 100%; height: 100%; object-fit: cover; transition: transform .65s cubic-bezier(.16,1,.3,1); }
.cinema-wing span { position: absolute; inset: auto 8px 8px; display: flex; justify-content: space-between; align-items: center; padding: 9px 10px; border: 1px solid #ffffff17; border-radius: 9px; color: white; background: #07101dd6; backdrop-filter: blur(9px); font-size: 7px; letter-spacing: .16em; }
.cinema-wing span b { font-size: inherit; }
.cinema-wing-left { left: calc(50% - 250px); transform: translateZ(-35px) rotateY(23deg) rotateZ(-7deg); }
.cinema-wing-right { right: calc(50% - 250px); transform: translateZ(-35px) rotateY(-23deg) rotateZ(7deg); }
.cinema-wing:is(:hover, :focus-visible) { filter: brightness(1.05) saturate(1.04); z-index: 5; border-color: #ff637b80; box-shadow: 0 38px 65px #000d, 0 0 35px #ff20382c; transition-delay: 0s; }
.cinema-wing-left:is(:hover, :focus-visible) { transform: translate3d(-17px,-31px,80px) rotateY(0) rotateZ(-1deg) scale(1.1); }
.cinema-wing-right:is(:hover, :focus-visible) { transform: translate3d(17px,-31px,80px) rotateY(0) rotateZ(1deg) scale(1.1); }
.cinema-wing:is(:hover, :focus-visible) img { transform: scale(1.06); }
.cinema-wing::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(125deg, #ffffff2e, transparent 36% 70%, #ff203819); opacity: 0; transition: opacity .45s ease; }
.cinema-wing:is(:hover, :focus-visible)::after { opacity: 1; }
.cinema-gallery-note { position: absolute; z-index: 3; bottom: 0; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 9px; font-size: 7px; letter-spacing: .17em; color: #8290a8; }
.cinema-gallery-note i { color: #62d5b0; font-size: 11px; }
.cinema-gallery-line { width: 28px; height: 1px; background: linear-gradient(90deg,transparent,#ffffff32); }
.cinema-gallery-line:last-child { transform: scaleX(-1); }
@keyframes vault-spin { to { transform: rotate(360deg); } }
@keyframes vault-breathe { 50% { transform: scale(1.06); opacity: .72; } }
@keyframes vault-scan { 0%,12% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 75% { opacity: .45; } 88%,100% { transform: translateY(326px); opacity: 0; } }
.cinema-reel { padding: 22px 0 0; border-top: 1px solid #ffffff0c; }
.cinema-reel-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 17px; }
.cinema-reel-title { display: flex; align-items: baseline; gap: 14px; }
.cinema-reel-title h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-heading); font-size: 16px; font-weight: 600; }
.cinema-reel-title h2 > span { width: 3px; height: 15px; border-radius: 3px; background: var(--signal); box-shadow: 0 0 12px #ff203849; }
.cinema-reel-title > span { font-size: 10px; color: #75859e; }
.cinema-reel-controls { display: flex; align-items: center; gap: 7px; }
.cinema-counter { font-size: 10px; color: #76859f; margin-right: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cinema-counter b { font-weight: 600; color: white; }
.cinema-control { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid #ffffff15; border-radius: 50%; color: #c5d0e2; background: #1e293b66; }
.cinema-control:hover { background: #ff203820; border-color: #ff20386b; color: white; }
.cinema-reel-track { display: flex; gap: 12px; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x mandatory; padding: 3px 2px 16px; }
.cinema-reel-track::-webkit-scrollbar { display: none; }
.cinema-film { position: relative; flex: 0 0 calc((100% - 60px) / 6); min-width: 154px; padding: 0; border: 1px solid #ffffff1a; border-radius: 12px; text-align: left; color: #e2e8f0; overflow: hidden; background: #141e30; scroll-snap-align: start; transition: border-color .2s, transform .2s; }
.cinema-film:hover { border-color: #ffffff55; transform: translateY(-2px); }
.cinema-film.active { border-color: #ff3651; box-shadow: 0 0 0 2px #ff203816; }
.cinema-film-art { display: block; width: 100%; height: 99px; background: linear-gradient(135deg,#27344b,#101a2c); }
.cinema-film-art img { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; opacity: .65; transition: opacity .3s; }
.cinema-film.active img,.cinema-film:hover img { opacity: 1; }
.cinema-film-copy { display: block; position: relative; padding: 11px 12px 13px; }
.cinema-film-index { display: flex; align-items: center; gap: 5px; color: #7f90aa; font-size: 8px; letter-spacing: .08em; margin-bottom: 4px; }
.cinema-film.active .cinema-film-index { color: #ff697e; }
.cinema-film-name { display: block; font-size: 11px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cinema-film.active::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: #ff2038; }
.cinema-footer { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 4px 0 21px; }
.cinema-footer p { display: flex; align-items: center; gap: 6px; color: #6d7f99; font-size: 9px; }
.cinema-footer a { display: flex; align-items: center; gap: 8px; color: #aebed5; font-size: 10px; text-decoration: none; }
.cinema-footer a:hover { color: white; }
#catalogAnchor { scroll-margin-top: 80px; }
.cinema-hero.is-changing .cinema-copy { animation: spotlight-reveal .5s both; }
.cinema-hero.is-changing .cinema-poster-image { animation: spotlight-art .55s both; }
@keyframes spotlight-reveal { from { opacity: .2; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes spotlight-art { from { opacity: .2; } to { opacity: 1; } }
@media (min-width: 1700px) { .cinema-hero { padding-left: 50px; padding-right: 50px; } .cinema-stage { min-height: 540px; } .cinema-gallery { transform: scale(1.1); } }
@media (max-width: 1100px) { .cinema-hero { margin: 82px 22px 24px; width: calc(100% - 44px); padding: 22px 23px 0; } .cinema-stage { padding: 30px 0 25px; gap: 16px; min-height: 450px; grid-template-columns: 1.1fr 1fr; } .cinema-gallery { transform: scale(.84); transform-origin: center; } .cinema-title { font-size: 48px; } .cinema-action { padding: 0 14px; } .cinema-action-save { padding: 0; } .cinema-action-primary > i:last-child { display: none; } .cinema-reel-title > span { display: none; } .cinema-film { flex-basis: calc((100% - 36px) / 4); } }
@media (max-width: 760px) { .cinema-hero { margin: 76px 14px 22px; width: calc(100% - 28px); padding: 18px 20px 0; border-radius: 20px; } .cinema-edition { font-size: 8px; letter-spacing: .1em; } .cinema-edition > span { display: none; } .cinema-live { font-size: 8px; padding: 5px 8px; } .cinema-stage { display: flex; flex-direction: column-reverse; gap: 12px; padding: 2px 0 25px; } .cinema-gallery { height: 330px; transform: scale(.82); margin: -12px 0 -20px; flex-shrink: 0; } .cinema-poster { width: 218px; height: 310px; } .cinema-wing { width: 140px; height: 222px; top: 65px; } .cinema-wing-left { left: calc(50% - 192px); } .cinema-wing-right { right: calc(50% - 192px); } .cinema-gallery-note { display: none; } .cinema-ghost-number { top: 6px; right: -18px; font-size: 145px; } .cinema-copy { width: 100%; max-width: none; } .cinema-kicker { margin-bottom: 13px; font-size: 8px; gap: 7px; } .cinema-kicker b { font-size: 8px; } .cinema-title { font-size: clamp(36px, 8vw, 58px); margin-bottom: 17px; } .cinema-title.is-long { font-size: 34px; } .cinema-meta { font-size: 10px; gap: 7px; margin-bottom: 14px; } .cinema-meta > span + span::before { margin-right: 7px; } .cinema-description { font-size: 12px; line-height: 1.7; margin-bottom: 20px; } .cinema-action { min-height: 46px; font-size: 11px; padding: 0 15px; gap: 7px; } .cinema-action-primary { flex: 1; } .cinema-action-save { width: 46px; padding: 0; flex-shrink: 0; } .cinema-benefits { font-size: 9px; gap: 14px; margin-top: 19px; } .cinema-reel { padding-top: 18px; } .cinema-reel-heading { gap: 6px; } .cinema-reel-title h2 { font-size: 12px; gap: 6px; } .cinema-counter { margin-right: 2px; font-size: 9px; } .cinema-reel-controls { gap: 5px; } .cinema-control { width: 29px; height: 29px; } .cinema-film { flex-basis: 156px; } .cinema-reel-track { margin-right: -20px; padding-right: 20px; } .cinema-footer { align-items: start; padding-bottom: 18px; } .cinema-footer p { max-width: 170px; font-size: 8px; } .cinema-footer a { font-size: 9px; white-space: nowrap; } }
@media (max-width: 360px) { .cinema-hero { padding-left: 15px; padding-right: 15px; } .cinema-gallery { transform: scale(.7); margin-top: -28px; margin-bottom: -40px; } .cinema-title { font-size: 34px; } .cinema-action { padding: 0 11px; font-size: 10px; } .cinema-action-save { padding: 0; width: 40px; } .cinema-counter { display: none; } .cinema-benefits { font-size: 8px; gap: 10px; } .cinema-reel-track { margin-right: -15px; } .filters-right { flex-wrap: wrap; } }
@media (max-width: 760px) {
  .cinema-poster-shell { width: 224px; height: 318px; }
  .cinema-poster { width: 100%; height: 100%; }
  .cinema-orbit { width: 340px; height: 340px; }
  .cinema-wing { width: 127px; height: 198px; top: 76px; }
  .cinema-wing-left { left: calc(50% - 207px); }
  .cinema-wing-right { right: calc(50% - 207px); }
  .cinema-vault-label { top: 22px; left: calc(50% + 94px); }
  .cinema-ghost-number { top: -8px; font-size: 140px; }
  @keyframes vault-scan { 0%,12% { transform: translateY(0); opacity: 0; } 20% { opacity: .9; } 75% { opacity: .45; } 88%,100% { transform: translateY(282px); opacity: 0; } }
}
@media (max-width: 360px) {
  .cinema-poster-shell { width: 220px; height: 314px; }
  .cinema-vault-label { display: none; }
}
@media (prefers-reduced-motion: reduce) { .cinema-hero *, .cinema-hero *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }