/* Circle 9 - "a new world". The circle walks into the cinema: Cinema City's big hall, screens and graphics, in winter,
   with a flyer inspired by Frozen 2 (indigo night, ice-blue light, crystals falling around a castle). The page is
   widescreen and polished: letterboxed scenes, a projector beam, marquee bulbs on the title, soft ice-light,
   and falling crystals. Very different from the station pages before it. */

.cx-w9 { background: var(--bg); --sec: clamp(48px, 7vw, 100px); }
.cx-w9 .cx-title { font-family: var(--f-hand); letter-spacing: 0.01em; }
.cx-w9 .cx-mark { color: var(--acc); letter-spacing: 0.12em; text-transform: uppercase; }
.cx-w9 .has-bg { --bgph-tint: #1b1660; --bgph-blend: luminosity; --bgph-o: 0.45;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, #1b1660 60%, transparent) 30%, color-mix(in srgb, #1b1660 60%, transparent) 70%, var(--bg) 100%); }

/* ---------- opening: the screen lights up ---------- */
.cx-w9 .v-cinema { padding-block: clamp(120px, 14vw, 170px) clamp(80px, 10vw, 120px); }
.cx-w9 .v-cinema .cx-open-bg { inset: clamp(96px, 12vw, 130px) var(--gut) clamp(40px, 6vw, 70px); border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 1px rgba(168, 200, 255, 0.25), 0 0 140px -20px rgba(168, 200, 255, 0.55); }
.cx-w9 .v-cinema .cx-open-bg img { opacity: 0.8; }
.cx-w9 .v-cinema .cx-open-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(9, 10, 36, 0.92) 0%, rgba(27, 22, 96, 0.55) 45%, transparent 80%), linear-gradient(0deg, rgba(9, 10, 36, 0.6), transparent 40%); }
.cx-w9 .v-cinema .cx-open-in { padding-inline: clamp(20px, 4vw, 60px); }
.cx-w9 .v-cinema .cx-open-fx { position: absolute; top: 0; left: 50%; translate: -50% 0; width: 70vw; height: clamp(96px, 12vw, 130px); z-index: 0; pointer-events: none;
  background: radial-gradient(50% 100% at 50% 0%, rgba(200, 225, 255, 0.35), transparent 70%); }
.cx-w9 .cx-open-num { color: #fff; font-family: var(--f-display); text-shadow: 0 0 20px rgba(168, 200, 255, 0.9), 0 0 60px rgba(90, 60, 245, 0.8); }
.cx-w9 .cx-open-name { font-family: var(--f-hand); position: relative; width: max-content; max-width: 100%; padding: 6px 18px; border-radius: 10px;
  box-shadow: 0 0 0 3px #ffd27a; background: rgba(9, 10, 36, 0.55);
  -webkit-mask: none; }
.cx-w9 .cx-open-name::before { content: ''; position: absolute; inset: -9px; border-radius: 14px; pointer-events: none;
  background: radial-gradient(circle, #fff6d8 0 3px, transparent 4px) 0 0 / 22px 22px; -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); padding: 5px;
  animation: c9-bulbs 1.6s steps(2) infinite; opacity: 0.9; }
@keyframes c9-bulbs { 50% { opacity: 0.45; } }
.cx-w9 .cx-open::after { background: #fff; }

/* ---------- everything else sits on the big screen ---------- */
.cx-w9 .cx-screen .video, .cx-w9 .cx-clips.v-cinema .cx-loop { box-shadow: 0 0 0 1px rgba(168, 200, 255, 0.3), 0 0 80px -20px rgba(168, 200, 255, 0.55); }
.cx-w9 .cx-clips.v-cinema { background: linear-gradient(180deg, var(--bg), #0f0f3a, var(--bg)); }
.cx-w9 .cx-clips.v-cinema .cx-loop { border-radius: 6px; }
.cx-w9 .v-widescreen { padding-block: clamp(30px, 5vw, 60px); background: #000; }
.cx-w9 .v-widescreen .cx-pic { aspect-ratio: 2.39 / 1; height: auto; }
.cx-w9 .v-widescreen .cx-pic img { animation: c9-project linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
@keyframes c9-project { from { filter: brightness(2.4) saturate(0) blur(6px); } to { filter: none; } }
.cx-w9 .v-widescreen .cx-photo-over { background: linear-gradient(to top, #000 10%, transparent); }
.cx-w9 .v-widescreen .cx-title { font-size: clamp(2.4rem, 6vw, 4.6rem); text-shadow: 0 0 40px rgba(168, 200, 255, 0.6); }

/* ---------- voices under the ice-light ---------- */
.cx-w9 .v-sound, .cx-w9 .v-camera { background: radial-gradient(50vmax 40vmax at 80% 20%, rgba(168, 200, 255, 0.12), transparent 70%), var(--bg); }
.cx-w9 .cx-av { border-color: var(--acc); }
.cx-w9 .v-ice { background: linear-gradient(180deg, var(--bg), #1b1660 50%, var(--bg)); }
.cx-w9 .v-ice .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(200, 225, 255, 0.35), 0 0 120px -25px rgba(168, 200, 255, 0.7); }
.cx-w9 .k-poster .cx-pic { border-radius: 8px; max-height: 360px; background: #0f0f3a; }
.cx-w9 .k-poster .cx-pic img { object-fit: contain; }
.cx-w9 .cx-wall.v-film { background: #000; }
.cx-w9 .cx-wall.v-film .cx-w-item { border-radius: 2px; }
body:has(.cx-w9) { background: var(--bg, #090a24); }