/* ==========================================================================
   Motion — animations ported from the client's HTML prototype (claude.ai artifact "Cro Cherry").
   Everything here only applies under html.motion, which a tiny head script sets when the visitor
   has NOT asked for reduced motion (assets/js/motion.js does the scroll-driven parts).
   Without JS or with "reduce motion" the site is fully static and complete.
   ========================================================================== */

:root {
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- Page fade in / out (cross-document view transition, JS fallback) ---------- */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: 0.4s var(--ease) both motion-fade-out;
}

::view-transition-new(root) {
	animation: 0.6s var(--ease) both motion-fade-in;
}

@keyframes motion-fade-in {
	from { opacity: 0; }
}

@keyframes motion-fade-out {
	to { opacity: 0; }
}

html.motion body {
	animation: motion-fade-in 0.8s var(--ease) both;
}

html.motion.is-leaving body {
	opacity: 0;
	transition: opacity 0.45s var(--ease);
}

/* ---------- Reveal on scroll (elements get .reveal from motion.js) ---------- */
html.motion .reveal {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out);
	transition-delay: var(--reveal-delay, 0s);
}

html.motion .reveal--scale {
	transform: scale(0.96);
}

html.motion .reveal.is-in {
	opacity: 1;
	transform: none;
}

/* Safety net: if motion.js never runs, nothing stays hidden. */
html.motion.motion-failed .reveal {
	opacity: 1;
	transform: none;
}

/* ---------- Buttons: fill slides up, slight lift ---------- */
html.motion .btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out), color 0.4s, border-color 0.4s, background-color 0.4s;
}

html.motion .btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--btn-fill, var(--color-heading));
	transform: translateY(101%);
	transition: transform 0.55s var(--ease-out);
}

html.motion .btn:hover {
	transform: translateY(-2px);
}

html.motion .btn:hover::before {
	transform: none;
}

html.motion .btn:active {
	transform: translateY(0) scale(0.98);
}

html.motion .btn--primary {
	--btn-fill: #82302a;
}

html.motion .btn--primary:hover {
	background: var(--color-cherry);
	box-shadow: 0 12px 28px -12px rgb(158 59 51 / 0.6);
}

html.motion .btn--secondary {
	--btn-fill: var(--color-heading);
}

html.motion .btn--secondary:hover {
	background: transparent;
}

html.motion .btn--secondary.btn--on-dark:hover {
	background: var(--color-bg);
}

html.motion .btn--outline-light {
	--btn-fill: var(--color-bg);
}

html.motion .btn--outline-light:hover {
	background: transparent;
	color: var(--color-heading);
}

html.motion .btn--tertiary::before {
	content: none;
}

/* ---------- Heroes: zoom-in on load, slow Ken Burns, parallax (motion.js), title rising from a mask ---------- */
html.motion .hero-home__media,
html.motion .page-hero__media {
	will-change: transform;
}

html.motion .hero-home__media img,
html.motion .page-hero__media img {
	scale: 1.18;
	animation:
		motion-hero-in 2.8s var(--ease-out) forwards,
		motion-kenburns 22s ease-in-out 2.8s infinite alternate;
}

@keyframes motion-hero-in {
	to { scale: 1; }
}

@keyframes motion-kenburns {
	0% { transform: scale(1) translate(0, 0); }
	50% { transform: scale(1.06) translate(-1.2%, 0.8%); }
	100% { transform: scale(1.1) translate(1%, -1%); }
}

html.motion .hero-home__content,
html.motion .page-hero__title {
	will-change: transform, opacity;
}

html.motion .motion-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

html.motion .motion-mask > span {
	display: inline-block;
	transform: translateY(110%);
	animation: motion-rise 1.3s var(--ease-out) forwards;
	animation-delay: var(--rise-delay, 0.5s);
}

@keyframes motion-rise {
	to { transform: none; }
}

html.motion .hero-home__links li {
	opacity: 0;
	translate: 0 1rem;
	animation: motion-drop-in 1s var(--ease-out) forwards;
	animation-delay: calc(1.25s + var(--i, 0) * 0.1s);
}

html.motion .hero-home__link {
	transition: letter-spacing 0.5s var(--ease-out);
}

html.motion .hero-home__link:hover {
	letter-spacing: 0.08em;
}

