/* ==========================================================================
   KK "We're Back" hero — ROUGH PLACEHOLDER (redesign)
   Same soft-grey rounded panel as .kk-hero__panel, with a CSS-only
   animation timeline gated on .is-playing (set by kk-hero-wereback.js).
   Honours prefers-reduced-motion.
   ========================================================================== */

/* Full-bleed band: the soft-grey ground runs edge to edge, content sits in the container. */
.kk-wb {
	position: relative;
	padding: 0;
	background: var(--kk-surface);
	overflow: hidden;
	isolation: isolate;
}

.kk-wb__panel {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	align-items: center;
	gap: 40px;
	min-height: 520px;
	padding: 56px 0 48px;
}

/* ---- Copy ---- */
.kk-wb__text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.kk-wb__kicker {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--kk-gold-deep);
	margin: 0;
	opacity: 0;
}
.kk-wb.is-playing .kk-wb__kicker { animation: kk-wb-fade-down 0.5s ease 0.15s forwards; }

.kk-wb__title {
	font-size: clamp(44px, 6vw, 76px);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--kk-ink);
	margin: 0;
}
.kk-wb__word {
	display: inline-block;
	position: relative;
	opacity: 0;
	transform: translateY(50px) rotate(-3deg);
	transform-origin: left bottom;
}
.kk-wb__word--2 { color: var(--kk-brown); margin-left: 0.22em; }
.kk-wb.is-playing .kk-wb__word--1 { animation: kk-wb-pop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.35s forwards; }
.kk-wb.is-playing .kk-wb__word--2 { animation: kk-wb-pop 0.7s cubic-bezier(0.22, 1.4, 0.36, 1) 0.6s forwards; }

.kk-wb__underline {
	position: absolute;
	left: 0.02em;
	right: 0.1em;
	bottom: -0.06em;
	height: 0.12em;
	border-radius: var(--kk-radius-full);
	background: var(--kk-gold);
	transform: scaleX(0);
	transform-origin: left center;
}
.kk-wb.is-playing .kk-wb__underline { animation: kk-wb-sweep 0.55s cubic-bezier(0.65, 0, 0.35, 1) 1.15s forwards; }

.kk-wb__tagline {
	font-size: 18px;
	color: var(--kk-text-2);
	margin: 0 0 6px;
	max-width: 34ch;
	opacity: 0;
}
.kk-wb.is-playing .kk-wb__tagline { animation: kk-wb-fade-up 0.5s ease 1.3s forwards; }

.kk-wb__ctas {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	opacity: 0;
}
.kk-wb.is-playing .kk-wb__ctas { animation: kk-wb-fade-up 0.5s ease 1.5s forwards; }

/* ---- Photo card stack ---- */
.kk-wb__stack {
	position: relative;
	z-index: 1;
	height: 420px;
}
.kk-wb__card {
	position: absolute;
	margin: 0;
	width: 60%;
	aspect-ratio: 4 / 3;
	border-radius: var(--kk-radius-lg);
	overflow: hidden;
	background: #fff;
	padding: 8px;
	box-shadow: var(--kk-shadow-xl);
	opacity: 0;
	transform: translateY(130%) rotate(0deg);
}
.kk-wb__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: calc(var(--kk-radius-lg) - 6px);
	display: block;
}
.kk-wb__card--1 { left: 0;   top: 16%; --kk-wb-rot: -6deg; z-index: 1; }
.kk-wb__card--2 { left: 34%; top: 0;   --kk-wb-rot:  4deg; z-index: 2; }
.kk-wb__card--3 { left: 16%; top: 36%; --kk-wb-rot: -2deg; z-index: 3; }

.kk-wb.is-playing .kk-wb__card--1 { animation: kk-wb-card-up 0.9s cubic-bezier(0.22, 1.25, 0.36, 1) 0.25s forwards, kk-wb-float 6s   ease-in-out 1.2s infinite; }
.kk-wb.is-playing .kk-wb__card--2 { animation: kk-wb-card-up 0.9s cubic-bezier(0.22, 1.25, 0.36, 1) 0.5s  forwards, kk-wb-float 7s   ease-in-out 1.5s infinite; }
.kk-wb.is-playing .kk-wb__card--3 { animation: kk-wb-card-up 0.9s cubic-bezier(0.22, 1.25, 0.36, 1) 0.75s forwards, kk-wb-float 5.5s ease-in-out 1.8s infinite; }

