:root {
  --accent: #C8FB3C;
  --header-h: 5rem;
  --pad: 2rem;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; border: 0; }
html, body { width: 100%; min-height: 100%; background: #000; color: #fff; }

/* blocco scroll SOLO sulle pagine a schermo fisso (no scroll) */
body.home,
body.error404,
body.page-template-homepage,
body.page-template-news,
body.page-template-gallery,
body.page-template-curriculum {
  height: 100%;
  overflow: hidden;
}
body { font-family: 'IBM Plex Mono', monospace; cursor: default; }

/* Fix 100vh su mobile — usa --vh settato via JS */
.home, #preloader, #cursor, .curr-page, .page-404 {
  height: calc(var(--vh, 1vh) * 100);
}
.home { position: fixed; top: 0; left: 0; width: 100%; }
#preloader { position: fixed; inset: 0; }

/* ── PRELOADER ── */
#preloader {
  position: fixed; inset: 0; background: #000;
  z-index: 99999; display: flex; align-items: center; justify-content: center;
  transition: opacity 0.8s ease;
}
#preloader-num {
  font-family: 'Public Sans', sans-serif;
  font-size: 2.5rem; font-weight: 500; color: #fff;
  letter-spacing: 0.1em;
}
#preloader.fade-out { opacity: 0; pointer-events: none; }

/* lettere hero inizialmente invisibili — inline, non inline-block */
.hero-char {
  display: inline;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-char.visible { opacity: 1; }

/* cursore custom solo sull'area home */
.home { cursor: none; }

/* link e bottoni: manina */
a, button, .pager-item, .pager-mob { cursor: pointer; }

/* ── CURSOR ── */
#cursor { position: fixed; inset: 0; pointer-events: none; z-index: 9999; }
#cur-v {
  position: absolute;
  top: var(--header-h); left: 0;
  width: 1px; height: calc(100vh - var(--header-h));
  background: rgba(255,255,255,0.18);
  will-change: transform;
}
#cur-h {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 1px;
  background: rgba(255,255,255,0.18);
  will-change: transform;
}
#cur-dot {
  position: absolute; top: 0; left: 0;
  width: 5px; height: 5px;
  background: transparent !important;
  will-change: transform;
}
#cur-dot::before, #cur-dot::after {
  content: ''; position: absolute; background: #fff;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
#cur-dot::before { width: 9px; height: 1px; }
#cur-dot::after  { width: 1px; height: 9px; }
/* label "Play Video" — quadrante in alto a destra rispetto al dot */
#cur-label {
  position: absolute; top: 0; left: 0;
  font-size: 0.9rem; font-weight: 500; letter-spacing: 0.08em;
  color: #fff; white-space: nowrap;
  opacity: 0; transition: opacity 0.25s;
  will-change: transform;
  text-transform: uppercase;
}
#cur-counter {
  position: absolute; bottom: 1.5rem; right: 1.2rem;
  font-size: 0.8rem; letter-spacing: 0.1em; color: #fff;
  white-space: nowrap;
}

/* ── HEADER ── */
header {
  position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h);
  display: flex; align-items: center; z-index: 200;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.hdr-logo {
  width: 13rem; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-right: 1px solid rgba(255,255,255,0.15);
  flex-shrink: 0; padding: 0 2rem;
}
.hdr-logo img { max-width: 100%; max-height: 3rem; object-fit: contain; }
.logo-ph {
  width: 100%; height: 3rem;
  border: 1px dashed rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; color: rgba(255,255,255,0.35);
  letter-spacing: 0.08em; border-radius: 3px;
}
nav {
  flex: 1; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--pad);
}
.nav-left { display: flex; gap: 3rem; }
.nav-right { display: flex; align-items: center; gap: 0; }
nav a {
  font-size: 1.05rem; font-weight: 500; letter-spacing: 0.1em;
  color: #fff; text-decoration: none; text-transform: uppercase;
  display: inline-block; transition: color 0.2s;
}
.nav-contatti { margin-right: 2rem; }
.btn-area-soci {
  display: inline-flex; align-items: center; flex-shrink: 0;
  background: #C8FB3C; color: #000 !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  text-decoration: none; padding: 0 2rem;
  height: var(--header-h); white-space: nowrap;
  align-self: stretch;
}
.lang { display: flex; gap: 1rem; }
.lang a { opacity: 0.35; }
.lang a.on { opacity: 1; pointer-events: none; }
.btn-menu {
  display: none;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.05rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; text-decoration: none; padding-right: 1.5rem;
  /* reset stili browser per button */
  background: none; border: none; outline: none;
  -webkit-appearance: none; appearance: none;
  cursor: pointer; padding-left: 0; margin: 0;
  line-height: inherit;
}

