/* Half Skull — immersive background: soft red/ink glow, halftone corner, faint skull + spark motifs.
   One fixed layer behind the page (no layout cost), tuned to stay subtle. */

:root {
	--hsb-red: 227, 0, 28;
	--hsb-ink: 19, 19, 22;
}

/* html::after for the pattern: the theme hides body::after */
body::before,
html::after {
	content: '';
	display: block;
	position: fixed;
	pointer-events: none;
	z-index: -1;
}

/* glow + halftone */
body::before {
	inset: 0;
	background:
		radial-gradient(62vw 52vh at 100% 0%, rgba(var(--hsb-red), .13), transparent 64%),
		radial-gradient(58vw 58vh at 0% 100%, rgba(var(--hsb-ink), .1), transparent 66%),
		radial-gradient(42vw 42vh at 6% 6%, rgba(var(--hsb-red), .07), transparent 62%),
		radial-gradient(36vw 36vh at 96% 96%, rgba(var(--hsb-red), .06), transparent 62%);
	animation: hsb-drift 26s ease-in-out infinite alternate;
}

/* motif tile + halftone dots, faded toward the page centre */
html::after {
	inset: 0;
	opacity: .9;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg stroke='%23131316' stroke-opacity='.12' stroke-width='1.6'%3E%3Cg transform='translate(38 46) rotate(-12)'%3E%3Cpath d='M12 2C7 2 4 5.6 4 9.8c0 2.7 1.3 4.4 3 5.4V19h10v-3.8c1.7-1 3-2.7 3-5.4C20 5.6 17 2 12 2z' transform='scale(1.9)'/%3E%3Ccircle cx='17' cy='21' r='3.1'/%3E%3Ccircle cx='31' cy='21' r='3.1'/%3E%3Cpath d='M19 38v7M24 38v7M29 38v7'/%3E%3C/g%3E%3Cg transform='translate(236 168) rotate(14)'%3E%3Cpath d='M12 2C7 2 4 5.6 4 9.8c0 2.7 1.3 4.4 3 5.4V19h10v-3.8c1.7-1 3-2.7 3-5.4C20 5.6 17 2 12 2z' transform='scale(1.5)'/%3E%3Ccircle cx='14' cy='17' r='2.4'/%3E%3Ccircle cx='24' cy='17' r='2.4'/%3E%3Cpath d='M15 30v5M19 30v5M23 30v5'/%3E%3C/g%3E%3Cg transform='translate(112 262) rotate(7)'%3E%3Cpath d='M12 2C7 2 4 5.6 4 9.8c0 2.7 1.3 4.4 3 5.4V19h10v-3.8c1.7-1 3-2.7 3-5.4C20 5.6 17 2 12 2z' transform='scale(1.2)'/%3E%3Ccircle cx='11' cy='13' r='1.9'/%3E%3Ccircle cx='19' cy='13' r='1.9'/%3E%3C/g%3E%3C/g%3E%3Cg stroke='%23e3001c' stroke-opacity='.24' stroke-width='1.6'%3E%3Cpath d='M214 38l3 7 7 3-7 3-3 7-3-7-7-3 7-3z'/%3E%3Cpath d='M62 214l2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4z'/%3E%3Cpath d='M318 292l2.4 5.6 5.6 2.4-5.6 2.4-2.4 5.6-2.4-5.6-5.6-2.4 5.6-2.4z'/%3E%3C/g%3E%3Cg stroke='%23131316' stroke-opacity='.07' stroke-width='1.6'%3E%3Cpath d='M170 120v10M165 125h10M300 60v10M295 65h10M40 330v10M35 335h10M330 190v10M325 195h10'/%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(rgba(var(--hsb-ink), .09) 1.1px, transparent 1.4px);
	background-size: 360px 360px, 18px 18px;
	background-position: 0 0, 0 0;
	-webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, rgba(0, 0, 0, .35) 10%, #000 85%);
	mask-image: radial-gradient(ellipse 95% 85% at 50% 45%, rgba(0, 0, 0, .35) 10%, #000 85%);
}

/* depth layer: vignette + two big soft skull silhouettes with their own drop shadow, drifting slowly */
html::before {
	content: '';
	display: block;
	position: fixed;
	inset: -3vmin;
	pointer-events: none;
	z-index: -1;
	background-image:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='560' viewBox='0 0 520 560'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeGaussianBlur stdDeviation='2.2'/%3E%3C/filter%3E%3Cfilter id='d' x='-30%25' y='-30%25' width='170%25' height='180%25'%3E%3CfeDropShadow dx='16' dy='24' stdDeviation='18' flood-color='%23131316' flood-opacity='.16'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)'%3E%3Cg filter='url(%23s)' fill='%23131316' fill-opacity='.045' stroke='%23131316' stroke-opacity='.1' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M260 40C140 40 70 125 70 225c0 64 31 106 72 130v110h236V355c41-24 72-66 72-130C450 125 380 40 260 40z'/%3E%3C/g%3E%3Cg fill='%23fbfaf8'%3E%3Cellipse cx='200' cy='235' rx='48' ry='56'/%3E%3Cellipse cx='320' cy='235' rx='48' ry='56'/%3E%3Cpath d='M260 285l-22 48h44z'/%3E%3C/g%3E%3Cg stroke='%23fbfaf8' stroke-width='10' stroke-linecap='round'%3E%3Cpath d='M205 400v50M260 400v58M315 400v50'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='380' viewBox='0 0 520 560'%3E%3Cdefs%3E%3Cfilter id='s' x='-30%25' y='-30%25' width='160%25' height='170%25'%3E%3CfeGaussianBlur stdDeviation='2.6'/%3E%3C/filter%3E%3Cfilter id='d' x='-30%25' y='-30%25' width='170%25' height='180%25'%3E%3CfeDropShadow dx='14' dy='22' stdDeviation='20' flood-color='%23e3001c' flood-opacity='.14'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23d)'%3E%3Cg filter='url(%23s)' fill='%23e3001c' fill-opacity='.04' stroke='%23e3001c' stroke-opacity='.12' stroke-width='6' stroke-linejoin='round'%3E%3Cpath d='M260 40C140 40 70 125 70 225c0 64 31 106 72 130v110h236V355c41-24 72-66 72-130C450 125 380 40 260 40z'/%3E%3C/g%3E%3Cg fill='%23fbfaf8'%3E%3Cellipse cx='200' cy='235' rx='48' ry='56'/%3E%3Cellipse cx='320' cy='235' rx='48' ry='56'/%3E%3Cpath d='M260 285l-22 48h44z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"),
		radial-gradient(ellipse 120% 100% at 50% 38%, transparent 52%, rgba(19, 19, 22, .085) 100%);
	background-repeat: no-repeat;
	background-position: 108% 4%, -6% 104%, 0 0;
	background-size: min(46vmin, 520px) auto, min(34vmin, 380px) auto, 100% 100%;
	animation: hsb-float 32s ease-in-out infinite alternate;
}

