/* Circle 6 - "the last time before everything stopped". Late 2019. The flyer's sky went from purple to orange,
   the sunrise moving on from flyer to flyer; the station floor was covered in confetti. Confetti is the page's
   motion; stories from the brand new Instagram sit in phone frames; after the energy comes a quiet moment
   (the proposal); and at the very end the confetti stops falling and the page takes a breath. */

.cx-w6 { background: var(--bg); --sec: clamp(44px, 6.5vw, 92px); }
.cx-w6 .cx-title { font-family: var(--f-hand); }
.cx-w6 .has-bg { --bgph-tint: #5a2a7a; --bgph-blend: luminosity; --bgph-o: 0.5;
  --bgph-veil: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, #4a1f6e 60%, transparent) 30%, color-mix(in srgb, #7a3a3a 50%, transparent) 75%, var(--bg) 100%); }

/* ---------- opening: the crowd under the flyer's sunset ---------- */
.cx-w6 .cx-open-bg img { opacity: 0.85; }
.cx-w6 .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(90, 42, 160, 0.85) 0%, rgba(154, 78, 230, 0.35) 38%, rgba(255, 140, 70, 0.3) 72%, var(--bg) 100%),
  linear-gradient(270deg, rgba(28, 15, 51, 0.85), transparent 65%); }
.cx-w6 .cx-open-num { color: var(--acc); -webkit-text-stroke: 4px #3b1f8a; paint-order: stroke fill; text-shadow: 0 0 50px rgba(255, 171, 74, 0.6); }
.cx-w6 .cx-open-name { font-family: var(--f-hand); font-size: clamp(2rem, 5vw, 3.8rem); }
.cx-w6 .cx-open::after { background: linear-gradient(180deg, #9a4ee6, #ffab4a); }

/* ---------- stories: little phones in a row ---------- */
.cx-w6 .v-stories { background: linear-gradient(180deg, var(--bg), #2c1450); }
.cx-w6 .v-stories .cx-loop { border-radius: 22px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4), 0 20px 40px -18px #000; }
.cx-w6 .v-stories .cx-loop::before { content: ''; position: absolute; z-index: 2; top: 8px; inset-inline: 10px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #fff 45%, rgba(255, 255, 255, 0.35) 45%); }

/* ---------- confetti ---------- */
.cx-w6 .cx-moment { background: radial-gradient(60vmax 50vmax at 30% 40%, rgba(255, 171, 74, 0.2), transparent 70%), #2c1450; }
.cx-w6 .cx-moment .cx-title { font-size: clamp(3rem, 9vw, 6.5rem); color: var(--acc); text-shadow: 4px 4px 0 var(--pink); }
.cx-w6 .cx-m-line { font-family: var(--f-hand); border-inline-start: 3px solid var(--pink); padding-inline-start: 16px; }
.cx-w6 .cx-m-photo { aspect-ratio: 4 / 3; border-radius: 20px; box-shadow: 0 0 0 6px #fff, 0 30px 70px -25px #000; rotate: -2deg; }
.cx-w6 .cx-strip { background: #2c1450; }
.cx-w6 .cx-strip .cx-pic { border-radius: 12px; border: 3px solid rgba(255, 255, 255, 0.9); }

/* ---------- the quiet moment ---------- */
.cx-w6 #proposal { background: radial-gradient(50vmax 40vmax at 50% 40%, rgba(255, 150, 170, 0.14), transparent 70%), #160b29; padding-block: clamp(70px, 10vw, 140px); }
.cx-w6 #proposal .cx-pull p { font-size: clamp(1.5rem, 3.2vw, 2.4rem); color: #ffe2ea; }
.cx-w6 #proposal .cx-v-media .cx-pic { border-radius: 50% 50% 20px 20px; box-shadow: 0 0 60px -10px rgba(255, 140, 170, 0.5); }
.cx-w6 #proposal .cx-mark { color: #ffb1c4; }

/* ---------- the flyer, the album ---------- */
.cx-w6 .v-sunrise { background: linear-gradient(180deg, #160b29, #3a1a5c 50%, #5a2a3a); }
.cx-w6 .v-sunrise .cx-flyer-art .cx-pic { box-shadow: 0 30px 90px -25px rgba(255, 140, 70, 0.6); }
.cx-w6 .v-confetti .cx-w-item { border-radius: 10px; }
.cx-w6 .cx-wall.v-confetti { background: #1c0f33; }

/* ---------- the pause ---------- */
.cx-w6 .v-pause { background: linear-gradient(180deg, #1c0f33, #0c0816); padding-block: clamp(90px, 14vw, 200px); }
.cx-w6 .v-pause .cx-line-t { max-width: 24ch; font: 500 clamp(1.4rem, 3vw, 2.2rem)/1.6 var(--f-display); color: #cfc3dd; }
.cx-w6 .v-pause .cx-line-sub { font: 700 1rem var(--f-hand); color: var(--acc); opacity: 0.8; letter-spacing: 0.06em; }
.js .cx-w6 .v-pause .cx-line-t.in { animation: c6-breath 2.4s ease both; }
@keyframes c6-breath { from { opacity: 0; letter-spacing: 0.08em; filter: blur(4px); } }
body:has(.cx-w6) { background: #0c0816; }