/* ==========================================================================
   Tezmy motion (2026-11-09)
   - Scroll reveals: soft fade-up, staggered, once per element.
   - Hover: card lift, image zoom, arrow nudge (mouse/trackpad only).
   - Press feedback on buttons.
   Only opacity + transform are animated (GPU-friendly).
   Everything is off for visitors who ask for reduced motion.
   To switch it all off: remove the require line for tezmy-motion.php
   in functions.php.
   ========================================================================== */

:root{
	--tzm-ease: cubic-bezier(.16, 1, .3, 1);   /* fast start, long soft landing */
	--tzm-ease-hover: cubic-bezier(.2, .8, .2, 1);
	--tzm-dur: 760ms;
	--tzm-rise: 22px;
}

/* ---- Scroll reveal ------------------------------------------------------ */
/* .tzm is added to <html> in <head> before paint, so nothing flashes.
   .tzm-rv is added by JS; .tzm-in when the element enters the screen. */
html.tzm .tzm-rv{
	opacity: 0;
	transform: translate3d(0, var(--tzm-rise), 0);
}
html.tzm .tzm-rv.tzm-in{
	opacity: 1;
	transform: none;
	transition:
		opacity calc(var(--tzm-dur) * .85) var(--tzm-ease) var(--tzm-d, 0ms),
		transform var(--tzm-dur) var(--tzm-ease) var(--tzm-d, 0ms);
}
/* ---- Top-of-page entrance (pure CSS, starts on first paint) ------------ */
/* No script needed, so the hero is never held back waiting for JS. */
@keyframes tzm-up{
	from{ opacity: 0; transform: translate3d(0, 18px, 0); }
	to{ opacity: 1; transform: none; }
}
@keyframes tzm-settle{
	from{ opacity: 0; transform: translate3d(0, 26px, 0) scale(.985); }
	to{ opacity: 1; transform: none; }
}
html.tzm :is(.th-hero-copy, .tc-hero, .ti-hero-copy) > *{
	animation: tzm-up .8s var(--tzm-ease) both;
}
html.tzm :is(.th-hero-copy, .tc-hero, .ti-hero-copy) > :nth-child(2){ animation-delay: .07s; }
html.tzm :is(.th-hero-copy, .tc-hero, .ti-hero-copy) > :nth-child(3){ animation-delay: .14s; }
html.tzm :is(.th-hero-copy, .tc-hero, .ti-hero-copy) > :nth-child(n+4){ animation-delay: .21s; }
html.tzm .th-hero-art,
html.tzm .ti-hero > :not(.ti-hero-copy){
	animation: tzm-settle 1s var(--tzm-ease) .18s both;
}

/* ---- Hover (only real pointers, never on touch) ------------------------ */
@media (hover: hover) and (pointer: fine){

	/* Product cards: lift + image zoom */
	.th-product,
	.woocommerce ul.products li.product{
		transition: transform .5s var(--tzm-ease-hover);
	}
	.th-product:hover,
	.woocommerce ul.products li.product:hover{
		transform: translate3d(0, -5px, 0);
	}
	.th-product-image img,
	html body .woocommerce ul.products li.product a img,
	.th-home-category-image img{
		transition: transform .8s var(--tzm-ease-hover) !important;
	}
	.th-product:hover .th-product-image img,
	html body .woocommerce ul.products li.product:hover a img,
	.th-home-category:hover .th-home-category-image img{
		transform: scale(1.045);
	}

	/* Category cards: lift + soft shadow */
	.th-home-category{
		transition: transform .5s var(--tzm-ease-hover), box-shadow .5s var(--tzm-ease-hover);
	}
	.th-home-category:hover{
		transform: translate3d(0, -5px, 0);
		box-shadow: 0 18px 40px -24px rgba(36, 61, 50, .35);
	}

	/* Hero artwork: gentle float on hover */
	.th-hero-art .th-feature-art{ transition: transform .9s var(--tzm-ease-hover); }
	.th-hero-art:hover .th-feature-art{ transform: scale(1.015); }

	/* Arrows nudge forward */
	.th-button svg,
	.th-text-link span,
	.th-home-category svg,
	.th-product a svg{
		transition: transform .4s var(--tzm-ease-hover);
	}
	.th-button:hover svg{ transform: translate3d(4px, 0, 0); }
	.th-text-link:hover span{ transform: translate3d(2px, -2px, 0); }
	.th-home-category:hover svg{ transform: translate3d(4px, 0, 0); }
	.th-product a:hover svg{ transform: translate3d(3px, 0, 0); }

	/* FAQ rows: plus sign turns */
	.th-faq details summary :is(svg, span:last-child){ transition: transform .45s var(--tzm-ease-hover); }
}

