/**
 * Әдемісің — Motion design layer.
 *
 * Rules:
 * - Content is always visible without JS. Hidden start states apply only
 *   when motion.js has added .epure-motion to <html>.
 * - Only transform, opacity, filter and clip-path are animated.
 * - prefers-reduced-motion turns everything off (see the end of the file).
 */

:root {
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ------------------------------------------------------------------
 * 1. Living background: slow drifting glass blobs behind everything
 * ---------------------------------------------------------------- */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: -1;
	pointer-events: none;
	border-radius: 50%;
	filter: blur(70px);
	will-change: transform;
}

body::before {
	width: 46vw;
	height: 46vw;
	top: -12vw;
	left: -10vw;
	background: radial-gradient(circle, rgba(47, 107, 255, 0.20), transparent 65%);
	animation: epure-drift-a 26s var(--ease-in-out) infinite alternate;
}

body::after {
	width: 40vw;
	height: 40vw;
	bottom: -14vw;
	right: -8vw;
	background: radial-gradient(circle, rgba(140, 178, 255, 0.26), transparent 65%);
	animation: epure-drift-b 32s var(--ease-in-out) infinite alternate;
}

@keyframes epure-drift-a {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(18vw, 14vh, 0) scale(1.15); }
	100% { transform: translate3d(6vw, 38vh, 0) scale(0.95); }
}

@keyframes epure-drift-b {
	0%   { transform: translate3d(0, 0, 0) scale(1); }
	50%  { transform: translate3d(-20vw, -18vh, 0) scale(1.2); }
	100% { transform: translate3d(-8vw, -40vh, 0) scale(1); }
}

/* ------------------------------------------------------------------
 * 2. Scroll progress line (pure CSS where supported)
 * ---------------------------------------------------------------- */
.epure-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 3000;
	pointer-events: none;
	background: linear-gradient(90deg, #8CB2FF, var(--epure-accent));
	transform-origin: 0 50%;
	transform: scaleX(0);
}

@supports (animation-timeline: scroll()) {
	.epure-progress {
		animation: epure-progress linear both;
		animation-timeline: scroll(root);
	}
}

@keyframes epure-progress {
	to { transform: scaleX(1); }
}

/* ------------------------------------------------------------------
 * 3. Scroll reveal (fade up + un-blur), staggered with --i
 * ---------------------------------------------------------------- */
.epure-motion [data-reveal] {
	opacity: 0;
	transform: translate3d(0, 28px, 0) scale(0.985);
	filter: blur(8px);
	transition:
		opacity 0.9s var(--ease-out),
		transform 0.9s var(--ease-out),
		filter 0.9s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms);
}

.epure-motion [data-reveal="left"] {
	transform: translate3d(-36px, 0, 0);
}

.epure-motion [data-reveal="right"] {
	transform: translate3d(36px, 0, 0);
}

.epure-motion [data-reveal].is-in {
	opacity: 1;
	transform: none;
	filter: none;
}

/* ------------------------------------------------------------------
 * 4. Hero entrance: words rise from a mask, photo opens like a window
 * ---------------------------------------------------------------- */
.epure-hero-title .epure-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
}

.epure-hero-title .epure-wi {
	display: inline-block;
}

.epure-motion .epure-hero-title .epure-wi {
	transform: translate3d(0, 110%, 0) rotate(4deg);
	transition: transform 1.1s var(--ease-out);
	transition-delay: calc(120ms + var(--wi, 0) * 75ms);
}

.epure-motion.epure-loaded .epure-hero-title .epure-wi {
	transform: none;
}

