/* ==========================================================================
   Blooopp Stacked Card Deck (Exact Pixel Match to Image 2 Target Design)
   ========================================================================== */

/* Outer Wrapper */
.blooopp-accordion-card-stack {
	position: relative;
	width: 100%;
	max-width: 700px !important;
	margin: 0 auto !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
	box-sizing: border-box;
}

/* Stacked Deck Container Layer */
.blooopp-card-stack-container {
	position: relative;
	width: 100%;
	min-height: 520px;
	box-sizing: border-box;
	background-color: transparent !important;
}

/* Individual Card Shells with Stacking Dark Card Shadows & Outer Borders */
.blooopp-accordion-card-item {
	position: absolute;
	top: 20px;
	left: 0;
	width: 100%;
	border-radius: 36px 36px 0px 0px !important;
	overflow: hidden;
	background-color: #161616;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
	border: 1px solid rgba(255, 255, 255, 0.14) !important;
	transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), height 0.5s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
	box-sizing: border-box;
}

.blooopp-accordion-card-item:last-child,
.blooopp-accordion-card-item.is-active:last-child {
	border-radius: 36px !important;
}

.blooopp-accordion-card-item:last-child .blooopp-card-content-body,
.blooopp-accordion-card-item.is-active:last-child .blooopp-card-content-body {
	padding: 8px 28px 28px 28px !important;
}


/* Card Header White Pill Button */
.blooopp-card-header-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: calc(100% - 32px);
	margin: 16px auto 16px auto !important;
	margin-bottom: 48px !important;
	padding: 10px 5px;
	border: none;
	border-radius: 19px !important;
	background-color: #ffffff !important;
	color: #000000 !important;
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), sans-serif;
	font-size: 2.188rem !important;
	font-weight: 900;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	outline: none;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	user-select: none;
	box-sizing: border-box;
}

.blooopp-card-header-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

.blooopp-card-header-text {
	font-size: clamp(2.5rem, 0rem + 2vw, 5rem);
	margin-bottom: -10px;
}

/* Card Body Content */
.blooopp-card-content-body {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 0.45s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.35s ease, padding 0.45s ease;
	padding: 0 28px;
	box-sizing: border-box;
}

.blooopp-card-inner-wrap {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
}

/* Active State for Expanded Card (Shows body content) */
.blooopp-accordion-card-item.is-active {
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.8) !important;
	border-color: rgba(255, 255, 255, 0.2) !important;

}

.blooopp-accordion-card-item.is-active .blooopp-card-content-body {
	grid-template-rows: 1fr;
	opacity: 1;
	padding: 8px 28px 70px 28px;
	margin-top: -40px;
}

/* Typography & Inner Blocks */
.blooopp-card-inner-wrap p {
	font-family: 'Sequel Sans', var(--wp--preset--font-family--sequel-sans), sans-serif;
	font-size: clamp(1.151rem, 1.151rem + ((1vw - 0.2rem) * 0.941), 1.51rem);
	line-height: 1.55;
	font-weight: 500;
	color: #ffffff;
	margin: 12px 0 0 0;
}

.blooopp-card-inner-wrap h1,
.blooopp-card-inner-wrap h2,
.blooopp-card-inner-wrap h3,
.blooopp-card-inner-wrap h4 {
	font-family: 'Blacky', 'Blacky Modern Headline Food Font', var(--wp--preset--font-family--blacky-modern-headline-food-font), sans-serif;
	color: #ffffff;
	margin: 12px 0;
}

.blooopp-card-inner-wrap img {
	max-width: 100%;
	height: auto;
	margin: 12px 0;
}

/* ==========================================================================
   STYLE 2: Scroll Join / Separate Cards (Bucks Sauce Reference)
   ========================================================================== */
.anim-style-style2 {
	position: relative;
	width: 100%;
}

.anim-style-style2 .blooopp-card-stack-container {
	position: sticky;
	top: clamp(60px, 14vh, 120px);
	width: 100%;
	min-height: 520px;
	z-index: 5;
}