/* ---- Press feedback (all devices) -------------------------------------- */
.th-button,
.single_add_to_cart_button,
.woocommerce a.button,
.woocommerce button.button{
	transition: transform .18s ease-out, background-color .25s ease, color .25s ease;
}
.th-button:active,
.single_add_to_cart_button:active,
.woocommerce a.button:active,
.woocommerce button.button:active{
	transform: scale(.97);
}

/* ---- Reduced motion: no movement at all -------------------------------- */
@media (prefers-reduced-motion: reduce){
	html.tzm .tzm-rv,
	html.tzm .tzm-rv.tzm-in{ opacity: 1 !important; transform: none !important; transition: none !important; }
	html.tzm :is(.th-hero-copy, .tc-hero, .ti-hero-copy) > *,
	html.tzm .th-hero-art,
	html.tzm .ti-hero > *{ animation: none !important; }
	.th-product, .woocommerce ul.products li.product, .th-home-category,
	.th-product-image img, .woocommerce ul.products li.product a img, .th-home-category-image img,
	.th-hero-art .th-feature-art, .th-button svg, .th-text-link span{
		transition: none !important; transform: none !important;
	}
}


/* ==========================================================================
   v1.2.0 — phone menu (☰) motion + smooth page changes. Added 2026-11-09.
   ========================================================================== */

/* No grey/blue tap box on Android, no focus ring after a finger tap. */
.th-mobile-menu summary, .th-mobile-menu a { -webkit-tap-highlight-color: transparent; }
.th-mobile-menu summary:focus:not(:focus-visible) { outline: none; }

/* ☰ turns into ✕ while the menu is open. */
.th-mobile-menu > summary span { transform-origin: center; }
.th-mobile-menu[open] > summary span:first-child { transform: translateY(3.5px) rotate(45deg); }
.th-mobile-menu[open] > summary span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }
html.tzm .th-mobile-menu > summary span { transition: transform .34s cubic-bezier(.2,.8,.2,1); }

/* Menu panel slides/unfolds down, links follow one after another. */
@keyframes tzm-menu-in {
	from { opacity: 0; transform: translateY(-10px); clip-path: inset(0 0 100% 0); }
	to   { opacity: 1; transform: none;               clip-path: inset(0 0 -40px 0); }
}
@keyframes tzm-menu-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes tzm-item-in  { from { opacity: 0; transform: translateY(8px); } }

html.tzm .th-mobile-menu[open] > nav { animation: tzm-menu-in .36s cubic-bezier(.2,.8,.2,1) both; }
html.tzm .th-mobile-menu[open] > nav > * { animation: tzm-item-in .42s cubic-bezier(.2,.8,.2,1) both; }
html.tzm .th-mobile-menu[open] > nav > :nth-child(1) { animation-delay: .04s; }
html.tzm .th-mobile-menu[open] > nav > :nth-child(2) { animation-delay: .08s; }
html.tzm .th-mobile-menu[open] > nav > :nth-child(3) { animation-delay: .12s; }
html.tzm .th-mobile-menu[open] > nav > :nth-child(4) { animation-delay: .16s; }
html.tzm .th-mobile-menu[open] > nav > :nth-child(n+5) { animation-delay: .20s; }
html.tzm .th-mobile-menu.tzm-closing > nav { animation: tzm-menu-out .2s cubic-bezier(.4,0,1,1) both; }
html.tzm .th-mobile-menu.tzm-closing > nav > * { animation: none; }

/* Collections: "+" turns smoothly, list glides open. */
html.tzm .th-mobile-categories > summary span { transition: transform .32s cubic-bezier(.2,.8,.2,1); }
html.tzm .th-mobile-categories[open] > div { animation: tzm-item-in .34s cubic-bezier(.2,.8,.2,1) both; }
@supports (interpolate-size: allow-keywords) {
	html.tzm .th-mobile-categories { interpolate-size: allow-keywords; }
	html.tzm .th-mobile-categories::details-content {
		height: 0; overflow: clip;
		transition: height .34s cubic-bezier(.2,.8,.2,1), content-visibility .34s allow-discrete;
	}
	html.tzm .th-mobile-categories[open]::details-content { height: auto; }
}

/* Tapping a link: it nudges right and dims so the tap feels answered at once. */
html.tzm .th-mobile-menu nav a { transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; }
.th-mobile-menu nav a:active, .th-mobile-menu nav a.tzm-tap { transform: translateX(6px); opacity: .6; }

/* Smooth cross-fade between pages (Chrome/Android, Safari 18.2+; others just load normally). */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) {
	animation-duration: .26s;
	animation-timing-function: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	.th-mobile-menu nav, .th-mobile-menu nav > *, .th-mobile-menu nav a,
	.th-mobile-menu > summary span, .th-mobile-categories > div, .th-mobile-categories > summary span {
		animation: none !important; transition: none !important;
	}
}