/* Confete backdrops (see backdrop.js): a bg->bg2 gradient base, one animated "kind" layer drawn from the theme's
   accent colours at low alpha (rgba strings computed in JS per light/dark mode), optional grain, and a pulse overlay.
   Only transform/opacity animate; children carry the animations so the kind layer's own transform is free for pulse().
   Content must sit above: the backdrop is position:absolute, z-index 0, pointer-events none. Sizes use container units
   (cqmax, with vmax first as the fallback) so a backdrop drawn in a small box (the studio's thumbnails) keeps its proportions. */
.pf-bd { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; contain: strict; isolation: isolate; container-type: size; }
.pf-bd > div { position: absolute; inset: 0; }
.pf-bd-base { background: linear-gradient(160deg, var(--bd-bg) 0%, var(--bd-bg2) 100%); transition: opacity .6s ease; }
.pf-bd-k { transition: opacity .7s ease; }
.pf-bd-grain { opacity: var(--bd-grain, .07); background-size: 180px 180px; background-image: var(--bd-noise); }
.pf-bd-pulse { opacity: 0; background: radial-gradient(circle at 50% 56%, var(--bd-a-md) 0%, transparent 62%); }
.pf-bd .el { position: absolute; inset: 0; display: block; }

/* blobs: big soft radial gradients drifting (no filter blur: cheap on phones) */
.k-blobs .el { inset: auto; width: 78vmax; width: 78cqmax; height: 78vmax; height: 78cqmax; border-radius: 50%; animation: pfbd-drift 22s ease-in-out infinite alternate; }
.k-blobs .el:nth-child(1) { left: -30vmax; left: -30cqmax; top: -34vmax; top: -34cqmax; background: radial-gradient(circle, var(--bd-a-hi) 0%, transparent 66%); animation-duration: 19s; }
.k-blobs .el:nth-child(2) { right: -34vmax; right: -34cqmax; top: -12vmax; top: -12cqmax; background: radial-gradient(circle, var(--bd-a2-hi) 0%, transparent 66%); animation-duration: 25s; animation-direction: alternate-reverse; }
.k-blobs .el:nth-child(3) { left: -20vmax; left: -20cqmax; bottom: -42vmax; bottom: -42cqmax; background: radial-gradient(circle, var(--bd-a2-md) 0%, transparent 64%); animation-duration: 28s; }
.k-blobs .el:nth-child(4) { right: -26vmax; right: -26cqmax; bottom: -30vmax; bottom: -30cqmax; background: radial-gradient(circle, var(--bd-a-md) 0%, transparent 64%); animation-duration: 21s; animation-direction: alternate-reverse; }
@keyframes pfbd-drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vmax, 7vmax, 0) scale(1.16); transform: translate3d(9cqmax, 7cqmax, 0) scale(1.16); } }

/* mesh: two oversized multi-gradient sheets turning against each other */
.k-mesh .el { inset: -35%; }
.k-mesh .el:nth-child(1) { background: radial-gradient(40% 35% at 25% 30%, var(--bd-a-hi), transparent 70%), radial-gradient(35% 40% at 78% 22%, var(--bd-a2-hi), transparent 70%), radial-gradient(45% 35% at 70% 82%, var(--bd-a-md), transparent 70%); animation: pfbd-turn 26s ease-in-out infinite alternate; }
.k-mesh .el:nth-child(2) { background: radial-gradient(35% 30% at 18% 80%, var(--bd-a2-md), transparent 70%), radial-gradient(30% 30% at 55% 50%, var(--bd-a-lo), transparent 70%); animation: pfbd-turn 33s ease-in-out infinite alternate-reverse; }
@keyframes pfbd-turn { from { transform: rotate(0deg) scale(1); } to { transform: rotate(24deg) scale(1.12) translate3d(3%, -2%, 0); } }

