/* =========================
   WHITE PACK
   CSS PULITO
========================= */


/* =========================
   VARIABILI
========================= */

:root {
  --site-nav-height: 0px;

  --bg-main: #0b0f0e;
  --bg-dark: #111;

  --text-main: #eaeaea;

  --accent: #c9a96e;
}


/* =========================
   RESET BASE
========================= */

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.7;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}


/* =========================
   TIPOGRAFIA
========================= */

h1,
h2,
h3 {
  font-family: "Playfair Display", serif;
  font-weight: 500;
  letter-spacing: 0.5px;
  line-height: 1.2;
}

p {
  font-weight: 300;
  opacity: 0.88;
}


/* =========================
   NAV PAGINE INTERNE
========================= */

.main-nav {

  display: flex;
  justify-content: center;
  align-items: center;

  gap: 28px;

  padding: 22px 8%;

  background: var(--bg-main);
}


.main-nav a,
.hero-nav a {

  font-family: "Inter", sans-serif;

  color: #fff;
  text-decoration: none;

  font-size: 1rem;
  letter-spacing: 1px;

  opacity: 0.9;

  transition: opacity .3s ease;
}


.main-nav a:hover,
.hero-nav a:hover {

  opacity: 1;

}


.main-nav a:visited {

  color: var(--text-main);

}


.main-nav a.active {

  opacity: 1;

  border-bottom:
  1px solid rgba(255,255,255,.5);

}


/* =========================
   HERO GENERALE
========================= */

.hero-global {

  position: relative;

  height: 100vh;

  overflow: hidden;

  margin-bottom: 120px;

}


.hero-global video {

  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index:0;

}


.overlay {

  position:absolute;

  inset:0;

  background:rgba(0,0,0,.45);

  z-index:1;

  pointer-events:none;

}


/* =========================
   HERO CONTENT
========================= */

.hero-global .content {

  position:absolute;

  top:13%;
  right:8%;

  z-index:2;


  display:flex;

  flex-direction:column;

  align-items:flex-end;

  gap:6px;


  text-align:right;

  color:white;

  max-width:600px;

}


.hero-global .content h1 {

  margin:0;

  font-size:
  clamp(2.5rem,4vw,4.5rem);

  line-height:1.1;

  white-space:nowrap;

}


.hero-global .content p {

  margin:0;

  font-size:1.1rem;

  letter-spacing:2px;

  text-transform:uppercase;

  opacity:.85;

}


/* =========================
   HERO NAV
========================= */

.hero-nav {

  display:flex;

  flex-direction:column;

  gap:10px;

  margin-top:18px;

  align-items:flex-end;

  padding:0;

}


/* =========================
   SOCIAL HERO
========================= */

.hero-social {

  position:absolute;

  top:3%;

  right:8%;

  z-index:3;


  display:flex;

  gap:16px;

}


.hero-social a {

  opacity:.8;

  transition:opacity .3s ease;

}


.hero-social a:hover {

  opacity:1;

}


.hero-social svg {

  width:22px;

  height:22px;

  fill:white;

}


/* =========================
   HOME CHAPTER
========================= */


.chapter {

  position:relative;

  min-height:100vh;

  overflow:hidden;


  display:flex;

  align-items:flex-end;

  justify-content:flex-start;


  margin-bottom:140px;


  border-top:
  1px solid rgba(255,255,255,.06);


  padding:80px 10%;

  z-index:0;

}



.chapter::before {

  content:"";

  position:absolute;

  inset:0;


  background:
  linear-gradient(
    to top,
    rgba(0,0,0,0),
    rgba(0,0,0,0)
  );


  z-index:1;

  pointer-events:none;

}



.chapter-text {

  transform:translateX(-70px);


  position:relative;

  z-index:2;


  max-width:720px;


  color:white;


  padding-left:40px;

  padding-bottom:30px;

}



.chapter-text::before {

  content:"";


  position:absolute;


  left:-130px;

  top:-25px;

  bottom:-25px;


  width:160%;


  background:
  linear-gradient(
    to right,
    rgba(0,0,0,.80),
    rgba(0,0,0,.60) 50%,
    rgba(0,0,0,0)
  );


  z-index:-1;

  border-radius:6px;

}



.media {

  position:absolute;

  inset:0;


  width:100%;

  height:100%;


  object-fit:cover;


  transform:scale(1.02);


  z-index:0;

}


.chapter-text h2 {

  font-size:
  clamp(4.5rem,8vw,6.5rem);


  margin:0 0 10px;


  letter-spacing:1px;


  text-shadow:
  0 10px 30px rgba(0,0,0,.35);

}


