/* ==========================================================================
   The Doggos — [doggos_subscription_banner] · cinematic CTA banner
   --------------------------------------------------------------------------
   Drop-in replacement for the doggos-subscription-box plugin's banner.
   Editorial typography, decorative SVG ornaments (paw + leaf + bone),
   rotating chartreuse "SAVE X%" stamp, two CTAs (primary + ghost),
   pastel surface variants matching the rest of the cinematic palette.
   ========================================================================== */

.dcx-banner {
	--dcx-blush: #fde0e7;
	--dcx-sky:   #dde9f5;
	--dcx-lime:  #9bbe2a;
	--dcx-lime-soft: #d8e57a;
	--dcx-rose:  #e58aa0;
	--dcx-sage-dark: #3a3a48;
	--dcx-ink: #3a3a48;
	--dcx-ink-soft: #5a5a6e;
	--dcx-ink-mute: #8a8a9e;
	--dcx-on-dark: #faf3e6;
	--dcx-cream: #fdfaf3;
	--dcx-peach: #fde0c8;
	--dcx-lavender: #ede4f5;
	--dcx-mint: #dcefdf;
	--dcx-bone: #fbf6ec;
	--dcx-font-display: 'Fraunces', 'DM Serif Display', Georgia, serif;
	--dcx-font-body: 'Bricolage Grotesque', system-ui, sans-serif;
	--dcx-font-mono: 'JetBrains Mono', ui-monospace, monospace;
	--dcx-ease: cubic-bezier(0.22, 1, 0.36, 1);

	position: relative;
	overflow: hidden;
	padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
	font-family: var(--dcx-font-body);
	color: var(--dcx-ink);
	-webkit-font-smoothing: antialiased;
	border-top: 1px solid rgba(31,42,20,0.06);
	border-bottom: 1px solid rgba(31,42,20,0.06);
}
.dcx-banner, .dcx-banner *, .dcx-banner *::before, .dcx-banner *::after { box-sizing: border-box; }

