/* Circle 5 - "daylight and lanterns". One long sky taken from the flyer, told through the evening's own photos:
   it opens on the bright afternoon photo framed by the flyer's violet, then every scene sits on a photo of the
   circle under a veil that turns, scene by scene, from the flyer's rose through the sunset's gold into lantern night.
   The number is the flyer's: yellow with a blue outline. White ink everywhere; the veils keep it readable. */

.cx-w5 { background: var(--bg); --sec: clamp(40px, 6vw, 84px); }
.cx-w5 .has-bg { --bgph-o: 0.55; --bgph-veil: linear-gradient(180deg, var(--v1) 0%, color-mix(in srgb, var(--v1) 70%, transparent) 30%, color-mix(in srgb, var(--v2) 72%, transparent) 70%, var(--v2) 100%); }

/* the sky, scene by scene (v1 = top of the scene, v2 = bottom = top of the next) */
.cx-w5 #day { --v1: #2a1f6e; --v2: #6a3a8e; }
.cx-w5 .cx-strip.v-day { background: linear-gradient(180deg, #6a3a8e, #8e3f86); }
.cx-w5 .v-sunlit { --v1: #8e3f86; --v2: #a3456f; }
.cx-w5 .cx-clips.v-day { --v1: #a3456f; --v2: #b0503f; }
.cx-w5 #golden { --v1: #b0503f; --v2: #7a3552; --acc: #ffd27a; }
.cx-w5 #lanterns { --v1: #7a3552; --v2: #3a2270; }
.cx-w5 .cx-clips.v-night { --v1: #3a2270; --v2: #1d1550; }
.cx-w5 .cx-moment { --v1: #1d1550; --v2: #150f3a; --bgph-o: 0.3; --bgph-b: 3px; }
.cx-w5 .cx-strip.v-night { background: #150f3a; }
.cx-w5 .v-night { --v1: #150f3a; --v2: #150f3a; --bgph-o: 0.35; }
.cx-w5 .v-daynight { background: #150f3a; }

/* ---------- opening: the bright afternoon, framed by the flyer's sky ---------- */
.cx-w5 .v-sun { background: #2a1f6e; min-height: min(100svh, 900px); }
.cx-w5 .v-sun .cx-open-bg img { opacity: 0.95; }
.cx-w5 .v-sun .cx-open-bg::after { content: ''; position: absolute; inset: 0; background:
    linear-gradient(270deg, rgba(42, 31, 110, 0.94) 0%, rgba(42, 31, 110, 0.78) 36%, rgba(106, 76, 240, 0.25) 62%, rgba(231, 154, 214, 0.05) 100%),
  linear-gradient(180deg, transparent 60%, #2a1f6e 100%); }
.cx-w5 .v-sun .cx-open-fx { display: none; }
/* the sun rises out of the 5 */
.cx-w5 .cx-open-num { position: relative; z-index: 0; width: max-content; }
.cx-w5 .cx-open-num::before, .cx-w5 .cx-open-num::after { content: ''; position: absolute; z-index: -1; left: 50%; top: 50%; border-radius: 50%; translate: -50% -50%; pointer-events: none; }
.cx-w5 .cx-open-num::before { width: 3.2em; aspect-ratio: 1; background: radial-gradient(circle, rgba(255, 244, 200, 0.95) 0%, rgba(255, 210, 63, 0.75) 22%, rgba(255, 170, 60, 0.28) 45%, transparent 68%); animation: c5-pulse 6s ease-in-out infinite; }
.cx-w5 .cx-open-num::after { width: 6em; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, rgba(255, 220, 130, 0.22) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(circle, transparent 14%, #000 22%, transparent 64%); mask: radial-gradient(circle, transparent 14%, #000 22%, transparent 64%); animation: c5-rays 80s linear infinite; mix-blend-mode: screen; }
@keyframes c5-pulse { 50% { scale: 1.08; opacity: 0.85; } }
@keyframes c5-rays { to { rotate: 360deg; } }
.cx-w5 .v-sun .cx-open-t { max-width: 620px; }
.cx-w5 .cx-open-k { color: #ffd27a; }
.cx-w5 .cx-open-num { color: var(--sun); -webkit-text-stroke: 5px var(--blue); paint-order: stroke fill; filter: drop-shadow(0 10px 30px rgba(20, 10, 60, 0.5)); }
.cx-w5 .cx-open-name { color: #fff; font-family: var(--f-hand); text-shadow: 0 4px 30px rgba(20, 10, 60, 0.6); }
.cx-w5 .cx-open-lead { color: #efe6ff; }
.cx-w5 .cx-open-place svg { color: #ffd27a; }
.cx-w5 .cx-open::after { background: linear-gradient(160deg, #6a4cf0, #e79ad6); }

/* ---------- afternoon ---------- */
.cx-w5 .cx-title { font-family: var(--f-hand); }
.cx-w5 #day .cx-v-media .cx-pic { border-radius: 22px; box-shadow: 0 30px 70px -30px rgba(10, 5, 40, 0.8); rotate: -2deg; }
.cx-w5 .v-sunlit .cx-head { margin-inline: auto; text-align: center; }
.cx-w5 .v-sunlit .cx-mark { justify-content: center; }
.cx-w5 .v-sunlit .cx-title { font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.35; }
.cx-w5 .cx-strip.v-day .cx-pic { box-shadow: 0 16px 40px -18px rgba(20, 5, 40, 0.8); }

/* ---------- golden hour ---------- */
.cx-w5 #golden .cx-v-media { grid-template-columns: 1fr 1fr; display: grid; }
.cx-w5 #golden .cx-v-media .cx-pic { aspect-ratio: 3 / 4; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 210, 122, 0.3), 0 30px 60px -30px #000; }
.cx-w5 #golden .cx-v-media .cx-pic:nth-child(2) { translate: 0 40px; }
.cx-w5 #golden .cx-title, .cx-w5 #golden .cx-pull p::before { color: #ffd27a; }

/* ---------- the flyer, with the lanterns coming out of it ---------- */
.cx-w5 .v-lanterns .cx-flyer-art { animation: c5-float 7s ease-in-out infinite; }
@keyframes c5-float { 50% { transform: translateY(-12px) rotate(0.6deg); } }
.cx-w5 .v-lanterns .cx-flyer-art .cx-pic { box-shadow: 0 0 0 1px rgba(255, 200, 120, 0.25), 0 30px 90px -20px rgba(255, 150, 50, 0.5); }
.cx-w5 .v-lanterns .cx-title { color: #ffd9a0; text-shadow: 0 0 30px rgba(255, 170, 60, 0.45); }

/* ---------- night ---------- */
.cx-w5 .cx-clips.v-night .cx-loop { box-shadow: 0 0 0 1px rgba(255, 190, 110, 0.3), 0 0 50px -10px rgba(255, 150, 50, 0.45); }
.cx-w5 .cx-strip.v-night .cx-pic { box-shadow: 0 0 40px -12px rgba(255, 160, 60, 0.6); }

/* ---------- the circle of life ---------- */
.cx-w5 .cx-m-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40vmax 40vmax at 30% 45%, rgba(255, 190, 90, 0.22), transparent 70%); }
.cx-w5 .cx-moment .cx-head { text-align: center; margin-inline: auto; }
.cx-w5 .cx-moment .cx-mark { justify-content: center; }
.cx-w5 .cx-moment .cx-title { font-size: clamp(3rem, 9vw, 7rem); color: #ffe2a8; text-shadow: 0 0 60px rgba(255, 170, 60, 0.5); }
.cx-w5 .cx-m-line { border-inline-start: 3px solid rgba(255, 177, 59, 0.5); padding-inline-start: 18px; font-family: var(--f-hand); }
.cx-w5 .cx-m-line:last-of-type { color: #fff; font-weight: 700; border-color: var(--acc); }
.cx-w5 .cx-m-media { position: relative; justify-self: center; width: min(100%, 500px); }
.cx-w5 .cx-m-media::before { content: ''; position: absolute; inset: -18px; border-radius: 50%; z-index: -1;
  background: conic-gradient(from 0deg, #ffd23f, #ff8f2e, #c070f5, #6a4cf0, #ffd23f); filter: blur(22px); opacity: 0.55; animation: c5-rays 24s linear infinite; }
.cx-w5 .cx-m-photo { border-radius: 50%; aspect-ratio: 1; box-shadow: 0 0 0 6px rgba(255, 210, 120, 0.85), 0 0 80px rgba(255, 170, 60, 0.6); }
.cx-w5 .cx-m-film, .cx-w5 .cx-m-after { margin-top: clamp(28px, 4vw, 48px); }
.cx-w5 .cx-m-after { color: #ffe2a8; font-family: var(--f-hand); }

/* ---------- Daniel's three reasons, under the lanterns ---------- */
.cx-w5 .v-night .cx-title { font-size: clamp(1.5rem, 3vw, 2.3rem); }
.cx-w5 .v-night .cx-v-media .cx-pic { border-radius: 18px; }

/* ---------- the album: from the afternoon to the night ---------- */
.cx-w5 .v-daynight .cx-w-item { box-shadow: 0 0 0 1px rgba(255, 255, 255, calc(0.06 + var(--l, 0.5) * 0.2)), 0 12px calc(20px + var(--l, 0.5) * 30px) -12px rgba(255, 190, 90, calc(var(--l, 0.5) * 0.8)); }
.cx-w5 .v-daynight .cx-wall-in { columns: 4 240px; }

@media (max-width: 800px) {
  .cx-w5 .v-sun .cx-open-bg::after { background:
        linear-gradient(180deg, rgba(42, 31, 110, 0.2) 0%, rgba(42, 31, 110, 0.55) 40%, rgba(42, 31, 110, 0.95) 75%, #2a1f6e 100%); }
  .cx-w5 .v-sun .cx-open-in { align-self: end; }
  .cx-w5 .v-sun { min-height: 100svh; align-items: end; }
  .cx-w5 .cx-open-num { -webkit-text-stroke-width: 4px; }
  .cx-w5 #golden .cx-v-media .cx-pic:nth-child(2) { translate: 0 20px; }
  .cx-w5 .cx-m-media { width: 86%; }
  .cx-w5 .v-daynight .cx-wall-in { columns: 2; }
}
body:has(.cx-w5) { background: #150f3a; }