/* Basiclust Pumpaspel – allt är scopat under #blp-root och text har !important mot Kadence */

#blp-root {
	--blp-ink: #efe3da;
	--blp-soft: #cdb3ba;
	--blp-mute: #a8868f;
	--blp-brand: #c94070;
	--blp-hot: #f2136a;
	--blp-deep: #0e0508;
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	max-width: 100vw;
	margin: 0 calc(50% - 50vw) !important;
	padding: clamp(72px, 12vw, 120px) 20px clamp(64px, 10vw, 96px) !important;
	overflow: hidden;
	isolation: isolate;
	background:
		radial-gradient(60% 40% at 50% 78%, rgba(242, 19, 106, 0.16) 0%, rgba(242, 19, 106, 0) 70%),
		linear-gradient(180deg, #07030a 0%, #12070e 35%, #1d0a14 70%, #0e0508 100%) !important;
	color: var(--blp-ink) !important;
	text-align: center;
}
#blp-root *,
#blp-root *::before,
#blp-root *::after { box-sizing: border-box; }
body:has(#blp-root) { overflow-x: clip; }

/* ---------- Scenen ---------- */
#blp-root .blp-sky {
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}
#blp-root .blp-stars {
	position: absolute;
	top: 0;
	left: 50%;
	width: 1px;
	height: 1px;
	margin-left: -800px;
	background: transparent;
	box-shadow: 663px 154px 0 1px rgba(255,203,217,0.25),748px 59px 0 0px rgba(255,202,217,0.7),856px 71px 0 0px rgba(255,205,232,0.7),121px 126px 0 0px rgba(255,203,233,0.7),101px 226px 0 0px rgba(255,235,219,0.5),858px 147px 0 0px rgba(255,219,232,0.35),211px 192px 0 0px rgba(255,206,232,0.25),1155px 61px 0 0px rgba(255,231,236,0.7),1591px 321px 0 1px rgba(255,229,226,0.5),508px 184px 0 0px rgba(255,205,233,0.5),1075px 506px 0 0px rgba(255,228,224,0.25),241px 428px 0 0px rgba(255,221,219,0.7),863px 40px 0 0px rgba(255,235,233,0.5),696px 358px 0 1px rgba(255,229,217,0.25),552px 485px 0 0px rgba(255,203,238,0.5),1325px 456px 0 0px rgba(255,224,236,0.5),46px 472px 0 0px rgba(255,210,234,0.25),1011px 60px 0 0px rgba(255,218,219,0.35),814px 400px 0 1px rgba(255,205,220,0.7),822px 284px 0 0px rgba(255,227,232,0.5),1446px 425px 0 0px rgba(255,224,222,0.35),169px 180px 0 0px rgba(255,214,236,0.35),24px 496px 0 0px rgba(255,216,224,0.25),298px 429px 0 0px rgba(255,220,219,0.25),935px 401px 0 1px rgba(255,225,227,0.25),986px 410px 0 0px rgba(255,212,217,0.35),902px 166px 0 0px rgba(255,221,234,0.25),209px 0px 0 0px rgba(255,234,218,0.5),1256px 26px 0 0px rgba(255,213,234,0.7),304px 258px 0 0px rgba(255,223,230,0.25),236px 499px 0 1px rgba(255,230,230,0.5),175px 147px 0 0px rgba(255,221,238,0.5),980px 165px 0 0px rgba(255,213,231,0.5),300px 27px 0 0px rgba(255,205,237,0.5),1061px 375px 0 0px rgba(255,222,239,0.35),1090px 514px 0 0px rgba(255,214,234,0.35),490px 410px 0 0px rgba(255,212,231,0.7),728px 29px 0 0px rgba(255,217,230,0.5),396px 352px 0 1px rgba(255,222,226,0.25),451px 104px 0 0px rgba(255,230,221,0.5),418px 494px 0 0px rgba(255,230,235,0.5),1317px 86px 0 0px rgba(255,224,240,0.35),979px 182px 0 1px rgba(255,221,217,0.7),948px 411px 0 0px rgba(255,210,220,0.35),56px 154px 0 1px rgba(255,209,234,0.7),1346px 358px 0 0px rgba(255,235,232,0.35),43px 14px 0 0px rgba(255,233,238,0.35),888px 199px 0 0px rgba(255,201,223,0.35),599px 513px 0 0px rgba(255,220,223,0.7),268px 62px 0 0px rgba(255,229,236,0.7),1027px 133px 0 0px rgba(255,233,231,0.25),901px 187px 0 0px rgba(255,209,220,0.35),969px 123px 0 0px rgba(255,220,236,0.7),1590px 108px 0 0px rgba(255,215,221,0.5),86px 100px 0 1px rgba(255,235,215,0.25),907px 333px 0 0px rgba(255,217,229,0.7),1039px 253px 0 0px rgba(255,235,221,0.7),280px 426px 0 0px rgba(255,225,229,0.5),148px 246px 0 1px rgba(255,204,221,0.5),250px 158px 0 0px rgba(255,209,223,0.35),957px 224px 0 0px rgba(255,225,230,0.35),1367px 229px 0 0px rgba(255,227,231,0.7),694px 431px 0 0px rgba(255,222,225,0.25),1478px 374px 0 0px rgba(255,221,232,0.7),902px 18px 0 1px rgba(255,221,231,0.5),1049px 65px 0 0px rgba(255,214,218,0.25),543px 278px 0 0px rgba(255,211,223,0.35),864px 264px 0 1px rgba(255,209,232,0.7),1434px 334px 0 0px rgba(255,217,216,0.35),871px 74px 0 0px rgba(255,201,235,0.25),533px 85px 0 0px rgba(255,204,223,0.25),929px 11px 0 0px rgba(255,235,228,0.5),1273px 132px 0 0px rgba(255,233,237,0.35),224px 165px 0 0px rgba(255,203,220,0.35),638px 312px 0 0px rgba(255,218,229,0.35),554px 355px 0 0px rgba(255,216,216,0.25),37px 517px 0 0px rgba(255,232,230,0.35),915px 108px 0 1px rgba(255,231,232,0.7),1037px 315px 0 0px rgba(255,214,225,0.35),1447px 143px 0 1px rgba(255,222,216,0.35),29px 72px 0 0px rgba(255,227,220,0.25),173px 390px 0 0px rgba(255,215,237,0.5),92px 470px 0 0px rgba(255,210,223,0.7),7px 269px 0 0px rgba(255,221,232,0.5),500px 35px 0 0px rgba(255,213,226,0.35),2px 343px 0 1px rgba(255,205,230,0.5),1029px 205px 0 0px rgba(255,232,239,0.25),186px 270px 0 0px rgba(255,209,227,0.25),806px 23px 0 0px rgba(255,219,235,0.35),173px 158px 0 1px rgba(255,220,238,0.7);
	animation: blp-twinkle 6s ease-in-out infinite alternate;
}
#blp-root .blp-moon {
	position: absolute;
	top: clamp(28px, 6vw, 64px);
	right: clamp(18px, 10vw, 14%);
	width: clamp(70px, 12vw, 132px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 36% 34%, #fff3ec 0%, #f6d3de 38%, #e08aa8 72%, #c94070 100%);
	box-shadow: 0 0 60px 12px rgba(242, 19, 106, 0.28), 0 0 160px 40px rgba(242, 19, 106, 0.12);
	opacity: .9;
}
#blp-root .blp-moon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background:
		radial-gradient(circle at 62% 58%, rgba(160, 50, 90, 0.35) 0 9%, transparent 10%),
		radial-gradient(circle at 40% 70%, rgba(160, 50, 90, 0.25) 0 6%, transparent 7%),
		radial-gradient(circle at 70% 30%, rgba(160, 50, 90, 0.2) 0 5%, transparent 6%);
}
#blp-root .blp-bat {
	position: absolute;
	left: 0;
	top: 0;
	width: clamp(26px, 4vw, 42px);
	opacity: 0;
	will-change: transform;
}
#blp-root .blp-bat-svg {
	display: block;
	width: 100%;
	height: auto;
	fill: #3d1828;
	filter: drop-shadow(0 0 4px rgba(242, 19, 106, 0.35));
	transform-origin: 50% 40%;
	animation: blp-flap .32s ease-in-out infinite alternate;
}
#blp-root .blp-bat-1 { animation: blp-fly-1 16s linear 2s infinite; }
#blp-root .blp-bat-2 { animation: blp-fly-2 23s linear 9s infinite; width: clamp(18px, 3vw, 28px); }

