@import url('https://fonts.cdnfonts.com/css/satoshi');

/* ============================================
CUSTOM CSS — Zero Studio
============================================ */


/* ---- 1. CSS VARIABLES ---- */

:root {
	--bg: #0a0a0a;
	--text: #f5f5f5;
	--text-secondary: rgba(255, 255, 255, 0.6);
}

:root.light-mode {
	--bg: #f5f5f5;
	--text: #0a0a0a;
	--text-secondary: rgba(0, 0, 0, 0.6);
}


/* ---- 2. BASE ---- */

html::after {
	display: none;
}

body {
	background-color: var(--bg);
	color: var(--text);
	transition: background-color 0.4s ease, color 0.4s ease;
	overflow-x: clip;
	overflow-y: visible;
}

.border-light {
	border: 1px solid white;
}

.uk-textarea{
	max-height:150px;
}
em{
	color:var(--text);
}
/* ---- 3. PRELOADER ---- */

#preloader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
}

#preloader video {
	width: 120px;
	height: 120px;
}


/* ---- 4. NAVBAR ---- */
.uk-navbar{
	justify-content:space-between;
	align-items: center;
}
.navbar-wrapper-left > div,
.navbar-wrapper-right > div{
	width:50%;
	padding:0;
}
.navbar-wrapper-left,
.uk-navbar-center,
.navbar-wrapper-right{
	width:33.33%;
}
.navbar-wrapper-left > div.widget,
.navbar-wrapper-right > div.widget{
	display:flex;
	justify-content:center;
}
.navbar-wrapper-right a{
	font-size: 18px;
	color:var(--text)!important;
}
.navbar-wrapper-right a > span{
	height:25px;
}
.uk-navbar-left {
	justify-content:flex-start;
}
.uk-navbar-right{
	justify-content: flex-end;
}
.uk-navbar-nav,
.menu-item {
	height: fit-content;
}

.uk-navbar-center,
.uk-navbar-right {
	align-items: center !important;
}

.uk-navbar-item.widget.widget_builderwidget {
	order: -1;
}

.menu-item > a {
	height: initial !important;
	min-height: initial !important;
	transition: none;
	transition-property: none;
	opacity: 1 !important;
	animation: none !important;
}

.uk-nav-default li a {
	transition: none !important;
	transition-property: none !important;
	opacity: 1 !important;
	filter: none !important;
	animation: none !important;
}


/* ---- 5. LOGO ---- */

:root.light-mode .uk-logo svg path {
	fill: #0a0a0a !important;
}


/* ---- 6. BUTTONS ---- */


.uk-button.uk-button-default {
	padding-top: 16px;
	padding-bottom: 16px;
}

.uk-button.uk-button-default,
.uk-button.uk-button-default:hover,
.uk-subnav .el-link,
.uk-subnav .el-link:hover,
.uk-button-link, 
.uk-button-text {
	animation: none !important;
	transition: none !important;
}

.uk-button.uk-button-default::before,
.uk-button.uk-button-default:hover::before,
.uk-subnav .el-link::before,
.uk-subnav .el-link:hover::before {
	background-image: none !important;
	filter: none !important;
	transition: none !important;
	animation: none !important;
}

.uk-button.uk-button-default::after,
.uk-button.uk-button-default:hover::after,
.uk-subnav .el-link::after,
.uk-subnav .el-link:hover::after {
	animation: none !important;
	transition: none !important;
}

:root.light-mode .uk-button-default,
:root.light-mode .uk-button-default::after {
	background-color: #0a0a0a !important;
	color: #f5f5f5 !important;
}

:root.light-mode .uk-button-default:hover,
:root.light-mode .uk-button-default:hover::after {
	background-color: #1a1a1a !important;
	color: #f5f5f5 !important;
}

:root.light-mode .uk-button-default span {
	color: #f5f5f5 !important;
}

.uk-subnav .el-link {
	text-transform: initial !important;
}


/* ---- 7. VIMEO VIDEO ---- */

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	overflow: hidden;
}

.video-wrapper-vertical {
	padding-bottom: 177.77%;
}

.video-wrapper-square {
	padding-bottom: 100%;
}

.video-wrapper .vimeo-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-wrapper .vimeo-bg iframe {
	width: 100%;
	height: 100%;
}

/* shimmer loading */
.video-wrapper::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	background: rgba(255, 255, 255, 0.05);
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(255, 255, 255, 0.06) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
	animation: shimmer 1.5s ease-in-out infinite;
	pointer-events: none;
}

.video-wrapper.video-loaded::before {
	display: none;
}

:root.light-mode .video-wrapper::before {
	background: rgba(0, 0, 0, 0.05);
	background-image: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.06) 50%,
		transparent 100%
	);
	background-size: 200% 100%;
}

