/*
Theme Name: Nius Theme Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
:root{
  --blu: #27374F;
  --rosso: #A6192E;
  --bianco: #fff;
  --giallo: #ffd900;
  --bggrey:#D5D5E3;
  --sezioni: 120px;
  --paragrafi: 32px;
  --fs-h1: clamp(2.2rem, 4vw, 3.1rem);
  --fs-h2: clamp(1.8rem, 3vw, 2.3rem);
  --fs-h3: clamp(1.4rem, 2.2vw, 1.7rem);
  --fs-p: clamp(1rem, 1.2vw, 1.1rem);
  --fs-cta: clamp(1.1rem, 1.5vw, 1.3rem);
}
/* Setting FONT */
@font-face {
  font-family: 'Manrope';
  src: url('/wp-content/themes/nius-theme-child/fonts/Manrope-VariableFont_wght.ttf') format('truetype');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
html {
  font-size: 18px;
  font-family: 'Manrope', sans-serif;
}
body{
  font-family: 'Manrope', sans-serif;
}
.container, .row{
  margin-left: 0;
  margin-right: 0;
  padding-left: 35px;
  padding-right: 35px;
}
.plr-0{
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.row{
  max-width: 100% !important;
}
#masthead .logo-left{
  padding-left: 50px;
  padding-right: 50px;
}
#masthead .nav-dropdown{
  min-width: 350px !important;
}
#masthead .nav-dropdown.nav-dropdown-default>li>a{
  border-bottom: inherit;
}
.title-h1, h1{
  font-size: var(--fs-h1);
  font-weight: 700;
}
.title-h2, h2{
  font-size: var(--fs-h2);
  font-weight: 500;  
}
.title-h3, h3{
  font-size: var(--fs-h3);
  font-weight: 700;  
}
p{
  font-size: var(--fs-p);
  font-weight: 500;
}
.button, .cta{
  font-size: var(--fs-cta);
  background-color: var(--rosso) !important;
  color: var(--bianco);
  border-radius: 48px !important;
  margin-bottom: 0;
  margin-right: 0;
}
p, .title-h3, h3, .title-h2, h2, .title-h1, h1{
  color: var(--blu);
  margin-bottom: 0;
}
h2 + p, p + a.button{
  margin-top: var(--paragrafi);
}
.section{
  padding-top: var(--sezioni) !important;
  padding-bottom: var(--sezioni) !important;
}
.section-small{
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}
.ptop-0{
  padding-top: 0 !important;
}
.pbottom-0{
  padding-bottom: 0 !important;
}
.radius-image-dx img{
  border-radius: 8px 8px 210px 8px;
}
.radius-image-sx img{
  border-radius: 8px 8px 8px 210px;
}
.section-divider {
  width: 100%;
}
.giallo{
  color: var(--giallo);
}
.bianco, .p-retro-card{
  color: var(--bianco);
}
.label {
  display: block;
  text-align: right;
  margin-bottom: 8px;
  font-weight: 500;
}
/* linea composta */
.line {
  display: flex;
  width: 100%;
  height: 4px;
}
/* parte sottile */
.line::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--blu);
  align-self: center;
}
/* parte spessa (a destra) */
.line::after {
  content: "";
  width: 120px;
  height: 4px;
  background: var(--blu);
}
.row.divisore{
  padding-top: 18px;
  margin-top: 0 !important;
  max-width: 100% !important;
}
.bg-grey{
  background: var(--bggrey);
}
.divisore .col{
  padding-bottom: 0 !important;
}
.wpcf7-form{
  margin-bottom: 0;
}
.center{
  text-align: center;
}
.wpcf7-submit{
  margin-right: 0 !important;
}
/*CSS PRELOADER */
/* FULL SCREEN BLU + blocco scroll */ 
#preloader { 
  position: fixed;
  inset: 0;
  background: var(--blu);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999; 
} 

body.preloader-active { 
  overflow: hidden; 
} 
.preloader-reveal { 
  background: transparent; 
} 
/* CONTENITORE SVG */ 
.preloader-inner { 
  width: 40%; /* adattalo alla dimensione del tuo SVG */ 
} 

