.gossip-hero {
	position: relative;
	min-height: 100vh;
	overflow: hidden;
	background: #171817;
	isolation: isolate;
}

.gossip-hero .gossip-plate,
.gossip-hero .gossip-group,
.gossip-hero .gossip-group img {
	position: absolute;
	inset: -2%;
	width: 104%;
	height: 104%;
	max-width: none;
	object-fit: cover;
}

.gossip-hero .gossip-plate {
	z-index: 0;
	filter: brightness(.56) saturate(.92);
}

.gossip-hero.is-playing .gossip-plate {
	animation: gossip-plate-reveal 1.2s ease-out both;
}

.gossip-hero .gossip-group {
	z-index: 1;
	pointer-events: none;
	will-change: transform, opacity, filter;
	filter: brightness(.68) saturate(.96) drop-shadow(0 10px 11px rgba(0, 0, 0, .24));
}

.gossip-hero .gossip-group img {
	inset: 0;
	width: 100%;
	height: 100%;
}

.gossip-sandwich { clip-path: polygon(0 0, 43% 0, 43% 49%, 0 49%); }
.gossip-drinks { clip-path: polygon(40% 0, 78% 0, 78% 35%, 40% 35%); }
.gossip-left-props { clip-path: polygon(0 38%, 28% 38%, 28% 100%, 0 100%); }
.gossip-right-props { clip-path: polygon(77% 0, 100% 0, 100% 100%, 77% 100%); }
.gossip-scoop { clip-path: polygon(25% 68%, 60% 68%, 60% 100%, 25% 100%); }
.gossip-loose-beans { clip-path: polygon(53% 68%, 78% 68%, 78% 100%, 53% 100%); }
.gossip-cup { clip-path: polygon(74% 58%, 93% 58%, 93% 88%, 74% 88%); }
.gossip-powder { clip-path: polygon(72% 78%, 100% 78%, 100% 100%, 72% 100%); }

