/* Circle 7 - "we're back". Two years without big circles. The page starts almost black and silent, with only the
   flyer's moon; then, scene by scene: light (the moon grows, the lanterns rise), colour (the flyer's blue night and
   its orange horizon), people, music, the first trailer, and finally the circle itself in full colour. */

.cx-w7 { background: #030410; --sec: clamp(48px, 7vw, 100px); }
.cx-w7 .cx-title { font-family: var(--f-hand); }
.cx-w7 .has-bg { --bgph-tint: #141a52; --bgph-blend: luminosity; --bgph-o: 0.4; }

/* ---------- opening: darkness and a moon ---------- */
.cx-w7 .v-dark { background: radial-gradient(40vmax 40vmax at 50% 28%, rgba(188, 216, 255, 0.07), transparent 70%), #030410; min-height: 100svh; text-align: center; }
.cx-w7 .v-dark .cx-open-in { grid-template-columns: 1fr; justify-items: center; }
.cx-w7 .v-dark .cx-open-t { display: grid; justify-items: center; }
.cx-w7 .v-dark .cx-open-fx { position: absolute; top: calc(clamp(90px, 12vh, 150px) + 70px); left: 50%; translate: -50% 0; width: clamp(160px, 22vw, 300px); aspect-ratio: 1; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle at 38% 36%, #fff, #dfeaff 30%, #9fb8e8 62%, #5c78b8 100%); box-shadow: 0 0 80px 20px rgba(188, 216, 255, 0.25), 0 0 200px 60px rgba(120, 150, 230, 0.12);
  opacity: 0.22; animation: c7-moon 3.5s 0.6s ease-out forwards; }
@keyframes c7-moon { to { opacity: 0.9; } }
.cx-w7 .v-dark .cx-open-num { color: transparent; -webkit-text-stroke: 2px rgba(188, 216, 255, 0.55); }
.cx-w7 .v-dark .cx-open-name { font-family: var(--f-hand); font-size: clamp(3.2rem, 10vw, 7.5rem); color: #fff; text-shadow: 0 0 50px rgba(188, 216, 255, 0.6); }
.js .cx-w7 .v-dark .cx-open-name { animation: c7-light 2.6s 0.3s ease both; }
@keyframes c7-light { from { opacity: 0; filter: blur(10px); } }
.cx-w7 .v-dark .cx-open-k, .cx-w7 .v-dark .cx-open-place { justify-content: center; color: #9fb0d8; }
.cx-w7 .v-dark .cx-open-lead { color: #9fb0d8; margin-inline: auto; }
.cx-w7 .cx-open::after { background: #000; }

/* ---------- silence ---------- */
.cx-w7 .v-silence { background: #030410; }
.cx-w7 .v-silence .cx-line-t { font: 500 clamp(1.4rem, 3.2vw, 2.4rem)/1.6 var(--f-display); color: #7d88ad; max-width: 26ch; }

/* ---------- people: the colour comes back slowly ---------- */
.cx-w7 .v-people { background: linear-gradient(180deg, #030410, #0b0f33); --bgph-o: 0.3; }
.cx-w7 .v-people .cx-bgph img { filter: saturate(0.3); }
.cx-w7 .v-moon { background: linear-gradient(180deg, #0b0f33, #141a52 55%, #1d1a5c); }
.cx-w7 .v-moon .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(188, 216, 255, 0.3), 0 0 120px -20px rgba(188, 216, 255, 0.55); }
.cx-w7 .v-trailer { background: radial-gradient(70vmax 50vmax at 50% 100%, rgba(255, 154, 77, 0.28), transparent 70%), #1d1a5c; }
.cx-w7 .v-trailer .cx-screen .video { box-shadow: 0 0 0 1px rgba(255, 200, 150, 0.35), 0 0 100px -20px rgba(255, 154, 77, 0.7); }
.cx-w7 .cx-voice.v-trailer { --bgph-o: 0.45; background: #1d1a5c; }
.cx-w7 .v-light { background: linear-gradient(180deg, #1d1a5c, #2f2170); --bgph-o: 0.5; --bgph-tint: #3b2a7a; }
.cx-w7 .v-burger { background: linear-gradient(180deg, #2f2170, #3f2458); }
.cx-w7 .v-burger .cx-v-media .cx-pic { border-radius: 20px; rotate: -2deg; box-shadow: 0 0 0 5px #fff, 0 20px 40px -18px #000; }

/* ---------- the circle, in full colour ---------- */
.cx-w7 .v-return .cx-pic { height: min(92svh, 900px); }
.cx-w7 .v-return .cx-pic img { animation: c7-colour linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
@keyframes c7-colour { from { filter: grayscale(1) brightness(0.5); transform: scale(1.12); } to { filter: none; transform: none; } }
.cx-w7 .v-return .cx-photo-over { background: linear-gradient(to top, #3f2458 5%, transparent); }
.cx-w7 .v-return .cx-title { font-size: clamp(2.4rem, 7vw, 5.6rem); text-shadow: 0 4px 40px rgba(0, 0, 0, 0.6); }
.cx-w7 .v-return .cx-mark { color: #ffc99a; }
.cx-w7 .cx-wall.v-return { background: radial-gradient(70vmax 50vmax at 50% 0%, rgba(255, 154, 77, 0.2), transparent 70%), #3f2458; }
.cx-w7 .v-return .cx-w-item { border-radius: 14px; }
body:has(.cx-w7) { background: #3f2458; }
.cx-w7 .v-dark .cx-open-k { position: relative; z-index: 1; color: #dfe8ff; text-shadow: 0 1px 10px #000, 0 0 20px #000; }

/* 5.10.2026: from the dark to the light, but never a flat colour - every section stands on a photo of its own time:
   the dim station under the moon, the Zoom screen of the corona years, the trailer shoot, the night itself */
.cx-w7 .has-bg { --bgph-o: 0.4; --bgph-b: 2px; }
.cx-w7 .v-silence.has-bg, .cx-w7 .v-moon.has-bg, .cx-w7 .v-trailer.has-bg, .cx-w7 .v-burger.has-bg, .cx-w7 .cx-wall.has-bg { background: transparent; }
.cx-w7 .v-silence.has-bg { --bgph-o: 0.28; --bgph-b: 3px; padding-block: clamp(70px, 12vw, 160px); }
.cx-w7 .v-silence .cx-line-t { color: #b9c3e6; text-shadow: 0 4px 24px rgba(0, 0, 0, .7); }
.cx-w7 .v-dark .cx-open-bg img { opacity: .32; filter: saturate(.6) blur(1px); }
.cx-w7 .v-dark .cx-open-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 30%, transparent, rgba(3, 4, 16, .85) 75%), linear-gradient(180deg, rgba(3, 4, 16, .3), #030410); }
.cx-w7 .v-burger.has-bg { --bgph-o: 0.45; }