/* ==========================================================================
   GIFTaze — Premium Motion & Interaction Layer
   --------------------------------------------------------------------------
   Loaded site-wide (see functions.php) so every GIFTaze custom page
   template (.gz-page / .gz-home / .gz-contact-page and everything inside
   them) automatically gets a consistent premium feel:

     - Scroll-reveal fade/slide-in for cards & sections   (.gz-reveal)
     - Soft parallax glow behind every hero band            (auto)
     - Card hover lift + shadow polish                       (auto)
     - Product image zoom on hover                           (auto)
     - Button shine sweep + click ripple                      (auto)
     - Infinite marquee ticker utility                (.gz-marquee)
     - Animated stat counters                    (.gz-stat-num)
     - Floating "back to top" button                          (auto)
     - Smooth in-page scrolling

   Every rule below is scoped to GIFTaze's own "gz-" classes, so this file
   is safe to load on every page — it never touches WooCommerce/Woodmart's
   own shop, cart, or account page markup.

   Respects prefers-reduced-motion throughout (see bottom of file).
   ========================================================================== */

:root{
	--gz-ease: cubic-bezier(.22,1,.36,1);
	--gz-reveal-duration: .8s;
}

html{
	scroll-behavior: smooth;
}

/* ---------------------------------------------------------------------
   Scroll reveal
--------------------------------------------------------------------- */
.gz-reveal{
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--gz-reveal-duration) var(--gz-ease),
	            transform var(--gz-reveal-duration) var(--gz-ease);
}
.gz-reveal.is-visible{
	opacity: 1;
	transform: translateY(0);
}
.gz-reveal-zoom{
	opacity: 0;
	transform: scale(.94);
	transition: opacity var(--gz-reveal-duration) var(--gz-ease),
	            transform var(--gz-reveal-duration) var(--gz-ease);
}
.gz-reveal-zoom.is-visible{
	opacity: 1;
	transform: scale(1);
}

/* ---------------------------------------------------------------------
   Parallax glow behind hero bands (auto-applied to every GIFTaze hero
   selector already used across all 21 templates — no PHP edits needed)
--------------------------------------------------------------------- */
.gz-page-hero,
.gz-hero-content,
.gz-hero,
.gz-hero-slider{
	position: relative;
	isolation: isolate;
}
.gz-page-hero::before,
.gz-hero-content::before,
.gz-hero::before{
	content: "";
	position: absolute;
	inset: -18% -12%;
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 22%, rgba(199,154,92,.24), transparent 45%),
		radial-gradient(circle at 84% 78%, rgba(239,201,190,.16), transparent 50%);
	transform: translateY(var(--gz-parallax-y, 0px));
	will-change: transform;
}
.gz-page-hero > *,
.gz-hero-content > *,
.gz-hero > *{
	position: relative;
	z-index: 1;
}

/* ---------------------------------------------------------------------
   Card polish — value / occasion / blog / custom / duo / review cards
--------------------------------------------------------------------- */
.gz-value-card,
.gz-occ-card,
.gz-blog-card,
.gz-custom-card,
.gz-duo-card,
.gz-review-card,
.gz-step{
	transition: transform .45s var(--gz-ease),
	            box-shadow .45s var(--gz-ease),
	            border-color .45s var(--gz-ease);
}
.gz-value-card:hover,
.gz-custom-card:hover,
.gz-review-card:hover,
.gz-step:hover{
	transform: translateY(-8px);
	box-shadow: 0 22px 46px rgba(110,30,43,.14);
}
.gz-duo-card{ overflow: hidden; }
.gz-duo-card:hover{ transform: translateY(-6px); }

/* Product image zoom (Woodmart's own WooCommerce product cards) */
.gz-shop-section ul.products li.product,
.gz-product-row ul.products li.product{
	overflow: hidden;
	border-radius: 14px;
}
.gz-shop-section ul.products li.product img,
.gz-product-row ul.products li.product img{
	transition: transform .6s var(--gz-ease);
}
.gz-shop-section ul.products li.product:hover img,
.gz-product-row ul.products li.product:hover img{
	transform: scale(1.06);
}

