/* DREEVN — cross-page responsive motion / overflow adaptations.
   Preserves creative systems; adapts framing so they remain visible on small viewports. */

html {
	overflow-x: clip;
}

body {
	overflow-x: clip;
	max-width: 100%;
}

/* Smoother scrolling without trapping nested scroll areas */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Contain decorative absolute layers that can paint outside the viewport */
.dv-about-scene,
.dv-svc-scene,
.dv-ct-scene,
.dv-cover,
.dv-finale,
.dv-home-close {
	max-width: 100%;
}

/* Do not set transform on #masthead.-sticky — Ohio uses translate3d for show/hide */
#masthead.header.-sticky.showed .header-wrap {
	backface-visibility: hidden;
}

/* Prefer transform/opacity for common interactive surfaces */
.dv-nav-talk,
#masthead:not(.-mobile) #site-navigation .menu > .nav-item > a > span::after,
.dreevn-project-preview img,
.dv-float-actions a {
	will-change: auto;
}

@media (hover: hover) and (pointer: fine) {
	.dreevn-project-card:hover .dreevn-project-preview img,
	.dv-float-actions a:hover {
		will-change: transform;
	}
}

/* Finale decorative mark — keep visible but keep inside viewport */
@media (max-width: 980px) {
	.dv-finale-mark {
		right: max(-8%, -40px);
		pointer-events: none;
	}
}

@media (max-width: 640px) {
	.dv-finale-mark {
		right: max(-6%, -28px);
		opacity: 0.42;
	}
	.dv-home-close-board {
		max-width: min(220px, 42vw);
	}
}

/* Floating Call / WhatsApp — keep shared chrome offsets on small phones */
@media (max-width: 430px) {
	.dv-float-actions {
		left: max(16px, env(safe-area-inset-left));
		bottom: max(20px, env(safe-area-inset-bottom));
		gap: 12px;
	}
}

/* Small phones — prevent clipped hero CTAs / type */
@media (max-width: 374px) {
	#masthead .branding .logo .main-logo,
	#masthead .branding .logo .light-scheme-logo {
		width: 108px !important;
		max-width: 108px !important;
	}
	.elementor-239530 .elementor-element.elementor-element-9605834 h1.title {
		font-size: clamp(28px, 9vw, 36px);
	}
}

/* Touch-friendly press feedback where hover is unavailable */
@media (hover: none) and (pointer: coarse) {
	.dv-board-grid li:active img,
	.dv-logos li:active img {
		opacity: 1;
		transform: translateY(-2px);
	}
	.dreevn-project-card:active .dreevn-project-preview img {
		transform: scale(1.03);
	}
}

/* Tablet landscape — keep sticky nav compact */
@media (min-width: 733px) and (max-width: 1024px) {
	#masthead .header-wrap {
		padding-left: max(16px, env(safe-area-inset-left));
		padding-right: max(16px, env(safe-area-inset-right));
	}
}

/* Reduce motion: stop continuous marquees / transforms that can feel heavy */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	#masthead.header.-sticky:not(.-fixed),
	#masthead.header.-sticky.showed {
		transition: none !important;
	}
	.dv-reel-track,
	.dreevn-our-clients-track,
	.dreevn-projects-track,
	.dreevn-hero-clients-track,
	.dv-float {
		animation: none !important;
		transition: none !important;
	}
}