/*
 Theme Name:   Woodmart Child
 Description:  Woodmart Child Theme
 Author:       XTemos
 Author URI:   http://xtemos.com
 Template:     woodmart
 Version:      1.0.0
 Text Domain:  woodmart
*/

/* ==========================================================================
   Tripingale - animated logo wings                        (added 27 Jul 2026)
   --------------------------------------------------------------------------
   The header logo is overlaid with three transparent layers cut from the
   original artwork - left wing, right wing and wordmark - so the wings pivot
   at the point where the feathers meet while the lettering stays still.
   Layers: /wp-content/uploads/2026/07/tripingale-wing-{left,right,word}.png
   Motion: one soft wingbeat on page load, then a gentle spread on hover.
   To switch the animation off again, delete this whole block.
   ========================================================================== */

.wd-logo {
	position: relative;
	display: inline-block;
	line-height: 0;
	background-image: url(/wp-content/uploads/2026/07/tripingale-wing-word.png);
	background-size: 100% 100%;
	background-repeat: no-repeat;
}

/* the original logo stays in place as the layout box and the no-CSS fallback */
.wd-logo > img {
	opacity: 0;
}

.wd-logo::before,
.wd-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	transition: transform .6s cubic-bezier(.16, .84, .32, 1);
}

.wd-logo::before {
	background-image: url(/wp-content/uploads/2026/07/tripingale-wing-left.png);
	transform-origin: 37.42% 33.07%;
	animation: tg-beat-left 1.25s cubic-bezier(.3, .7, .25, 1) .25s 1;
}

.wd-logo::after {
	background-image: url(/wp-content/uploads/2026/07/tripingale-wing-right.png);
	transform-origin: 63.05% 33.07%;
	animation: tg-beat-right 1.25s cubic-bezier(.3, .7, .25, 1) .25s 1;
}

.wd-logo:hover::before {
	transform: rotate(-7.5deg) scaleX(.978);
}

.wd-logo:hover::after {
	transform: rotate(7.5deg) scaleX(.978);
}

/* The wings can travel to roughly +10deg (folded up) and -8deg (spread open);
   past -10deg the two inner tips collide in the centre, so the beat rises
   first and only sweeps a little way past rest on the way back down. */

@keyframes tg-beat-left {
	0%   { transform: rotate(0)       scaleX(1);    }
	26%  { transform: rotate(9.5deg)  scaleX(.976); }
	62%  { transform: rotate(-6.5deg) scaleX(.992); }
	84%  { transform: rotate(2deg)    scaleX(.998); }
	100% { transform: rotate(0)       scaleX(1);    }
}

@keyframes tg-beat-right {
	0%   { transform: rotate(0)        scaleX(1);    }
	26%  { transform: rotate(-9.5deg)  scaleX(.976); }
	62%  { transform: rotate(6.5deg)   scaleX(.992); }
	84%  { transform: rotate(-2deg)    scaleX(.998); }
	100% { transform: rotate(0)        scaleX(1);    }
}

@media (prefers-reduced-motion: reduce) {

	.wd-logo::before,
	.wd-logo::after {
		animation: none !important;
		transition: none !important;
		transform: none !important;
	}
}

/* ==========================================================================
   Tripingale - motion layer                                (added 28 Jul 2026)
   --------------------------------------------------------------------------
   Scroll reveals, hover craft and a category marquee, built the same way the
   reference site builds them: transform and opacity only, no masks, and
   nothing that can move the layout.

   Everything here is gated on html.tg-motion. The page adds that class itself
   and drops it again on a failsafe timer if the motion script never reports
   in, so a visitor with JavaScript off gets a site that simply does not
   animate rather than one with invisible content.

   To switch the whole layer off, delete this block and the two motion
   functions in the child theme's functions.php.
   ========================================================================== */

/* --- 1. scroll reveal ---------------------------------------------------
   Hidden from the very first paint by real theme selectors, not by a class
   the script adds later - that is what stops the content flashing in and
   then vanishing again while the script boots. */

html.tg-motion .elementor-widget-heading,
html.tg-motion .elementor-widget-text-editor,
html.tg-motion .elementor-widget-button,
html.tg-motion .elementor-widget-image,
html.tg-motion .promo-banner-wrapper,
html.tg-motion .wd-product,
html.tg-motion .wd-post {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity   .85s cubic-bezier(.22, .7, .2, 1) var(--tg-d, 0ms),
		transform .85s cubic-bezier(.22, .7, .2, 1) var(--tg-d, 0ms);
}

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

/* --- 2. hover craft ----------------------------------------------------- */

.wd-product-img-link,
.wd-post-img {
	overflow: hidden;
}

.wd-product-img-link img,
.wd-post-img img {
	transition: transform 1s cubic-bezier(.22, .7, .2, 1);
}

.wd-product:hover .wd-product-img-link img,
.wd-post:hover .wd-post-img img {
	transform: scale(1.045);
}

/* main nav: a rule that draws itself in from the left */
.wd-nav-main > li > a {
	position: relative;
}

