:root{
  --pink:#FFD1EA;
  --blue:#001BFF;
  --hover:#FF7AC8;
}

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

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}

body{
  background:#FFEAF1;
}

/* =========================
   FONTS
========================= */

@font-face{
  font-family:"New Spirit";
  src:url("./fonts/newspirit-regular.woff2") format("woff2"),
      url("./fonts/newspirit-regular.woff") format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"New Spirit Bold";
  src:url("./fonts/newspirit-bold.woff2") format("woff2"),
      url("./fonts/newspirit-bold.woff") format("woff");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* =========================
   TYPO SCALE
========================= */

html{
  font-size:16px;
}

@media (max-width:768px){
  html{ font-size:14px; }
}

@media (max-width:480px){
  html{ font-size:13px; }
}

/* =========================
   HOME BACKGROUND
========================= */

.home{
  overflow:hidden;
}

.bg{
  position:fixed;
  inset:0;
  background:url("./images/cover.png") center/cover no-repeat;
  z-index:0;
}

/* =========================
   COVER TEXT
========================= */

.cover-text{
  position:fixed;
  top:50%;
  left:40px;
  transform:translateY(-60%);
  width:min(600px, 40vw);
  z-index:2;
  pointer-events:none;
}

/* =========================
   WORK MENU
========================= */

.work{
  position:absolute;
  top:20px;
  left:40px;
  z-index:10;
}

.menu-group{
  display:flex;
  flex-direction:column;
}

.work-title{
  font-family:"New Spirit Bold";
  font-weight:700;
  font-size:1.2rem;
  color:var(--pink);
  margin-bottom:2px;
  cursor:pointer;
  transition:color .2s ease;
}

.work-title:hover{
  color:var(--hover);
}

.submenu{
  display:none;
  flex-direction:column;
  gap:3px;
  margin-top:2px;
}

.menu-group:hover .submenu{
  display:flex;
}

/* =========================
   🔥 FIX CORE (PROGETTI = CONTACT = IDENTICI)
========================= */

.project,
.value,
.footer a{
  font-family:"New Spirit" !important;
  font-weight:400 !important;
  font-style:normal !important;
  font-synthesis:none !important;
  letter-spacing:0 !important;
  text-transform:none !important;

  -webkit-font-smoothing:antialiased !important;
  -moz-osx-font-smoothing:grayscale !important;

  color:var(--pink);
  text-decoration:none;
  transition:color .2s ease;
  display:inline-block;
}

.project:hover,
.value:hover,
.footer a:hover{
  color:var(--hover);
}

/* =========================
   TOP LINKS
========================= */

.center-link,
.about-link{
  position:absolute;
  top:20px;
  font-family:"New Spirit Bold";
  font-weight:700;
  font-size:1.2rem;
  color:var(--pink);
  text-decoration:none;
  z-index:10;
  transition:color .2s ease;
}

.center-link{
  left:50%;
  transform:translateX(-50%);
}

.about-link{
  right:40px;
}

.center-link:hover,
.about-link:hover{
  color:var(--hover);
}

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

.footer{
  position:absolute;
  bottom:20px;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  padding:0 40px;
  gap:10px;
}

.label{
  font-family:"New Spirit";
  font-weight:400;
  font-size:1rem;
  line-height:1.2;

  color:var(--pink);

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* =========================
   PROJECT PAGE
========================= */

.project-page-body{
  margin:0;
  background:white;
}

.project-page img,
.project-page video{
  width:100%;
  display:block;
}

/* =========================
   NAV TOP / BOTTOM
========================= */

.project-nav-top,
.project-nav-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px 40px;
  background:var(--blue);
  min-height:60px;
}

.project-nav-top a,
.project-nav-bottom a{
  font-family:"New Spirit Bold";
  font-weight:700;
  font-size:18px;
  color:var(--pink);
  text-decoration:none;
  transition:color .2s ease, transform .15s ease;
}

.project-nav-top a:hover,
.project-nav-bottom a:hover{
  color:var(--hover);
  transform:translateY(-1px);
}

.project-counter{
  font-family:"New Spirit Bold";
  font-weight:700;
  font-size:18px;
  color:var(--pink);
}

/* =========================
   ABOUT FIX
========================= */

.single-page{
  margin:0;
  padding:0;
  width:100%;
  background:white;
}

.single-page img{
  display:block;
  width:100%;
  height:auto;
}

/* =========================
   MOBILE
========================= */

@media (max-width:768px){

  .work{ left:20px; }

  .about-link{ right:20px; }

  .footer{
    flex-direction:column;
    padding:0 20px 20px;
  }

  .project-nav-top,
  .project-nav-bottom{
    padding:15px 20px;
  }

  .project-nav-top a,
  .project-nav-bottom a,
  .project-counter{
    font-size:14px;
  }
}

/* =========================
   CLICK FIX
========================= */

.project-nav-top a,
.project-nav-bottom a{
  position:relative;
  z-index:10;
  display:inline-block;
  pointer-events:auto;
}

/* =========================
   EMBED / FIGMA FIX
========================= */

.external-iframe{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0;
  overflow:hidden;
}

.external-iframe iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

.external-iframe{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  margin:0;
  overflow:hidden;
}

.external-iframe iframe{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border:0;
}

/* 👇 QUI INCOLLI IL BOTTONE GLASS */
.sound-toggle{
  position:absolute;
  top:16px;
  right:16px;
  z-index:5;

  padding:8px 12px;
  border-radius:999px;

  font-family:"New Spirit";
  font-size:12px;
  color:var(--pink);

  background:rgba(255, 255, 255, 0.15);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255, 255, 255, 0.25);

  cursor:pointer;

  transition:transform .2s ease, background .2s ease;
}

.sound-toggle:hover{
  transform:scale(1.05);
  background:rgba(255, 255, 255, 0.25);
}

.sound-toggle.off{
  color:#bbb;
}