.chapter-text p {

  font-size:1.25rem;

  line-height:1.9;


  max-width:560px;


  margin:0 0 18px;

}


.chapter-text a {

  color:white;

  text-decoration:none;

  border-bottom:
  1px solid rgba(255,255,255,.4);

  padding-bottom:4px;

}


/* =========================
   SEZIONI GENERALI
========================= */

.section {

  padding:80px;

}


.section.dark {

  background:var(--bg-dark);

}


/* =========================
   PHOTO / EPISODE BLOCK
========================= */


.photo-block,
.episode-block {

  display:flex;

  align-items:center;


  gap:60px;


  padding:80px 12%;

}


.photo-block.reverse,
.episode-block.reverse {

  flex-direction:row-reverse;

}


.photo-block img,
.episode-block img {

  width:60%;

  object-fit:cover;

}


.photo-text,
.episode-block div {

  width:40%;

}

/* =========================
   GALLERIA
========================= */

.gallery {

  display:flex;

  flex-direction:column;

  gap:40px;

}


.caption {

  opacity:.7;

  max-width:700px;

}


/* GRID GALLERY */

.gallery-grid {

  max-width:1500px;

  margin:80px auto;

  padding:0 4%;


  display:grid;

  grid-template-columns:repeat(4,1fr);

  grid-auto-rows:220px;

  gap:22px;

}


.gallery-img {

  width:100%;

  height:100%;

  object-fit:cover;


  cursor:pointer;


  opacity:0;

  transform:scale(1.02);


  animation:
  galleryFadeIn .8s ease forwards;


  transition:transform .35s ease;

}


.gallery-img:hover {

  transform:scale(1.02);

}


.gallery-img.large {

  grid-column:span 2;

  grid-row:span 2;

}


.gallery-img.wide {

  grid-column:span 2;

}


.gallery-img.tall {

  grid-row:span 2;

}


@keyframes galleryFadeIn {

  to {

    opacity:1;

    transform:scale(1);

  }

}


/* HERO GALLERIA */

.gallery-hero {

  position:relative;

  height:70vh;

  overflow:hidden;

}


.gallery-hero img {

  position:absolute;

  inset:0;


  width:100%;

  height:100%;


  object-fit:cover;

}



.gallery-hero-overlay {

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0);

  z-index:1;

}



.gallery-hero-content {

  transform:translateX(-40px);


  position:absolute;


  left:3%;

  bottom:10%;


  max-width:650px;


  color:white;


  padding:35px 55px 35px 45px;


  z-index:2;

}



.gallery-hero-content::before {

  content:"";


  position:absolute;


  left:-80px;

  top:-25px;

  bottom:-25px;


  width:160%;


  background:
  linear-gradient(
    to right,
    rgba(0,0,0,.80),
    rgba(0,0,0,.80) 58%,
    rgba(0,0,0,0) 80%
  );


  z-index:-1;

  border-radius:6px;

}


.gallery-hero-content h1 {

  font-size:
  clamp(4rem,7vw,6rem);


  margin:0 0 15px;

}


.gallery-hero-content p {

  font-size:1.2rem;

  line-height:1.9;

}


/* THUMB GALLERY PROGETTO */

.gallery-scroll {

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(180px,1fr));


  gap:14px;

  width:100%;

  overflow:hidden;

}


.gallery-scroll img {

  width:100%;

  height:150px;

  object-fit:cover;

  cursor:pointer;

  transition:transform .25s ease;

}


.gallery-scroll img:hover {

  transform:scale(1.03);

}


.project-thumb-gallery {

  display:grid;

  grid-template-columns:
  repeat(auto-fit,minmax(180px,1fr));


  gap:14px;

  margin-top:25px;

}


.project-thumb-gallery img {

  width:100%;

  height:160px;

  object-fit:cover;

  cursor:pointer;

  transition:transform .25s ease;

}


.project-thumb-gallery img:hover {

  transform:scale(1.05);

}


/* =========================
   LIGHTBOX
========================= */

.lightbox {

  position:fixed;

  inset:0;


  background:
  rgba(0,0,0,.92);


  display:none;


  align-items:center;

  justify-content:center;


  z-index:9999;


  opacity:0;


  transition:opacity .25s ease;

}


.lightbox.show {

  opacity:1;

}


.lightbox img {

  max-width:90vw;

  max-height:80vh;

}


.lightbox-content {

  text-align:center;

  max-width:90%;

}


.lightbox p {

  margin-top:12px;

  color:white;

  font-size:.95rem;

  opacity:.75;

}


.lightbox-prev,
.lightbox-next {

  position:absolute;

  top:50%;


  transform:translateY(-50%);


  background:none;

  border:none;


  color:white;

  font-size:4rem;


  cursor:pointer;


  opacity:.45;

}