/* ── HOME ── */
.home { position: relative; width: 100vw; height: 100vh; height: calc(var(--vh, 1vh) * 100); overflow: hidden; }
@supports (height: 100dvh) {
  .home { height: 100dvh; }
}

/* link cliccabile: tutta l'area sotto header
   i quadratini (.psq z-index:20) stanno sopra e intercettano solo loro il click */
.home-link {
  position: absolute;
  top: var(--header-h); left: 0;
  width: 100%; height: calc(100vh - var(--header-h));
  z-index: 5; display: block;
  text-decoration: none;
}

/* video bg */
.vbg { position: absolute; inset: 0; z-index: 0; }
.vbg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vbg::after { content: ''; position: absolute; inset: 0; background: rgba(0,0,0,0.22); z-index: 1; }

/* top-right text */
.home-text {
  position: absolute; top: var(--header-h); right: var(--pad);
  padding-top: 5.5rem; z-index: 10; text-align: right; max-width: 52rem;
  pointer-events: none;
}
.home-title {
  font-size: 1.05rem; font-weight: 400;
  letter-spacing: 0.1em; line-height: 1.75;
  text-transform: uppercase;
}
.home-sub {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 0.9rem; justify-content: flex-end;
}
.squares { display: flex; gap: 0.3rem; align-items: center; }
.sq { background: #fff; height: 0.5rem; }
.sq1 { width: 0.5rem; }
.sq2 { width: 0.3rem; }
.sq3 { width: 0.2rem; }
.home-sub-txt { font-size: 1.05rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; }

/* bottom-left project info */
.proj-info {
  position: absolute; bottom: 15rem; left: var(--pad);
  z-index: 10; display: flex; flex-direction: column; gap: 0.9rem;
  pointer-events: none;
}
.proj-tag {
  display: inline-block; font-size: 0.95rem; font-weight: 500;
  letter-spacing: 0.1em; padding: 0.55rem 0.3rem;
  background: #fff; color: #000;
  border-radius: 0.3rem; text-transform: uppercase;
  width: fit-content; white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
}
.proj-title {
  font-family: 'Public Sans', sans-serif;
  font-size: 3.8rem; font-weight: 500;
  letter-spacing: -0.01em; line-height: 1.05;
  color: #fff; min-height: 4.2rem;
  white-space: nowrap;
}

/* pager */
.pager {
  position: absolute; bottom: 0; left: 0; width: 100%;
  display: flex; align-items: flex-end; gap: 1rem;
  padding: 0 var(--pad) 2rem; z-index: 6;
  pointer-events: none;
}
.pager-items {
  display: flex; flex: 1; justify-content: center; gap: 3rem;
  pointer-events: none;
}
.pager-item {
  position: relative; width: 16rem; height: 7rem;
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 1.8rem;
  pointer-events: none;
}
.psq {
  width: 0.65rem; height: 0.65rem;
  border: 1px solid rgba(255,255,255,0.45);
  transition: background 0.3s, border-color 0.3s;
  pointer-events: all; cursor: pointer;
  position: relative; z-index: 20;
}
.pager-item.on .psq { background: #fff; border-color: #fff; }
.pbar { display: none; }
.pager-mob { display: none !important; }

/* scroll hint */
.scroll-hint {
  position: absolute; bottom: 2.2rem; right: var(--pad);
  z-index: 10; font-size: 0.85rem; letter-spacing: 0.12em;
  color: rgba(255,255,255,0.35); text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  pointer-events: none;
}
.sh-arrow { display: inline-block; animation: sh-bounce 1.6s ease-in-out infinite; }
@keyframes sh-bounce { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }

/* ── BREAKPOINT 2400px+ ── */
@media (min-width: 2400px) {
  :root { --header-h: 6.5rem; --pad: 4rem; }
  nav a { font-size: 1.2rem; }
  .home-title, .home-sub-txt { font-size: 1.15rem; }
  .home-text { padding-top: 6rem; max-width: 58rem; right: 5rem; }
  .proj-title { font-size: 4.8rem; }
  .proj-tag { font-size: 1.1rem; padding: 0.3rem 1rem; }
  .pager-item { width: 20rem; height: 9rem; }
  #cur-counter { font-size: 0.9rem; }
}

/* ── RESPONSIVE ── */
@media (min-width: 1025px) {
  .proj-info { bottom: 18rem; }
  .logo-mobile { display: none; }
}
/* bottone play video — solo responsive */
.btn-play-video {
  display: none;
  position: absolute; z-index: 10;
  left: var(--pad); bottom: 11rem;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #fff; text-decoration: none;
  display: none; align-items: center; gap: 0.6rem;
  pointer-events: all;
}
.btn-play-video svg { width: 0.8rem; }

@media (max-width: 1280px) { .proj-title { font-size: 2.8rem; } }
@media (min-width: 1366px) and (max-width: 2300px) {
  :root { --header-h: 4rem; --pad: 2rem; }
  nav a { font-size: 0.72rem; }
  .btn-area-soci { font-size: 0.72rem; padding: 0 1.2rem; }
  .home-title { font-size: 0.7rem; }
  .home-sub-txt { font-size: 0.7rem; }
  .proj-title { font-size: 3.6rem; }
  .proj-tag { font-size: 0.72rem; padding: 0.15rem 0.3rem; }
  .pager-item { width: 5rem; height: 4rem; }
  .pager-items { gap: 2rem; }
  .psq { width: 0.35rem; height: 0.35rem; }
  .proj-info { bottom: 10.5rem; }
  #cur-label { font-size: 0.65rem; }
  #cur-counter { font-size: 0.65rem; }
  .hdr-logo { width: 11rem; }
  .hdr-logo img { max-height: 2.6rem; padding: 0.15rem 0; }
}
@media (min-width: 1025px) and (max-width: 1366px) {
  :root { --header-h: 4rem; --pad: 1.5rem; }
  nav a { font-size: 0.78rem; }
  .btn-area-soci { font-size: 0.78rem; padding: 0 1.3rem; }
  .home-title { font-size: 0.82rem; }
  .home-sub-txt { font-size: 0.82rem; }
  .proj-title { font-size: 2.4rem; }
  .proj-tag { font-size: 0.78rem; padding: 0.15rem 0.3rem; }
  .pager-item { width: 12rem; height: 6rem; }
  .proj-info { bottom: 14rem; }
  #cur-counter { font-size: 0.72rem; }
  .hdr-logo { width: 10.5rem; }
  .hdr-logo img { max-height: 2.7rem; padding: 0.15rem 0; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  :root { --header-h: 3.8rem; --pad: 1.3rem; }
  nav a { font-size: 0.75rem; }
  .btn-area-soci { font-size: 0.75rem; padding: 0 1.2rem; }
  .home-title { font-size: 0.75rem; }
  .home-sub-txt { font-size: 0.75rem; }
  .proj-title { font-size: 2rem; }
  .proj-tag { font-size: 0.72rem; padding: 0.15rem 0.3rem; }
  .pager-item { width: 8rem; height: 5rem; }
  .psq { width: 0.4rem; height: 0.4rem; }
  .proj-info { bottom: 12rem; }
  #cur-label { font-size: 0.65rem; }
  #cur-counter { font-size: 0.65rem; }
  .hdr-logo { width: 10rem; }
  .hdr-logo img { max-height: 2.4rem; padding: 0.15rem 0; }
}
@media (max-width: 1024px) {
  .nav-left, .nav-right .lang, .nav-contatti { display: none; }
  .btn-menu { display: inline-block; }
  .home-text { max-width: calc(100vw - 5rem - var(--pad) * 2); overflow-wrap: break-word; word-break: normal; padding-top: 2.5rem; box-sizing: border-box; }
  .home-title { overflow-wrap: break-word; white-space: normal; }
  .home-title .hero-char { white-space: normal; }
  .proj-title { white-space: normal; overflow-wrap: break-word; min-height: 0; }
  nav { justify-content: flex-end; padding-right: 0; }
  .pager-item { width: 3.5rem; height: 4rem; }
  .proj-title { font-size: 2.6rem; }
  /* mirino statico: V a 5rem (bordo logo), H al centro area utile, croce all'incrocio */
  #cursor { display: block; }
  #cur-v { transform: none !important; top: var(--header-h) !important; left: calc(5rem - 1px) !important; height: calc(100vh - var(--header-h)) !important; width: 1px !important; }
  #cur-h { transform: none !important; top: calc(var(--header-h) + (100vh - var(--header-h)) / 2) !important; left: 0 !important; width: 100% !important; height: 1px !important; }
  #cur-dot { transform: translate(-50%,-50%) !important; top: calc(var(--header-h) + (100vh - var(--header-h)) / 2) !important; left: 5rem !important; width: 0 !important; height: 0 !important; }
  #cur-counter { display: none; }
  /* titolo progetto nel quadrante in basso a destra del mirino */
  .proj-info { position: fixed; bottom: auto; top: calc(var(--header-h) + (100vh - var(--header-h)) / 2); left: 5rem; right: 0; padding: 1.2rem; }
  .btn-play-video { position: fixed; bottom: auto !important; top: calc(var(--header-h) + (100vh - var(--header-h)) / 2 + 8rem); left: calc(5rem + 1.2rem); }
  body { cursor: default; }
  :root { --header-h: 3.2rem; }
  nav a { font-size: 0.85rem; }
  .btn-menu { font-size: 0.85rem; padding-right: 1rem; }
  .btn-area-soci { font-size: 0.85rem; padding: 0 1.2rem; }
  .logo-desktop { display: none; }
  .logo-mobile { display: flex; }
  .hdr-logo { width: 5rem; padding: 0 1rem; }
  .hdr-logo img { max-height: 1.8rem; padding: 0.2rem 0; }
  /* hero testo più piccolo su tablet */
  .home-title { font-size: 0.85rem; }
  .home-sub-txt { font-size: 0.85rem; }
  .proj-tag { font-size: 0.8rem; padding: 0.15rem 0.3rem; }
  /* quadratini più piccoli su tablet con più spazio */
  .pager-item { width: 2.5rem; height: 3.5rem; padding-bottom: 1.2rem; }
  .pager-items { gap: 2rem; }
  .psq { width: 0.5rem; height: 0.5rem; }
  /* bottone play video visibile, home-link nascosto su mobile */
  .btn-play-video { display: flex; }
  .home-link { display: none; }
}
@media (max-width: 600px) {
  :root { --pad: 1.2rem; }
  .proj-title { font-size: 1.8rem; }
  .home-text { padding-top: 2.5rem; }
  .home-title { font-size: 0.65rem; }
  .home-sub-txt { font-size: 0.65rem; }
  .pager-item { width: 2rem; height: 3rem; padding-bottom: 1rem; }
  .pager-items { gap: 1.5rem; }
  .psq { width: 0.45rem; height: 0.45rem; }
  .pager { padding: 0 var(--pad) 1.2rem; }
  .proj-tag { font-size: 0.7rem; padding: 0.12rem 0.35rem; }
  .btn-play-video { font-size: 0.78rem; }
}
/* ═══════════════════════════════════════════════
   POPUP MENU
═══════════════════════════════════════════════ */
#popup-menu {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 999999 !important;
  background: #000 !important;
  display: flex !important; flex-direction: column !important;
  opacity: 0 !important; visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  margin: 0 !important; padding: 0 !important;
  overflow: auto !important;
}
#popup-menu.open {
  opacity: 1 !important; visibility: visible !important;
  pointer-events: all !important;
}
.popup-menu-inner {
  display: flex; flex-direction: column;
  min-height: 100vh; padding: var(--pad);
  box-sizing: border-box;
}
.popup-menu-header {
  display: flex; align-items: center; justify-content: flex-end;
  height: var(--header-h); flex-shrink: 0;
  margin: 0 calc(-1 * var(--pad)); padding: 0 var(--pad);
}
.popup-menu-close {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff !important; cursor: pointer;
  background: none !important; border: none !important; outline: none;
  -webkit-appearance: none; appearance: none;
  padding: 0; margin: 0; line-height: inherit;
}
.popup-menu-nav {
  display: flex; flex-direction: column;
  justify-content: center; align-items: flex-start; flex: 1;
  gap: 1rem; padding: 3rem 0;
}
.popup-menu-nav a {
  font-family: 'Public Sans', sans-serif;
  font-size: clamp(1.8rem, 4.5vw, 4rem);
  font-weight: 500; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.45) !important; text-decoration: none !important;
  text-transform: uppercase;
  display: inline-block; line-height: 1.1;
  transition: color 0.2s;
}
.popup-menu-nav a[style*="#fff"] { color: #fff !important; }
.popup-menu-nav a:hover { color: #fff !important; }
.popup-menu-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: 2rem; flex-shrink: 0;
}
.popup-menu-footer a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem; font-weight: 400; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5) !important;
  text-decoration: none !important; text-transform: uppercase;
}
.popup-menu-footer a:hover { color: #fff !important; }

/* ═══════════════════════════════════════════════
   POPUP VIDEO
═══════════════════════════════════════════════ */
#popup-video {
  position: fixed !important;
  top: 0 !important; left: 0 !important;
  right: 0 !important; bottom: 0 !important;
  width: 100vw !important; height: 100vh !important;
  z-index: 999999 !important;
  background: #000 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  opacity: 0 !important; visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  margin: 0 !important; padding: 0 !important;
}
#popup-video.open {
  opacity: 1 !important; visibility: visible !important;
  pointer-events: all !important;
}
.popup-video-wrap {
  display: flex !important;
  flex-direction: column !important;
  width: 75vw !important; max-width: 960px !important;
  z-index: 1000000 !important;
  gap: 0.8rem !important;
}
.popup-video-close {
  align-self: flex-end !important;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.8rem; font-weight: 500; letter-spacing: 0.1em;
  text-transform: uppercase; color: #fff !important; cursor: pointer;
  background: none !important; border: none !important; outline: none !important;
  -webkit-appearance: none !important; appearance: none !important;
  padding: 0 !important; margin: 0 !important;
  display: block !important; order: 1 !important;
}
.popup-video-inner {
  width: 100% !important;
  z-index: 1000000 !important;
  order: 2 !important;
}
.popup-video-inner video {
  width: 100% !important; height: auto !important;
  display: block !important; max-height: 75vh !important;
}

@media (max-width: 1024px) {
  .popup-video-wrap { width: 88vw !important; }
}
@media (max-width: 600px) {
  .popup-menu-nav a { font-size: 1.6rem; }
  .popup-video-wrap { width: 96vw !important; }
  .popup-video-close { font-size: 0.75rem; }
}