@keyframes shimmer {
	0% { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

/* video fade in */
.vimeo-bg.vimeo-loading {
	opacity: 0;
}

.vimeo-bg.vimeo-ready {
	opacity: 1;
	transition: opacity 0.4s ease;
}

/* hover-to-play video */
.video-hover-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	aspect-ratio: 16 / 9;
  height: auto !important;
}

.vimeo-hover {
	cursor: none;
}

.vimeo-hover iframe {
	pointer-events: none;
}
.vimeo-hover,
.vimeo-hover iframe {
  width: 100% !important;
  height: 100% !important;
}

/* homepage: video fullscreen cover */
.home .vimeo-bg iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 100vh;
	min-width: 177.78vh;
	min-height: 56.25vw;
	transform: translate(-50%, -50%);
	object-fit: cover;
}

/* homepage: overlay gradiente */
body.home .vimeo-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(10, 10, 10, 0.45) 0%,
		rgba(10, 10, 10, 0.1) 40%,
		rgba(10, 10, 10, 0) 60%,
		rgba(10, 10, 10, 0.3) 100%
	);
}

:root.light-mode body.home .vimeo-bg::after {
	background: linear-gradient(
		to bottom,
		rgba(245, 245, 245, 0.45) 0%,
		rgba(245, 245, 245, 0.1) 40%,
		rgba(245, 245, 245, 0) 60%,
		rgba(245, 245, 245, 0.3) 100%
	);
}


/* ---- 8. LIGHT MODE OVERRIDES ---- */

:root.light-mode *,
:root.light-mode *::before,
:root.light-mode *::after {
	transition: background-color 0.4s ease, color 0.4s ease, fill 0.4s ease, border-color 0.4s ease;
}

/* sezioni */
:root.light-mode .uk-section,
:root.light-mode .uk-section-default,
:root.light-mode .uk-section-muted,
:root.light-mode .uk-section-secondary,
:root.light-mode .uk-section-primary {
	background-color: var(--bg) !important;
	color: var(--text) !important;
}

/* headings */
:root.light-mode h1, :root.light-mode h2, :root.light-mode h3,
:root.light-mode h4, :root.light-mode h5, :root.light-mode h6,
:root.light-mode .uk-h1, :root.light-mode .uk-h2, :root.light-mode .uk-h3,
:root.light-mode .uk-heading-small, :root.light-mode .uk-heading-medium,
:root.light-mode .uk-heading-large, :root.light-mode .uk-heading-xlarge {
	color: var(--text) !important;
}

/* testi */
:root.light-mode p,
:root.light-mode span,
:root.light-mode li,
:root.light-mode .uk-text-lead,
:root.light-mode .uk-text-meta,
:root.light-mode .el-content {
	color: var(--text) !important;
}

/* navbar */
:root.light-mode .uk-navbar-container {
	background-color: var(--bg) !important;
}

:root.light-mode .uk-navbar-nav > li > a,
:root.light-mode .uk-navbar-item,
:root.light-mode .uk-navbar-toggle {
	color: var(--text) !important;
}

/* papera switch */
:root.light-mode .switch-mode svg path {
	fill: var(--text) !important;
}

/* menu mobile offcanvas / modal */
:root.light-mode .uk-offcanvas-bar,
:root.light-mode .uk-modal-dialog {
	background-color: var(--bg) !important;
}

:root.light-mode .uk-offcanvas-bar .menu-item > a,
:root.light-mode .uk-modal-dialog .menu-item > a,
:root.light-mode .uk-offcanvas-bar .uk-nav li a,
:root.light-mode .uk-modal-dialog .uk-nav li a {
	color: var(--text) !important;
}


/* ---- 9. PROGETTO: Detail Panel ---- */

#detail-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 50vw;
	height: 100vh;
	background: var(--bg);
	z-index: 1000;
	transform: translateX(100%);
	will-change: transform;
	overflow-y: auto;
	border-left: 1px solid var(--text-secondary);
}

#detail-panel-close {
	position: absolute;
	top: 24px;
	right: 24px;
	background: none;
	border: none;
	color: var(--text);
	font-size: 32px;
	cursor: pointer;
	line-height: 1;
	z-index: 1;
}

.detail-panel-content {
	padding: 80px 60px 60px;
	color: var(--text);
}

.detail-panel-meta {
	margin-top: 60px;
	display: flex;
	gap: 40px;
}

.detail-meta-item h4 {
	text-transform: uppercase;
	font-weight: 600;
	font-size: 12px;
	letter-spacing: 0.05em;
	margin-bottom: 8px;
	color: var(--text-secondary);
}

.detail-meta-item p {
	color: var(--text);
	margin: 0;
}

.page-shrink .tm-page {
	width: 50vw;
	transform-origin: left top;
	overflow: hidden;
}
.detail-rassegna-stampa{
	color: var(--text)!important;
}
.detail-team li:nth-child(n+2){
	border-top: 1px solid var(--text) !important;
}
.detail-panel-desc a{
	    color: var(--text);
    border-bottom: 1px solid var(--text);
	
}
.detail-risorse-icons svg{
	color: var(--text)!important;
}
.detail-risorse-icons a{
	transform:none!important;
	animation:none!important;
}
/* ---- 10. PROGETTO: Custom Cursors ---- */

/* next project */
.cursor-next {
	position: fixed;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: var(--text);
	color: var(--bg);
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	pointer-events: none;
	z-index: 9999;
	transform: scale(0);
	opacity: 0;
	will-change: transform, opacity;
}