.kk-wb__badge {
	position: absolute;
	right: 2%;
	bottom: 4%;
	z-index: 4;
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: var(--kk-gold);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--kk-shadow-lg);
	opacity: 0;
	transform: scale(0) rotate(-20deg);
}
.kk-wb.is-playing .kk-wb__badge { animation: kk-wb-stamp 0.6s cubic-bezier(0.22, 1.5, 0.36, 1) 1.4s forwards; }

/* ---- Confetti (spans injected by JS) ---- */
.kk-wb__confetti {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
}
.kk-wb__confetti i {
	position: absolute;
	top: -24px;
	left: var(--x);
	width: var(--w);
	height: var(--h);
	background: var(--c);
	border-radius: var(--r);
	opacity: 0;
}
.kk-wb.is-playing .kk-wb__confetti i { animation: kk-wb-confetti var(--d) linear var(--delay) forwards; }

/* ---- Replay ---- */
.kk-wb__replay {
	position: absolute;
	right: 14px;
	top: 14px;
	z-index: 5;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--kk-line-strong);
	background: #fff;
	color: var(--kk-text-2);
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s, border-color 0.2s;
}
.kk-wb__replay:hover { color: var(--kk-brown); border-color: var(--kk-brown); }

/* ---- Keyframes ---- */
@keyframes kk-wb-fade-down { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes kk-wb-fade-up   { from { opacity: 0; transform: translateY(12px); }  to { opacity: 1; transform: none; } }
@keyframes kk-wb-pop {
	0%   { opacity: 0; transform: translateY(50px) rotate(-3deg); }
	60%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) rotate(0deg); }
}
@keyframes kk-wb-sweep { to { transform: scaleX(1); } }
@keyframes kk-wb-card-up {
	0%   { opacity: 0; transform: translateY(130%) rotate(0deg); }
	40%  { opacity: 1; }
	100% { opacity: 1; transform: translateY(0) rotate(var(--kk-wb-rot)); }
}
@keyframes kk-wb-float {
	0%, 100% { transform: translateY(0) rotate(var(--kk-wb-rot)); }
	50%      { transform: translateY(-8px) rotate(var(--kk-wb-rot)); }
}
@keyframes kk-wb-stamp {
	0%   { opacity: 0; transform: scale(0) rotate(-20deg); }
	100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
@keyframes kk-wb-confetti {
	0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
	10%  { opacity: 1; }
	100% { opacity: 0; transform: translate3d(var(--drift), 620px, 0) rotate(720deg); }
}

/* ---- Responsive (mirrors .kk-hero__panel breakpoints) ---- */
@media (max-width: 991px) {
	.kk-wb__panel { grid-template-columns: 1fr; min-height: 0; padding: 40px 0 36px; gap: 16px; }
	.kk-wb__text { order: 0; align-items: center; text-align: center; }
	.kk-wb__word { transform-origin: center bottom; }
	.kk-wb__ctas { justify-content: center; }
	.kk-wb__stack { order: 1; height: 300px; max-width: 480px; width: 100%; margin: 8px auto 0; }
}
@media (max-width: 575px) {
	.kk-wb__panel { padding: 28px 0 32px; }
	.kk-wb__title { font-size: 40px; }
	.kk-wb__tagline { font-size: 16px; }
	.kk-wb__stack { height: 230px; }
	.kk-wb__badge { width: 80px; height: 80px; font-size: 12px; }
}

/* ---- Reduced motion: final state, no movement ---- */
@media (prefers-reduced-motion: reduce) {
	.kk-wb.is-playing * { animation: none !important; }
	.kk-wb__kicker, .kk-wb__tagline, .kk-wb__ctas, .kk-wb__word, .kk-wb__card, .kk-wb__badge { opacity: 1; transform: none; }
	.kk-wb__card--1 { transform: rotate(-6deg); }
	.kk-wb__card--2 { transform: rotate(4deg); }
	.kk-wb__card--3 { transform: rotate(-2deg); }
	.kk-wb__badge   { transform: rotate(-8deg); }
	.kk-wb__underline { transform: scaleX(1); }
	.kk-wb__confetti { display: none; }
}