/* ---------------------------------------------------------------------
   Buttons — shine sweep on hover + click ripple
--------------------------------------------------------------------- */
.gz-btn-primary,
.gz-btn-outline,
.gz-btn-primary-light{
	position: relative;
	overflow: hidden;
}
.gz-btn-primary::before,
.gz-btn-primary-light::before{
	content: "";
	position: absolute;
	top: 0;
	left: -60%;
	width: 40%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,.35), transparent);
	transform: skewX(-20deg);
	transition: left .7s var(--gz-ease);
	pointer-events: none;
}
.gz-btn-primary:hover::before,
.gz-btn-primary-light:hover::before{
	left: 130%;
}
.gz-ripple{
	position: absolute;
	border-radius: 50%;
	background: rgba(255,255,255,.5);
	transform: scale(0);
	animation: gz-ripple-anim .6s ease-out;
	pointer-events: none;
}
@keyframes gz-ripple-anim{
	to{ transform: scale(2.6); opacity: 0; }
}

/* ---------------------------------------------------------------------
   Marquee ticker utility (used by the homepage category strip)
--------------------------------------------------------------------- */
.gz-marquee{
	overflow: hidden;
	position: relative;
	padding: 26px 0;
	background: var(--cream-alt, #F6EBE1);
	border-top: 1px solid rgba(110,30,43,.08);
	border-bottom: 1px solid rgba(110,30,43,.08);
}
.gz-marquee-track{
	display: flex;
	width: max-content;
	animation: gz-marquee-scroll 30s linear infinite;
}
.gz-marquee:hover .gz-marquee-track{
	animation-play-state: paused;
}
.gz-marquee-item{
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 34px;
	font-family: 'Playfair Display', serif;
	font-size: 19px;
	color: var(--maroon, #6E1E2B);
	white-space: nowrap;
}
.gz-marquee-item svg{ opacity: .55; flex-shrink: 0; }
.gz-marquee-dot{
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gold, #C79A5C);
	flex-shrink: 0;
}
@keyframes gz-marquee-scroll{
	from{ transform: translateX(0); }
	to{ transform: translateX(-50%); }
}

/* ---------------------------------------------------------------------
   Stat counters
--------------------------------------------------------------------- */
.gz-stats{ padding: 70px 24px; }
.gz-stats-grid{
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.gz-stat-item{ padding: 10px; }
.gz-stat-num{
	font-family: 'Playfair Display', serif;
	font-size: 44px;
	font-weight: 700;
	color: var(--maroon, #6E1E2B);
	line-height: 1;
	display: inline-block;
}
.gz-stat-label{
	font-size: 13.5px;
	color: var(--ink-soft, #6B5450);
	margin-top: 10px;
	letter-spacing: .3px;
}

/* ---------------------------------------------------------------------
   Floating "back to top" button (injected by JS, styled here)
--------------------------------------------------------------------- */
#gzBackToTop{
	position: fixed;
	right: 22px;
	bottom: 22px;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--maroon, #6E1E2B);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 26px rgba(110,30,43,.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);
	transition: opacity .35s var(--gz-ease), transform .35s var(--gz-ease), background .25s;
	z-index: 999;
	cursor: pointer;
	border: none;
}
#gzBackToTop.is-visible{
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
#gzBackToTop:hover{
	background: var(--maroon-dark, #4A131C);
}

/* ---------------------------------------------------------------------
   Underline-sweep link animation for inline prose links
--------------------------------------------------------------------- */
.gz-story a,
.gz-intro a,
.gz-story-block a{
	background-image: linear-gradient(currentColor, currentColor);
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0% 1px;
	transition: background-size .4s var(--gz-ease);
}
.gz-story a:hover,
.gz-intro a:hover,
.gz-story-block a:hover{
	background-size: 100% 1px;
}

/* ---------------------------------------------------------------------
   Reduced motion — fully respected
--------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
	html{ scroll-behavior: auto; }
	.gz-reveal,
	.gz-reveal-zoom{
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
	.gz-marquee-track{ animation: none !important; }
	.gz-page-hero::before,
	.gz-hero-content::before,
	.gz-hero::before{ transform: none !important; }
	.gz-btn-primary::before,
	.gz-btn-primary-light::before{ display: none !important; }
}

@media (max-width: 1024px){
	.gz-stats-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
	.gz-marquee-item{ font-size: 16px; padding: 0 22px; }
	#gzBackToTop{ right: 16px; bottom: 16px; width: 42px; height: 42px; }
}