.lightbox-prev:hover,
.lightbox-next:hover {

  opacity:1;

}


.lightbox-prev {

  left:40px;

}


.lightbox-next {

  right:40px;

}


/* =========================
   PAGINA PROGETTO
========================= */


.project-hero {

  position:relative;

  height:100vh;

  overflow:hidden;

}


.project-video {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  z-index:1;

}



.project-title {

  position:absolute;


  left:4%;

  top:76%;


  transform:translateY(-50%);


  max-width:650px;


  min-height:180px;


  display:flex;

  flex-direction:column;

  justify-content:center;

  align-items:flex-start;


  padding-right:45px;


  color:white;


  z-index:3;

}



.project-title::before {

  content:"";


  position:absolute;


  inset:-30px -120px;


  background:
  linear-gradient(
    to right,
    rgba(0,0,0,.82),
    rgba(0,0,0,.55) 45%,
    rgba(0,0,0,0)
  );


  z-index:-1;

}


.project-title h1 {

  font-size:4rem;

  margin:0;

}


.project-title p {

  opacity:.85;

  letter-spacing:2px;

}


.project-section {

  padding:100px 10%;

 
}



.project-section h2 {

  margin-bottom:20px;

}


.project-section p {

  line-height:1.9;

}



.story-text p {

  line-height:1.8;

}


.story-media img {

  width:100%;

  border-radius:12px;

}

.project-index {

  max-width:900px;

  margin:60px auto;

  text-align:center;

}


.project-index h3 {

  margin-bottom:20px;

  font-size:1.2rem;

  letter-spacing:1px;

}


.project-index ul {

  list-style:none;

  padding:0;


  display:flex;

  flex-wrap:wrap;

  gap:15px;


  justify-content:center;

}


.project-index a {

  display:inline-block;


  padding:8px 14px;


  border:1px solid #333;


  border-radius:20px;


  text-decoration:none;


  color:#222;


  transition:.3s ease;


  font-size:.9rem;

}


.project-index a:hover {

  background:#111;

  color:#fff;

}



.project-divider {

  max-width:1200px;

  margin:80px auto;

  padding:30px;


  text-align:center;


  border-top:1px solid #2b2b2b;

  border-bottom:1px solid #2b2b2b;

}





/* =========================
   PAGINA CHI SONO / BIO
========================= */


.bio {

  max-width:750px;

  margin:0 auto;

  padding:80px 20px;

}


.bio h1,
.bio h2 {

  text-align:center;

  margin-bottom:40px;

}


.bio-text {

  text-align:center;

  margin:40px 0;

}


.bio-text p {

  text-align:justify;

  text-align-last:center;

  line-height:1.9;

  font-size:1.05rem;

}


.bio-image {

  display:block;

  width:80%;

  max-width:600px;


  margin:50px auto;

}



.bio-strip {

  display:flex;

  gap:15px;


  justify-content:center;

  align-items:center;


  margin:60px auto;

  max-width:900px;

}



.bio-strip img {

  width:33.3%;

  height:220px;


  object-fit:cover;


  filter:
  contrast(1.05)
  brightness(.95);


  transition:transform .3s ease;

}


.bio-strip img:hover {

  transform:scale(1.03);

}


/* blocco storia Bianca */

.bianca-story {

  max-width:900px;

  margin:80px auto;

  padding:0 20px;


  display:flex;

  flex-direction:column;


  gap:90px;

}


.bianca-shot img {

  width:100%;

}


.bianca-shot figcaption {

  margin-top:12px;

  font-size:.9rem;

  opacity:.7;

  text-align:center;

}

.page-chi-sono .chi-sono-hero {

  position:relative;

  height:100vh;

  width:100%;

  overflow:hidden;

}


.page-chi-sono .project-video {

  position:absolute;

  inset:0;

  width:100%;

  height:100%;

  object-fit:cover;

  z-index:1;

}


.page-chi-sono .project-overlay {

  position:absolute;

  inset:0;

  background:rgba(0,0,0,0);

  z-index:2;

}


.page-chi-sono .project-title {

  z-index:3;

}


/* =========================
   ATTIVITA'
========================= */


.activity-block {

  display:flex;


  gap:60px;


  align-items:flex-start;


  padding:90px 10%;

}


.activity-block.reverse {

  flex-direction:row-reverse;

}


.activity-text {

  width:45%;

}



.activity-media-grid {

  width:55%;


  display:grid;

  grid-template-columns:repeat(2,1fr);


  gap:12px;

}



.activity-media-grid img {

  width:100%;

  height:240px;


  object-fit:cover;


  transition:transform .3s ease;

}