.anim-style-style2 .blooopp-accordion-card-item {
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
	border-radius: 28px !important;
	will-change: transform, opacity;
	backface-visibility: hidden;
}

.anim-style-style2 .blooopp-accordion-card-item .blooopp-card-content-body {
	grid-template-rows: 1fr !important;
	opacity: 1 !important;
	padding: 8px 28px 40px 28px !important;
	margin-top: -20px;
}

.anim-style-style2 .blooopp-card-header-btn {
	margin-bottom: 24px !important;
	cursor: default;
}

@media (max-width: 768px) {
	.anim-style-style2 .blooopp-card-stack-container {
		top: clamp(50px, 10vh, 90px);
	}

	.blooopp-card-header-btn {
		font-size: 1.6rem !important;
		padding: 14px 16px;
		margin-bottom: 20px !important;
	}

	.blooopp-card-header-text {
		font-size: 1.5rem !important;
	}
}

/* Parent section clipping to protect following sections */
.wp-block-group:has(.blooopp-accordion-card-stack) {
	overflow: clip !important;
}

/* ==========================================================================
   Sticky Canvas for Section Floating Elements (.wp-block-image.absolute)
   Bucks Sauce Exact Composition & Placement Matching
   ========================================================================== */
.blooopp-sticky-fruit-canvas {
	position: sticky;
	top: 0;
	left: 0;
	width: 100%;
	max-width: none;
	height: 100vh;
	height: 100dvh;
	pointer-events: none;
	z-index: 2;
	margin-bottom: -100vh;
	margin-bottom: -100dvh;
	overflow: visible;
	will-change: transform, opacity;
	transition: opacity 0.15s ease-out;
}

.blooopp-sticky-fruit-canvas .wp-block-image.absolute,
.blooopp-sticky-fruit-canvas figure.absolute {
	position: absolute !important;
	pointer-events: auto;
	margin: 0 !important;
	transform-origin: center center;
	transition: filter 0.3s ease, transform 0.3s ease;
}

.blooopp-sticky-fruit-canvas figure img {
	width: 100%;
	height: auto;
	display: block;
}