.wd-nav-main > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .45s cubic-bezier(.22, .7, .2, 1);
}

.wd-nav-main > li:hover > a::after,
.wd-nav-main > li.current-menu-item > a::after {
	transform: scaleX(1);
}

.wd-button-wrapper .btn,
.elementor-widget-button .btn {
	transition: transform .45s cubic-bezier(.22, .7, .2, 1),
		background-color .3s ease, color .3s ease, border-color .3s ease;
}

.wd-button-wrapper .btn:hover,
.elementor-widget-button .btn:hover {
	transform: translateY(-2px);
}

/* --- 3. category marquee -------------------------------------------------
   The one piece here that adds something to the page rather than animating
   what is already there - a band of category words scrolling above the
   footer, homepage only. Remove the marquee() call in the motion script to
   drop it and keep the rest. */

.tg-marquee {
	overflow: hidden;
	padding: 30px 0;
	border-top: 1px solid rgba(15, 48, 87, .16);
	border-bottom: 1px solid rgba(15, 48, 87, .16);
	user-select: none;
}

.tg-marquee-track {
	display: flex;
	width: max-content;
	animation: tg-marq 34s linear infinite;
}

.tg-marquee:hover .tg-marquee-track {
	animation-play-state: paused;
}

/* span, not <i> - Woodmart renders <i> in its icon font, which turns the
   words into blank glyphs */
.tg-marquee span {
	font-family: inherit;
	font-style: normal;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1;
	font-size: clamp(34px, 6.4vw, 96px);
	color: #0F3057;
	padding-right: .38em;
	white-space: nowrap;
}

.tg-marquee span::after {
	content: "\00B7";
	padding-left: .38em;
	opacity: .35;
}

@keyframes tg-marq {
	to {
		transform: translateX(-50%);
	}
}

/* --- 4. hero wipe --------------------------------------------------------
   Slide changes uncover the outgoing image from the right edge inwards.
   Nothing slides: the picture being left is held still and clipped away,
   which is what gives the hard travelling edge. */

.e-n-carousel.tg-hero {
	position: relative;
}

.e-n-carousel .tg-wipe {
	animation: tg-hero-wipe .78s cubic-bezier(.62, .02, .2, 1) forwards;
}

@keyframes tg-hero-wipe {
	from {
		clip-path: inset(0 0 0 0);
	}

	to {
		clip-path: inset(0 100% 0 0);
	}
}

/* --- 5. hero thumbnails --------------------------------------------------
   A filmstrip in the bottom right corner, frames butted together, one per
   slide. The hovered frame grows up and out of the line; the strip is inset
   far enough that the carousel's own overflow never clips it. */

.tg-thumbs {
	--tg-ti: clamp(14px, 1.9vw, 28px);
	position: absolute;
	right: var(--tg-ti);
	bottom: var(--tg-ti);
	z-index: 7;
	display: flex;
	align-items: flex-end;
	max-width: calc(100% - 32px);
}

.tg-thumb {
	flex: 0 0 auto;
	width: clamp(62px, 7.1vw, 104px);
	aspect-ratio: 16 / 10;
	padding: 0;
	border: 0;
	margin: 0;
	border-radius: 0;
	background-color: rgba(255, 255, 255, .12);
	background-size: cover;
	background-position: center;
	cursor: pointer;
	opacity: .72;
	transform-origin: center bottom;
	transition: transform .45s cubic-bezier(.22, .7, .2, 1),
		opacity .35s ease, box-shadow .35s ease;
}

.tg-thumb:hover,
.tg-thumb:focus-visible {
	opacity: 1;
	transform: scale(1.14);
	position: relative;
	z-index: 2;
	box-shadow: 0 6px 22px rgba(0, 0, 0, .28);
	outline: none;
}

.tg-thumb.is-active {
	opacity: 1;
}

/* The strip replaces the dots wherever it is shown. Elementor puts the dots
   outside the carousel element, so this class sits on the shared parent. */
.tg-has-thumbs .swiper-pagination {
	display: none;
}

/* phones keep the dots instead - the frames will not fit a 375px hero */
@media (max-width: 767px) {

	.tg-thumbs {
		display: none;
	}

	.tg-has-thumbs .swiper-pagination {
		display: block;
	}
}

/* --- 6. anyone who asks for less motion gets none of it ------------------ */

@media (prefers-reduced-motion: reduce) {

	html.tg-motion .elementor-widget-heading,
	html.tg-motion .elementor-widget-text-editor,
	html.tg-motion .elementor-widget-button,
	html.tg-motion .elementor-widget-image,
	html.tg-motion .promo-banner-wrapper,
	html.tg-motion .wd-product,
	html.tg-motion .wd-post {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}

	.tg-marquee-track {
		animation: none !important;
	}

	.wd-product-img-link img,
	.wd-post-img img,
	.wd-nav-main > li > a::after,
	.wd-button-wrapper .btn,
	.elementor-widget-button .btn,
	.tg-thumb {
		transition: none !important;
	}

	.tg-thumb:hover {
		transform: none !important;
	}
}