.cursor-next svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
}

#related-project-img {
	cursor: none;
}


/* ---- 11. HORIZONTAL SCROLL SECTION ---- */

#horizontal-section {
	overflow: hidden;
	position: relative;
}

#horizontal-section > div {
	position: relative;
	width: 100%;
	max-width: none;
	padding: 0;
	height: calc(100vh - 120px);
}

#horizontal-section > div > .uk-grid {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100%;
	will-change: transform;
}

#horizontal-section > div > .uk-grid:nth-child(1) { z-index: 1; }
#horizontal-section > div > .uk-grid:nth-child(2) { z-index: 2; }
#horizontal-section > div > .uk-grid:nth-child(3) { z-index: 3; }

#horizontal-section .uk-grid > :first-child {
	width: auto !important;
	flex: none !important;
}

#horizontal-section .uk-grid > :last-child {
	flex: 1 !important;
	width: auto !important;
}

.h-number span {
	font-family: 'Satoshi', sans-serif;
	font-weight: 700;
	color: var(--text);
	line-height: 0.72;
	display: block;
}

@media (max-width: 960px) {
	#horizontal-section > div > .uk-grid {
		flex-direction: column !important;
		flex-wrap: nowrap !important;
		padding: 24px;
		box-sizing: border-box;
		overflow: hidden;
	}

	#horizontal-section > div > .uk-grid > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: none !important;
	}

	#horizontal-section .uk-grid > :first-child {
		width: 100% !important;
		margin-bottom: 16px;
	}

	#horizontal-section .h-number span {
		line-height: 0.75;
	}
	#horizontal-section > div > .uk-grid > :first-child {
		order: 2;
	}

	#horizontal-section > div > .uk-grid > :last-child {
		order: 1;
	}
	#horizontal-section > div > .uk-grid {
		height: auto !important;
		min-height: calc(100vh - 80px);
	}
}
/* ---- TRAIL SECTION ---- */
.mousetrail {
	position: fixed;
	pointer-events: none;
	z-index: 9999;
	opacity: 0;
	transform: scale(0.8);
	will-change: transform, opacity;
	display: flex;
	align-items: flex-end;
	gap: 16px;
}

.mousetrail .trail-img {
	width: 120px !important;
	height: auto;
	border-radius: 8px;
}

/* dimming delle righe non attive */
[id^="trail-"].trail-dimmed {
	opacity: 0.2;
	transition: opacity 0.4s ease;
}

[id^="trail-"] {
	opacity: 0.2;
	transition: opacity 0.4s ease;
}

[id^="trail-"].trail-active {
	opacity: 1;
}
[id^="trail-"] > div{
	text-align:center;
}
[id^="trail-"] h3 {
	display: inline-block;
	width: auto;
}

/* mobile: immagine inline */
@media (max-width: 960px) {
  .mousetrail {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

	.mousetrail .el-content,
	.mousetrail p {
		display: none;
	}
}

.artwall-form button > span{
	height:14px;
}


/* ---- MOBILE MENU CUSTOM ---- */
.mobile-menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 9990;
  background: var(--bg);
  transform-origin: top right;
  transform: scale(0);
  opacity: 0;
  display: flex;
  flex-direction: column;
  padding: 100px 30px 40px;
  overflow-y: auto;
}

.mobile-menu-overlay .mobile-menu-items {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.mobile-menu-overlay .mobile-menu-items a {
  display: block;
  font-size: 32px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  padding: 10px 0;
}

.mobile-menu-overlay .mobile-menu-line {
  overflow: hidden;
}

.mobile-menu-overlay .mobile-menu-line-inner {
  transform: translateY(100%);
  will-change: transform;
}

.mobile-menu-overlay .mobile-menu-widgets {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 40px;
  opacity: 0;
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text);
  font-size: 28px;
  cursor: pointer;
  z-index: 1;
  line-height: 1;
}
.uk-dropbar.uk-drop {
  display: none !important;
}
.uk-input, .uk-textarea{
	border-color:var(--text)!important;
}



/* CONTACT FORM 7 FIX */
.cf7-custom-spinner {
  display: block;
  width: 20px;
  height: 20px;
  margin-left: 10px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  position: relative;
  right: -30px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.cf7-btn-disabled {
  opacity: 0.5 !important;
  pointer-events: none;
}



/* ---- 12. RESPONSIVE ---- */

@media (max-width: 960px) {
	.uk-heading-xlarge {
		letter-spacing: -1px;
	}

	/* detail panel mobile */
	#detail-panel {
		width: 100vw;
	}

	.page-shrink .tm-page {
		width: 100vw;
		transform: scale(0.95);
		transform-origin: left center;
	}

	.detail-panel-meta {
		flex-direction: column;
		gap: 24px;
	}

	.detail-panel-content {
		padding: 60px 24px 120px;
	}

	/* horizontal scroll: stack verticale */
	#horizontal-section > div {
		flex-direction: column;
		width: 100%;
	}
}
@media (max-width: 680px) {
	.uk-text-lead{
		font-size:16px;
	}
}