/* Circle 2 - "wait, this actually works". The flyer is one bright summer cyan with a white logo; the page is young
   and quick: summer photos washed in that cyan, a sun-yellow for stickers and highlights, a little confetti,
   and Yair's list of question marks that grows until it can only be "what on earth is going on here?!". */

.cx-w2 { background: var(--bg); --sec: clamp(44px, 6.5vw, 92px); }
.cx-w2 .has-bg { --bgph-tint: #0b6fa0; --bgph-blend: luminosity; --bgph-o: 0.5;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 62%, transparent) 25%, color-mix(in srgb, #0a5a88 55%, transparent) 70%, var(--bg) 100%); }
.cx-w2 .cx-title { font-family: var(--f-hand); }
.cx-w2 .cx-mark { color: var(--acc); }

/* ---------- opening: the band in the summer, the flyer's cyan all over it ---------- */
.cx-w2 .cx-open-bg { background: var(--c1); }
.cx-w2 .cx-open-bg img { mix-blend-mode: luminosity; opacity: 0.8; }
.cx-w2 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
  radial-gradient(40vmax 30vmax at 80% 10%, rgba(255, 216, 77, 0.35), transparent 70%),
  linear-gradient(270deg, rgba(6, 42, 69, 0.9) 0%, rgba(6, 42, 69, 0.6) 40%, rgba(31, 178, 236, 0.1) 75%),
  linear-gradient(180deg, transparent 55%, var(--bg)); }
.cx-w2 .cx-open-num { color: #fff; text-shadow: 6px 6px 0 var(--c1), 12px 12px 0 rgba(255, 216, 77, 0.9); }
.cx-w2 .cx-open-name { font-family: var(--f-hand); rotate: -2deg; transform-origin: right; }
.cx-w2 .cx-open-name::after { content: ''; display: block; width: 3.4em; height: 0.18em; margin-top: 0.12em; border-radius: 99px; background: var(--acc); }
.cx-w2 .cx-open::after { background: linear-gradient(160deg, var(--c1), var(--c2)); }

/* ---------- the list of question marks ---------- */
.cx-w2 .cx-grow .cx-g-row p { text-shadow: 0 3px 20px rgba(0, 0, 0, 0.4); }
.cx-w2 .cx-g-ph .cx-pic { border: 5px solid #fff; }
.cx-w2 .cx-g-end { color: var(--acc); text-shadow: 5px 5px 0 var(--c1); rotate: -2deg; }
.js .cx-w2 .cx-g-end.in { animation: c2-boing 0.9s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes c2-boing { from { opacity: 0; transform: scale(0.4) rotate(-12deg); } }

.cx-w2 .v-fun { background: var(--acc); padding-block: clamp(34px, 5vw, 60px); }
.cx-w2 .v-fun .cx-line-t { color: var(--bg); letter-spacing: 0.02em; font-family: var(--f-hand); font-size: clamp(2rem, 6vw, 4.4rem); }

/* stickers for the photos next to the memories */
.cx-w2 .cx-v-media .cx-pic { border: 5px solid #fff; border-radius: 10px; rotate: 2.5deg; box-shadow: 0 20px 40px -18px #000; }
.cx-w2 .cx-v-media .cx-pic:nth-child(even) { rotate: -3deg; }
.cx-w2 .cx-strip .cx-pic { border: 4px solid #fff; border-radius: 10px; }
.cx-w2 .cx-strip { background: linear-gradient(180deg, var(--bg), #0a3c5e, var(--bg)); }

/* ---------- the album: prints with a summer border ---------- */
.cx-w2 .v-pop .cx-w-item { border: 4px solid #fff; border-radius: 8px; box-shadow: 0 14px 30px -14px #000; }
.cx-w2 .v-pop .cx-w-item:nth-child(3n + 1) { border-color: var(--acc); }
.cx-w2 .v-pop .cx-w-item:nth-child(4n + 2) { border-color: var(--c2); }
.cx-w2 .v-end .cx-line-t { font-family: var(--f-hand); font-size: clamp(1.8rem, 4.6vw, 3.4rem); max-width: 24ch; }
.cx-w2 .v-end .cx-line-sub { color: var(--acc); font-family: var(--f-hand); font-weight: 700; }
.cx-w2 .cx-line.has-bg { --bgph-o: 0.55; }
body:has(.cx-w2) { background: #062a45; }