/**
 * Dog Father Pro — Motion vocabulary (data attributes)
 * Driven by motion.js (GSAP + ScrollTrigger). Each data-df-* attr
 * is an opt-in motion behavior. No data-df attrs = no motion = static page.
 */

/* Initial state for reveal targets — invisible until motion.js animates in.
   If JS fails or prefers-reduced-motion, the .df-no-js guard shows them. */
[data-df-reveal] {
	opacity: 0;
	transform: translateY(40px);
	transition: none;
}

[data-df-reveal-left]  { opacity: 0; transform: translateX(-40px); }
[data-df-reveal-right] { opacity: 0; transform: translateX(40px); }
[data-df-reveal-scale] { opacity: 0; transform: scale(0.92); }
[data-df-reveal-clip]  {
	opacity: 1;
	clip-path: inset(0 100% 0 0);
	-webkit-clip-path: inset(0 100% 0 0);
}

/* Stagger children — each child gets its own delay based on data-df-stagger */
[data-df-stagger] > * {
	opacity: 0;
	transform: translateY(30px);
}

/* Curtain reveal — image hidden behind a mask that wipes open */
[data-df-curtain] {
	position: relative;
	overflow: hidden;
}
[data-df-curtain]::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--df-bg);
	transform-origin: left;
	transform: scaleX(1);
	z-index: 2;
	pointer-events: none;
}
[data-df-curtain].is-revealed::after {
	transform: scaleX(0);
}

/* Split-text — each word wrapped in an overflow-hidden span */
.df-word-wrap {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
	padding-bottom: 0.1em;
	margin-bottom: -0.1em;
}
.df-word {
	display: inline-block;
	transform: translateY(110%);
	will-change: transform;
}

/* Scramble-text — letters decode from random to real */
.df-scramble-word {
	display: inline-block;
	white-space: nowrap;
}
.df-scramble-char {
	display: inline-block;
	color: var(--df-gold);
	transition: color 0.2s ease;
}
.df-scramble-char.is-locked {
	color: inherit;
}
[data-df-scramble] {
	/* preserve layout while chars scramble */
}

/* Comet-trail cursor dots */
.df-trail {
	position: fixed;
	top: 0;
	left: 0;
	pointer-events: none;
	z-index: 9998;
}
.df-trail__dot {
	position: absolute;
	display: block;
	border-radius: 50%;
	background: var(--df-gold);
	will-change: transform, opacity;
}

/* Magnetic targets */
[data-df-magnetic] {
	will-change: transform;
	transition: transform var(--df-dur-base) var(--df-ease-spring);
}

/* 3D tilt card */
[data-df-tilt] {
	transform-style: preserve-3d;
	transform: perspective(800px) rotateX(0) rotateY(0);
	transition: transform var(--df-dur-base) var(--df-ease-out);
	will-change: transform;
}

/* Marquee — infinite horizontal scroll */
.df-marquee {
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--df-sp-6);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.df-marquee__track {
	display: flex;
	flex-shrink: 0;
	gap: var(--df-sp-6);
	align-items: center;
	white-space: nowrap;
	animation: df-marquee var(--df-dur-slower, 30s) linear infinite;
	will-change: transform;
}
.df-marquee[data-reverse] .df-marquee__track {
	animation-direction: reverse;
}
.df-marquee:hover .df-marquee__track {
	animation-play-state: paused;
}
@keyframes df-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Counter — number animates from 0 to target */
[data-df-counter] {
	font-variant-numeric: tabular-nums;
}

/* Parallax target — JS sets y transform */
[data-df-parallax] {
	will-change: transform;
}

/* Custom cursor */
.df-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: var(--df-gold);
	mix-blend-mode: difference;
	pointer-events: none;
	z-index: 9999;
	transform: translate(-50%, -50%);
	transition: width var(--df-dur-base) var(--df-ease-out),
	            height var(--df-dur-base) var(--df-ease-out),
	            opacity var(--df-dur-fast) var(--df-ease-out);
	will-change: transform;
}
.df-cursor.is-hover {
	width: 56px;
	height: 56px;
	opacity: 0.6;
}

/* Scroll progress bar — fixed at top */
.df-scroll-progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0%;
	background: var(--df-gold-gradient);
	z-index: 9998;
	pointer-events: none;
	box-shadow: 0 0 12px var(--df-gold);
}

/* No-JS fallback — reveal everything */
.df-no-js [data-df-reveal],
.df-no-js [data-df-reveal-left],
.df-no-js [data-df-reveal-right],
.df-no-js [data-df-reveal-scale],
.df-no-js [data-df-reveal-clip] {
	opacity: 1 !important;
	transform: none !important;
	clip-path: none !important;
	-webkit-clip-path: none !important;
}
.df-no-js [data-df-stagger] > * {
	opacity: 1;
	transform: none;
}
.df-no-js [data-df-curtain]::after { display: none; }
.df-no-js .df-word { transform: none; }
.df-no-js .df-cursor { display: none; }
.df-no-js .df-trail { display: none; }
.df-no-js .df-scramble-char { color: inherit; }
.df-no-js .df-particles { display: none; }

/* Reduced-motion fallback — same as no-JS */
@media (prefers-reduced-motion: reduce) {
	[data-df-reveal],
	[data-df-reveal-left],
	[data-df-reveal-right],
	[data-df-reveal-scale],
	[data-df-reveal-clip] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
		-webkit-clip-path: none !important;
	}
	[data-df-stagger] > * { opacity: 1; transform: none; }
	[data-df-curtain]::after { display: none; }
	.df-word { transform: none; }
	.df-cursor { display: none; }
	.df-trail { display: none; }
	.df-scramble-char { color: inherit; }
	.df-particles { display: none; }
	.df-marquee__track { animation: none; }
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
	.df-cursor { display: none; }
}
body.df-mobile .df-cursor { display: none; }

/* ------------------------------------------------------------------ */
/* Headline reveal — masked word rise                                  */
/* Each word sits in its own overflow mask so it can lift in from      */
/* below with nothing spilling above the line.                         */
/* ------------------------------------------------------------------ */
.df-word-mask {
	display: inline-block;
	overflow: hidden;
	vertical-align: bottom;
	/* Descenders (g, y, p) would be clipped by a tight mask. */
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
}
.df-word-inner {
	display: inline-block;
	will-change: transform;
}
.df-no-js .df-word-inner,
.df-no-js [data-df-scramble] {
	transform: none;
	opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
	.df-word-inner {
		transform: none !important;
		opacity: 1 !important;
		filter: none !important;
	}
}

/* The hero headline paints its text with a gradient via background-clip.
   Splitting it into word spans left those spans inheriting the transparent
   fill with no background of their own, so the headline disappeared. Each
   word now carries the gradient itself. */
.df-hero__title .df-word-inner {
	background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}