/* --------------------------------------------------------------------------
   1. Left Top Accent (Guava Slice - Matches Cherries in Reference)
   Sharp, crisp in focal plane, floating elegantly near top-left
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-slice,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Guava"]):has(img[src*="Half"]),
.blooopp-sticky-fruit-canvas figure:has(img[src*="Half-Cut-Guava"]) {
	top: clamp(40px, 8vh, 100px) !important;
	left: clamp(20px, 7vw, 130px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(95px, 8.5vw, 145px) !important;
	filter: blur(0px) drop-shadow(0 15px 25px rgba(0, 0, 0, 0.35));
	z-index: 3;
	transform: rotate(-12deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-slice img {
	animation: bloooppFloat 4.2s ease-in-out infinite alternate 0.2s;
}

/* --------------------------------------------------------------------------
   2. Left Mid Hero (Whole Guava - Matches Tomato in Reference)
   Sharp hero element, rich volume and natural tilt
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-whole,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Whole-guava"]) {
	top: clamp(260px, 42vh, 440px) !important;
	left: clamp(25px, 8.5vw, 160px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(140px, 12.5vw, 215px) !important;
	filter: blur(0px) drop-shadow(0 20px 35px rgba(0, 0, 0, 0.4));
	z-index: 3;
	transform: rotate(6deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-guava-whole img {
	animation: bloooppFloatReverse 4.8s ease-in-out infinite alternate 0.6s;
}

/* --------------------------------------------------------------------------
   3. Left Bottom Near / Foreground (Lemon - Matches Onion in Reference)
   Depth of field: Large, close to lens, realistic camera bokeh blur, bleeding off left edge
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon,
.blooopp-sticky-fruit-canvas figure:has(img[src*="lemon"]),
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near {
	top: clamp(480px, 68vh, 740px) !important;
	left: clamp(-30px, 0.5vw, 30px) !important;
	right: auto !important;
	bottom: auto !important;
	width: clamp(160px, 14.5vw, 240px) !important;
	filter: blur(7px) drop-shadow(0 25px 45px rgba(0, 0, 0, 0.5)) !important;
	opacity: 0.94;
	z-index: 4;
	transform: rotate(-10deg) scale(1.08);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon img,
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near img {
	animation: bloooppFloat 5.6s ease-in-out infinite alternate 1.1s;
}

/* --------------------------------------------------------------------------
   4. Right Top Hero (Peach Top - Matches Habanero in Reference)
   Sharp hero high up in upper right, warm and eye-catching
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-top,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:first-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Peach"]):first-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="peach"]):first-of-type {
	top: clamp(20px, 5vh, 70px) !important;
	right: clamp(25px, 8.5vw, 160px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(135px, 11.5vw, 195px) !important;
	filter: blur(0px) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.35));
	z-index: 3;
	transform: rotate(14deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-top img,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:first-of-type img {
	animation: bloooppFloat 4.4s ease-in-out infinite alternate 0.3s;
}

/* --------------------------------------------------------------------------
   5. Right Mid Far / Background (Lychee - Matches Garlic in Reference)
   Depth of field: Smaller, deeper in background, subtle soft bokeh blur
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee,
.blooopp-sticky-fruit-canvas figure:has(img[src*="e2"]),
.blooopp-sticky-fruit-canvas figure:has(img[src*="lychee"]),
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far {
	top: clamp(180px, 26vh, 290px) !important;
	right: clamp(12px, 4.5vw, 85px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(85px, 7vw, 125px) !important;
	filter: blur(5.5px) drop-shadow(0 10px 20px rgba(0, 0, 0, 0.25)) !important;
	opacity: 0.85;
	z-index: 1;
	transform: rotate(-16deg) scale(0.92);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee img,
.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far img {
	animation: bloooppFloatReverse 5.2s ease-in-out infinite alternate 0.8s;
}

/* --------------------------------------------------------------------------
   6. Right Bottom Hero (Peach Bottom - Matches Peach in Reference)
   Sharp hero anchor at lower right, large and appetizing
   -------------------------------------------------------------------------- */
.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-bottom,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:last-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="Peach"]):last-of-type,
.blooopp-sticky-fruit-canvas figure:has(img[src*="peach"]):last-of-type {
	top: clamp(380px, 54vh, 580px) !important;
	right: clamp(25px, 8vw, 150px) !important;
	left: auto !important;
	bottom: auto !important;
	width: clamp(150px, 13vw, 225px) !important;
	filter: blur(0px) drop-shadow(0 20px 40px rgba(0, 0, 0, 0.4));
	z-index: 3;
	transform: rotate(-6deg);
}

.blooopp-sticky-fruit-canvas .blooopp-fruit-peach-bottom img,
.blooopp-sticky-fruit-canvas figure.blooopp-fruit-peach:last-of-type img {
	animation: bloooppFloat 4.7s ease-in-out infinite alternate 1.3s;
}

@media (max-width: 781px) {
	.blooopp-sticky-fruit-canvas .wp-block-hidden-mobile {
		display: none !important;
	}

	.blooopp-sticky-fruit-canvas .blooopp-fruit-lemon,
	.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-near {
		filter: blur(4.5px) drop-shadow(0 15px 30px rgba(0, 0, 0, 0.4)) !important;
		width: clamp(110px, 20vw, 160px) !important;
	}

	.blooopp-sticky-fruit-canvas .blooopp-fruit-lychee,
	.blooopp-sticky-fruit-canvas .blooopp-fruit-depth-far {
		filter: blur(3.5px) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.2)) !important;
		width: clamp(65px, 13vw, 95px) !important;
	}
}