/* ==========================================================================
   Vodnar — motion. Requirement: the site feels alive, every link has a smooth hover.
   All animations use only transform/opacity/color; prefers-reduced-motion is respected.
   ========================================================================== */

/* 1. Global smooth hover for ALL links and buttons (no exceptions) */
a,
button,
.btn,
[role="button"],
input[type="submit"],
input[type="button"],
summary {
	transition:
		color var(--dur) var(--ease),
		background-color var(--dur) var(--ease),
		border-color var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		opacity var(--dur) var(--ease),
		transform var(--dur) var(--ease),
		text-decoration-color var(--dur) var(--ease),
		text-underline-offset var(--dur) var(--ease);
}

/* Text links in content: animated underline */
.prose a:not(.btn),
.entry-content a:not(.btn):not(.wp-block-button__link),
.text-link {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	text-decoration-color: color-mix(in srgb, var(--c-primary) 35%, transparent);
}
.prose a:not(.btn):hover,
.entry-content a:not(.btn):not(.wp-block-button__link):hover,
.text-link:hover {
	color: var(--c-accent);
	text-decoration-color: currentColor;
	text-underline-offset: 0.3em;
}

/* Links with a "growing line" (menus, footer, breadcrumbs) */
.link-grow {
	position: relative;
	text-decoration: none;
}
.link-grow::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right center;
	transition: transform var(--dur) var(--ease);
}
.link-grow:hover::after,
.link-grow:focus-visible::after,
.link-grow[aria-current]::after {
	transform: scaleX(1);
	transform-origin: left center;
}

/* Icon links (header): slight lift + colour */
.icon-link:hover,
.icon-link:focus-visible {
	color: var(--c-accent);
	transform: translateY(-2px);
}

/* Phone in the header: the handset rings */
.header-phone .icon { transition: transform var(--dur) var(--ease-out); }
.header-phone:hover .icon,
.header-phone:focus-visible .icon { animation: phone-ring 600ms var(--ease) 1; }
@keyframes phone-ring {
	0%, 100% { transform: none; }
	20% { transform: rotate(-16deg); }
	40% { transform: rotate(12deg); }
	60% { transform: rotate(-8deg); }
	80% { transform: rotate(4deg); }
}

/* Logo: Aquarius tilts as if pouring, the three stars twinkle one after another */
.site-logo .site-logo__svg { overflow: visible; } /* the tilted emblem may step past the viewBox */
.site-logo .logo__emblem,
.site-logo .logo__star {
	transform-box: fill-box;
	transform-origin: 50% 50%;
	transition: transform var(--dur-slow) var(--ease-out);
}
.site-logo .logo__emblem { transform-origin: 50% 85%; }
.site-logo:hover .logo__emblem,
.site-logo:focus-visible .logo__emblem { transform: rotate(-7deg) translateY(-1px); }
.site-logo:hover .logo__star,
.site-logo:focus-visible .logo__star { animation: star-twinkle 700ms var(--ease-out) 1 both; }
.site-logo .logo__star:nth-child(2) { animation-delay: 90ms; }
.site-logo .logo__star:nth-child(3) { animation-delay: 180ms; }
@keyframes star-twinkle {
	0% { transform: none; }
	45% { transform: scale(1.45) rotate(45deg); }
	100% { transform: none; }
}

/* Burger: the lines ripple like water */
.burger:hover span,
.burger:focus-visible span { background: var(--c-primary); }
.burger:not([aria-expanded="true"]):hover span:nth-child(1) { transform: translateX(-3px); }
.burger:not([aria-expanded="true"]):hover span:nth-child(2) { transform: translateX(3px) scaleX(0.7); }
.burger:not([aria-expanded="true"]):hover span:nth-child(3) { transform: translateX(-1px) scaleX(0.85); }

/* 2. Cards: lift + shadow + image zoom */
.card {
	transition:
		transform var(--dur) var(--ease),
		box-shadow var(--dur) var(--ease),
		border-color var(--dur) var(--ease);
}
.card:hover,
.card:focus-within {
	transform: translateY(-4px);
	box-shadow: var(--shadow-lg);
	border-color: transparent;
}
.card__media img {
	transition: transform var(--dur-slow) var(--ease);
}
.card:hover .card__media img,
.card:focus-within .card__media img {
	transform: scale(1.05);
}
.card__arrow {
	transition: transform var(--dur) var(--ease-bounce), color var(--dur) var(--ease);
}
.card:hover .card__arrow {
	transform: translateX(6px);
	color: var(--c-accent);
}

/* 3. Buttons: lift + ripple on click */
.btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn:hover,
.btn:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--shadow);
}
.btn:active {
	transform: translateY(0);
	transition-duration: var(--dur-fast);
}
.btn .ripple {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	transform: scale(0);
	animation: ripple 600ms var(--ease-out) forwards;
	pointer-events: none;
	z-index: -1;
}
@keyframes ripple {
	to { transform: scale(4); opacity: 0; }
}

/* 4. Reveal on scroll (IntersectionObserver adds .is-visible).
   Implemented as an animation, not a transition: otherwise the reveal rule would override
   the elements' own smooth hovers (cards, link tiles) and add a delay to them. */