#blp-root .blp-fog {
	position: absolute;
	left: -50%;
	width: 200%;
	height: 220px;
	bottom: -40px;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(30% 60% at 20% 60%, rgba(205, 179, 186, 0.10), transparent 70%),
		radial-gradient(25% 50% at 55% 70%, rgba(205, 179, 186, 0.08), transparent 70%),
		radial-gradient(30% 55% at 85% 55%, rgba(205, 179, 186, 0.10), transparent 70%);
	animation: blp-drift 60s linear infinite;
}
#blp-root .blp-fog-2 {
	bottom: 18%;
	height: 260px;
	opacity: .7;
	animation-duration: 90s;
	animation-direction: reverse;
}
#blp-root .blp-inner { position: relative; z-index: 1; }

#blp-root .blp-hill {
	position: absolute;
	left: -30%;
	right: -30%;
	bottom: -18px;
	height: 70px;
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	background: linear-gradient(180deg, #1a0910 0%, #0e0508 100%);
	box-shadow: 0 -1px 0 rgba(201, 64, 112, 0.25);
	z-index: 0;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	-webkit-mask-composite: source-in;
	mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%), linear-gradient(180deg, #000 55%, transparent 100%);
	mask-composite: intersect;
}
@media (max-width: 600px) {
	#blp-root .blp-moon { top: 14px; right: 14px; width: 54px; }
	#blp-root .blp-stars { opacity: .6; }
}