.gossip-hero.is-playing .gossip-sandwich { animation: gossip-enter-tl 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-drinks { animation: gossip-enter-top 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-left-props { animation: gossip-enter-left 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-right-props { animation: gossip-enter-right 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-scoop { animation: gossip-enter-bottom 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-loose-beans { animation: gossip-beans 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-cup { animation: gossip-cup 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }
.gossip-hero.is-playing .gossip-powder { animation: gossip-powder 2.5s cubic-bezier(.16,.78,.22,1) .35s both, gossip-food-glow .8s ease-in-out 2.9s both; }

.gossip-shade {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.54), transparent 25%, transparent 72%, rgba(0,0,0,.32)), radial-gradient(ellipse at center, rgba(0,0,0,.03) 0 25%, rgba(0,0,0,.18) 73%);
	pointer-events: none;
}

.gossip-effects {
	position: absolute;
	z-index: 3;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.gossip-food-route {
	position: absolute;
	z-index: 4;
	inset: -2%;
	width: 104%;
	height: 104%;
	pointer-events: none;
	overflow: visible;
}

.gossip-food-route path {
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
	opacity: 0;
}

.gossip-route-glow { stroke: rgba(223,150,41,.42); stroke-width: 8; filter: url(#gossip-route-glow); stroke-dasharray: 115 885; }
.gossip-route-line { stroke: #f0b64c; stroke-width: 2.2; stroke-dasharray: 115 885; filter: drop-shadow(0 0 4px #d8871d); }
.gossip-route-d, .gossip-route-e { display: none; }
.gossip-hero.is-playing .gossip-route-a { animation: gossip-route 7.6s linear 4.1s infinite; }
.gossip-hero.is-playing .gossip-route-b { animation: gossip-route 9.3s linear 4.7s infinite; }
.gossip-hero.is-playing .gossip-route-c { animation: gossip-route 8.4s linear 3.8s infinite; }

.gossip-brand-stage {
	position: absolute;
	z-index: 5;
	left: 50%;
	top: 50%;
	width: min(560px, 48vw);
	transform: translate(-50%, -46%);
	text-align: center;
	isolation: isolate;
}

.gossip-brand-stage::before {
	content: "";
	position: absolute;
	z-index: -1;
	left: 50%;
	top: 50%;
	width: 145%;
	height: 175%;
	transform: translate(-50%, -50%);
	opacity: 0;
	background: radial-gradient(ellipse, rgba(225,158,48,.22), rgba(225,158,48,.08) 35%, transparent 69%);
	filter: blur(16px);
}

.gossip-hero.is-playing .gossip-brand-stage { animation: gossip-brand-reveal 1.1s cubic-bezier(.2,.8,.2,1) 3.3s both; }
.gossip-hero.is-playing .gossip-brand-stage::before { animation: gossip-warmth 4.6s ease-in-out 3.15s infinite; }

.gossip-kicker {
	margin-bottom: 13px;
	color: #efb84f;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .22em;
	text-transform: uppercase;
	text-shadow: 0 2px 4px #000, 0 0 16px #000;
}

.gossip-logo-shell { position: relative; overflow: hidden; padding: 18px 22px; }
.gossip-logo-shell img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 18px rgba(0,0,0,.7)) drop-shadow(0 0 17px rgba(232,169,55,.3)); }
.gossip-hero.is-playing .gossip-logo-shell img { animation: gossip-logo-breathe 4.6s ease-in-out 3.15s infinite; }
.gossip-logo-shell::after { content: ""; position: absolute; top: -25%; bottom: -25%; width: 20%; left: -40%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255,241,170,.5), transparent); filter: blur(5px); mix-blend-mode: screen; }
.gossip-hero.is-playing .gossip-logo-shell::after { animation: gossip-logo-shine 7s ease-in-out 3.65s infinite; }

.gossip-description {
	margin-top: 13px;
	color: #fff9ed;
	font: 600 italic 19px/1.5 Georgia, serif;
	text-shadow: 0 2px 4px #000, 0 0 18px #000;
}

.gossip-replay {
	position: absolute;
	z-index: 8;
	right: 24px;
	bottom: 22px;
	padding: 11px 15px;
	border: 1px solid rgba(255,255,255,.42);
	background: rgba(0,0,0,.45);
	color: #fff;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	cursor: pointer;
	opacity: 0;
	animation: gossip-replay-show .6s ease-out 4.65s forwards;
}

.gossip-replay:hover { border-color: #dfa846; color: #efc575; }

@keyframes gossip-plate-reveal { from { opacity: 0; filter: brightness(.12) saturate(.5); transform: scale(1.08); } to { opacity: 1; filter: brightness(.56) saturate(.92); transform: scale(1); } }
@keyframes gossip-enter-tl { 0% { opacity:0; transform:translate(-110px,-95px) rotate(-4deg) scale(.92); filter:blur(9px); } 65% { opacity:1; transform:translate(8px,6px) scale(1.008); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-top { 0% { opacity:0; transform:translateY(-125px) scale(.94); filter:blur(9px); } 68% { opacity:1; transform:translateY(8px) scale(1.008); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-left { 0% { opacity:0; transform:translate(-135px,20px) rotate(-3deg); filter:blur(8px); } 70% { opacity:1; transform:translate(7px,-2px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-right { 0% { opacity:0; transform:translate(145px,-15px) rotate(3deg); filter:blur(8px); } 70% { opacity:1; transform:translate(-8px,2px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-bottom { 0% { opacity:0; transform:translate(-30px,145px) rotate(-5deg); filter:blur(8px); } 72% { opacity:1; transform:translate(3px,-7px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-beans { 0% { opacity:0; transform:translate(155px,105px) rotate(12deg) scale(.65); filter:blur(10px); } 55% { opacity:1; transform:translate(-12px,-11px) scale(1.025); } 100% { opacity:1; transform:none; } }
@keyframes gossip-cup { 0% { opacity:0; transform:translate(125px,105px) rotate(8deg) scale(.88); filter:blur(7px); } 68% { opacity:1; transform:translate(-6px,-5px) scale(1.012); } 100% { opacity:1; transform:none; } }
@keyframes gossip-powder { 0% { opacity:0; transform:translate(95px,135px) rotate(5deg) scale(.8); filter:blur(9px); } 70% { opacity:1; transform:translate(-6px,-4px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-food-glow { 0%,100% { filter:brightness(.68) saturate(.96) drop-shadow(0 10px 11px rgba(0,0,0,.24)); } 45% { filter:brightness(.9) saturate(1.12) drop-shadow(0 0 13px rgba(233,171,69,.44)); } }
@keyframes gossip-brand-reveal { from { opacity:0; transform:translate(-50%,-39%) scale(.97); filter:blur(8px); } to { opacity:1; transform:translate(-50%,-46%); filter:none; } }
@keyframes gossip-warmth { 0%,100% { opacity:.18; transform:translate(-50%,-50%) scale(.94); } 50% { opacity:.75; transform:translate(-50%,-50%) scale(1.04); } }
@keyframes gossip-logo-breathe { 0%,100% { filter:drop-shadow(0 5px 18px rgba(0,0,0,.7)) drop-shadow(0 0 12px rgba(232,169,55,.24)); } 50% { filter:drop-shadow(0 5px 18px rgba(0,0,0,.7)) drop-shadow(0 0 25px rgba(245,181,59,.48)); } }
@keyframes gossip-logo-shine { 0%,67% { left:-40%; opacity:0; } 72% { opacity:.8; } 84% { left:120%; opacity:.6; } 85%,100% { left:120%; opacity:0; } }
@keyframes gossip-route { 0% { opacity:0; stroke-dashoffset:0; } 7%,82% { opacity:1; } 96%,100% { opacity:0; stroke-dashoffset:-1000; } }
@keyframes gossip-replay-show { to { opacity:1; } }

@media (max-width: 1100px), (max-aspect-ratio: 4/3) {
	.gossip-hero .gossip-group,
	.gossip-hero .gossip-plate { inset: -2%; width: 104%; height: 104%; }
	.gossip-hero .gossip-sandwich,
	.gossip-hero .gossip-left-props,
	.gossip-hero .gossip-scoop { clip-path: none; }
	.gossip-hero .gossip-drinks,
	.gossip-hero .gossip-right-props,
	.gossip-hero .gossip-loose-beans,
	.gossip-hero .gossip-cup,
	.gossip-hero .gossip-powder { display: none; }
	.gossip-brand-stage { width: min(560px, 48vw); }
	.gossip-logo-shell { padding: 10px; }
	.gossip-kicker { font-size: 12px; letter-spacing: .18em; }
	.gossip-description { font-size: 17px; }
}

@media (max-width: 600px) {
	/* Mobile-only compositor savings; desktop keeps the full visual treatment. */
	.gossip-hero .gossip-group {
		filter: brightness(.72) saturate(.98);
		will-change: transform, opacity;
	}
	.gossip-hero.is-playing .gossip-sandwich { animation: gossip-enter-tl-mobile 2.5s cubic-bezier(.16,.78,.22,1) .35s both; }
	.gossip-hero.is-playing .gossip-left-props { animation: gossip-enter-left-mobile 2.5s cubic-bezier(.16,.78,.22,1) .35s both; }
	.gossip-hero.is-playing .gossip-scoop { animation: gossip-enter-bottom-mobile 2.5s cubic-bezier(.16,.78,.22,1) .35s both; }
	.gossip-route-glow { display: none; }
	.gossip-route-line { filter: none; stroke-width: 2.5; }
	.gossip-route-line.gossip-route-d,
	.gossip-route-line.gossip-route-e { display: block; }
	.gossip-hero.is-playing .gossip-route-c { animation-duration: 6.3s; animation-delay: 3.45s; }
	.gossip-hero.is-playing .gossip-route-d { animation: gossip-route 7.1s linear 4.15s infinite; }
	.gossip-hero.is-playing .gossip-route-e { animation: gossip-route 5.8s linear 4.8s infinite; }
	.gossip-brand-stage::before { filter: none; }
	.gossip-logo-shell img { filter: drop-shadow(0 4px 8px rgba(0,0,0,.65)); }
	.gossip-hero.is-playing .gossip-logo-shell img { animation: gossip-logo-breathe-mobile 4.6s ease-in-out 3.15s infinite; }
	.gossip-logo-shell::after { filter: none; mix-blend-mode: normal; }
	.gossip-brand-stage { width: min(340px, 78vw); }
	.gossip-logo-shell { padding: 7px 10px; }
	.gossip-kicker { margin-bottom: 9px; font-size: 10px; letter-spacing: .1em; white-space: nowrap; }
	.gossip-description { margin-top: 9px; font-size: 14px; line-height: 1.42; }
	.gossip-replay { right: 12px; bottom: 12px; padding: 9px 11px; font-size: 8px; }
}

@keyframes gossip-enter-tl-mobile { 0% { opacity:0; transform:translate(-72px,-62px) rotate(-3deg) scale(.94); } 68% { opacity:1; transform:translate(5px,4px) scale(1.005); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-left-mobile { 0% { opacity:0; transform:translate(-88px,14px) rotate(-2deg); } 70% { opacity:1; transform:translate(5px,-2px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-enter-bottom-mobile { 0% { opacity:0; transform:translate(-20px,95px) rotate(-3deg); } 72% { opacity:1; transform:translate(2px,-5px); } 100% { opacity:1; transform:none; } }
@keyframes gossip-logo-breathe-mobile { 0%,100% { opacity:.96; transform:scale(1); } 50% { opacity:1; transform:scale(1.012); } }

@media (prefers-reduced-motion: reduce) {
	.gossip-hero *, .gossip-hero *::before, .gossip-hero *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.gossip-food-route, .gossip-effects, .gossip-replay { display: none; }
}