/* LETTERE NIUS */ 
#letter-n, 
#letter-i, 
#letter-u, 
#letter-s { 
  fill: transparent; /* invisibili inizialmente */ 
  transition: fill 0.5s ease; 
} 
/* accensione sequenziale in giallo */ 
.letter-on { 
  fill: #ffdd00 !important; 
} 
/* cambio colore da giallo a bianco */ 
.letter-white { fill: #ffffff !important; }

/* SEGNO GRAFICO E PAYOFF */
#mark {
  opacity: 0; transform: translateY(-180px) rotate(180deg); /* parte sopra e ruotato */
  transform-box: fill-box; /* importante per SVG */
  transform-origin: center; /* ruota attorno al centro del path o g */ 
} 
/* classe per animare il segno */ 
.mark-animate { 
  animation: mark-enter 0.35s forwards cubic-bezier(0.4, 0, 0.2, 1); 
  opacity: 1 !important; 
}
.mark-expand { 
  animation: mark-expand-full 1.4s forwards cubic-bezier(0.7, 0, 0.2, 1); 
} 
@keyframes mark-enter { 
  0% { 
    transform: translateY(-60px) rotate(130deg); 
  } 
  100% { 
    transform: translateY(0) rotate(0deg); 
  } 
} 
@keyframes mark-expand-full { 
  /* 🔵 stato normale */ 
  0% { 
    transform: translate(0, 0) scale(1); 
  } 
  /* 💥 esplosione */ 
  35% { 
    transform: translate(0, 0) scale(22); 
  } /* 
  🎯 inizio movimento (ancora grande) */ 
  55% { 
    transform: translate(-200px, 120px) scale(10); 
  } 
  /* 🚶 movimento + riduzione VISIBILE */ 
  75% { 
    transform: translate(-600px, 450px) scale(3); 
  } 
  /* 🧼 sparizione finale */ 
  100% { 
    transform: translate(-1000px, 600px) scale(0.01); 
  } 
} 
/* PAYOFF */ 
#payoff { 
  opacity: 0; transform: translateY(0); /* non si muove */ 
} 
#letters, #payoff { 
  transition: opacity 0.5s ease; 
} 
.preloader-fade { 
  opacity: 0; transition: opacity 0.8s ease; pointer-events: none; 
}

/* FINE PRELOADER */

.flip-card-front::before{
	content: "";
	position: absolute;
	inset: 0;
	background-image: url(https://www.nius.sviluppo.host/wp-content/uploads/trasparenza-front.jpg);
	background-repeat: no-repeat;
	background-position: center;
	z-index: 0;
	opacity: 1;
  border-radius: 32px;
	/* FIX SAFARI */
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	transform: translateZ(1px);
}

.card-original{
	background-image: url(https://www.nius.sviluppo.host/wp-content/uploads/trasparenza-front.jpg);
}
/* Solo la prima card ha sfondo normale (già fatto con .card-original) */
.card-original::before {
	display: none;
}

.flip-card-front > * {
	position: relative;
	z-index: 1;
}

/* FIX SAFARI: front crea layer 3D corretto */
.flip-card-front {
	position: relative;
	transform: translateZ(2px);
}

.flip-card-front,
.flip-card-back{
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 32px;
	justify-content: center;
	align-items: center;
	text-align: center;
	display: flex;	
}
.flip-card-back{
  background-color: var(--blu);
}
.flip-card {
	background-color: transparent;
	width: auto;
	height: 268px;
	/* perspective: 1000px; */
}

.flip-card-inner {
	position: relative;
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	-webkit-transform-style: preserve-3d;
	transition: transform 1.5s ease;

	/* MIGLIORA SAFARI */
	will-change: transform;
}

/* Hover desktop */
.flip-card:hover .flip-card-inner {
	transform: rotateY(180deg);
}

/* Mobile click */
.flip-card.flipped .flip-card-inner {
	transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	padding: 10px;
}

.flip-card-back p{
	font-size: var(--fontsmall);
	font-weight: 400;
}

.flip-card-back {
	transform: rotateY(180deg);
}

/* Nascondi testo frontale quando la card è girata */
.flip-card.safari:hover .flip-card-front > *,
.flip-card.safari.flipped .flip-card-front > * {
  display: none;
}
.gradient-blu .banner-layers{
  background: linear-gradient(270deg, rgba(39, 55, 79, 0) 0%, #27374F 100%);
  margin: 0;
}

.bg-blu{
  background-color: var(--blu);
}
/* SEZIONE SERVIZI + VIDEO */
.nius-video-section {
  display: flex;
  flex-wrap: wrap;
}
/* colonna sx */
.nius-left {
  width: 33.333%; /* 5/12 */
  background: var(--blu);
  position: relative;
}
.nius-left-inner {
  padding: 400px 50px 20px;
}

/* FULL BLEED SX */
.nius-left::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100vw;
  width: 100vw;
  height: 100%;
  background: var(--blu);
}

/* link */
.nius-link {
  display: block !important;
  color: white !important;
  margin-bottom: 20px !important;
  text-decoration: none !important;
  opacity: 0.6 !important;
  transition: all 0.3s ease !important;
  font-size: 24px !important;
}
.nius-link.active {
  opacity: 1;
  transform: translateX(10px);
}
.nius-link:hover{
  color: var(--bianco);
}

/* colonna dx */
.nius-right {
  width: 66.667%; /* 7/12 */
  position: relative;
  overflow: hidden;
  border-radius: 0 210px 0 0;
}

/* FULL BLEED DESTRA */
.nius-right::after {
  content: "";
  position: absolute;
  top: 0;
  right: -100vw;
  width: 100vw;
  height: 100%;
  background: var(--blu);
  z-index: -1;
}

/* VIDEO */
.nius-video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.nius-video.active {
  opacity: 1;
  z-index: 2;
}
.nius-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.team-video{
  border-radius: 8px 8px 80px 8px;
}
.nius-cta {
  position: absolute;
  bottom: 40px;
  right: 40px;
  width: 64px;
  height: 64px;
  border-radius: 50%;

  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  z-index: 5;

  /* REFRACTION */
  background: rgba(255, 255, 255, 0.12);

  /* FROST */
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);

  /* DEPTH */
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  /* BORDER (luce diffusa / splay) */
  border: 1px solid rgba(255, 255, 255, 0.25);

  transition: all 0.4s ease;
}

/* DISPERSION + SPLAY (luce interna) */
.nius-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: linear-gradient(
    140deg,
    rgba(255,255,255,0.45) 0%,
    rgba(255,255,255,0.15) 30%,
    rgba(255,255,255,0.05) 60%,
    rgba(255,255,255,0.25) 100%
  );

  opacity: 0.6;
  pointer-events: none;
}