#blp-root .blp-inner {
	max-width: 560px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
}

#blp-root .blp-title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: clamp(46px, 10vw, 70px) !important;
	line-height: 1.02 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--blp-ink) !important;
	text-shadow: 0 0 28px rgba(242, 19, 106, 0.35);
}

#blp-root .blp-lead {
	margin: 0 !important;
	max-width: 44ch;
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 17px !important;
	line-height: 1.6 !important;
	color: var(--blp-soft) !important;
}

/* Formulär */
#blp-root .blp-form {
	width: 100%;
	max-width: 420px;
	margin: 10px 0 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
}
#blp-root .blp-label {
	margin: 0 !important;
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	color: var(--blp-mute) !important;
}
#blp-root .blp-input {
	width: 100% !important;
	height: auto !important;
	margin: 0 !important;
	padding: 15px 18px !important;
	border: 1px solid #4a1a2c !important;
	border-radius: 12px !important;
	background: var(--blp-deep) !important;
	box-shadow: none !important;
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.3 !important;
	color: var(--blp-ink) !important;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}
#blp-root .blp-input::placeholder { color: #6e4f58 !important; }
#blp-root .blp-input:focus {
	border-color: var(--blp-brand) !important;
	box-shadow: 0 0 0 3px rgba(201, 64, 112, 0.25) !important;
}
#blp-root .blp-consent {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 6px 0 0 !important;
	cursor: pointer;
}
#blp-root .blp-consent input {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 2px 0 0 !important;
	accent-color: var(--blp-brand);
	cursor: pointer;
}
#blp-root .blp-consent span {
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--blp-soft) !important;
}
#blp-root .blp-consent a {
	color: var(--blp-hot) !important;
	text-decoration: underline !important;
}
#blp-root .blp-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	opacity: 0 !important;
}

/* Ledtext */
#blp-root .blp-hint {
	min-height: 28px;
	margin: 8px 0 0 !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	color: var(--blp-brand) !important;
}
#blp-root .blp-hint.is-error { color: #ff8fb3 !important; }

/* Pumporna */
#blp-root .blp-patch {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(8px, 4vw, 32px);
	width: 100%;
	max-width: 520px;
	margin: 4px 0 0;
	padding: 24px 0 8px;
}
#blp-root .blp-patch { position: relative; }
#blp-root .blp-pumpkin {
	all: unset;
	position: relative;
	z-index: 1;
	display: block;
	cursor: pointer;
	border-radius: 50%;
	-webkit-tap-highlight-color: transparent;
	transition: transform .35s ease, opacity .5s ease, filter .5s ease;
}
#blp-root .blp-pumpkin svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}
#blp-root .blp-pumpkin::after {
	content: "";
	position: absolute;
	left: 18%;
	right: 18%;
	bottom: -6px;
	height: 12px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	filter: blur(4px);
	z-index: -1;
}
#blp-root .blp-pumpkin::before {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 60%;
	width: 90%;
	height: 120%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at 50% 100%, rgba(242, 19, 106, 0.55) 0%, rgba(242, 19, 106, 0) 70%);
	opacity: 0;
	pointer-events: none;
	transition: opacity .9s ease .2s;
}
#blp-root .blp-pumpkin:disabled {
	cursor: default;
	opacity: .45;
	filter: saturate(.35) brightness(.7);
}
#blp-root .blp-pumpkin:not(:disabled):hover { transform: translateY(-6px); }
#blp-root .blp-pumpkin:focus-visible {
	outline: 2px dashed var(--blp-brand);
	outline-offset: 6px;
}

#blp-root .blp-face path {
	fill: #2a0d10;
	transition: fill .5s ease;
}
#blp-root.is-ready .blp-face path {
	fill: var(--blp-hot);
	animation: blp-flicker 2.6s ease-in-out infinite;
}
#blp-root.is-ready .blp-pumpkin:nth-child(2) .blp-face path { animation-delay: .7s; }
#blp-root.is-ready .blp-pumpkin:nth-child(3) .blp-face path { animation-delay: 1.4s; }

#blp-root .blp-lid {
	transform-box: fill-box;
	transform-origin: 30% 100%;
	transition: transform .8s cubic-bezier(.2, .9, .3, 1.3);
}