/* aurora: stretched elliptical light bands swaying in the upper half */
.k-aurora .el { inset: auto; left: -40%; width: 180%; height: 46%; border-radius: 50%; }
.k-aurora .el:nth-child(1) { top: -8%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a-hi), transparent 72%); animation: pfbd-sway 17s ease-in-out infinite alternate; }
.k-aurora .el:nth-child(2) { top: 12%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a2-hi), transparent 72%); animation: pfbd-sway 23s ease-in-out infinite alternate-reverse; }
.k-aurora .el:nth-child(3) { top: 30%; height: 34%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a-lo), transparent 72%); animation: pfbd-sway 29s ease-in-out infinite alternate; }
@keyframes pfbd-sway { from { transform: translate3d(-12%, 0, 0) rotate(-9deg) scaleY(.85); } to { transform: translate3d(12%, 4%, 0) rotate(6deg) scaleY(1.25); } }

/* dots / grid: drifting patterns, faded behind the content */
.k-dots .el:nth-child(1), .k-grid .el:nth-child(1) { inset: -60px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 18%, #000 85%); mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 18%, #000 85%); }
.k-dots .el:nth-child(1) > i, .k-grid .el:nth-child(1) > i { position: absolute; inset: 0; }
.k-dots .el:nth-child(1) > i { background-image: radial-gradient(var(--bd-ink-md) 1.6px, transparent 1.9px); background-size: 24px 24px; animation: pfbd-tile24 7s linear infinite; }
.k-grid .el:nth-child(1) > i { background-image: linear-gradient(var(--bd-grid) 1px, transparent 1px), linear-gradient(90deg, var(--bd-grid) 1px, transparent 1px); background-size: 40px 40px; animation: pfbd-tile40 10s linear infinite; }
.k-dots .el:nth-child(2), .k-grid .el:nth-child(2) { inset: auto -20% -30% -20%; height: 70%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a-md), transparent 70%); animation: pfbd-drift 20s ease-in-out infinite alternate; }
.k-dots .el:nth-child(3), .k-grid .el:nth-child(3) { inset: -30% -30% auto auto; width: 75%; height: 55%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a2-lo), transparent 70%); animation: pfbd-drift 26s ease-in-out infinite alternate-reverse; }
@keyframes pfbd-tile24 { to { transform: translate3d(24px, 24px, 0); } }
@keyframes pfbd-tile40 { to { transform: translate3d(40px, 40px, 0); } }

/* waves: three seamless SVG wave strips sliding at different speeds */
.k-waves .el { inset: auto 0 0 0; height: 46%; }
.k-waves svg { position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; }
.k-waves svg:nth-child(1) { animation: pfbd-slide 26s linear infinite; }
.k-waves svg:nth-child(2) { animation: pfbd-slide 18s linear infinite reverse; height: 82%; }
.k-waves svg:nth-child(3) { animation: pfbd-slide 13s linear infinite; height: 62%; }
@keyframes pfbd-slide { to { transform: translate3d(-50%, 0, 0); } }

/* stars: twinkling dots and four-point sparkles */
.k-stars .el:first-child { animation: pfbd-float 30s ease-in-out infinite alternate; }
.k-stars .s { position: absolute; border-radius: 50%; background: var(--bd-star); animation: pfbd-twinkle 3s ease-in-out infinite alternate; }
.k-stars .sp { position: absolute; background: var(--bd-star2); clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: pfbd-twinkle 4s ease-in-out infinite alternate; }
.k-stars .el:nth-child(2) { inset: auto -20% -35% -20%; height: 75%; background: radial-gradient(50% 50% at 50% 50%, var(--bd-a-md), transparent 70%); }
@keyframes pfbd-twinkle { from { opacity: .15; transform: scale(.55); } to { opacity: 1; transform: scale(1); } }
@keyframes pfbd-float { to { transform: translate3d(0, -18px, 0); } }

