/* KartelFam Motion — dark, editorial, never loud.
   Transform/opacity only (a few paint-only exceptions on tiny elements), ease-out,
   hover only on real pointers, everything off under reduced motion.
   The theme (Rey) already handles the second-image hover and quickview, so we don't touch those. */

:root {
	--kf-bg: #0a0a0a;       /* preloader + ticker background */
	--kf-fg: #f4f1ea;       /* text on dark */
	--kf-accent: #e0201b;   /* KartelFam red */
	--kf-fill: #f4f1ea;     /* button fill on hover */
	--kf-fill-ink: #0a0a0a; /* button text on hover */
	--kf-ease: cubic-bezier(0.23, 1, 0.32, 1);
	--kf-grain: 0.045;      /* 0 = off */
}

/* ---------- Film grain (static, light specks — shows on dark, invisible on white) ---------- */
.kf-grain {
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: var(--kf-grain);
	background-size: 200px 200px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Preloader (first visit per session, front page) ---------- */
#kf-pre {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 22px;
	background: var(--kf-bg);
	color: var(--kf-fg);
	transition: opacity 0.45s var(--kf-ease), visibility 0s linear 0.45s;
}
.kf-pre-on #kf-pre {
	display: flex;
	animation: kf-gone 0s linear 2.6s forwards; /* failsafe if JS never finishes */
}
.kf-pre-on { overflow: hidden; }
.kf-pre-done #kf-pre { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes kf-gone { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.kf-pre-word {
	display: flex;
	font-size: clamp(22px, 4.2vw, 40px);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-indent: 0.18em;
	text-transform: uppercase;
	line-height: 1.1;
}
.kf-pre-word i {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	font-style: normal;
	padding-bottom: 0.1em;
}
.kf-pre-word b {
	display: inline-block;
	font-weight: inherit;
	transform: translateY(105%);
	animation: kf-up 0.6s var(--kf-ease) calc(var(--i) * 40ms + 0.05s) forwards;
}
.kf-pre-line {
	position: relative;
	width: 140px;
	height: 2px;
	background: color-mix(in srgb, var(--kf-fg) 16%, transparent);
	overflow: hidden;
}
.kf-pre-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--kf-accent);
	transform: scaleX(0);
	transform-origin: left;
	animation: kf-line 0.85s var(--kf-ease) 0.15s forwards;
}
@keyframes kf-up { to { transform: none; } }
@keyframes kf-line { to { transform: scaleX(1); } }

/* ---------- Hero headline: word-by-word mask reveal ---------- */
.kf-js .kf-split {
	visibility: hidden;
	animation: kf-show 0s linear 2.8s forwards; /* failsafe */
}
.kf-js .kf-split.kf-ready { visibility: visible; animation: none; }
@keyframes kf-show { to { visibility: visible; } }

.kf-w {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.14em;
	margin-bottom: -0.14em;
}
.kf-w > span {
	display: inline-block;
	transform: translateY(105%);
}
.kf-split.kf-in .kf-w > span {
	transform: none;
	transition: transform 0.8s var(--kf-ease);
	transition-delay: calc(var(--i, 0) * 45ms);
}

/* ---------- Scroll reveal ---------- */
.kf-r { opacity: 0; transform: translateY(16px); }
.kf-r.kf-r-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--kf-ease), transform 0.6s var(--kf-ease);
	transition-delay: var(--kf-d, 0ms);
}

/* ---------- Ticker (top bar or any element with .kf-marquee) ---------- */
.kf-ticker {
	background: var(--kf-bg);
	color: var(--kf-fg);
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 9px 0;
}
.kf-marquee {
	overflow: hidden;
	white-space: nowrap;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.kf-marquee-track {
	display: inline-flex;
	animation: kf-marq var(--kf-marq-dur, 34s) linear infinite;
}
.kf-marquee-track > span { padding: 0 2rem; }
.kf-marquee:hover .kf-marquee-track { animation-play-state: paused; }
@keyframes kf-marq { to { transform: translateX(-50%); } }

/* ---------- One-of-one label (cards + product page) ---------- */
.kf-oneofone {
	display: flex;
	width: fit-content;
	align-items: center;
	gap: 7px;
	margin: 2px 0 4px;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	opacity: 0.85;
}
.kf-oneofone::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--kf-accent);
}

/* ---------- Buttons: fill rises from the bottom ---------- */
.kf-btn,
.elementor-widget-button .elementor-button,
.single_add_to_cart_button {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}
.kf-btn::before,
.elementor-widget-button .elementor-button::before,
.single_add_to_cart_button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--kf-fill);
	transform: scaleY(0);
	transform-origin: bottom;
	transition: transform 0.3s var(--kf-ease);
}
@media (hover: hover) and (pointer: fine) {
	.kf-btn:hover::before,
	.elementor-widget-button .elementor-button:hover::before,
	.single_add_to_cart_button:hover::before { transform: scaleY(1); }
	.kf-btn:hover,
	.elementor-widget-button .elementor-button:hover,
	.single_add_to_cart_button:hover { color: var(--kf-fill-ink) !important; }
}
.kf-btn:active,
.elementor-widget-button .elementor-button:active { transform: scale(0.98); }

/* ---------- Links: underline draws in ---------- */
.kf-link,
footer li a,
.elementor-location-footer li a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size 0.3s var(--kf-ease);
	text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
	.kf-link:hover,
	footer li a:hover,
	.elementor-location-footer li a:hover { background-size: 100% 1px; }
}

/* ---------- Magnetic CTA / parallax ---------- */
.kf-magnet { transition: transform 0.3s var(--kf-ease); }
.kf-parallax { overflow: hidden; }
.kf-parallax img {
	transform: translate3d(0, var(--kf-py, 0px), 0) scale(1.12);
	will-change: transform;
}

/* ---------- Reduced motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
	#kf-pre { display: none !important; }
	.kf-pre-on { overflow: auto; }
	.kf-js .kf-split { visibility: visible; animation: none; }
	.kf-w > span { transform: none !important; transition: none !important; }
	.kf-r { opacity: 1 !important; transform: none !important; }
	.kf-marquee-track { animation: none; }
	.kf-parallax img { transform: none; }
	.kf-btn::before,
	.elementor-widget-button .elementor-button::before,
	.single_add_to_cart_button::before { transition: none; }
}