/* Accent word: soft animated gradient shimmer. */
.epure-hero-title span[style*="accent"] .epure-wi,
.epure-hero-title .epure-accent-word {
	background: linear-gradient(100deg, #2F6BFF 0%, #6E9CFF 35%, #2F6BFF 60%, #1F55E0 100%);
	background-size: 220% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: epure-shimmer 6s ease-in-out infinite;
}

@keyframes epure-shimmer {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

.epure-hero-right img {
	transform-origin: 50% 60%;
	will-change: transform;
}

.epure-motion:not(.epure-hero-ready) .epure-hero-right > .epure-window {
	clip-path: inset(10% 10% 10% 10% round 28px);
	opacity: 0;
	transition:
		clip-path 1.3s var(--ease-out) 0.25s,
		opacity 0.6s ease 0.25s;
}

.epure-motion:not(.epure-hero-ready) .epure-hero-right img {
	transform: scale(1.18);
	transition: transform 1.8s var(--ease-out) 0.25s;
}

.epure-motion.epure-loaded .epure-hero-right > .epure-window {
	clip-path: inset(0 0 0 0 round 20px);
	opacity: 1;
}

.epure-motion.epure-loaded .epure-hero-right img {
	transform: scale(1) translate3d(var(--px, 0px), var(--py, 0px), 0);
	transition: transform 1.8s var(--ease-out) 0.25s;
}

/* After the entrance, the photo follows the cursor smoothly. */
.epure-motion.epure-hero-ready .epure-hero-right img {
	transition: transform 0.6s var(--ease-out);
	transform: scale(1.06) translate3d(var(--px, 0px), var(--py, 0px), 0);
}

.epure-motion:not(.epure-hero-ready) .epure-hero-left > .epure-window {
	opacity: 0;
	transform: translate3d(0, 24px, 0);
	transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

.epure-motion.epure-loaded:not(.epure-hero-ready) .epure-hero-left > .epure-window {
	opacity: 1;
	transform: none;
}

.epure-motion:not(.epure-hero-ready) .epure-hero-left .epure-eyebrow,
.epure-motion:not(.epure-hero-ready) .epure-hero-left p,
.epure-motion:not(.epure-hero-ready) .epure-hero-left .epure-btn {
	opacity: 0;
	transform: translate3d(0, 14px, 0);
	transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.epure-motion:not(.epure-hero-ready) .epure-hero-left p { transition-delay: 0.55s; }
.epure-motion:not(.epure-hero-ready) .epure-hero-left .epure-btn { transition-delay: 0.7s; }
.epure-motion:not(.epure-hero-ready) .epure-hero-left .epure-btn + .epure-btn { transition-delay: 0.8s; }

.epure-motion.epure-loaded:not(.epure-hero-ready) .epure-hero-left .epure-eyebrow,
.epure-motion.epure-loaded:not(.epure-hero-ready) .epure-hero-left p,
.epure-motion.epure-loaded:not(.epure-hero-ready) .epure-hero-left .epure-btn {
	opacity: 1;
	transform: none;
}

/* The "Коллекция 2026" badge pops in with a spring. */
.epure-motion:not(.epure-hero-ready) .epure-hero-right .epure-badge-pill {
	transform: scale(0.6) !important;
	opacity: 0;
	transition: transform 0.7s var(--ease-spring) 1.1s, opacity 0.3s ease 1.1s;
}

.epure-motion.epure-loaded .epure-hero-right .epure-badge-pill {
	transform: scale(1) !important;
	opacity: 1;
}

/* ------------------------------------------------------------------
 * 5. Header: condenses on scroll, hides on scroll down
 * ---------------------------------------------------------------- */
header.wp-block-template-part:has(.epure-header-floating) {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Leave room for the WordPress admin bar when logged in. */
.admin-bar header.wp-block-template-part:has(.epure-header-floating) {
	top: 32px;
}

@media (max-width: 782px) {
	.admin-bar header.wp-block-template-part:has(.epure-header-floating) {
		top: 46px;
	}
}

@media (max-width: 600px) {
	/* The admin bar scrolls away on small screens. */
	.admin-bar header.wp-block-template-part:has(.epure-header-floating) {
		top: 0;
	}
}

.epure-header-floating {
	transition:
		transform 0.5s var(--ease-out),
		padding 0.4s var(--ease-out),
		box-shadow 0.4s var(--ease-out),
		background-color 0.4s ease,
		max-width 0.5s var(--ease-out);
}

.epure-header-floating.is-scrolled {
	padding-top: 8px;
	padding-bottom: 8px;
	max-width: 1180px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.95),
		0 10px 40px rgba(14, 17, 22, 0.12);
}

.epure-header-floating.is-scrolled::before {
	background: rgba(255, 255, 255, 0.82);
}

/* Hidden by moving the sticky wrapper up (not with transform: a transform
   would trap the mini-cart drawer that lives inside the header). */
header.wp-block-template-part:has(.epure-header-floating) {
	transition: top 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

header.wp-block-template-part:has(.epure-header-floating.is-hidden),
.admin-bar header.wp-block-template-part:has(.epure-header-floating.is-hidden) {
	top: -140px;
}

/* Animated underline for desktop nav links. */
.epure-nav-menu a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	border-radius: 2px;
	background: var(--epure-accent);
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform 0.45s var(--ease-out);
}

.epure-nav-menu a:hover::after,
.epure-nav-menu a.active::after {
	transform: scaleX(1);
	transform-origin: 0 50%;
}

.epure-logo {
	display: inline-block;
	transition: letter-spacing 0.6s var(--ease-out);
}

.epure-logo:hover {
	letter-spacing: 0.2em !important;
}

/* Icon buttons: tactile press + badge bump. */
.epure-icon-btn,
.epure-dock-item {
	transition: transform 0.35s var(--ease-spring), background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.epure-icon-btn:active,
.epure-dock-item:active {
	transform: scale(0.88);
}

.epure-icon-btn:hover svg {
	animation: epure-wiggle 0.5s var(--ease-out);
}

@keyframes epure-wiggle {
	0%, 100% { transform: rotate(0); }
	30%      { transform: rotate(-10deg); }
	60%      { transform: rotate(6deg); }
}

.epure-bump {
	animation: epure-bump 0.6s var(--ease-spring);
}

@keyframes epure-bump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.6); }
	100% { transform: scale(1); }
}

/* ------------------------------------------------------------------
 * 6. Cards: 3D tilt + light that follows the cursor
 * ---------------------------------------------------------------- */
.epure-card-hover {
	--rx: 0deg;
	--ry: 0deg;
	transform-style: preserve-3d;
}

.epure-card-hover::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: 0;
	background: radial-gradient(
		420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 255, 255, 0.55),
		rgba(47, 107, 255, 0.08) 40%,
		transparent 65%
	);
	transition: opacity 0.4s ease;
	z-index: 3;
	mix-blend-mode: soft-light;
}

