/* Circle 3 - "a night by the fire". The day after Jerusalem's big snow. Outside: the flyer's sky blue turned into a
   deep winter night, soft snow over the page, the flyer's white clouds. Inside: the flyer's yellow 3 becomes the warm
   light of the fire - every photo glows amber from within, frames are soft like blankets, and scene by scene the page
   moves from cold to warm. */

.cx-w3 { background: var(--bg); --sec: clamp(44px, 6.5vw, 92px); --ember: #ff8a3d; }
.cx-w3 .cx-title { font-family: var(--f-hand); }
.cx-w3 .has-bg { --bgph-tint: #0d2d52; --bgph-blend: luminosity; --bgph-o: 0.45;
  --bgph-veil: radial-gradient(60% 70% at 50% 60%, rgba(255, 150, 60, 0.28), transparent 70%), linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 60%, transparent) 25%, color-mix(in srgb, #2a1608 55%, transparent) 75%, var(--bg-w, var(--bg)) 100%); }

/* ---------- opening: cold blue night, warm light in the middle of the crowd ---------- */
.cx-w3 .cx-open-bg { background: #0a2344; }
.cx-w3 .cx-open-bg img { opacity: 0.75; filter: saturate(0.9); }
.cx-w3 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(34vmax 24vmax at 50% 72%, rgba(255, 150, 60, 0.4), transparent 70%),
  linear-gradient(180deg, rgba(7, 24, 47, 0.85) 0%, rgba(13, 45, 82, 0.35) 40%, rgba(7, 24, 47, 0.2) 60%, var(--bg) 100%),
  linear-gradient(270deg, rgba(7, 24, 47, 0.8), transparent 60%);
  mix-blend-mode: normal; }
.cx-w3 .cx-open-num { color: var(--acc); -webkit-text-stroke: 4px #1b5fb8; paint-order: stroke fill; text-shadow: 0 0 60px rgba(255, 180, 70, 0.6); }
.cx-w3 .cx-open-name { font-family: var(--f-hand); }
.cx-w3 .cx-open::after { background: linear-gradient(160deg, #eaf6ff, #23a6e6); }

/* ---------- outside froze / inside we sang ---------- */
.cx-w3 .v-coldwarm { --bgph-o: 0.55; }
.cx-w3 .v-coldwarm .cx-line-t { max-width: none; font-family: var(--f-hand); font-size: clamp(2rem, 5.6vw, 4.4rem); line-height: 1.25; }
.cx-w3 .v-coldwarm .p0 { color: #cfeaff; text-shadow: 0 0 30px rgba(160, 210, 255, 0.5); }
.cx-w3 .v-coldwarm .p1 { color: #ffd07a; text-shadow: 0 0 40px rgba(255, 150, 60, 0.75); }

/* ---------- by the fire ---------- */
.cx-w3 .v-fire { --bg-w: #1c1008; }
.cx-w3 .v-fire .cx-pull p::before, .cx-w3 .v-fire .cx-pull p::after { color: var(--acc); }
.cx-w3 .cx-v-media .cx-pic, .cx-w3 .cx-stack-in .cx-pic { border-radius: 26px; box-shadow: 0 0 0 8px rgba(255, 230, 200, 0.08), 0 0 60px -10px rgba(255, 150, 60, 0.45), 0 30px 60px -30px #000; }
.cx-w3 .cx-v-media .cx-pic img { filter: sepia(0.15) saturate(1.1); }

/* ---------- the flyer: its clouds come out of it ---------- */
.cx-w3 .v-clouds { background: linear-gradient(180deg, var(--bg), #0f3a66 50%, var(--bg)); overflow: hidden; }
.cx-w3 .v-clouds::before, .cx-w3 .v-clouds::after { content: ''; position: absolute; z-index: -1; width: 260px; height: 90px; border-radius: 90px; background: rgba(255, 255, 255, 0.08);
  box-shadow: 60px -30px 0 10px rgba(255, 255, 255, 0.08), 130px 0 0 0 rgba(255, 255, 255, 0.08); animation: c3-drift 40s linear infinite; }
.cx-w3 .v-clouds::before { top: 18%; left: -10%; }
.cx-w3 .v-clouds::after { bottom: 14%; right: -20%; scale: 0.7; animation-duration: 55s; animation-direction: reverse; }
@keyframes c3-drift { to { translate: 40vw 0; } }
.cx-w3 .v-clouds .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 30px 90px -30px rgba(35, 166, 230, 0.7); }

/* ---------- countdown: prints held up on a winter wall ---------- */
.cx-w3 .v-countdown { background: linear-gradient(180deg, var(--bg), #11294a); }
.cx-w3 .v-countdown .cx-head { text-align: center; margin-inline: auto; }
.cx-w3 .v-countdown .cx-mark { justify-content: center; }
.cx-w3 .v-countdown .cx-stack-in .cx-pic { padding: 0; background: none; }
.cx-w3 .v-countdown .cx-stack-in .cx-pic img { aspect-ratio: 4 / 5; height: auto; }

/* ---------- the warm part of the page ---------- */
.cx-w3 .v-far { --bg-w: #1c1008; }
.cx-w3 .cx-films { background: linear-gradient(180deg, #1c1008, #1a0f0a); }
.cx-w3 .cx-films .video { box-shadow: 0 0 0 1px rgba(255, 200, 140, 0.2), 0 0 70px -20px rgba(255, 140, 50, 0.6); }
.cx-w3 .v-warm { --bgph-tint: #3a1d08; --bg-w: #1a0f0a; }
.cx-w3 .v-warm .cx-loop { border-radius: 22px; box-shadow: 0 0 50px -12px rgba(255, 140, 50, 0.55); }
.cx-w3 .v-blanket { background: radial-gradient(70vmax 50vmax at 50% 0%, rgba(255, 140, 50, 0.12), transparent 70%), #1a0f0a; }
.cx-w3 .v-blanket .cx-w-item { border-radius: 22px; box-shadow: 0 0 0 6px rgba(255, 220, 180, 0.07), 0 18px 40px -20px #000; }
.cx-w3 .v-blanket .cx-w-item img { filter: sepia(0.12); }
body:has(.cx-w3) { background: #1a0f0a; }