[data-reveal],
[data-reveal-stagger] > * {
	opacity: 0;
}
[data-reveal].is-visible,
[data-reveal-stagger].is-visible > * {
	opacity: 1;
	animation: reveal-up var(--dur-slow) var(--ease-out) backwards;
	animation-delay: var(--reveal-delay, 0ms);
}
[data-reveal="left"].is-visible  { animation-name: reveal-left; }
[data-reveal="right"].is-visible { animation-name: reveal-right; }
[data-reveal="scale"].is-visible { animation-name: reveal-scale; }
@keyframes reveal-up    { from { opacity: 0; transform: translateY(24px); } }
@keyframes reveal-left  { from { opacity: 0; transform: translateX(-32px); } }
@keyframes reveal-right { from { opacity: 0; transform: translateX(32px); } }
@keyframes reveal-scale { from { opacity: 0; transform: scale(0.94); } }
/* Cascade for children of a data-reveal-stagger container */
[data-reveal-stagger].is-visible > :nth-child(1)  { animation-delay: 0ms; }
[data-reveal-stagger].is-visible > :nth-child(2)  { animation-delay: 70ms; }
[data-reveal-stagger].is-visible > :nth-child(3)  { animation-delay: 140ms; }
[data-reveal-stagger].is-visible > :nth-child(4)  { animation-delay: 210ms; }
[data-reveal-stagger].is-visible > :nth-child(5)  { animation-delay: 280ms; }
[data-reveal-stagger].is-visible > :nth-child(6)  { animation-delay: 350ms; }
[data-reveal-stagger].is-visible > :nth-child(7)  { animation-delay: 420ms; }
[data-reveal-stagger].is-visible > :nth-child(8)  { animation-delay: 490ms; }
[data-reveal-stagger].is-visible > :nth-child(n+9) { animation-delay: 560ms; }
/* background tab or "reduce motion": show immediately, without animation */
.reveal-off [data-reveal],
.reveal-off [data-reveal-stagger] > * {
	opacity: 1;
	animation: none;
}

/* Without JS everything is visible */
.no-js [data-reveal],
.no-js [data-reveal-stagger] > * {
	opacity: 1;
	animation: none;
}

/* 5. Header: compact sticky state, cart "bounces" */
.site-header {
	transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.site-header.is-stuck {
	box-shadow: var(--shadow);
}
.cart-count {
	transition: transform var(--dur) var(--ease-bounce), background-color var(--dur) var(--ease);
}
.cart-count.is-bumped {
	animation: bump 600ms var(--ease-bounce);
}
@keyframes bump {
	0%   { transform: scale(1); }
	30%  { transform: scale(1.5); background: var(--c-success); }
	100% { transform: scale(1); }
}

/* Burger → close icon */
.burger span {
	transition: transform var(--dur) var(--ease-out), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Off-canvas menu and dropdowns */
.drawer {
	transform: translateX(100%);
	transition: transform var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
	visibility: hidden;
}
.drawer.is-open {
	transform: none;
	visibility: visible;
	transition: transform var(--dur-slow) var(--ease-out);
}
.drawer-backdrop {
	opacity: 0;
	transition: opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
	visibility: hidden;
}
.drawer-backdrop.is-open {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--dur) var(--ease);
}
.nav-primary .sub-menu,
.mega {
	opacity: 0;
	transform: translateY(10px);
	visibility: hidden;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.nav-primary li:hover > .sub-menu,
.nav-primary li:focus-within > .sub-menu,
.nav-primary li:hover > .mega,
.nav-primary li:focus-within > .mega {
	opacity: 1;
	transform: none;
	visibility: visible;
	transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

/* 6. Hero slider: crossfade */
.hero__slide {
	opacity: 0;
	transition: opacity 900ms var(--ease);
}
.hero__slide.is-active {
	opacity: 1;
}
.hero__slide .hero__content > * {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.hero__slide.is-active .hero__content > :nth-child(1) { opacity: 1; transform: none; transition-delay: 200ms; }
.hero__slide.is-active .hero__content > :nth-child(2) { opacity: 1; transform: none; transition-delay: 350ms; }
.hero__slide.is-active .hero__content > :nth-child(3) { opacity: 1; transform: none; transition-delay: 500ms; }
.hero__slide.is-active .hero__content > :nth-child(4) { opacity: 1; transform: none; transition-delay: 650ms; }
.hero__dot {
	transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease), width var(--dur) var(--ease);
}

/* "Living water" (canvas) fades in after initialisation */
.liquid,
.hero__caustics {
	transition: opacity 900ms var(--ease);
}

/* Floating element (drop / benefit icon) */
.float {
	animation: float 4s ease-in-out infinite;
}
@keyframes float {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-8px); }
}

/* Skeleton pulse while AJAX is loading */
.is-loading {
	animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse {
	50% { opacity: 0.5; }
}

/* Form fields */
input, textarea, select {
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

/* 7. Reduced motion: switch everything off */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
	[data-reveal],
	[data-reveal-stagger] > * {
		opacity: 1;
		animation: none;
	}
}

/* Problem mega menu: icons and markers */
.pmenu__ico, .pmenu__go, .pmenu__dot, .pmenu__all .icon {
	transition: transform var(--dur) var(--ease-bounce), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}