@keyframes motion-drop-in {
	to { opacity: 1; translate: 0 0; }
}

/* Header slides in once on the home page. "backwards", not "both": a kept translate (even 0) would
   make the header the containing block of the fixed mobile menu and squeeze it into the bar. */
html.motion .home .site-header {
	animation: motion-header-in 1.1s var(--ease-out) 0.9s backwards;
}

@keyframes motion-header-in {
	from { opacity: 0; translate: 0 -1.25rem; }
}

/* Scroll cue at the bottom of the home hero (added by motion.js). */
.motion-cue {
	position: absolute;
	left: 50%;
	bottom: 2.25rem;
	width: 1.75rem;
	height: 2.875rem;
	border: 1.5px solid rgb(247 243 233 / 0.7);
	border-radius: 1.25rem;
	opacity: 0;
	transform: translateX(-50%);
	animation: motion-fade-to 1s 2.2s forwards;
	pointer-events: none;
}

.motion-cue::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 0.5625rem;
	width: 4px;
	height: 9px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--color-bg);
	animation: motion-cue 1.8s ease-in-out infinite;
}

@keyframes motion-fade-to {
	to { opacity: 1; }
}

@keyframes motion-cue {
	0% { transform: translateY(0); opacity: 1; }
	70% { transform: translateY(14px); opacity: 0; }
	100% { opacity: 0; }
}

/* ---------- Arch divider flattens as it scrolls up (motion.js sets --arch-flat 0 → 1) ---------- */
html.motion .arch::before {
	border-radius: 50% / calc((1 - var(--arch-flat, 0)) * 50%);
}

/* ---------- Parallax photos (motion.js sets --parallax in px) ---------- */
html.motion .cta-banner__media img,
html.motion .photo-band:not(.photo-band--fixed) img {
	top: -12%;
	height: 124%;
	transform: translate3d(0, var(--parallax, 0), 0);
	will-change: transform;
}

html.motion .about-welcome__decor,
html.motion .intro-video__decor {
	translate: 0 var(--parallax, 0);     /* own property, so the drawing keeps its transform */
	will-change: translate;
}

/* ---------- Brand pages: photo fixed inside its "window" ---------- */
@media (min-width: 768px) {
	html.motion .photo-band--fixed {
		clip-path: inset(0);
	}

	html.motion .photo-band--fixed img {
		position: fixed;
		inset: 0;
		width: 100%;
		height: 100vh;
	}
}

/* ---------- Stacking timeline / process cards (motion.js sets --i, scale and --dim) ---------- */
@media (min-width: 768px) {
	/* motion.js sets --stack-top (just below the header) and --stack-step, and adds .is-unstacked to a
	   list whose cards would not fit on the screen, so no card is ever cut off. */
	html.motion .timeline__list:not(.is-unstacked) .timeline__step {
		position: sticky;
		top: calc(var(--stack-top, 9.25rem) + var(--i, 0) * var(--stack-step, 1.625rem));
		transform-origin: 50% 0;
		will-change: transform;
	}

	html.motion .timeline__list:not(.is-unstacked) .timeline__step::after {
		content: "";
		position: absolute;
		inset: -1px;
		border-radius: inherit;
		background: var(--color-heading);
		opacity: var(--dim, 0);
		pointer-events: none;
	}
}

/* ---------- Word-by-word reading on the cherry band (Dalma Vita) ---------- */
.js .quote-band--cherry .quote-band__text .word,
.js .quote-band--cherry .quote-band__text .text-accent .word {
	color: rgb(247 243 233 / 0.4);
}

.js .quote-band--cherry .quote-band__text .word.is-read,
.js .quote-band--cherry .quote-band__text .text-accent .word.is-read {
	color: var(--color-bg);
}

/* ---------- "Tri linije": crossfade, hover badge ---------- */
html.motion .lines__carousel.is-fading {
	display: grid;
}

html.motion .lines__carousel.is-fading > .lines__slide {
	grid-area: 1 / 1;
	animation: none;
}

html.motion .lines__carousel.is-fading > .lines__slide[hidden] {
	display: grid;
	visibility: hidden;
	opacity: 0;
}

html.motion .lines__carousel.is-fading > .lines__slide {
	transition: opacity 0.9s var(--ease), visibility 0.9s;
}