@media (hover: hover) and (pointer: fine) {
	.epure-card-hover:hover::after {
		opacity: 1;
	}

	.epure-card-hover.is-tilting {
		transition: transform 0.15s linear, box-shadow 0.3s var(--ease-out), border-color 0.3s ease;
		transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0, -6px, 0);
	}
}

/* Product photos zoom slowly inside their frame. */
.epure-card-hover img {
	transition: transform 1s var(--ease-out);
}

.epure-card-hover:hover img {
	transform: scale(1.07);
}

/* Squircle icons float and tilt on hover. */
.epure-card:hover .epure-squircle-icon,
.epure-window:hover .epure-squircle-icon {
	transform: translate3d(0, -3px, 0) scale(1.08) rotate(-4deg);
}

/* ------------------------------------------------------------------
 * 7. Buttons: light sweep, press, magnetic pull (set by JS)
 * ---------------------------------------------------------------- */
.epure-btn {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transform: translate3d(var(--bx, 0px), var(--by, 0px), 0);
}

.epure-btn-primary::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -60%;
	width: 50%;
	z-index: -1;
	background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
	transform: skewX(-20deg) translate3d(0, 0, 0);
	transition: transform 0s;
}

.epure-btn-primary:hover::before {
	transform: skewX(-20deg) translate3d(380%, 0, 0);
	transition: transform 0.9s var(--ease-out);
}

.epure-btn-primary:hover,
.epure-btn-secondary:hover {
	transform: translate3d(var(--bx, 0px), calc(var(--by, 0px) - 1px), 0);
}

.epure-btn:active {
	transform: translate3d(var(--bx, 0px), var(--by, 0px), 0) scale(0.96) !important;
}

.epure-btn svg {
	transition: transform 0.4s var(--ease-spring);
}

.epure-btn:hover svg {
	transform: translate3d(4px, 0, 0);
}

/* Click ripple. */
.epure-ripple {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: rgba(255, 255, 255, 0.5);
	transform: translate(-50%, -50%) scale(0);
	animation: epure-ripple 0.7s var(--ease-out) forwards;
	z-index: -1;
}

.epure-btn-secondary .epure-ripple {
	background: rgba(47, 107, 255, 0.18);
}

@keyframes epure-ripple {
	to {
		transform: translate(-50%, -50%) scale(1);
		opacity: 0;
	}
}

/* ------------------------------------------------------------------
 * 8. Filter chips & showcase filtering
 * ---------------------------------------------------------------- */
.epure-live-chip {
	position: relative;
}

.epure-live-chip.active {
	animation: epure-chip-pop 0.45s var(--ease-spring);
}

@keyframes epure-chip-pop {
	0%   { transform: scale(0.92); }
	100% { transform: scale(1); }
}

.epure-live-product.is-leaving {
	opacity: 0 !important;
	transform: scale(0.94) translate3d(0, 10px, 0) !important;
	filter: blur(4px);
}

.epure-live-product.is-entering {
	animation: epure-card-in 0.6s var(--ease-out) both;
	animation-delay: calc(var(--i, 0) * 50ms);
}

