/* Circle 4 - "Purim took over the circle". The flyer where purple first joined the blue (later the circle's
   official colours), with fireworks and a yellow 4. The page is allowed to be a little crazy: fireworks over the
   page, costumes flying in from every side, prints thrown on the table, pink confetti accents, and the improvised
   lip sync to Don't Stop Me Now as the loudest thing on it. */

.cx-w4 { background: var(--bg); --sec: clamp(44px, 6.5vw, 92px); }
.cx-w4 .cx-title { font-family: var(--f-hand); }
.cx-w4 .cx-mark { color: var(--acc); }
.cx-w4 .has-bg { --bgph-tint: #3b2a9e; --bgph-blend: luminosity; --bgph-o: 0.48;
  --bgph-veil: linear-gradient(135deg, color-mix(in srgb, var(--c1) 30%, transparent), color-mix(in srgb, var(--c2) 35%, transparent)), linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 55%, transparent) 25%, color-mix(in srgb, var(--bg) 60%, transparent) 75%, var(--bg) 100%); }

/* ---------- opening: the flyer's blue-to-purple sky, costumes flying in ---------- */
.cx-w4 .cx-open { background: linear-gradient(160deg, #1d4fa8 0%, #3b2a9e 45%, #5a2fb8 100%); }
.cx-w4 .cx-open-bg img { opacity: 0.28; filter: blur(3px) saturate(1.3); }
.cx-w4 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, var(--bg)); }
.cx-w4 .cx-open-num { color: var(--acc); -webkit-text-stroke: 4px #1d4fa8; paint-order: stroke fill; rotate: -8deg; display: inline-block; width: max-content;
  text-shadow: 0 0 40px rgba(255, 210, 63, 0.6); }
.js .cx-w4 .cx-open-num { animation: c4-pop 1s 0.3s cubic-bezier(.3, 1.8, .5, 1) both; }
@keyframes c4-pop { from { transform: scale(0) rotate(-40deg); } }
.cx-w4 .cx-open-name { font-family: var(--f-hand); text-shadow: 4px 4px 0 var(--pink); }
.cx-w4 .cx-open::after { background: radial-gradient(circle at 50% 40%, #fff, var(--acc) 30%, var(--c2)); }
.cx-w4 .cx-cl { border-color: #fff; }
.cx-w4 .cx-cl.c1 { border-color: var(--acc); }
.cx-w4 .cx-cl.c2 { border-color: var(--pink); }

/* ---------- the costume parade ---------- */
.cx-w4 .v-parade .cx-head { text-align: center; margin-inline: auto; max-width: 900px; }
.cx-w4 .v-parade .cx-mark { justify-content: center; }
.cx-w4 .v-parade .cx-title { font-size: clamp(1.7rem, 3.8vw, 3rem); line-height: 1.3; }
.cx-w4 .v-parade .cx-stack-in li { width: clamp(150px, 19vw, 260px); margin: -6px; }
.cx-w4 .v-parade .cx-stack-in .cx-pic { padding: 8px 8px 30px; }
.cx-w4 .v-parade .cx-stack-in .cx-pic img { aspect-ratio: 3 / 4; height: auto; }
.js .cx-w4 .v-parade .cx-stack-in li.in { animation: c4-throw 0.8s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 0.1s); }
@keyframes c4-throw { from { opacity: 0; transform: translate(calc((var(--i) - 2.5) * -90px), -160px) rotate(calc((var(--i) - 2.5) * 30deg)); } }

/* ---------- the lip sync: the loudest thing on the page ---------- */
.cx-w4 #lipsync { background: radial-gradient(60vmax 50vmax at 20% 50%, rgba(255, 95, 162, 0.25), transparent 70%), radial-gradient(60vmax 50vmax at 90% 20%, rgba(52, 159, 228, 0.3), transparent 70%), #0d0730; }
.cx-w4 #lipsync .cx-mark { color: var(--pink); font-size: 1.2rem; letter-spacing: 0.08em; text-transform: uppercase; }
.cx-w4 #lipsync .cx-title { font-size: clamp(3rem, 9vw, 7rem); color: var(--acc); text-shadow: 5px 5px 0 var(--pink), 10px 10px 0 var(--c1); rotate: -3deg; transform-origin: right; }
.cx-w4 #lipsync .cx-v-film { border-radius: 18px; padding: 10px; background: repeating-linear-gradient(90deg, #000 0 14px, #1a1a1a 14px 28px); box-shadow: 0 0 0 3px var(--acc), 0 0 60px -10px var(--pink); rotate: 1.5deg; }
.cx-w4 #lipsync .cx-pull p { color: #fff; }

/* ---------- the flyer: the fireworks come out of it ---------- */
.cx-w4 .v-fireworks { background: linear-gradient(180deg, var(--bg), #1f1463, var(--bg)); }
.cx-w4 .v-fireworks .cx-flyer-art .cx-pic { rotate: -3deg; box-shadow: 0 0 0 6px #fff, 0 30px 80px -30px var(--c2); }

/* ---------- loops and prints, thrown around ---------- */
.cx-w4 .v-party .cx-loop:nth-child(odd) { rotate: -1.2deg; }
.cx-w4 .v-party .cx-loop:nth-child(even) { rotate: 1.4deg; }
.cx-w4 .v-party .cx-loop { border: 4px solid #fff; }
.cx-w4 .v-backstage .cx-stack-in li { width: clamp(260px, 40vw, 520px); }
.cx-w4 .v-backstage .cx-head { text-align: center; margin-inline: auto; }
.cx-w4 .v-backstage .cx-mark { justify-content: center; }
.cx-w4 .v-confetti .cx-w-item { border-radius: 6px; border: 4px solid #fff; rotate: calc((mod(var(--i), 5) - 2) * 1.5deg); }
.cx-w4 .v-confetti .cx-w-item:nth-child(3n) { border-color: var(--acc); }
.cx-w4 .v-confetti .cx-w-item:nth-child(4n + 1) { border-color: var(--pink); }
.cx-w4 .v-balloons .cx-v-media .cx-pic { border-radius: 50% 50% 46% 46%; aspect-ratio: 4 / 5; box-shadow: 0 0 0 6px var(--pink), 0 30px 60px -30px #000; }
body:has(.cx-w4) { background: #120a3a; }
@media (max-width: 800px) {
  .cx-w4 .v-parade .cx-stack-in li { width: 42vw; }
  .cx-w4 #lipsync .cx-title { font-size: 3.2rem; }
}