html.motion .lines__carousel.is-fading .lines__photo img {
	transition: transform 1.6s var(--ease-out);
}

html.motion .lines__carousel.is-fading .lines__slide[hidden] .lines__photo img {
	transform: scale(1.08);
}

html.motion .lines__carousel.is-fading .lines__product img {
	transition: transform 0.9s var(--ease-out), opacity 0.7s var(--ease);
}

html.motion .lines__carousel.is-fading .lines__slide[hidden] .lines__product img {
	opacity: 0;
	transform: translateY(30px) rotate(3deg);
}

html.motion .lines__slide:hover .lines__product img {
	transform: translateY(-8px) rotate(-1.5deg);
}

.lines__slide[data-href] {
	cursor: pointer;
}

.lines__badge {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 9.5rem;
	height: 9.5rem;
	padding: 1rem;
	border: 2px solid var(--color-bg);
	border-radius: 50%;
	color: var(--color-bg);
	font-size: var(--fs-small);
	line-height: 1.2;
	text-align: center;
	text-shadow: 0 1px 8px rgb(36 18 13 / 0.45);
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.6);
	transition: transform 0.6s var(--ease-out), opacity 0.4s var(--ease);
	pointer-events: none;
}

.lines__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgb(36 18 13 / 0);
	transition: background 0.6s var(--ease);
	pointer-events: none;
}

.lines__slide[data-href]:hover .lines__photo::after,
.lines__slide[data-href]:focus-within .lines__photo::after {
	background: rgb(36 18 13 / 0.32);
}

.lines__slide[data-href]:hover .lines__badge,
.lines__slide[data-href]:focus-within .lines__badge {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

@media (min-width: 1200px) {
	.lines__badge {
		width: 11.875rem;                           /* 190 */
		height: 11.875rem;
		font-size: 1.375rem;
	}
}

/* ---------- Cards and media: gentle hover zoom ---------- */
html.motion .product-card img,
html.motion .video-card img,
html.motion .about-welcome__small img {
	transition: transform 0.8s var(--ease-out);
}

html.motion .product-card:hover img {
	transform: scale(1.04);
}

html.motion .video-card:hover img {
	transform: scale(1.035);
}

html.motion .video-card__play::before {
	content: "";
	position: absolute;
	inset: 12%;
	border: 1.5px solid rgb(247 243 233 / 0.8);
	border-radius: 50%;
	animation: motion-ping 2.4s var(--ease-out) infinite;
	pointer-events: none;
}

@keyframes motion-ping {
	0% { transform: scale(1); opacity: 0.9; }
	100% { transform: scale(1.6); opacity: 0; }
}

/* ---------- Product page: zoomable main photo ---------- */
.product-detail__main [data-product-main] {
	cursor: zoom-in;
}

.photo-zoom {
	width: min(92vw, 70rem);
	max-width: none;
	max-height: 92vh;
	padding: 0;
	border: 0;
	border-radius: 1.5rem;
	background: var(--color-bg);
	overflow: hidden;
}

.photo-zoom::backdrop {
	background: rgb(36 18 13 / 0.6);
}

.photo-zoom img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 92vh;
	object-fit: contain;
	cursor: zoom-out;
}

.photo-zoom__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 0;
	border-radius: 50%;
	background: var(--color-bg);
	color: var(--color-heading);
	cursor: pointer;
}

html.motion .photo-zoom[open] {
	animation: motion-zoom-in 0.5s var(--ease-out);
}

@keyframes motion-zoom-in {
	from { opacity: 0; transform: scale(0.96); }
}

/* ---------- Footer: today's opening hours, logo drawn in ---------- */
.hours__row.is-today {
	color: var(--color-cherry);
}

html.motion .site-footer__logo svg {
	clip-path: inset(0 100% 0 0);
	transition: clip-path 1.8s var(--ease-out);
}

html.motion .site-footer__logo.is-in svg {
	clip-path: inset(0 0 0 0);
}

/* ---------- Hard stop for reduced motion (belt and braces) ---------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition {
		navigation: none;
	}
}

/* Header CTA: the fill sweeps in (colour from --btn-fill in components.css). */
html.motion .site-header__cta.btn--secondary:hover {
	background: transparent;
}