/* Circle 10 - "up to the roof". Ten circles, six years, the roof of Cinema City: a finale under the open sky.
   The flyer: a night sky with fireworks, a castle at dawn, the logo with a "1" beside the circle making 10.
   The page rises: lights drift upwards, the opening looks down on the roof from above, "the way up" climbs from
   street level to the roof, and the 10 stands huge behind everything. */

.cx-w10 { background: var(--bg); --sec: clamp(48px, 7vw, 100px); }
.cx-w10 .cx-title { font-family: var(--f-hand); }
.cx-w10 .has-bg { --bgph-tint: #15185e; --bgph-blend: luminosity; --bgph-o: 0.5;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, #15185e 55%, transparent) 30%, color-mix(in srgb, #3a1a6e 55%, transparent) 75%, var(--bg) 100%); }

/* ---------- opening: the roof from above, the 10 over it ---------- */
.cx-w10 .v-roof .cx-open-bg img { opacity: 0.9; }
.cx-w10 .v-roof .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(60vmax 40vmax at 50% 0%, rgba(229, 140, 255, 0.25), transparent 70%),
  linear-gradient(180deg, rgba(6, 10, 38, 0.7) 0%, rgba(6, 10, 38, 0.15) 40%, rgba(6, 10, 38, 0.6) 75%, var(--bg) 100%),
  linear-gradient(270deg, rgba(6, 10, 38, 0.85), transparent 60%); }
.cx-w10 .cx-open-num { font-size: clamp(9rem, 26vw, 20rem); color: transparent; -webkit-text-stroke: 3px rgba(255, 255, 255, 0.9);
  background: linear-gradient(180deg, #fff 0%, #b9c3ff 45%, var(--c2) 100%); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 0 40px rgba(79, 91, 240, 0.8)); }
.js .cx-w10 .cx-open-num { animation: c10-rise 1.6s 0.2s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes c10-rise { from { opacity: 0; transform: translateY(80px); } }
.cx-w10 .cx-open-name { font-family: var(--f-hand); }
.cx-w10 .cx-open::after { background: linear-gradient(0deg, #4f5bf0, #e58cff); }

/* ---------- the way up ---------- */
.cx-w10 .cx-levels { background: linear-gradient(180deg, var(--bg), #11144a 60%, #1b1460); }
.cx-w10 .cx-lv-list::before { background: linear-gradient(0deg, #4f5bf0, #e58cff, var(--acc)); }

/* ---------- under the sky ---------- */
.cx-w10 .v-sky .cx-v-media { grid-template-columns: 1fr 1fr; display: grid; }
.cx-w10 .v-sky .cx-v-media .cx-pic { aspect-ratio: 3 / 4; border-radius: 20px; box-shadow: 0 0 60px -15px rgba(79, 91, 240, 0.7); }
.cx-w10 .v-sky .cx-v-media .cx-pic:nth-child(2) { translate: 0 36px; }
.cx-w10 .cx-strip { background: #1b1460; }
.cx-w10 .cx-strip .cx-pic { box-shadow: 0 0 40px -12px rgba(229, 140, 255, 0.6); }
.cx-w10 .v-ten { background: radial-gradient(60vmax 50vmax at 30% 50%, rgba(79, 91, 240, 0.25), transparent 70%), #1b1460; }
.cx-w10 .v-ten .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 120px -20px rgba(229, 140, 255, 0.6); }
.cx-w10 .k-poster .cx-pic { border-radius: 14px; }
.cx-w10 .cx-films { background: #1b1460; }
.cx-w10 .cx-clips.v-sky { background: linear-gradient(180deg, #1b1460, var(--bg)); }
.cx-w10 .cx-clips.v-sky .cx-loop { box-shadow: 0 0 70px -15px rgba(79, 91, 240, 0.8); }
.cx-w10 .cx-wall.v-sky .cx-w-item { border-radius: 12px; box-shadow: 0 0 30px -12px rgba(79, 91, 240, 0.7); }
.cx-w10 .cx-wall.v-sky { background: radial-gradient(80vmax 50vmax at 50% 100%, rgba(229, 140, 255, 0.15), transparent 70%), var(--bg); }
body:has(.cx-w10) { background: #060a26; }
@media (max-width: 800px) { .cx-w10 .cx-open-num { -webkit-text-stroke-width: 2px; } }