/* ==========================================================================
   One Pan Pantry — motion layer (floating food accessories, steam, waves,
   spice burst, rotating badge, ingredient ribbon)
   ========================================================================== */

.opp-has-decor { position: relative; isolation: isolate; }
.opp-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.opp-dc { position: absolute; display: block; will-change: transform; opacity: .95; }
.opp-dc img { display: block; width: 100%; height: auto; transform: rotate(var(--r, 0deg)); animation: opp-dc-float var(--t, 7s) ease-in-out var(--dl, 0s) infinite alternate; filter: drop-shadow(0 10px 14px rgba(62, 42, 32, .16)); }
.opp-dc--lemon img { animation: opp-dc-spin 46s linear var(--dl, 0s) infinite; }
.opp-dc--anise img { animation: opp-dc-spin 60s linear var(--dl, 0s) infinite reverse; }
.opp-dc--spice img, .opp-dc--saffron img { animation: opp-dc-drift var(--t, 7s) ease-in-out var(--dl, 0s) infinite alternate; filter: none; }
.is-paused .opp-dc img { animation-play-state: paused; }
.opp-dark .opp-dc, .opp-news .opp-dc { opacity: .75; }

@keyframes opp-dc-float {
	0% { transform: translate3d(0, 0, 0) rotate(var(--r, 0deg)); }
	50% { transform: translate3d(6px, -14px, 0) rotate(calc(var(--r, 0deg) + 8deg)); }
	100% { transform: translate3d(-4px, -22px, 0) rotate(calc(var(--r, 0deg) - 6deg)); }
}
@keyframes opp-dc-spin { to { transform: rotate(calc(var(--r, 0deg) + 360deg)); } }
@keyframes opp-dc-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(8px, -12px, 0) scale(1.08); } }

/* Steam rising from the hero dishes */
.opp-steam-fx { position: absolute; z-index: 3; left: 50%; top: -6%; width: 22%; max-width: 120px; transform: translateX(-50%); pointer-events: none; opacity: .9; filter: drop-shadow(0 0 6px rgba(255, 255, 255, .5)); }
.opr-hero__media .opp-steam-fx { top: -10%; left: 46%; }
.opa-collage .opp-steam-fx { top: -4%; left: 56%; }
.opp-dark__art .opp-steam-fx { top: -14%; left: 50%; width: 26%; }

/* Wave dividers */
.opp-wave {
	position: absolute; left: 0; right: 0; top: -39px; height: 40px; z-index: 1; pointer-events: none;
	background: inherit;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20C120%200%20240%200%20360%2030%20C480%2060%20600%2060%20720%2030%20C840%200%20960%200%201080%2030%20C1200%2060%201320%2060%201440%2030%20L1440%2060%20L0%2060Z%22%20fill%3D%22black%22/%3E%3C/svg%3E") repeat-x 0 100% / 720px 40px; mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%201440%2060%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2030%20C120%200%20240%200%20360%2030%20C480%2060%20600%2060%20720%2030%20C840%200%20960%200%201080%2030%20C1200%2060%201320%2060%201440%2030%20L1440%2060%20L0%2060Z%22%20fill%3D%22black%22/%3E%3C/svg%3E") repeat-x 0 100% / 720px 40px;
}
@keyframes opp-wave { to { -webkit-mask-position: 720px 100%; mask-position: 720px 100%; } }

/* Spice burst on button press */
.opp-burst { position: fixed; z-index: 2000; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; pointer-events: none; animation: opp-burst .7s cubic-bezier(.16, 1, .3, 1) forwards; }
@keyframes opp-burst { 0% { transform: translate(0, 0) scale(1); opacity: 1; } 100% { transform: translate(var(--bx), var(--by)) scale(.2); opacity: 0; } }

/* Rotating badge on the recipe hero */
.opr-spin { position: absolute; z-index: 3; right: -26px; top: -26px; width: 128px; height: 128px; pointer-events: none; }
.opr-spin circle.bg { fill: var(--opp-card); filter: drop-shadow(0 10px 18px rgba(43, 29, 22, .18)); }
.opr-spin text { font: 600 11.5px var(--opp-sans); letter-spacing: .06em; fill: var(--opp-ink); }
.opr-spin .ring { transform-origin: 100px 100px; animation: opp-dc-spin 24s linear infinite; }

/* Ingredient ribbon on recipe pages */
.opr-ribbon { margin-top: clamp(22px, 3vw, 36px); background: var(--opp-terra); overflow: hidden; transform: rotate(-1deg); margin-inline: -20px; }
.opr-ribbon .opp-marquee { animation-duration: 36s; }
.opr-ribbon .opp-marquee ul { padding-block: 16px; }
.opr-ribbon .opp-marquee li { color: #FFF4EA; font-size: clamp(18px, 2vw, 24px); }
.opr-ribbon .opp-marquee li::after { background: var(--opp-saffron); }
.opr-ribbon:hover .opp-marquee { animation-play-state: paused; }

/* Card image tilt depth */
.opp-card__media[data-opp-tilt] { transition: transform .5s cubic-bezier(.16, 1, .3, 1), box-shadow .5s; transform-style: preserve-3d; }
.opp-card:hover .opp-card__media { box-shadow: var(--opp-shadow-lg); }

@media (max-width: 767px) {
	.opp-dc { opacity: .7; }
	.opp-wave { top: -23px; height: 24px; -webkit-mask-size: 420px 24px; mask-size: 420px 24px; }
	.opr-spin { width: 92px; height: 92px; right: -6px; top: -14px; }
	.opr-spin text { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
	.opp-dc img, .opp-wave, .opr-spin .ring, .opr-ribbon .opp-marquee { animation: none !important; }
	.opp-steam-fx { display: none; }
}