/* Suelli Black Friday Popup */
.sbfp {
	--sbfp-red: #e2412b;
	--sbfp-red-deep: #b42a18;
	--sbfp-ink: #121212;
	--sbfp-ember: #ffb347;
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: grid;
	place-items: center;
	padding: 16px;
	font-family: "Poppins", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}
.sbfp[hidden] { display: none; }
.sbfp *, .sbfp *::before, .sbfp *::after { box-sizing: border-box; }

.sbfp__backdrop {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 60%, rgba(70, 18, 6, .55), rgba(0, 0, 0, .86) 70%);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity .5s ease;
}

/* Card */
.sbfp__card {
	position: relative;
	width: min(560px, 100%);
	aspect-ratio: 800 / 724;
	max-height: calc(100vh - 32px);
	border-radius: 18px;
	overflow: hidden;
	isolation: isolate;
	color: #fff;
	background-color: var(--sbfp-ink);
	background-image:
		radial-gradient(ellipse 80% 45% at 50% 115%, rgba(255, 98, 20, .38), transparent 70%),
		radial-gradient(ellipse 60% 50% at 50% 45%, rgba(255, 255, 255, .06), transparent 70%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
		linear-gradient(160deg, #262626 0%, #141414 55%, #0c0c0c 100%);
	box-shadow:
		0 0 0 1px rgba(255, 120, 60, .25),
		0 30px 80px -10px rgba(0, 0, 0, .8),
		0 0 120px -20px rgba(255, 80, 20, .55);
	transform: translateY(30px) scale(.86) rotateX(14deg);
	filter: blur(8px);
	opacity: 0;
	transition: transform .75s cubic-bezier(.2, 1.2, .3, 1), opacity .45s ease, filter .6s ease;
	perspective: 900px;
}
@supports not (aspect-ratio: 1) {
	.sbfp__card { height: 506px; }
}
.sbfp.is-open .sbfp__backdrop { opacity: 1; }
.sbfp.is-open .sbfp__card { transform: none; filter: none; opacity: 1; }
.sbfp.is-closing .sbfp__card { transform: scale(.94); opacity: 0; filter: blur(6px); transition-duration: .3s; }
.sbfp.is-closing .sbfp__backdrop { opacity: 0; transition-duration: .3s; }

/* Burning edge on the card border */
.sbfp__card::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: conic-gradient(from var(--sbfp-angle, 0deg), transparent 0 60%, #ff5a1f 72%, #ffd27a 78%, #ff5a1f 84%, transparent 96%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	animation: sbfp-spin 5s linear infinite;
	pointer-events: none;
	z-index: 6;
}
@property --sbfp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes sbfp-spin { to { --sbfp-angle: 360deg; } }

.sbfp__fx {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: none;
	mix-blend-mode: screen;
}

/* Flames rising from the bottom */
.sbfp__flames {
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: -12%;
	height: 42%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(28% 70% at 12% 100%, rgba(255, 170, 60, .55), transparent 70%),
		radial-gradient(22% 85% at 32% 100%, rgba(255, 90, 20, .6), transparent 70%),
		radial-gradient(30% 75% at 52% 100%, rgba(255, 190, 80, .5), transparent 70%),
		radial-gradient(24% 90% at 72% 100%, rgba(255, 80, 20, .6), transparent 70%),
		radial-gradient(26% 70% at 90% 100%, rgba(255, 160, 50, .5), transparent 70%);
	filter: blur(14px);
	opacity: .75;
	transform-origin: 50% 100%;
	animation: sbfp-flicker 1.6s ease-in-out infinite alternate;
}
.sbfp__flames::before,
.sbfp__flames::after {
	content: "";
	position: absolute;
	inset: 0;
	background: inherit;
	transform-origin: 50% 100%;
}
.sbfp__flames::before { animation: sbfp-flicker 1.1s ease-in-out infinite alternate-reverse; transform: translateX(6%) scaleY(.8); opacity: .8; }
.sbfp__flames::after { animation: sbfp-flicker 2.1s ease-in-out infinite alternate; transform: translateX(-7%) scaleY(1.1); opacity: .6; }
@keyframes sbfp-flicker {
	0% { transform: scaleY(.85) skewX(-2deg); opacity: .65; }
	35% { transform: scaleY(1.08) skewX(2deg); opacity: .85; }
	70% { transform: scaleY(.95) skewX(-1deg); opacity: .7; }
	100% { transform: scaleY(1.12) skewX(1.5deg); opacity: .9; }
}

/* Close button */
.sbfp__close {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 8;
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
	transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.sbfp__close:hover { transform: rotate(90deg); background: var(--sbfp-red); border-color: var(--sbfp-red); }
.sbfp__close:focus-visible { outline: 2px solid var(--sbfp-ember); outline-offset: 2px; }

/* Tapes */
.sbfp__tape {
	position: absolute;
	left: -15%;
	width: 130%;
	height: 11.5%;
	display: flex;
	align-items: center;
	overflow: hidden;
	z-index: 3;
	background: linear-gradient(180deg, #ee4d33, var(--sbfp-red) 45%, var(--sbfp-red-deep));
	box-shadow: 0 10px 28px -8px rgba(0, 0, 0, .75), 0 0 30px -6px rgba(255, 80, 30, .55);
	opacity: 0;
	transition: transform .9s cubic-bezier(.2, 1, .3, 1) .25s, opacity .4s ease .25s;
}
.sbfp__tape--top { top: 7%; transform: translateX(-30%) rotate(-7.5deg); }
.sbfp__tape--bottom { top: 68.5%; transform: translateX(30%) rotate(4deg); }
.sbfp.is-open .sbfp__tape { opacity: 1; }
.sbfp.is-open .sbfp__tape--top { transform: rotate(-7.5deg); }
.sbfp.is-open .sbfp__tape--bottom { transform: rotate(4deg); }

.sbfp__track {
	display: flex;
	flex: none;
	white-space: nowrap;
	animation: sbfp-marquee 22s linear infinite;
}
.sbfp__tape--bottom .sbfp__track { animation-direction: reverse; animation-duration: 26s; }
.sbfp__track span {
	padding: 0 1.4em;
	font-weight: 800;
	font-size: clamp(13px, 3.6vw, 21px);
	letter-spacing: .02em;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
@keyframes sbfp-marquee { to { transform: translateX(-50%); } }

/* Frame */
.sbfp__frame {
	position: absolute;
	z-index: 4;
	left: 50%;
	top: 24%;
	width: 63%;
	height: 40%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--sbfp-red);
	box-shadow: 0 0 18px rgba(255, 70, 30, .45), inset 0 0 18px rgba(255, 70, 30, .25);
	animation: sbfp-glow 2.4s ease-in-out infinite;
}
@keyframes sbfp-glow {
	50% { box-shadow: 0 0 30px rgba(255, 110, 40, .75), inset 0 0 26px rgba(255, 110, 40, .35); }
}
.sbfp__brand,
.sbfp__sub {
	position: absolute;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 0 .7em;
	white-space: nowrap;
	background: #171717;
	font-weight: 500;
	line-height: 1;
}
.sbfp__brand { top: 0; font-size: clamp(12px, 3vw, 17px); }
.sbfp__sub { top: 100%; font-size: clamp(12px, 3.3vw, 19px); }

.sbfp__title {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	font-family: inherit;
	font-weight: 800;
	line-height: .92;
	letter-spacing: -.01em;
	text-transform: none;
	color: #fff;
	border: 0;
}
.sbfp__word {
	position: relative;
	display: block;
	font-size: clamp(42px, 13.2vw, 80px);
	color: #fff;
	text-shadow:
		0 0 6px rgba(255, 255, 255, .5),
		0 -2px 10px rgba(255, 200, 80, .7),
		0 -6px 22px rgba(255, 120, 30, .65),
		0 -12px 40px rgba(255, 60, 10, .5);
	animation: sbfp-burn 1.4s ease-in-out infinite alternate;
}
.sbfp__word + .sbfp__word { animation-delay: -.7s; }
/* Fire licking the lower half of each letter */
.sbfp__word::after {
	content: attr(data-text);
	position: absolute;
	inset: 0;
	color: transparent;
	background: linear-gradient(0deg, #ff3d00 0%, #ff8a1f 22%, #ffd36b 40%, rgba(255, 255, 255, 0) 62%);
	background-size: 100% 220%;
	-webkit-background-clip: text;
	background-clip: text;
	text-shadow: none;
	mix-blend-mode: screen;
	animation: sbfp-lick 2.2s ease-in-out infinite;
}
@keyframes sbfp-burn {
	0% { text-shadow: 0 0 6px rgba(255, 255, 255, .5), 0 -2px 10px rgba(255, 200, 80, .6), 0 -6px 20px rgba(255, 120, 30, .55), 0 -12px 34px rgba(255, 60, 10, .4); }
	100% { text-shadow: 0 0 8px rgba(255, 255, 255, .65), 0 -4px 14px rgba(255, 210, 90, .85), 0 -10px 30px rgba(255, 130, 30, .75), 0 -18px 52px rgba(255, 60, 10, .6); }
}
@keyframes sbfp-lick {
	0%, 100% { background-position: 0 0; }
	50% { background-position: 0 30%; }
}

/* CTA */
.sbfp__cta {
	position: absolute;
	z-index: 5;
	left: 50%;
	bottom: 4%;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .75em 1.6em;
	border: 2px solid var(--sbfp-red);
	background: rgba(0, 0, 0, .55);
	color: #fff !important;
	font-weight: 600;
	font-size: clamp(14px, 3.6vw, 19px);
	letter-spacing: .04em;
	text-decoration: none !important;
	white-space: nowrap;
	overflow: hidden;
	isolation: isolate;
	transition: color .3s ease, transform .3s ease, box-shadow .3s ease;
	box-shadow: 0 0 0 0 rgba(255, 80, 30, .6);
	animation: sbfp-pulse 2.2s ease-out infinite;
}
.sbfp__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(90deg, #ff3d00, #ff7a1f, #ffb347, #ff3d00);
	background-size: 300% 100%;
	transform: translateY(101%);
	transition: transform .35s cubic-bezier(.2, .9, .3, 1);
	animation: sbfp-lava 3s linear infinite;
}
.sbfp__cta::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 40%;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
	transform: skewX(-20deg);
	animation: sbfp-shine 3.2s ease-in-out infinite 1.2s;
}
.sbfp__cta svg { transition: transform .3s ease; }
.sbfp__cta:hover,
.sbfp__cta:focus-visible { transform: translateX(-50%) translateY(-2px); outline: none; box-shadow: 0 10px 30px -6px rgba(255, 80, 20, .8); }
.sbfp__cta:hover::before,
.sbfp__cta:focus-visible::before { transform: translateY(0); }
.sbfp__cta:hover svg { transform: translateX(4px); }
@keyframes sbfp-pulse {
	0% { box-shadow: 0 0 0 0 rgba(255, 80, 30, .55); }
	70%, 100% { box-shadow: 0 0 0 16px rgba(255, 80, 30, 0); }
}
@keyframes sbfp-lava { to { background-position: 300% 0; } }
@keyframes sbfp-shine { 0% { left: -60%; } 40%, 100% { left: 130%; } }

/* Shake on fireworks burst */
.sbfp__card.is-boom { animation: sbfp-boom .35s ease; }
@keyframes sbfp-boom {
	25% { transform: translate(1px, -1px); }
	50% { transform: translate(-1px, 1px); }
	75% { transform: translate(1px, 0); }
}

html.sbfp-lock, html.sbfp-lock body { overflow: hidden !important; }

@media (max-width: 420px) {
	.sbfp__frame { width: 72%; }
	.sbfp__close { width: 34px; height: 34px; top: 8px; right: 8px; }
}
@media (max-height: 560px) {
	.sbfp__card { width: auto; height: calc(100vh - 32px); }
}

@media (prefers-reduced-motion: reduce) {
	.sbfp__card, .sbfp__tape { transition: opacity .3s ease; transform: none !important; filter: none !important; }
	.sbfp__tape--top { transform: rotate(-7.5deg) !important; }
	.sbfp__tape--bottom { transform: rotate(4deg) !important; }
	.sbfp__track, .sbfp__flames, .sbfp__flames::before, .sbfp__flames::after,
	.sbfp__word, .sbfp__word::after, .sbfp__frame, .sbfp__cta, .sbfp__cta::after, .sbfp__card::after { animation: none !important; }
}