/*
 * Kebabia — motion and hover.
 * Hidden states apply only once motion.js has run (html.kb-motion), so content is
 * always visible without JavaScript, and nothing moves for reduced-motion visitors.
 */
:root { --kb-ease: cubic-bezier(0.16, 1, 0.3, 1); }

/* ---------- Entrances ---------- */
.kb-motion [data-kb] {
	opacity: 0;
	transition: opacity 0.9s var(--kb-ease), transform 1.1s var(--kb-ease), clip-path 1.3s var(--kb-ease);
	transition-delay: var(--kb-delay, 0ms);
}
.kb-motion [data-kb="rise"] { transform: translateY(36px); }
.kb-motion [data-kb="left"] { transform: translateX(-64px); }
.kb-motion [data-kb="right"] { transform: translateX(64px); }
.kb-motion [data-kb="zoom-in"] { transform: scale(0.86); }
.kb-motion [data-kb="zoom-out"] { transform: scale(1.12); }
.kb-motion [data-kb="draw"] { opacity: 1; transform: scaleX(0); }
.kb-motion [data-kb].is-in { opacity: 1; transform: none; }

/* Curtain reveal: a gold panel slides off the photo while the photo settles from a
   closer crop. The photo itself is never hidden — browsers neither report a fully
   clipped element as in view nor load a lazy image they cannot see. */
.kb-motion [data-kb="left-image"],
.kb-motion [data-kb="right-image"] { opacity: 1; overflow: hidden; }
.kb-motion .wp-block-image[data-kb$="-image"] { position: relative; }
.kb-motion [data-kb="left-image"]::after,
.kb-motion [data-kb="right-image"]::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: var(--kb-gold, #c9a96a);
	transition: transform 1.3s var(--kb-ease); transition-delay: var(--kb-delay, 0ms);
}
.kb-motion [data-kb="left-image"]::after { transform-origin: right center; }
.kb-motion [data-kb="right-image"]::after { transform-origin: left center; }
.kb-motion [data-kb$="-image"].is-in::after { transform: scaleX(0); }
.kb-motion [data-kb$="-image"] img { transform: scale(1.12); transition: transform 1.8s var(--kb-ease); transition-delay: var(--kb-delay, 0ms); }
.kb-motion [data-kb$="-image"].is-in img { transform: none; }

/* Gallery: zoom-out photos settle from a closer crop inside their frame. */
.kb-gallery .wp-block-image { overflow: hidden; }
.kb-motion .kb-gallery [data-kb="zoom-out"] { transform: none; }
.kb-motion .kb-gallery [data-kb="zoom-out"] img { transform: scale(1.3); transition: transform 1.8s var(--kb-ease); transition-delay: var(--kb-delay, 0ms); }
.kb-motion .kb-gallery [data-kb="zoom-out"].is-in img { transform: scale(1); }

/* Headings stay put while their words rise one by one. */
.kb-motion [data-kb][data-kb-split] { opacity: 1; transform: none; }
.kb-word { display: inline-block; }
.kb-motion .kb-word {
	opacity: 0;
	transform: translateY(0.55em) rotate(2deg);
	transform-origin: left bottom;
	transition: opacity 0.8s var(--kb-ease), transform 1s var(--kb-ease);
	transition-delay: calc(var(--kb-delay, 0ms) + var(--kb-w, 0) * 70ms);
}
.kb-motion .kb-word.is-in,
.kb-motion.kb-loaded .kb-hero .kb-word { opacity: 1; transform: none; }


/* Slam: cards drop onto the page from slightly too big, with a bounce. */
.kb-motion [data-kb="slam"] { transform: scale(1.18) rotate(-4deg); transition: opacity 0.5s var(--kb-ease), transform 0.8s var(--kb-bounce); transition-delay: var(--kb-delay, 0ms); }
/* Price stamps spin on once their card has landed. */
.kb-motion .aku-menu--cards [data-kb] .aku-dish__price { transform: rotate(-200deg) scale(0); transition: transform 0.7s var(--kb-bounce); transition-delay: calc(var(--kb-delay, 0ms) + 0.35s); }
.kb-motion .aku-menu--cards [data-kb].is-in .aku-dish__price { transform: rotate(-12deg) scale(1); }
.kb-motion .aku-menu--cards [data-kb].is-in:hover .aku-dish__price { transform: rotate(8deg) scale(1.08); transition-delay: 0s; }

/* Hero: words rise, the rest follows; the photo flickers like firelight. */
.kb-motion .kb-hero .kb-eyebrow,
.kb-motion .kb-hero .kb-lead,
.kb-motion .kb-hero .kb-buttons,
.kb-motion .kb-hero .aku-open,
.kb-motion .kb-hero .kb-hero__seal { opacity: 0; transform: translateY(24px); transition: opacity 0.8s var(--kb-ease), transform 0.9s var(--kb-ease); }
.kb-motion.kb-loaded .kb-hero .kb-eyebrow { opacity: 1; transform: none; transition-delay: 0.1s; }
.kb-motion.kb-loaded .kb-hero .kb-lead { opacity: 1; transform: none; transition-delay: 0.7s; }
.kb-motion.kb-loaded .kb-hero .kb-buttons { opacity: 1; transform: none; transition-delay: 0.9s; }
.kb-motion.kb-loaded .kb-hero .aku-open { opacity: 1; transform: none; transition-delay: 1.1s; }
.kb-motion.kb-loaded .kb-hero .kb-hero__seal { opacity: 1; transform: none; transition-delay: 1.2s; }
.kb-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse at 75% 85%, rgba(242, 116, 43, 0.35), transparent 60%); animation: kb-flicker 3.4s infinite; }
@keyframes kb-flicker { 0%, 100% { opacity: 0.55; } 18% { opacity: 0.85; } 32% { opacity: 0.6; } 47% { opacity: 1; } 63% { opacity: 0.7; } 80% { opacity: 0.9; } }
.kb-seal svg { animation: kb-spin 18s linear infinite; }
@keyframes kb-spin { to { transform: rotate(360deg); } }

/* Reviews: stacked like a deck, then fanned out into place. */
.kb-motion [data-kb="deck"] { transform: translateX(var(--kb-deck-x, 0)) rotate(var(--kb-deck-r, 0deg)) scale(0.9); }

/* Offer bands: words slide sideways as the page scrolls (offset set by motion.js). */
.kb-marquee__words {
	margin: 0 !important; max-width: none !important; padding: 0 !important;
	white-space: nowrap; transform: translateX(var(--kb-marquee, 0)); will-change: transform;
}

/* Rules grow from the left. */
.kb-rule { transform-origin: left; transition: transform 1.2s var(--kb-ease); }

/* Parallax on two-column photos (offset set by motion.js). */
.kb-motion .kb-story .elementor-widget-image img { transform: translateY(var(--kb-parallax, 0)) scale(1.06); }

/* ---------- Hover ---------- */

/* Text roll: the label slides up to a copy of itself. */
.kb-roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.3; height: 1.3em; }
.kb-roll__inner { display: inline-block; position: relative; transition: transform 0.4s var(--kb-ease); }
.kb-roll__inner::after { content: attr(data-text); position: absolute; left: 0; top: 100%; white-space: nowrap; }
a:hover .kb-roll .kb-roll__inner,
a:focus-visible .kb-roll .kb-roll__inner,
button:hover .kb-roll .kb-roll__inner { transform: translateY(-100%); }

@media (prefers-reduced-motion: reduce) {
	.kb-roll__inner, .aku-menu--cards .aku-dish { transition: none; }
	.kb-hero::after, .kb-seal svg { animation: none; }
}