/**
 * The fun layer: glossy balloon shapes and rainbow gradients taken from the
 * logo and the refer-a-friend ad. Buttons, type and the core colors stay as
 * they are. Switch it off under Customize → Bounce settings → Brand colors.
 */

:root {
	--party-red: #ff3131;
	--party-orange: #ff8a00;
	--party-yellow: #ffd21f;
	--party-green: #33c24d;
	--party-blue: #1e90ff;
	--party-purple: #8b45e6;
	--party-pink: #ff3fa8;
	--party-rainbow: linear-gradient( 90deg, var( --party-red ) 0%, var( --party-orange ) 16%, var( --party-yellow ) 32%, var( --party-green ) 50%, var( --party-blue ) 67%, var( --party-purple ) 83%, var( --party-pink ) 100% );
}

/* ---------------------------------------------------------------------------
   Rainbow accents
   ------------------------------------------------------------------------ */

/* A thin rainbow along the top of the header, like the ad's banner. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: var( --party-rainbow );
}

/* *Asterisked* words in headlines become glossy rainbow balloon letters. */
.hero h1 em,
.section-head h2 em,
.page-hero h1 em {
	background: var( --party-rainbow );
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow( 0 3px 0 rgba( 29, 35, 48, 0.14 ) );
	animation: party-shimmer 9s ease-in-out infinite alternate;
}

@keyframes party-shimmer {
	to {
		background-position: 100% 0;
	}
}