/* highlight dinamico (dispersion più realistica) */
.nius-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;

  background: radial-gradient(
    circle at 30% 30%,
    rgba(255,255,255,0.6),
    transparent 60%
  );

  opacity: 0.5;
  pointer-events: none;
}

/* freccia */
.nius-cta .arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.nius-cta svg {
  width: 26px;
  height: 26px;
  transition: transform 0.35s ease;
}
/* hover */

.nius-cta:hover .arrow {
  transform: translateX(6px);
}

#footer .text p{
  font-size: 16px;
}
.button .icon-angle-right {
  width: 1em;
  height: 1em;
  background-color: currentColor;
  -webkit-mask-image: url(/wp-content/uploads/arrow.svg);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
  mask-image: url(/wp-content/uploads/arrow.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/
  :root{
    --sezioni: 88px;
  }
  #logo img {
      padding: 12px 0;
  }  
  .container, .row{
    padding-left: 15px;
    padding-right: 15px;
  }
  #masthead .logo-left{
    padding-left: 30px;
    padding-right: 30px;
  }
  .flip-card-front .icon-box-text h3{
    font-size: 22px;
  }
  .flip-card{
    height: 240px;
  }
  .radius-image-sx img{
    border-bottom-left-radius: 150px;
  }
  .radius-image-dx img{
    border-bottom-right-radius: 150px;
  }
  #contatto{
    display: grid !important;
  }
  #contatto .col{
    padding: 0 0 15px;
  }
  #contatto .col input,
  .wpcf7-list-item [type=checkbox]{
    margin-bottom: 0;
  }
  .wpcf7 span.wpcf7-list-item{
    margin-right: 0;
  }  
}

@media screen and (min-width: 850px) {
	.col.medium-6, .col-large-6,
	.col.medium-8,
	.col.medium-4,
	.col{
		padding-bottom: 0 !important;
	}
  .sticky-text {
    position: relative;
  }
  .sticky-text .col-inner {
    position: sticky;
    top: 100px; /* distanza dall’alto (header incluso) */
  }  
}

/* MOBILE */
@media (max-width: 850px) {
  .nius-left,
  .nius-right {
    width: 100%;
  }
  .nius-left::before,
  .nius-right::after {
    display: none;
  }
  .nius-left-inner {
    padding: 40px 20px;
  }
  .nius-right {
    height: 300px;
  }
}

/* MOBILE SMALL */
@media (max-width: 450px) {
  .button, .cta{
    font-size: 18px;
  }
}