/* Shared by every page of the site (home, service pages, privacy, portfolio). Base look lives in Elementor global classes; this file adds states the class editor cannot express. */
html {
	scroll-behavior: smooth;
}

body {
	background-color: #F6F4EA;
	font-family: 'DM Sans', sans-serif;
	font-variant-emoji: text;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: #3DDC97;
	color: #0D0D0D;
}

.elementor [id] {
	scroll-margin-top: 80px;
}

/* Inline links inside running text (privacy policy, service copy) */
.pp-p a,
.sp-p a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Service page H1: same fluid moving gradient as the home "Dietro le quinte" title ---------- */
body .elementor .sp-h1 {
	background-image:
		radial-gradient(circle at 20% 30%, #3DDC97 0%, transparent 42%),
		radial-gradient(circle at 80% 20%, #7B61FF 0%, transparent 45%),
		radial-gradient(circle at 60% 80%, #FF5FA2 0%, transparent 45%),
		radial-gradient(circle at 10% 90%, #FFB36B 0%, transparent 40%),
		linear-gradient(120deg, #3DDC97, #9BF6D0, #7B61FF, #FF5FA2, #FFB36B, #3DDC97);
	background-size: 220% 220%, 240% 240%, 200% 200%, 260% 260%, 300% 300%;
	background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 50%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	padding-bottom: 0.08em;
	animation: wc-fluid-sp 16s ease-in-out infinite alternate;
}

@keyframes wc-fluid-sp {
	0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 0% 50%; }
	25%  { background-position: 60% 40%, 40% 60%, 0% 30%, 80% 20%, 50% 30%; }
	50%  { background-position: 100% 100%, 0% 100%, 60% 0%, 100% 0%, 100% 50%; }
	75%  { background-position: 30% 80%, 80% 30%, 100% 60%, 20% 80%, 50% 70%; }
	100% { background-position: 0% 50%, 100% 50%, 30% 20%, 60% 100%, 0% 50%; }
}

/* ---------- Brand green → fluid gradient: the same moving colours as the H1s, on every button and text that used the flat green ---------- */
:root {
	--wc-fluid:
		radial-gradient(circle at 20% 30%, #3DDC97 0%, transparent 42%),
		radial-gradient(circle at 80% 20%, #7B61FF 0%, transparent 45%),
		radial-gradient(circle at 60% 80%, #FF5FA2 0%, transparent 45%),
		radial-gradient(circle at 10% 90%, #FFB36B 0%, transparent 40%),
		linear-gradient(120deg, #3DDC97, #9BF6D0, #7B61FF, #FF5FA2, #FFB36B, #3DDC97);
	--wc-fluid-size: 220% 220%, 240% 240%, 200% 200%, 260% 260%, 300% 300%;
}

/* Buttons with a green fill (service pages, home "Guarda i lavori") and the green hover of the form buttons */
body .elementor .sp-btn,
body .elementor .e-763b225c-22ac,
body .elementor .wc-submit:hover,
body .elementor .wc-submit:focus-visible,
body .elementor .e-507d6e7a-503e:hover,
body .elementor .e-507d6e7a-503e:focus-visible {
	background-image: var(--wc-fluid);
	background-size: var(--wc-fluid-size);
	animation: wc-fluid-sp 16s ease-in-out infinite alternate;
}

/* These two turn cream on hover, as before */
body .elementor .sp-btn:hover,
body .elementor .sp-btn:focus-visible,
body .elementor .e-763b225c-22ac:hover,
body .elementor .e-763b225c-22ac:focus-visible {
	background-image: none;
	animation: none;
}

/* Green text: always (service kicker) or on hover (menu, service rows, project links) */
body .elementor .sp-kicker,
body .elementor .wc-dd-item:hover,
body .elementor .wc-dd-item:focus-visible,
body .elementor .wc-srv-name:hover,
body .elementor .wc-srv-name:focus-visible,
body .elementor .sp-link-item:hover,
body .elementor .sp-link-item:focus-visible {
	background-image: var(--wc-fluid);
	background-size: var(--wc-fluid-size);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	animation: wc-fluid-sp 16s ease-in-out infinite alternate;
}

body .elementor .wc-dd-item:hover *,
body .elementor .wc-dd-item:focus-visible *,
body .elementor .wc-srv-name:hover *,
body .elementor .wc-srv-name:focus-visible *,
body .elementor .sp-link-item:hover *,
body .elementor .sp-link-item:focus-visible * {
	color: inherit;
	-webkit-text-fill-color: transparent;
}

/* ---------- Service page hero media: grows to full width while scrolling (CSS scroll-driven animation, no JS). Browsers without support show it at full size. ---------- */
@supports (animation-timeline: view()) {
	body .elementor .sp-hero .sp-ph {
		animation: sp-grow linear both;
		animation-timeline: view();
		animation-range: entry 0% cover 50%;
		transform-origin: 50% 0%;
		will-change: transform;
	}

	@keyframes sp-grow {
		from { transform: scale(0.6); border-radius: 28px; }
		to { transform: scale(1); border-radius: 0; }
	}
}

/* ---------- Media boxes (.sp-ph): once a real photo or video is placed inside, it fills the box edge to edge.
   The padding and dark fill are only for the text placeholder. ---------- */
body .elementor .sp-ph:has(img, video) {
	padding: 0;
	overflow: hidden;
	background-color: transparent;
}

body .elementor .sp-ph:has(img, video) > * {
	width: 100%;
	height: 100%;
	max-width: none;
	display: block;
}

body .elementor .sp-ph img,
body .elementor .sp-ph video {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: auto;
	object-fit: cover;
	display: block;
}

/* Home portfolio: the client box was made for logos (dark fill, padding). With a video inside it becomes a clean 16:9 frame. */
body .elementor .wc-pf-logo-box:has(video) {
	height: auto;
	aspect-ratio: 16 / 9;
	padding: 0;
	overflow: hidden;
	background-color: transparent;
}

body .elementor .wc-pf-logo-box video,
body .elementor .wc-pf-body > video {
	width: 100%;
	height: 100%;
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
}

/* ---------- Header: solid bar while a menu is open, difference mode otherwise ---------- */
.wc-hdr {
	transition: background-color 250ms ease;
}

.wc-hdr:has(.wc-dd:hover),
.wc-hdr:has(.wc-dd:focus-within),
.wc-hdr:has(details[open]) {
	mix-blend-mode: normal;
	background-color: #0D0D0D;
}

.wc-hdr a:focus-visible,
.wc-hdr summary:focus-visible {
	outline: 2px solid #3DDC97;
	outline-offset: 3px;
}

/* Desktop dropdown */
.wc-dd:hover .wc-dd-panel,
.wc-dd:focus-within .wc-dd-panel {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wc-dd-panel {
	border: 1px solid rgba(246, 244, 234, 0.18);
}

.wc-dd-panel::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: -20px;
	height: 20px;
}

/* Mobile menu (native details/summary, no JavaScript) */
.wc-mnav summary {
	list-style: none;
}

.wc-mnav summary::-webkit-details-marker {
	display: none;
}

.wc-mnav summary > [aria-hidden="true"] {
	display: none;
}

.wc-mnav-head::after {
	content: '+';
	margin-left: 6px;
	font-size: 18px;
	font-weight: 300;
	line-height: 1;
	transition: transform 250ms ease;
}

.wc-mnav details[open] .wc-mnav-head::after {
	transform: rotate(45deg);
}

/* ---------- FAQ accordions on service pages ---------- */
.sp-faq summary {
	list-style: none;
}

.sp-faq summary::-webkit-details-marker {
	display: none;
}

.sp-faq summary > [aria-hidden="true"] {
	display: none;
}

.sp-faq-head::after {
	content: '+';
	flex: 0 0 auto;
	font-family: 'DM Sans', sans-serif;
	font-size: 34px;
	font-weight: 300;
	line-height: 1;
	color: #0D0D0D;
	transition: transform 350ms cubic-bezier(.2, .7, .2, 1);
}

.sp-faq details[open] > .sp-faq-head::after {
	transform: rotate(45deg);
}

/* ---------- Forms ---------- */
.wc-form input::placeholder,
.wc-form textarea::placeholder {
	color: #0D0D0D;
	opacity: 0.35;
}

.wc-form input:focus,
.wc-form textarea:focus,
.wc-form select:focus {
	outline: none;
}

.wc-form input:focus-visible,
.wc-form textarea:focus-visible,
.wc-form select:focus-visible,
.wc-form button:focus-visible {
	outline: 2px solid #3DDC97;
	outline-offset: 4px;
}

.wc-form label a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---------- Footer ---------- */
.wc-ft-word sup {
	font-size: 0.3em;
	vertical-align: top;
	position: relative;
	top: 0.35em;
}

.wc-ft a:focus-visible,
.sp-sec a:focus-visible,
.sp-hero a:focus-visible {
	outline: 2px solid #3DDC97;
	outline-offset: 3px;
}

/* ---------- Portfolio lists: hover / scroll preview of each project (built by site.js) ---------- */
.wc-pv {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 60;
	width: clamp(240px, 24vw, 380px);
	aspect-ratio: 16 / 10;
	border-radius: 14px;
	overflow: hidden;
	background: #0D0D0D;
	box-shadow: 0 24px 60px rgba(13, 13, 13, 0.28);
	pointer-events: none;
	opacity: 0;
	scale: 0.92;
	transition: opacity 220ms ease, scale 320ms cubic-bezier(.2, .7, .2, 1);
	will-change: transform;
}

.wc-pv.is-on {
	opacity: 1;
	scale: 1;
}

.wc-pv--touch {
	/* Bottom left: the cookie button sits bottom right. */
	top: auto;
	left: 16px;
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	width: min(52vw, 240px);
	transform: none;
	transform-origin: 0% 100%;
}

.wc-pv-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity 200ms ease;
}

.wc-pv-slide.is-on {
	opacity: 1;
}

.wc-pv-slide img,
.wc-pv-slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 250ms ease;
}

.wc-pv-slide.is-ready img,
.wc-pv-slide.is-ready video,
.wc-pv-slide video[poster] {
	opacity: 1;
}

/* Shown until the media is ready, and in place of it when the project has none yet. */
.wc-pv-tile {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	padding: 18px;
	color: #F6F4EA;
	background:
		radial-gradient(circle at 15% 20%, rgba(61, 220, 151, 0.55) 0%, transparent 50%),
		radial-gradient(circle at 85% 15%, rgba(123, 97, 255, 0.5) 0%, transparent 50%),
		radial-gradient(circle at 70% 90%, rgba(255, 95, 162, 0.45) 0%, transparent 50%),
		#0D0D0D;
}

.wc-pv-name {
	font-size: clamp(18px, 1.7vw, 26px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.wc-pv-tags {
	font-size: 12px;
	letter-spacing: 0.04em;
	opacity: 0.75;
}

.wc-pv--touch .wc-pv-tile {
	padding: 12px;
}

.wc-pv--touch .wc-pv-name {
	font-size: 16px;
}

.wc-pv--touch .wc-pv-tags {
	font-size: 10px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wc-hdr, .wc-dd-panel, .wc-mnav-head::after, .sp-faq-head::after { transition: none; }
	body .elementor .sp-h1 { animation: none; }
	body .elementor .sp-hero .sp-ph { animation: none; transform: none; }
	.wc-pv, .wc-pv-slide, .wc-pv-slide img, .wc-pv-slide video { transition: none; }
	body .elementor .sp-btn, body .elementor .e-763b225c-22ac, body .elementor .wc-submit, body .elementor .e-507d6e7a-503e,
	body .elementor .sp-kicker, body .elementor .wc-dd-item, body .elementor .wc-srv-name, body .elementor .sp-link-item { animation: none !important; }
}