@keyframes epure-card-in {
	from {
		opacity: 0;
		transform: translate3d(0, 18px, 0) scale(0.96);
		filter: blur(6px);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

#epure-live-count-badge.epure-bump {
	display: inline-flex;
}

/* ------------------------------------------------------------------
 * 9. Fly-to-cart: product photo flies into the cart icon
 * ---------------------------------------------------------------- */
.epure-fly {
	position: fixed;
	z-index: 4000;
	pointer-events: none;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 18px 40px rgba(14, 17, 22, 0.25);
	will-change: transform, opacity;
}

.epure-fly img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------
 * 10. Mini-cart: Deepin window slides in, items cascade
 * ---------------------------------------------------------------- */
.epure-drawer-overlay {
	display: flex !important;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.epure-drawer-overlay.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.35s ease, visibility 0s;
}

.epure-drawer-overlay:not(.is-open) .epure-drawer-window {
	display: flex !important;
}

.epure-drawer-window {
	transform: translate3d(40px, 0, 0) scale(0.96) !important;
	opacity: 0;
	transition: transform 0.6s var(--ease-out), opacity 0.35s ease !important;
}

.epure-drawer-overlay.is-open .epure-drawer-window {
	transform: none !important;
	opacity: 1;
}

.epure-drawer-overlay.is-open .epure-drawer-window .epure-card {
	animation: epure-card-in 0.6s var(--ease-out) both;
}

.epure-drawer-overlay.is-open .epure-drawer-window .epure-card:nth-child(1) { animation-delay: 0.12s; }
.epure-drawer-overlay.is-open .epure-drawer-window .epure-card:nth-child(2) { animation-delay: 0.2s; }
.epure-drawer-overlay.is-open .epure-drawer-window .epure-card:nth-child(3) { animation-delay: 0.28s; }
.epure-drawer-overlay.is-open .epure-drawer-window .epure-card:nth-child(4) { animation-delay: 0.36s; }

.epure-window-close-btn {
	transition: transform 0.4s var(--ease-spring), background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.epure-window-close-btn:hover {
	transform: rotate(90deg);
}

/* ------------------------------------------------------------------
 * 11. Marquee strip
 * ---------------------------------------------------------------- */
.epure-marquee {
	overflow: hidden;
	padding: 18px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.epure-marquee__track {
	display: flex;
	width: max-content;
	animation: epure-marquee 38s linear infinite;
}

.epure-marquee:hover .epure-marquee__track {
	animation-play-state: paused;
}

.epure-marquee__group {
	display: flex;
	align-items: center;
	gap: 40px;
	padding-right: 40px;
}

.epure-marquee__item {
	font-size: clamp(20px, 1.2rem + 1.2vw, 36px);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--epure-text);
	white-space: nowrap;
}

.epure-marquee__item.is-outline {
	color: transparent;
	-webkit-text-stroke: 1px rgba(14, 17, 22, 0.35);
}

.epure-marquee__dot {
	width: 10px;
	height: 10px;
	border-radius: 3px;
	background: linear-gradient(135deg, #8CB2FF, var(--epure-accent));
	transform: rotate(45deg);
	flex-shrink: 0;
}

@keyframes epure-marquee {
	to { transform: translate3d(-50%, 0, 0); }
}

/* ------------------------------------------------------------------
 * 12. Mobile dock: active item springs
 * ---------------------------------------------------------------- */
@media (max-width: 768px) {
	.epure-dock-item.active svg {
		animation: epure-dock-hop 0.6s var(--ease-spring);
	}

	.epure-mobile-dock {
		animation: epure-dock-in 0.8s var(--ease-out) 0.4s both;
	}
}

@keyframes epure-dock-hop {
	0%   { transform: translate3d(0, 0, 0); }
	40%  { transform: translate3d(0, -5px, 0); }
	100% { transform: translate3d(0, -1px, 0); }
}

@keyframes epure-dock-in {
	from {
		opacity: 0;
		transform: translate3d(-50%, 30px, 0);
	}
	to {
		opacity: 1;
		transform: translate3d(-50%, 0, 0);
	}
}

/* ------------------------------------------------------------------
 * 13. Smooth page-to-page transitions (Chrome/Edge/Safari 18+)
 * ---------------------------------------------------------------- */
@view-transition {
	navigation: auto;
}

::view-transition-old(root) {
	animation: epure-vt-out 0.25s ease both;
}

::view-transition-new(root) {
	animation: epure-vt-in 0.45s var(--ease-out) both;
}

@keyframes epure-vt-out {
	to {
		opacity: 0;
		transform: translate3d(0, -8px, 0);
	}
}

@keyframes epure-vt-in {
	from {
		opacity: 0;
		transform: translate3d(0, 12px, 0);
	}
}

/* ------------------------------------------------------------------
 * 14. Reduced motion: switch everything off
 * ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body::before,
	body::after,
	.epure-marquee__track,
	.epure-progress,
	.epure-hero-title .epure-wi {
		animation: none !important;
	}

	.epure-progress {
		display: none;
	}

	.epure-marquee {
		overflow-x: auto;
	}

	@view-transition {
		navigation: none;
	}
}