/* Surfaces — multi-stop pastel washes */
.dcx-banner--peach    { background: radial-gradient(ellipse at 25% 30%, var(--dcx-blush) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-mint) 0%, transparent 50%), var(--dcx-peach); }
.dcx-banner--cream    { background: radial-gradient(ellipse at 25% 30%, var(--dcx-lavender) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-blush) 0%, transparent 50%), var(--dcx-cream); }
.dcx-banner--lavender { background: radial-gradient(ellipse at 25% 30%, var(--dcx-blush) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-sky) 0%, transparent 50%), var(--dcx-lavender); }
.dcx-banner--mint     { background: radial-gradient(ellipse at 25% 30%, var(--dcx-sky) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-peach) 0%, transparent 50%), var(--dcx-mint); }
.dcx-banner--blush    { background: radial-gradient(ellipse at 25% 30%, var(--dcx-peach) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-lavender) 0%, transparent 50%), var(--dcx-blush); }
.dcx-banner--sky      { background: radial-gradient(ellipse at 25% 30%, var(--dcx-mint) 0%, transparent 50%), radial-gradient(ellipse at 75% 70%, var(--dcx-blush) 0%, transparent 50%), var(--dcx-sky); }
.dcx-banner--bone     { background: linear-gradient(135deg, var(--dcx-bone) 0%, #ffffff 60%, var(--dcx-cream) 100%); }
.dcx-banner--white    { background: #ffffff; }

/* Decorative SVG ornaments — drift gently */
.dcx-banner-orn {
	position: absolute;
	pointer-events: none;
	z-index: 0;
	color: var(--dcx-ink);
	opacity: 0.07;
}
.dcx-banner-orn--paw  { width: 180px; top: -30px; left: -30px; transform: rotate(-12deg); animation: dcx-banner-drift 14s ease-in-out infinite; }
.dcx-banner-orn--leaf { width: 220px; bottom: -40px; right: 8%; transform: rotate(20deg); color: var(--dcx-lime); opacity: 0.18; animation: dcx-banner-drift 18s ease-in-out infinite reverse; }
.dcx-banner-orn--bone { width: 120px; top: 40%; right: -20px; transform: rotate(40deg); animation: dcx-banner-drift 16s ease-in-out infinite -3s; }
@keyframes dcx-banner-drift {
	0%,100% { transform: translate(0,0) rotate(var(--r,0deg)); }
	50%     { transform: translate(8px, -10px) rotate(calc(var(--r,0deg) + 3deg)); }
}

/* Reveal on scroll */
.dcx-banner [data-dcx-reveal] {
	opacity: 0;
	transform: translate3d(0, 18px, 0);
	transition: opacity .8s var(--dcx-ease), transform .8s var(--dcx-ease);
}
.dcx-banner [data-dcx-reveal].is-visible { opacity: 1; transform: none; }

.dcx-banner-inner {
	max-width: 1080px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
	text-align: center;
}

.dcx-banner-kicker {
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--dcx-ink-soft);
	margin: 0 0 14px;
}

.dcx-banner-headline {
	font-family: var(--dcx-font-display);
	font-weight: 800;
	font-size: clamp(34px, 5.4vw, 68px);
	line-height: 1.05;
	letter-spacing: -0.025em;
	color: var(--dcx-ink);
	margin: 0 0 18px;
	max-width: 18ch;
	margin-left: auto;
	margin-right: auto;
}
.dcx-banner-headline .dcx-em {
	position: relative;
	font-style: italic;
	color: var(--dcx-lime);
	display: inline-block;
}
.dcx-banner-headline .dcx-em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 14px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14'><path d='M2 10 Q 50 2 100 8 T 198 6' stroke='%23d4a83a' stroke-width='3' fill='none' stroke-linecap='round'/></svg>") no-repeat;
	background-size: 100% 100%;
	z-index: -1;
}

.dcx-banner-sub {
	font-size: 17px;
	line-height: 1.55;
	color: var(--dcx-ink-soft);
	max-width: 56ch;
	margin: 0 auto clamp(24px, 3vw, 36px);
}

/* CTA row */
.dcx-banner-cta-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: clamp(18px, 2vw, 28px);
}
.dcx-banner-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 14px 26px;
	border-radius: 999px;
	font-family: var(--dcx-font-mono);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	text-decoration: none;
	border: 2px solid var(--dcx-ink);
	transition: transform .25s var(--dcx-ease), box-shadow .25s var(--dcx-ease), background .25s ease, color .25s ease;
	cursor: pointer;
	line-height: 1;
}
.dcx-banner-btn--primary {
	background: var(--dcx-ink);
	color: var(--dcx-on-dark);
	box-shadow: 5px 5px 0 var(--dcx-lime);
}
.dcx-banner-btn--primary:hover {
	transform: translate(-2px, -2px);
	box-shadow: 8px 8px 0 var(--dcx-lime);
	color: var(--dcx-on-dark);
	background: var(--dcx-sage-dark);
}
.dcx-banner-btn--ghost {
	background: transparent;
	color: var(--dcx-ink);
}
.dcx-banner-btn--ghost:hover {
	background: var(--dcx-bone);
	color: var(--dcx-ink);
	transform: translate(-2px, -2px);
	box-shadow: 5px 5px 0 var(--dcx-ink);
}

.dcx-banner-micro {
	font-family: var(--dcx-font-mono);
	font-size: 11px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dcx-ink-mute);
	margin: 0;
}

/* Rotating chartreuse SAVE % stamp — top right */
.dcx-banner-badge {
	position: absolute;
	top: 24px;
	right: clamp(20px, 5vw, 64px);
	width: clamp(80px, 11vw, 130px);
	height: clamp(80px, 11vw, 130px);
	z-index: 3;
	color: var(--dcx-lime);
	animation: dcx-banner-spin 16s linear infinite;
	filter: drop-shadow(2px 4px 0 var(--dcx-ink));
	pointer-events: none;
}
.dcx-banner-badge svg { width: 100%; height: 100%; display: block; }
@keyframes dcx-banner-spin {
	from { transform: rotate(0); }
	to   { transform: rotate(360deg); }
}

@media (max-width: 720px) {
	.dcx-banner-badge {
		top: auto;
		bottom: 18px;
		right: 14px;
		width: 80px;
		height: 80px;
	}
	.dcx-banner-orn--leaf,
	.dcx-banner-orn--bone { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.dcx-banner-badge,
	.dcx-banner-orn { animation: none !important; }
}