.activity-media-grid img:hover {

  transform:scale(1.03);

}




/* =========================
   CONTATTI
========================= */


.contact-form {

  max-width:650px;

  margin:60px auto;


  padding:40px;


  background:#0f1413;


  border-radius:8px;


  border:
  1px solid rgba(255,255,255,.08);


  display:flex;

  flex-direction:column;


  gap:25px;

}



.contact-form input,
.contact-form textarea {

  width:100%;


  padding:14px 16px;


  background:#111;


  border:
  1px solid #333;


  border-radius:6px;


  color:#eaeaea;


  font-size:1rem;

}



.contact-form input:focus,
.contact-form textarea:focus {

  border-color:var(--accent);

  outline:none;

}



.contact-form button {

  padding:14px 20px;


  background:var(--accent);


  color:#111;


  border:none;


  border-radius:6px;


  cursor:pointer;


  letter-spacing:1px;

}



.contact-form button:hover {

  background:#eaeaea;

}



.contact-success,
.contact-error {

  max-width:650px;


  margin:80px auto;


  padding:40px;


  background:#111;


  border-left:
  4px solid var(--accent);


  border-radius:6px;


  text-align:center;

}


.contact-success h2,
.contact-error h2 {

  font-family:
  "Playfair Display",serif;

  font-size:2rem;

}


#confirmBox {

  animation:
  confirmFadeIn .6s ease forwards;

}


@keyframes confirmFadeIn {

  from {

    opacity:0;

    transform:translateY(10px);

  }

  to {

    opacity:1;

    transform:translateY(0);

  }

}


/* =========================
   FOOTER
========================= */


footer {

  padding:80px;

  text-align:center;

  opacity:.4;

  font-size:.8rem;

}


.gallery-footer {

  padding:60px 20px;

  text-align:center;

  opacity:.5;

  font-size:.85rem;

  letter-spacing:1px;

}


/* =========================
   LINK GENERALI
========================= */


.section a {

  color:inherit;

  text-decoration:none;


  border-bottom:
  1px solid rgba(255,255,255,.35);

}


.section a:hover {

  opacity:.8;

}


/* =========================
   RESPONSIVE UNIFICATO
========================= */


@media (max-width:900px) {


/* HERO */

.hero-global .content {

  top:10%;

  right:6%;

}


.hero-global .content h1 {

  white-space:normal;

}


.hero-nav {

  align-items:flex-end;

}



/* CHAPTER */

.chapter {

  padding:60px 6%;

  margin-bottom:100px;

}



.chapter-text {

  transform:none;

  padding-left:20px;

  padding-right:20px;

}


.chapter-text::before {

  left:-50px;

  width:130%;

}


.chapter-text h2 {

  font-size:
  clamp(2.8rem,12vw,4rem);

}



/* BLOCCHI FOTO */

.photo-block,
.episode-block,
.photo-block.reverse,
.episode-block.reverse {


  flex-direction:column;

}


.photo-block img,
.episode-block img,
.photo-text,
.episode-block div {


  width:100%;

}



/* GALLERY */

.gallery-grid {

  grid-template-columns:
  repeat(2,1fr);

  grid-auto-rows:180px;

}


.gallery-img.large,
.gallery-img.wide,
.gallery-img.tall {


  grid-column:span 1;

  grid-row:span 1;

}


/* GALLERY HERO */

.gallery-hero {

  height:55vh;

}


.gallery-hero-content {


  left:3%;

  right:3%;


  max-width:
  calc(100% - 6%);


  padding:18px 20px;


  transform:none;

}


.gallery-hero-content h1 {

  font-size:
  clamp(1.8rem,6.5vw,2.8rem);

}



/* BIO */

.bio-strip {

  flex-direction:column;

}


.bio-strip img {

  width:100%;

  height:auto;

}



/* ATTIVITA' */

.activity-block,
.activity-block.reverse {

  flex-direction:column;

}


.activity-text,
.activity-media-grid {

  width:100%;

}


.activity-media-grid {

  grid-template-columns:1fr;

}


.activity-media-grid img {

  height:auto;

}



/* PROJECT */

.project-title {

  left:4%;

  right:4%;


  max-width:none;


  padding:25px 20px;

}


.project-title h1 {

  font-size:2.5rem;

}


/* SECTION */

.section {

  padding:60px 6%;

}


/* FOOTER */

footer {

  padding:40px 20px;

}



}



@media (max-width:600px) {


.gallery-grid {

  grid-template-columns:1fr;

}


.hero-social {

  right:5%;

}


.project-title h1 {

  font-size:2rem;

}


.section {

  padding:50px 5%;

}


}