/*
 * Brand landing effects (hand-written; the converted layout is blocks/brand-landing/style.css).
 * Ported from the "MDW" code snippets the live brand pages used: changing words, mouse movement,
 * horizontal scroll with parallax, text path circle, blush glows, gradient headings, featured cards
 * and reveal animations. The matching script is blocks/brand-landing/view.js.
 */

/* The snippets removed the paragraph margin of every text widget on the page (also the product grid and banners). */
body:has(.ew-bl) .ew-text p { margin-block-end: 0; }

/* ---------- Changing words ---------- */
.ew-bli__words { position: relative; margin-left: .2em; }
.ew-bli__words > span { position: absolute; color: #FFAF19; opacity: 0; transform: scaleY(0) skew(-30deg); transition: all .5s ease-in-out; }
.ew-bli__words > span.is-showing { opacity: 1; transform: scaleY(1); }

/* ---------- Mouse movement ---------- */
.ew-bl [data-ew-mouse] {
	transform: translateX(calc(1px * var(--translateX, 0))) translateY(calc(1px * var(--translateY, 0))) rotateX(calc(1deg * var(--rotateX, 0))) rotateY(calc(1deg * var(--rotateY, 0)));
	will-change: transform;
	transition: transform 1s cubic-bezier(0, .33, .07, 1.03);
}

/* ---------- Scroll down button ---------- */
.ew-bli__scroll { --arrow-size: .07em; --arrow-gap: 25px; }
.ew-bli__scroll .ew-btn__wrap { display: flex; flex-direction: column; gap: var(--arrow-gap); }
.ew-bli__scroll .ew-btn .ew-btn__wrap { gap: var(--arrow-gap); }
.ew-bli__scroll .ew-btn__text { order: -1; }
.ew-bli__scroll .ew-btn__icon { position: relative; display: flex; justify-content: center; }
.ew-bli__scroll .ew-btn:hover .ew-btn__icon { transform: translateY(5px); }
.ew-bli__scroll .ew-btn__icon i::before,
.ew-bli__scroll .ew-btn__icon i::after { content: ""; position: absolute; width: 1em; height: var(--arrow-size); background: currentColor; transition: transform .3s ease; }
.ew-bli__scroll .ew-btn__icon i::before { transform: rotate(45deg) translate(-.47em); }
.ew-bli__scroll .ew-btn__icon i::after { transform: rotate(-45deg) translate(.47em); }

/* ---------- Blush glows (dividers blurred into soft colour spots) ---------- */
.ew-blush.ew-blush { z-index: 0; }
.ew-blush > .ew-w__c { filter: blur(80px); opacity: .3; mix-blend-mode: soft-light; }

/* ---------- Horizontal scroll ---------- */
.ew-hs { overflow: hidden; }
.ew-hs::after {
	content: "";
	position: fixed;
	top: calc(100vh - 2px);
	left: 0;
	width: 100vw;
	height: 2px;
	background: #FFFF00;
	opacity: 0;
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
	will-change: transform;
	transition: transform .1s linear;
}
.ew-hs.is-fixed::after { opacity: 1; }
.ew-hs > .ew-hs__track { height: 100vh; transition: none; }
.ew-hs > .ew-hs__track > * { height: var(--min-height, 100vh); }
.ew-hs.is-fixed > .ew-hs__track { position: fixed; top: 0; left: 0; }
.ew-hs.is-bottom { justify-content: flex-end; }
body.ew-tiny-scroll .ew-hs > .ew-hs__track { will-change: transform; transition: transform 1s cubic-bezier(0, .33, .07, 1.03); }

/* Movement with the horizontal scroll (images slide, the circle text turns). */
.ew-bl [data-ew-hs-move] > .ew-w__c {
	transform: translateX(calc(var(--e-transform-translateX, 0px) + var(--translateX, 0) * -1px)) translateY(var(--e-transform-translateY, 0px)) rotate(calc(var(--rotate, 0) * 1deg));
	transition: none;
}
.ew-bl [data-ew-hs-move^="x"] > .ew-w__c { --translateX: calc(var(--parallax, 0) * var(--speed, .1)); }
.ew-bl [data-ew-hs-move^="r"] > .ew-w__c { --rotate: calc(var(--parallax, 0) * var(--speed, .1)); }
body.ew-tiny-scroll .ew-bl [data-ew-hs-move] > .ew-w__c { will-change: transform; transition: transform 1s cubic-bezier(0, .33, .07, 1.03); }

/* Background video (covers the panel like Elementor's background video). */
.ew-hs__bgvideo { position: absolute; inset: 0; z-index: 0; overflow: hidden; direction: ltr; pointer-events: none; container-type: size; }
.ew-hs__bgvideo::before { content: ""; position: absolute; inset: 0; z-index: 1; background-image: radial-gradient(at center center, #00000000 0%, #140F22 70%); }
.ew-hs__bgvideo-file,
.ew-hs__bgvideo-embed { position: absolute; top: 50%; left: 50%; width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); border: 0; object-fit: cover; transform: translate(-50%, -50%); }

/* ---------- Text path circle ---------- */
.ew-hs__path { --text-path-container-width: var(--width, 180px); }
.ew-hs__path-icon { line-height: 0; }
.ew-hs__path-icon .ew-iconw__icon { width: .6em; height: .6em; color: #FFFFFF; font-size: 50px; transform: translateY(50%); }
.ew-hs__path-icon .ew-iconw__icon i { --w: 130%; position: relative; display: block; width: var(--w); height: .02em; margin-left: calc((var(--w) - 100%) / -2); background: currentColor; }
.ew-hs__path-icon .ew-iconw__icon i::before,
.ew-hs__path-icon .ew-iconw__icon i::after { content: ""; position: absolute; right: 0; width: 70%; height: .02em; background: currentColor; transform: rotate(45deg) translateX(-.012em); transform-origin: right center; }
.ew-hs__path-icon .ew-iconw__icon i::after { transform: rotate(-45deg) translateX(-.012em); }
.ew-hs__path-text { --fill: #FFFFFF; color: #FFFFFF; font-family: var(--ew-font-jakarta); font-size: 35px; font-weight: 300; letter-spacing: 0; word-spacing: 0; line-height: 1.5; }
.ew-hs__path-text > .ew-w__c,
.ew-hs__path-text a { display: flex; height: 100%; }
.ew-hs__path-text svg { height: var(--text-path-container-width, 180px); overflow: visible; }
.ew-hs__path-text svg path { fill: transparent; }
.ew-hs__path-text svg text { fill: var(--fill, #FFFFFF); }
.ew-hs__path-text::before,
.ew-hs__path-text::after { content: ""; position: absolute; top: -25px; left: -25px; z-index: 0; width: calc(100% + 50px); height: calc(100% + 50px); border: 1px solid #FFAF19; border-radius: 100%; pointer-events: none; }
.ew-hs__path-text::after { top: 15px; left: 15px; width: calc(100% - 30px); height: calc(100% - 30px); }

/* ---------- Gradient headings ---------- */
.ew-hs__s2-t1 > .ew-w__c,
.ew-range__title > .ew-w__c { -webkit-background-clip: text; background-clip: text; }
.ew-hs__s2-t2 > .ew-w__c { -webkit-mask-image: linear-gradient(180deg, #000000FF 70%, #00000011 100%); mask-image: linear-gradient(180deg, #000000FF 70%, #00000011 100%); }
.ew-hs__s2-t2 .ew-heading__title { text-transform: uppercase; } /* a duplicate for the outline effect: not a second h2 */
.ew-hs__s2 img { max-width: unset; }

/* ---------- Featured machine cards ---------- */
.ew-hs__card,
.ew-hs__card-img > .ew-w__c::before,
.ew-hs__card-img img,
.ew-hs__card-title .ew-heading__title,
.ew-hs__card-quote .ew-btn { transition: all .3s ease-in-out; }
.ew-hs__card.ew-hs__card:hover { background: #FFFFFF; }
.ew-hs__card-img > .ew-w__c { position: relative; overflow: hidden; }
.ew-hs__card:hover .ew-hs__card-img > .ew-w__c { box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1); }
.ew-hs__card-img > .ew-w__c::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000000; opacity: 0; }
.ew-hs__card:hover .ew-hs__card-img > .ew-w__c::before { opacity: .5; }
.ew-hs__card:hover .ew-hs__card-title .ew-heading__title { color: #000000; }
.ew-hs__card-quote .ew-btn { opacity: 0; clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); transform: translateY(5px) scale(.8) rotate(-10deg) skew(10deg); }
.ew-hs__card:hover .ew-hs__card-quote .ew-btn,
.ew-hs__card:focus-within .ew-hs__card-quote .ew-btn { opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transform: translateY(0); }

/* ---------- Reveal animations ---------- */
.ew-reveal { clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%); transition: all 1s ease-in-out; }
.ew-bl-ready .ew-reveal:not(.is-revealed) { opacity: 0; }
.ew-bl-ready .ew-reveal--bottom:not(.is-revealed) { transform: translateY(2em); clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0% 100%); }
.ew-bl-ready .ew-reveal--left:not(.is-revealed) { transform: translateX(-2em); clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%); }

@media (max-width: 767px) {
	.ew-bli__words { display: flex; align-items: center; justify-content: center; height: 1em; margin: 0; }
	.ew-bli__words + br { display: none; }
	.ew-bli__scroll.ew-abs { position: static; --arrow-gap: 15px; }
	.ew-hs > .ew-hs__track { transition: transform .1s linear; }
}

@media (prefers-reduced-motion: reduce) {
	.ew-bl [data-ew-mouse],
	.ew-bli__words > span,
	.ew-reveal { transition: none; }
}