/**
 * MT Banner widget — metal death-metal section banner
 */

@font-face {
	font-family: "Abismo Sangriento";
	src: url("../fonts/AbismoSangriento-Regular.otf") format("opentype");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

.jt-mt-banner-widget {
	width: 100%;
	max-width: var(--jt-mt-banner-max-width, 1800px);
	margin: 0 auto;
	--jt-ttp-accent: #c41e2a;
	--jt-ttp-accent-deep: #8f1219;
	--jt-ttp-radius: 4px;
	--jt-ttp-banner-font-title: "Abismo Sangriento", "Metal Mania", system-ui, sans-serif;
	--jt-ttp-banner-font-tagline: "Cinzel", "Times New Roman", Georgia, serif;
	font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	-webkit-font-smoothing: antialiased;
}

.jt-mt-banner-widget .jt-ttp-section-banner {
position: relative;
isolation: isolate;
overflow: hidden;
min-height: clamp(440px, 46vw, 600px);
border: 1px solid rgba(143, 18, 25, 0.28);
border-radius: var(--jt-ttp-radius);
background: #050505;
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.65) inset,
0 28px 72px rgba(0, 0, 0, 0.58);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(ellipse 52% 58% at 50% 40%, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.38) 52%, rgba(0, 0, 0, 0.68) 100%),
linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.58) 100%),
var(--jt-mt-banner-bg-image, url("../images/jt-section-banner-death-metal-bg.png")) center center / cover no-repeat,
#050505;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__bg::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 90% 70% at 50% 100%, rgba(143, 18, 25, 0.14), transparent 58%),
radial-gradient(circle at 50% 0%, rgba(196, 30, 42, 0.08), transparent 42%);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: clamp(64px, 9vw, 112px) clamp(24px, 5vw, 56px) clamp(68px, 9vw, 120px);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__eyebrow {
display: flex;
align-items: center;
justify-content: center;
gap: clamp(12px, 2vw, 20px);
margin: 0 0 clamp(22px, 3.5vw, 36px);
width: min(100%, 680px);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__eyebrow-line {
flex: 1 1 auto;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196, 30, 42, 0.85) 35%, rgba(196, 30, 42, 0.85) 65%, transparent);
opacity: 0.9;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__eyebrow-text {
flex: 0 0 auto;
font-size: clamp(13px, 1.6vw, 18px);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--jt-ttp-accent);
white-space: nowrap;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title {
position: relative;
display: inline-block;
margin: 0 0 clamp(18px, 3vw, 30px);
max-width: 16ch;
font-family: var(--jt-ttp-banner-font-title);
font-size: clamp(4.25rem, 15vw, 10rem);
font-weight: 400;
line-height: 0.88;
letter-spacing: 0.01em;
text-align: center;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch {
display: block;
font: inherit;
letter-spacing: inherit;
line-height: inherit;
white-space: nowrap;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--main {
position: relative;
z-index: 3;
color: #d4d0c8;
text-shadow:
0 2px 12px rgba(0, 0, 0, 0.9),
0 0 24px rgba(143, 18, 25, 0.2);
animation: jt-ttp-glitch-main 3.4s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch:not(.jt-ttp-section-banner__title-glitch--main) {
position: absolute;
inset: 0;
pointer-events: none;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--red {
z-index: 4;
color: var(--jt-ttp-accent);
text-shadow: 0 0 20px rgba(196, 30, 42, 0.95);
animation: jt-ttp-glitch-red 2.6s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--void {
z-index: 1;
color: #2a0508;
text-shadow: 0 0 30px rgba(0, 0, 0, 0.95);
animation: jt-ttp-glitch-void 3.8s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--shard-a {
z-index: 5;
color: #bdb7ae;
animation: jt-ttp-glitch-shard-a 3.4s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--shard-b {
z-index: 5;
color: #8f1219;
animation: jt-ttp-glitch-shard-b 3.4s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch--shard-c {
z-index: 5;
color: #ece8e0;
animation: jt-ttp-glitch-shard-c 3.4s steps(1, end) infinite;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__title::after {
content: "";
position: absolute;
inset: -10% -6%;
z-index: 6;
pointer-events: none;
opacity: 0;
background:
repeating-linear-gradient(
0deg,
transparent 0,
transparent 2px,
rgba(196, 30, 42, 0.14) 2px,
rgba(196, 30, 42, 0.14) 3px
),
repeating-linear-gradient(
90deg,
transparent 0,
transparent 48px,
rgba(255, 255, 255, 0.03) 48px,
rgba(255, 255, 255, 0.03) 49px
);
mix-blend-mode: screen;
animation: jt-ttp-glitch-scan 3.4s steps(1, end) infinite;
}

@keyframes jt-ttp-glitch-main {
0%,
100% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
filter: brightness(1);
}

4% {
opacity: 0.55;
transform: translate(-9px, 3px) skewX(-3deg);
clip-path: inset(6% 0 68% 0);
filter: brightness(0.7);
}

5% {
opacity: 0.8;
transform: translate(7px, -2px) skewX(2deg);
clip-path: inset(38% 0 34% 0);
filter: brightness(0.85);
}

6% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
filter: brightness(1);
}

38% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
}

39% {
opacity: 0.25;
transform: translate(14px, -4px) skewX(5deg);
clip-path: inset(10% 18% 58% 6%);
filter: brightness(0.45);
}

40% {
opacity: 0.5;
transform: translate(-16px, 5px) skewX(-6deg);
clip-path: inset(52% 4% 14% 22%);
filter: brightness(0.55);
}

41% {
opacity: 0.35;
transform: translate(10px, 2px) skewX(3deg);
clip-path: inset(72% 12% 0 8%);
filter: brightness(0.5);
}

42% {
opacity: 0.15;
transform: translate(-20px, 8px);
clip-path: inset(0 40% 78% 0);
filter: brightness(0.35);
}

43% {
opacity: 0.65;
transform: translate(12px, -3px);
clip-path: inset(28% 0 48% 30%);
filter: brightness(0.75);
}

44%,
45% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
filter: brightness(1);
}

72% {
opacity: 0.9;
transform: translate(-5px, 1px);
clip-path: inset(18% 0 52% 0);
}

73% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
}

86% {
opacity: 0.2;
transform: translate(-18px, 6px) skewX(-4deg);
clip-path: inset(0 28% 70% 0);
filter: brightness(0.4);
}

87% {
opacity: 0.45;
transform: translate(20px, -5px) skewX(4deg);
clip-path: inset(44% 0 22% 35%);
filter: brightness(0.5);
}

88% {
opacity: 0.3;
transform: translate(-8px, 3px);
clip-path: inset(80% 8% 0 12%);
filter: brightness(0.42);
}

89% {
opacity: 1;
transform: translate(0);
clip-path: inset(0 0 0 0);
filter: brightness(1.05);
}
}

@keyframes jt-ttp-glitch-red {
0%,
100% {
opacity: 0;
transform: translate(0);
clip-path: inset(0 0 100% 0);
}

3%,
7% {
opacity: 0.92;
transform: translate(11px, -2px);
clip-path: inset(14% 0 58% 0);
}

4% {
opacity: 0.78;
transform: translate(-13px, 3px);
clip-path: inset(48% 0 22% 0);
}

39%,
43% {
opacity: 0.95;
transform: translate(-14px, 4px) skewX(-5deg);
clip-path: inset(8% 10% 62% 0);
}

40% {
opacity: 0.88;
transform: translate(18px, -6px);
clip-path: inset(56% 0 10% 18%);
}

41% {
opacity: 0.82;
transform: translate(-10px, 5px);
clip-path: inset(70% 22% 0 4%);
}

72%,
74% {
opacity: 0.85;
transform: translate(9px, 0);
clip-path: inset(24% 0 46% 0);
}

86%,
90% {
opacity: 0.9;
transform: translate(-16px, 5px) skewX(4deg);
clip-path: inset(4% 30% 68% 0);
}

87% {
opacity: 0.75;
transform: translate(14px, -4px);
clip-path: inset(50% 0 18% 28%);
}
}

@keyframes jt-ttp-glitch-void {
0%,
100% {
opacity: 0;
transform: translate(0);
clip-path: inset(0 0 100% 0);
}

39%,
42% {
opacity: 0.7;
transform: translate(8px, 6px);
clip-path: inset(16% 24% 54% 0);
}

40% {
opacity: 0.55;
transform: translate(-12px, -3px);
clip-path: inset(60% 0 8% 16%);
}

86%,
88% {
opacity: 0.65;
transform: translate(-14px, 4px);
clip-path: inset(32% 0 40% 20%);
}
}

@keyframes jt-ttp-glitch-shard-a {
0%,
38%,
46%,
100% {
opacity: 0;
transform: translate(0) rotate(0deg);
clip-path: inset(0 0 100% 0);
}

39% {
opacity: 0.95;
transform: translate(-24px, 10px) rotate(-4deg);
clip-path: inset(6% 52% 64% 0);
}

40% {
opacity: 0.85;
transform: translate(-30px, 14px) rotate(-5deg);
clip-path: inset(8% 48% 62% 2%);
}

41% {
opacity: 0.7;
transform: translate(-18px, 6px) rotate(-2deg);
clip-path: inset(10% 55% 60% 0);
}

86% {
opacity: 0.9;
transform: translate(-22px, 8px) rotate(-3deg);
clip-path: inset(0 60% 78% 0);
}

87% {
opacity: 0.75;
transform: translate(-28px, 12px) rotate(-4deg);
clip-path: inset(2% 58% 76% 0);
}
}

@keyframes jt-ttp-glitch-shard-b {
0%,
38%,
46%,
100% {
opacity: 0;
transform: translate(0) rotate(0deg);
clip-path: inset(0 0 100% 0);
}

40% {
opacity: 0.92;
transform: translate(26px, -8px) rotate(5deg);
clip-path: inset(50% 0 12% 46%);
}

41% {
opacity: 0.8;
transform: translate(32px, -12px) rotate(6deg);
clip-path: inset(52% 0 10% 42%);
}

42% {
opacity: 0.65;
transform: translate(20px, -5px) rotate(3deg);
clip-path: inset(54% 4% 8% 48%);
}

87% {
opacity: 0.88;
transform: translate(24px, -6px) rotate(4deg);
clip-path: inset(42% 0 24% 50%);
}

88% {
opacity: 0.72;
transform: translate(30px, -10px) rotate(5deg);
clip-path: inset(44% 0 22% 46%);
}
}

@keyframes jt-ttp-glitch-shard-c {
0%,
38%,
46%,
100% {
opacity: 0;
transform: translate(0) scale(1);
clip-path: inset(0 0 100% 0);
}

39% {
opacity: 0.8;
transform: translate(0, 16px) scale(1.04);
clip-path: inset(68% 20% 0 18%);
}

41% {
opacity: 0.7;
transform: translate(6px, 20px) scale(1.06);
clip-path: inset(72% 12% 0 24%);
}

42% {
opacity: 0.55;
transform: translate(-4px, 14px) scale(1.02);
clip-path: inset(76% 28% 0 10%);
}

86% {
opacity: 0.85;
transform: translate(0, 18px) scale(1.05);
clip-path: inset(78% 16% 0 20%);
}

88% {
opacity: 0.6;
transform: translate(8px, 22px) scale(1.07);
clip-path: inset(82% 8% 0 28%);
}
}

@keyframes jt-ttp-glitch-scan {
0%,
100% {
opacity: 0;
}

38%,
44%,
86%,
90% {
opacity: 0.55;
}

39%,
87% {
opacity: 0.75;
}
}

		.jt-mt-banner-widget .jt-ttp-section-banner__tagline {
margin: 0 0 clamp(22px, 3.5vw, 34px);
font-family: var(--jt-ttp-banner-font-tagline);
font-size: clamp(0.95rem, 2vw, 1.35rem);
font-weight: 600;
letter-spacing: 0.34em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.94);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__desc {
margin: 0;
max-width: 52ch;
font-size: clamp(16px, 1.9vw, 21px);
line-height: 1.65;
color: rgba(255, 255, 255, 0.72);
}

		.jt-mt-banner-widget .jt-ttp-section-banner__cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 56px;
margin-top: clamp(32px, 5vw, 52px);
padding: 14px clamp(28px, 4vw, 44px);
border: 1px solid rgba(196, 30, 42, 0.92);
border-radius: 2px;
background:
linear-gradient(180deg, rgba(20, 8, 9, 0.96) 0%, rgba(8, 4, 4, 0.98) 100%);
box-shadow:
0 0 18px rgba(196, 30, 42, 0.22),
0 0 0 1px rgba(143, 18, 25, 0.35) inset;
color: var(--jt-ttp-accent);
font-size: clamp(13px, 1.55vw, 17px);
font-weight: 700;
letter-spacing: 0.18em;
text-decoration: none;
text-transform: uppercase;
transition:
color 0.2s ease,
border-color 0.2s ease,
box-shadow 0.2s ease,
transform 0.2s ease;
}

		.jt-mt-banner-widget .jt-ttp-section-banner__cta:hover,
		.jt-mt-banner-widget .jt-ttp-section-banner__cta:focus-visible {
color: #ffffff;
border-color: #e8323f;
box-shadow:
0 0 28px rgba(196, 30, 42, 0.42),
0 0 0 1px rgba(196, 30, 42, 0.45) inset;
transform: translateY(-1px);
}

@media (max-width: 640px) {
			.jt-mt-banner-widget .jt-ttp-section-banner__eyebrow {
width: 100%;
}

			.jt-mt-banner-widget .jt-ttp-section-banner__eyebrow-text {
letter-spacing: 0.14em;
}

			.jt-mt-banner-widget .jt-ttp-section-banner__tagline {
letter-spacing: 0.2em;
}
}

@media (prefers-reduced-motion: reduce) {
			.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch,
			.jt-mt-banner-widget .jt-ttp-section-banner__title::after {
animation: none;
}

			.jt-mt-banner-widget .jt-ttp-section-banner__title-glitch:not(.jt-ttp-section-banner__title-glitch--main) {
display: none;
}
}