@keyframes hsb-float {
	from { transform: translate3d(0, 0, 0) rotate(0deg); }
	to { transform: translate3d(-1.2vw, -1.6vh, 0) rotate(.6deg); }
}

/* warm canvas under the pattern; keep the content panel from hiding it */
html { background-color: #fbfaf8; }
html body.hs-pdp .single-main-content { background: transparent !important; }

/* ---------- home hero: let the background show around and behind the hero items ---------- */
body.home .elementor-element-d465f55 {
	background: transparent !important;
	background-color: transparent !important;
	position: relative;
	padding-top: 20px;
	padding-bottom: 28px;
}
body.home .elementor-element-d465f55 > .elementor-container,
body.home .elementor-element-075255b,
body.home .elementor-element-075255b > .elementor-widget-wrap { background: transparent !important; position: relative; z-index: 1; }
/* a stage glow behind the banner so the hero reads as lit from behind */
body.home .elementor-element-d465f55::before {
	content: '';
	position: absolute;
	inset: -20px 0 0;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(52% 58% at 82% 26%, rgba(var(--hsb-red), .2), transparent 70%),
		radial-gradient(46% 52% at 10% 84%, rgba(var(--hsb-ink), .14), transparent 72%),
		radial-gradient(36% 40% at 50% 100%, rgba(var(--hsb-red), .08), transparent 70%);
}
/* banner + posters float above it with real shadows */
body.home .elementor-element-a508a6f img,
body.home .elementor-element-a508a6f { box-shadow: 0 34px 80px rgba(19, 19, 22, .32), 0 12px 28px rgba(19, 19, 22, .18); border-radius: 36px; }
body.home .elementor-element-1f5aab3 .elementor-column img { box-shadow: 0 18px 44px rgba(19, 19, 22, .26); border-radius: 28px; }
@media (max-width: 767px) {
	body.home .elementor-element-d465f55 { padding-top: 10px; padding-bottom: 18px; }
	body.home .elementor-element-a508a6f img, body.home .elementor-element-a508a6f { border-radius: 26px; box-shadow: 0 22px 50px rgba(19, 19, 22, .3); }
}

@keyframes hsb-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to { transform: translate3d(-1.5vw, 1.2vh, 0) scale(1.04); }
}

/* let the pattern show through the page's own plain panels */
body,
.hs-pdp #tbay-main-content,
.hs-pdp .single-main-content,
#tbay-main-content { background-color: transparent; }

@media (max-width: 767px) {
	html::after { background-size: 260px 260px, 16px 16px; opacity: .8; }
	body::before, html::before { animation: none; }
	html::before { background-size: min(60vmin, 320px) auto, min(44vmin, 220px) auto, 100% 100%; }
}

@media (prefers-reduced-motion: reduce) {
	body::before, html::before { animation: none; }
}

/* never behind the admin bar, checkout payment widgets or printed pages */
@media print {
	body::before, html::after, html::before { display: none; }
}