/* confetti: pieces falling through full-height wrappers (translateY % of the container) with their own spin */
.k-confetti .cw { position: absolute; top: 0; height: 100%; width: 0; animation: pfbd-fall 14s linear infinite; }
.k-confetti .cs { position: absolute; top: 0; left: 0; animation: pfbd-spin 3.2s linear infinite; }
.k-confetti .cs.r { width: 10px; height: 18px; border-radius: 2px; }
.k-confetti .cs.c { width: 12px; height: 12px; border-radius: 50%; }
.k-confetti .cs.t { width: 15px; height: 14px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.k-confetti .cs.q { width: 22px; height: 10px; background: none !important; border: 3px solid var(--q); border-color: var(--q) transparent transparent transparent; border-radius: 50% 50% 0 0; }
@keyframes pfbd-fall { from { transform: translate3d(0, -8%, 0); } to { transform: translate3d(0, 106%, 0); } }
@keyframes pfbd-spin { from { transform: rotate(0deg) translate3d(0, 0, 0); } 50% { transform: rotate(180deg) translate3d(14px, 0, 0); } to { transform: rotate(360deg) translate3d(0, 0, 0); } }

/* sunburst: slow rotating rays from a point above centre (Wrapped energy) */
.k-sunburst .el:nth-child(1) { inset: auto; left: 50%; top: 36%; width: 150vmax; width: 150cqmax; height: 150vmax; height: 150cqmax; margin: -75vmax 0 0 -75vmax; margin: -75cqmax 0 0 -75cqmax; background: repeating-conic-gradient(from 0deg, var(--bd-ray) 0deg 7deg, transparent 7deg 15deg); -webkit-mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.55) 45%, transparent 100%); mask-image: radial-gradient(circle closest-side, #000 0, rgba(0,0,0,.55) 45%, transparent 100%); animation: pfbd-rot 90s linear infinite; }
.k-sunburst .el:nth-child(2) { inset: auto; left: 50%; top: 36%; width: 120vmax; width: 120cqmax; height: 120vmax; height: 120cqmax; margin: -60vmax 0 0 -60vmax; margin: -60cqmax 0 0 -60cqmax; background: radial-gradient(circle, var(--bd-a2-md) 0%, transparent 55%); animation: pfbd-breathe 6s ease-in-out infinite alternate; }
@keyframes pfbd-rot { to { transform: rotate(360deg); } }
@keyframes pfbd-breathe { from { transform: scale(.9); opacity: .7; } to { transform: scale(1.1); opacity: 1; } }

/* bubbles: glassy circles rising and wobbling */
.k-bubbles .bw { position: absolute; top: 0; height: 100%; width: 0; animation: pfbd-rise 16s linear infinite; }
.k-bubbles .bb { position: absolute; left: 0; top: 0; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--bd-shine) 0 12%, var(--bd-a-lo) 45%, var(--bd-a-md) 100%); box-shadow: inset 0 0 0 1.5px var(--bd-a-md); animation: pfbd-wobble 3.4s ease-in-out infinite alternate; }
@keyframes pfbd-rise { from { transform: translate3d(0, 108%, 0); } to { transform: translate3d(0, -12%, 0); } }
@keyframes pfbd-wobble { from { transform: translate3d(-10px, 0, 0); } to { transform: translate3d(10px, 0, 0); } }

/* paper: fibres + vignette + a slow light sweep */
.k-paper .el:nth-child(1) { background-image: var(--bd-fibre); background-size: 320px 320px; opacity: .55; }
.pf-bd[data-mode=dark] .k-paper .el:nth-child(1) { opacity: .3; }
.k-paper .el:nth-child(2) { background: radial-gradient(ellipse 85% 75% at 50% 45%, transparent 55%, var(--bd-ink-lo) 100%); }
.k-paper .el:nth-child(3) { inset: -50% auto -50% -60%; width: 60%; background: linear-gradient(100deg, transparent, var(--bd-shine-lo), transparent); animation: pfbd-sweep 18s ease-in-out infinite; }
@keyframes pfbd-sweep { 0%, 20% { transform: translate3d(0, 0, 0) rotate(12deg); } 70%, 100% { transform: translate3d(330%, 0, 0) rotate(12deg); } }

@media (prefers-reduced-motion: reduce) {
  .pf-bd *, .pf-bd *::before, .pf-bd *::after { animation: none !important; transition: none !important; }
  .k-confetti .cw { transform: translate3d(0, var(--y0, 40%), 0); }
  .k-bubbles .bw { transform: translate3d(0, var(--y0, 50%), 0); }
}