/**
 * Dog Father Pro — Experience Page (3D + Video).
 */

.df-exp {
	position: relative;
	background: var(--df-bg);
	overflow-x: hidden;
}

/* Auto-playing full-screen background video */
.df-exp__video-wrap {
	position: fixed;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.df-exp__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.df-exp__video-fallback {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
.df-exp__video-overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(10,10,11,0.6) 0%, rgba(10,10,11,0.9) 100%),
		radial-gradient(ellipse at center, rgba(254,194,8,0.1), transparent 70%);
}

/* 3D canvas overlay */
.df-exp__3d {
	position: fixed;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* Hero content */
.df-exp__hero {
	position: relative;
	z-index: 2;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: 80px;
}
.df-exp__title {
	font-size: var(--df-fs-mega);
	font-weight: 800;
	line-height: var(--df-lh-tight);
	margin-block: var(--df-sp-5) var(--df-sp-6);
	background: linear-gradient(180deg, #FFFFFF 0%, #E5E5EA 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	max-width: 900px;
}
.df-exp__lead {
	font-size: var(--df-fs-h4);
	color: var(--df-fg-muted);
	max-width: 640px;
	line-height: var(--df-lh-normal);
}
.df-exp__hint {
	margin-top: var(--df-sp-8);
	display: flex;
	flex-direction: column;
	gap: var(--df-sp-3);
}
.df-exp__hint-text {
	font-size: var(--df-fs-tiny);
	color: var(--df-gold);
	letter-spacing: var(--df-ls-wider);
	text-transform: uppercase;
	font-weight: 600;
}
.df-exp__hint-line {
	width: 1px;
	height: 50px;
	background: linear-gradient(180deg, var(--df-gold), transparent);
	animation: df-exp-pulse 2s var(--df-ease-in-out) infinite;
}
@keyframes df-exp-pulse {
	0%, 100% { transform: scaleY(1); opacity: 0.5; }
	50% { transform: scaleY(1.3); opacity: 1; }
}

/* Content reveal section below */
.df-exp__content {
	position: relative;
	z-index: 2;
	background: linear-gradient(180deg, transparent 0%, var(--df-bg) 200px);
	padding-top: var(--df-sp-10);
}

/* Mobile — hide 3D, keep video, make it fast */
@media (max-width: 768px) {
	.df-exp__3d { display: none; }
	.df-exp__title { font-size: clamp(2rem, 9vw, 3rem); }
	.df-exp__video {
		/* Slightly blur video on mobile to make text readable without heavy overlay */
		filter: blur(2px) brightness(0.7);
	}
}