/* Vald pumpa */
#blp-root.is-picking .blp-pumpkin:not(.is-chosen),
#blp-root.is-revealed .blp-pumpkin:not(.is-chosen) {
	opacity: .15;
	filter: saturate(.2) brightness(.5);
	transform: scale(.9);
}
#blp-root .blp-pumpkin.is-chosen {
	opacity: 1;
	filter: drop-shadow(0 0 22px rgba(242, 19, 106, 0.75));
	animation: blp-wiggle .45s ease-in-out 3;
}
#blp-root .blp-pumpkin.is-chosen .blp-face path {
	fill: #ffe1ec;
	animation: none;
}
#blp-root .blp-pumpkin.is-open { animation: none; }
#blp-root .blp-pumpkin.is-open .blp-lid { transform: translate(6px, -22px) rotate(-24deg); }
#blp-root .blp-pumpkin.is-open::before { opacity: 1; }

/* Resultat */
#blp-root .blp-result {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
	animation: blp-rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
#blp-root .blp-result[hidden] { display: none; }
#blp-root .blp-pre {
	margin: 0 !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-size: 24px !important;
	line-height: 1.3 !important;
	color: var(--blp-soft) !important;
}
#blp-root .blp-pct {
	margin: 0 !important;
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
	font-style: italic !important;
	font-weight: 600 !important;
	font-size: clamp(100px, 24vw, 156px) !important;
	line-height: .95 !important;
	color: var(--blp-hot) !important;
	text-shadow: 0 0 36px rgba(242, 19, 106, 0.55);
	white-space: nowrap;
}
#blp-root .blp-line {
	margin: 0 !important;
	font-family: 'Cormorant Garamond', Georgia, serif !important;
	font-style: italic !important;
	font-size: 26px !important;
	line-height: 1.25 !important;
	color: var(--blp-ink) !important;
}
#blp-root .blp-sent {
	margin: 10px 0 0 !important;
	max-width: 42ch;
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 16px !important;
	line-height: 1.55 !important;
	color: var(--blp-soft) !important;
}
#blp-root .blp-btn {
	all: unset;
	display: inline-block;
	margin-top: 14px;
	padding: 17px 40px;
	border-radius: 999px;
	background: var(--blp-brand);
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 20px !important;
	color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: background .2s ease;
}
#blp-root .blp-btn:hover { background: var(--blp-hot); }
#blp-root .blp-btn:focus-visible {
	outline: 2px solid var(--blp-ink);
	outline-offset: 3px;
}
#blp-root .blp-small,
#blp-root .blp-terms {
	margin: 8px 0 0 !important;
	max-width: 46ch;
	font-family: 'DM Sans', Arial, Helvetica, sans-serif !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--blp-mute) !important;
}
#blp-root .blp-terms { margin-top: 28px !important; }

/* Stängt */
#blp-root.is-closed .blp-form,
#blp-root.is-closed .blp-patch {
	opacity: .3;
	pointer-events: none;
}

@keyframes blp-twinkle {
	from { opacity: .55; }
	to { opacity: 1; }
}
@keyframes blp-flap {
	from { transform: scaleY(1); }
	to { transform: scaleY(.35); }
}
@keyframes blp-fly-1 {
	0% { opacity: 0; transform: translate(-10vw, 160px) rotate(-6deg); }
	5% { opacity: 1; }
	30% { transform: translate(28vw, 90px) rotate(4deg); }
	60% { transform: translate(62vw, 150px) rotate(-5deg); }
	45%, 95% { opacity: 1; }
	100% { opacity: 0; transform: translate(110vw, 60px) rotate(6deg); }
}
@keyframes blp-fly-2 {
	0% { opacity: 0; transform: translate(110vw, 70px) scaleX(-1); }
	6% { opacity: .8; }
	40% { transform: translate(70vw, 130px) scaleX(-1); }
	75% { transform: translate(30vw, 50px) scaleX(-1); }
	94% { opacity: .8; }
	100% { opacity: 0; transform: translate(-10vw, 110px) scaleX(-1); }
}
@keyframes blp-drift {
	from { transform: translateX(0); }
	to { transform: translateX(25%); }
}
@keyframes blp-flicker {
	0%, 100% { opacity: .55; }
	40% { opacity: .9; }
	45% { opacity: .6; }
	50% { opacity: .95; }
	70% { opacity: .7; }
}
@keyframes blp-wiggle {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-6deg); }
	75% { transform: rotate(6deg); }
}
@keyframes blp-rise {
	from { opacity: 0; transform: translateY(28px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	#blp-root *,
	#blp-root *::before,
	#blp-root *::after {
		animation: none !important;
		transition: none !important;
	}
}