/* Eyebrow pills get a rainbow outline. */
.eyebrow {
	border: 2px solid transparent;
	background:
		linear-gradient( #fff1ec, #fff1ec ) padding-box,
		var( --party-rainbow ) border-box;
}

.section--ink .eyebrow {
	background:
		linear-gradient( #262d3c, #262d3c ) padding-box,
		var( --party-rainbow ) border-box;
}

/* Rainbow ribbon under the footer's top edge. */
.site-footer {
	position: relative;
}

.site-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 6px;
	background: var( --party-rainbow );
}

/* ---------------------------------------------------------------------------
   Glossy balloon icons: each card gets a different logo color
   ------------------------------------------------------------------------ */

.feature .icon,
.step::before {
	--c: var( --party-red );
	color: #fff !important;
	background:
		radial-gradient( circle at 30% 26%, rgba( 255, 255, 255, 0.95 ) 0 7%, rgba( 255, 255, 255, 0.4 ) 13%, rgba( 255, 255, 255, 0 ) 30% ),
		radial-gradient( circle at 50% 60%, var( --c ) 0 58%, color-mix( in srgb, var( --c ) 62%, #000 ) 100% ) !important;
	box-shadow:
		inset -4px -7px 12px rgba( 0, 0, 0, 0.16 ),
		0 10px 20px color-mix( in srgb, var( --c ) 32%, transparent ) !important;
	border-radius: 999px !important;
	text-shadow: 0 2px 0 rgba( 0, 0, 0, 0.18 );
}

.feature:nth-child( 4n + 2 ) .icon,
.step:nth-child( 3n + 2 )::before {
	--c: var( --party-blue );
}

.feature:nth-child( 4n + 3 ) .icon,
.step:nth-child( 3n + 3 )::before {
	--c: var( --party-green );
}

.feature:nth-child( 4n + 4 ) .icon {
	--c: var( --party-purple );
}

/* Cards pick up a rainbow edge when you hover them. */
.feature,
.step,
.woocommerce ul.products li.product {
	position: relative;
}

.feature::after,
.step::after,
.woocommerce ul.products li.product::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: var( --party-rainbow );
	-webkit-mask: linear-gradient( #000 0 0 ) content-box, linear-gradient( #000 0 0 );
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.25s ease;
	pointer-events: none;
}

.feature:hover::after,
.step:hover::after,
.woocommerce ul.products li.product:hover::after {
	opacity: 1;
}

/* ---------------------------------------------------------------------------
   Closing banner: a rainbow sky instead of flat red
   ------------------------------------------------------------------------ */

.cta-band {
	background:
		radial-gradient( 60% 90% at 12% 10%, rgba( 255, 210, 31, 0.55 ) 0%, rgba( 255, 210, 31, 0 ) 60% ),
		radial-gradient( 55% 80% at 92% 90%, rgba( 30, 144, 255, 0.7 ) 0%, rgba( 30, 144, 255, 0 ) 62% ),
		linear-gradient( 120deg, #f0262d 0%, #ff3f7f 38%, #a044ec 72%, #2f7df5 100% );
	box-shadow: 0 24px 50px rgba( 160, 68, 236, 0.28 );
}

.cta-band > *:not( .party-bits ) {
	position: relative;
	z-index: 1;
}

.cta-band h2 {
	text-shadow: 0 3px 0 rgba( 0, 0, 0, 0.14 );
}

/* ---------------------------------------------------------------------------
   Floating bubbles, stars and splashes
   ------------------------------------------------------------------------ */

.party-bits {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
	z-index: 0;
}

.party-bits > span {
	--c: var( --party-blue );
	position: absolute;
	display: block;
	animation: party-float 8s ease-in-out infinite;
	will-change: transform;
}

.party-bits .c-red { --c: var( --party-red ); }
.party-bits .c-orange { --c: var( --party-orange ); }
.party-bits .c-yellow { --c: var( --party-yellow ); }
.party-bits .c-green { --c: var( --party-green ); }
.party-bits .c-blue { --c: var( --party-blue ); }
.party-bits .c-purple { --c: var( --party-purple ); }
.party-bits .c-pink { --c: var( --party-pink ); }

/* A shiny inflatable ball: a soft white highlight top-left, a darker rim
   bottom-right, and a colored glow underneath. */
.party-bits .bubble {
	width: var( --s, 48px );
	height: var( --s, 48px );
	border-radius: 50%;
	background:
		radial-gradient( circle at 30% 26%, rgba( 255, 255, 255, 0.98 ) 0 6%, rgba( 255, 255, 255, 0.45 ) 12%, rgba( 255, 255, 255, 0 ) 28% ),
		radial-gradient( circle at 50% 58%, var( --c ) 0 56%, color-mix( in srgb, var( --c ) 58%, #000 ) 100% );
	box-shadow:
		inset -6px -10px 18px rgba( 0, 0, 0, 0.18 ),
		inset 4px 6px 10px rgba( 255, 255, 255, 0.25 ),
		0 14px 26px color-mix( in srgb, var( --c ) 30%, transparent );
}

/* A puffy five-point star. */
.party-bits .star {
	width: var( --s, 38px );
	height: var( --s, 38px );
	background:
		radial-gradient( circle at 38% 30%, rgba( 255, 255, 255, 0.9 ) 0 8%, rgba( 255, 255, 255, 0 ) 30% ),
		radial-gradient( circle at 50% 55%, var( --c ) 0 50%, color-mix( in srgb, var( --c ) 62%, #000 ) 100% );
	clip-path: polygon( 50% 3%, 62% 36%, 97% 37%, 69% 58%, 80% 93%, 50% 72%, 20% 93%, 31% 58%, 3% 37%, 38% 36% );
	filter: drop-shadow( 0 6px 8px color-mix( in srgb, var( --c ) 40%, transparent ) );
	animation-name: party-spin-float;
}

/* A paint splash drop, like the ones fanning out behind the logo. */
.party-bits .drop {
	width: var( --s, 34px );
	height: calc( var( --s, 34px ) * 1.5 );
	border-radius: 50% 50% 50% 50% / 38% 38% 62% 62%;
	background:
		radial-gradient( ellipse at 34% 30%, rgba( 255, 255, 255, 0.9 ) 0 8%, rgba( 255, 255, 255, 0 ) 30% ),
		radial-gradient( ellipse at 50% 60%, var( --c ) 0 55%, color-mix( in srgb, var( --c ) 60%, #000 ) 100% );
	box-shadow: inset -4px -8px 12px rgba( 0, 0, 0, 0.16 ), 0 10px 18px color-mix( in srgb, var( --c ) 28%, transparent );
	transform: rotate( var( --r, -25deg ) );
	animation-name: party-drop-float;
}

@keyframes party-float {
	0%,
	100% { transform: translate3d( 0, 0, 0 ); }
	50% { transform: translate3d( 0, -16px, 0 ); }
}

@keyframes party-spin-float {
	0%,
	100% { transform: translate3d( 0, 0, 0 ) rotate( 0deg ); }
	50% { transform: translate3d( 0, -12px, 0 ) rotate( 14deg ); }
}

@keyframes party-drop-float {
	0%,
	100% { transform: rotate( var( --r, -25deg ) ) translate3d( 0, 0, 0 ); }
	50% { transform: rotate( var( --r, -25deg ) ) translate3d( 0, -12px, 0 ); }
}

/* Hero arrangement: around the edges, clear of the headline and buttons. */
.party-bits--hero .b1 { --s: 74px; top: 7%; left: -22px; animation-duration: 9s; }
.party-bits--hero .b2 { --s: 34px; top: 12%; left: 44%; animation-delay: -2s; }
.party-bits--hero .b3 { --s: 56px; bottom: 6%; left: 38%; animation-duration: 10s; animation-delay: -4s; }
.party-bits--hero .b4 { --s: 28px; bottom: 4%; left: 12%; animation-delay: -1s; }
.party-bits--hero .b5 { --s: 46px; top: 4%; right: 3%; animation-duration: 11s; animation-delay: -3s; }
.party-bits--hero .s1 { --s: 40px; top: 30%; left: 47%; animation-duration: 7s; }
.party-bits--hero .s2 { --s: 30px; bottom: 10%; right: 6%; animation-delay: -3s; }
.party-bits--hero .s3 { --s: 24px; top: 6%; left: 24%; animation-delay: -5s; }
.party-bits--hero .d1 { --s: 26px; --r: 30deg; bottom: 30%; right: 1.5%; animation-duration: 9s; }
.party-bits--hero .d2 { --s: 22px; --r: -35deg; top: 62%; left: 47%; animation-delay: -2s; }

/* Closing banner arrangement. */
.party-bits--cta .b1 { --s: 64px; top: -14px; left: 5%; }
.party-bits--cta .b2 { --s: 90px; bottom: -30px; right: 4%; animation-duration: 10s; animation-delay: -3s; }
.party-bits--cta .b3 { --s: 26px; bottom: 12%; left: 22%; animation-delay: -1s; }
.party-bits--cta .s1 { --s: 34px; bottom: 10%; left: 7%; animation-delay: -2s; }
.party-bits--cta .s2 { --s: 26px; bottom: 16%; right: 20%; animation-delay: -4s; }

.hero .hero-grid {
	z-index: 2;
}

@media ( max-width: 900px ) {
	/* Fewer, smaller bits where the headline takes the whole width. */
	.party-bits--hero .b2,
	.party-bits--hero .s1,
	.party-bits--hero .b3,
	.party-bits--hero .d2,
	.party-bits--hero .b4,
	.party-bits--cta .b3,
	.party-bits--cta .s2 {
		display: none;
	}

	.party-bits--hero .b1 { --s: 52px; }
	.party-bits--hero .b5 { --s: 34px; }
}

@media ( prefers-reduced-motion: reduce ) {
	.party-bits > span,
	.hero h1 em,
	.section-head h2 em,
	.page-hero h1 em {
		animation: none;
	}
}