/* ============================================================
   STYLE.CSS — Marco Lanzillotti Portfolio
   Foglio di stile unico condiviso da: index.html,
   progetto-stocotto_1.html, progetto-olimpic.html, progetto-nealogic.html
   ============================================================ */

/* ============================================
   TOKENS E VARIABILI
   ============================================ */
:root {
  --ink:         #FFFFFF;
  --paper:       #121214;
  --paper-dim:   #1A1A1E;
  --vermillion:  #FF3311;
  --cyan-ink:    #00f3ff;
  --green-neon:  #70ff00;
  --pink-neon:   #ff00f7;
  --grey:        #8E8E93;
  --grey-text:   #AEAEB2;
  --grey-line:   rgba(255,255,255,0.1);

  --display: 'Inter', "Helvetica Neue", Helvetica, sans-serif;
  --body:    "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono:    'JetBrains Mono', monospace;

  --container: 1280px;
  --pad: clamp(20px, 5vw, 64px);
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* Nasconde il cursore di sistema */
* { margin:0; padding:0; box-sizing:border-box; cursor: none !important; }
html { scroll-behavior:smooth; }

body {
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

@media (hover: none), (pointer: coarse){
  * { cursor: auto !important; }
  #cursor { display: none !important; }
}

img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--vermillion); color:#000000; }
:focus-visible { outline: 3px solid var(--cyan-ink); outline-offset: 3px; }
.container { max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

/* ============================================
   CURSORE
   ============================================ */
#cursor {
  position: fixed; width: 14px; height: 14px; background: var(--vermillion);
  border-radius: 50%; pointer-events: none; z-index: 100000;
  mix-blend-mode: difference; will-change: transform; transform-origin: center center;
  transition: width 0.3s, height 0.3s, background 0.3s;
}
#cursor.large { width: 60px !important; height: 60px !important; background: #FFFFFF !important; }

/* ============================================
   NAVBAR & LANG SWITCHER
   ============================================ */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:rgba(18,18,20,0.85); backdrop-filter:blur(12px); border-bottom:1px solid var(--grey-line);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; height:76px; }

.logo { font-family:var(--display); font-size:1rem; letter-spacing:2px; text-transform:uppercase; position: relative; z-index: 10000; }
.logo-light { font-weight: 300; opacity: 0.8; }
.logo-bold { font-weight: 800; }

.nav-right { display:flex; align-items:center; gap:32px; position: relative; z-index: 10000; }

/* Link "Torna ai progetti" (solo pagine progetto) */
.back-btn { font-family:var(--mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; color:var(--grey-text); display:flex; align-items:center; gap:8px; transition:.3s; }
.back-btn:hover { color:var(--vermillion); }
.back-btn i { transition: transform .3s; }
.back-btn:hover i { transform: translateX(-4px); }

.lang-switcher { display:flex; gap:8px; font-family:var(--mono); font-size:0.85rem; font-weight:600; color:var(--grey-text); }
.lang-btn { background:none; border:none; color:inherit; transition:0.3s; padding:4px; }
.lang-btn.active { color:var(--ink); text-decoration:underline; text-decoration-color:var(--vermillion); text-underline-offset: 4px; }
.lang-btn:hover { color:var(--ink); }

.social-icons-header { display:flex; gap:18px; align-items:center; }
.social-icons-header a { font-size:1.1rem; color:var(--ink); opacity:.75; transition:.25s; }
.social-icons-header a:hover { opacity:1; color:var(--vermillion); }

/* BURGER ANIMATO */
.burger { width:30px; height:22px; display:flex; flex-direction:column; justify-content:space-between; background:none; border:none; padding:0; position:relative; }
.burger span { display:block; width:100%; height:2px; background:var(--ink); transition:all .4s var(--ease); transform-origin: center; }
.burger.open span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }

/* MENU DROPDOWN */
#menu-dropdown {
  position:fixed; top:0; right:0; width:min(320px, 86vw); height:100vh;
  background:#0a0a0b; color:var(--ink); padding:120px 40px;
  border-left:1px solid var(--grey-line); transform:translateX(100%);
  transition:transform .55s var(--ease); z-index:9998;
}
#menu-dropdown.active { transform:translateX(0); }
.menu-list { list-style: none !important; padding: 0; }
.menu-list li { list-style: none !important; margin-bottom: 26px; }
.menu-list a { font-family:var(--display); font-size:1.3rem; font-weight:700; text-transform:uppercase; color:var(--ink); opacity:.6; display:block; transition:0.3s; }
.menu-list a:hover { opacity:1; color:var(--vermillion); padding-left:5px; }

/* Sotto-menu per i filtri */
.menu-list .sub-link { margin-bottom: 14px; margin-top: 14px; margin-left: 20px; }
.menu-list .sub-link a { font-size: 0.95rem; font-weight: 500; font-family: var(--mono); opacity: 0.5; }
.menu-list .sub-link a:hover { opacity: 1; color: var(--cyan-ink); }

.close-menu { position:absolute; top:30px; right:36px; font-size:2rem; color:var(--ink); background:none; border:none; opacity: 0.5; transition: 0.3s; }
.close-menu:hover { opacity: 1; color: var(--vermillion); }

/* Overlay scuro dietro al menu (solo pagine progetto) */
#menu-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.4);
  z-index: 9997; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease);
}
#menu-overlay.active { opacity: 1; pointer-events: auto; }

/* ============================================
   HERO (home)
   ============================================ */
.hero { height:100vh; min-height:560px; display:flex; flex-direction:column; justify-content:center; padding:0 var(--pad); position:relative; overflow:hidden; }
.hero-bg-gallery { position:absolute; inset:0; z-index:1; }
.hero-bg-gallery::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,0.5), rgba(10,10,10,0.95)); z-index:3; }
.hero-bg-gallery img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1s ease-in-out; z-index:1; }
.hero-bg-gallery img.active { opacity:0.4; z-index:2; animation: heroLogoZoom 9s ease-out forwards; }
@keyframes heroLogoZoom {
  from { transform: scale(1); }
  to   { transform: scale(1.12); }
}
.hero-content { position:relative; z-index:4; max-width: var(--container); margin: 0 auto; width: 100%; }
.hero-name { font-family:var(--display); font-size: clamp(1.2rem, 3vw, 2.5rem); font-weight: 300; color: var(--grey-text); margin-bottom: 8px; letter-spacing: 0.05em; text-transform: uppercase; }
.hero-title-row { display: flex; align-items: center; flex-wrap: wrap; column-gap: 20px; font-family:var(--display); font-size:clamp(2.8rem, 10vw, 8.5rem); font-weight:900; text-transform:uppercase; letter-spacing:-0.04em; line-height:.86; color: #FFFFFF; }
.word-switcher { height:1em; overflow:hidden; display: inline-block; }
.word-list { animation:infinite_wheel 10s infinite; }
.word-list span { display:block; height:1em; line-height:1em; }
@keyframes infinite_wheel { 0%, 12% {transform: translateY(0);} 16%, 28% {transform: translateY(-1em);} 32%, 44% {transform: translateY(-2em);} 48%, 60% {transform: translateY(-3em);} 64%, 76% {transform: translateY(-4em);} 80%, 92% {transform: translateY(-5em);} 100% {transform: translateY(-6em);} }
.hero-sub { font-family:var(--display); font-size:clamp(0.85rem, 2vw, 1.5rem); margin-top:24px; font-weight: 600; text-transform:uppercase; letter-spacing:10px; color:var(--grey-text); opacity: 0.9; }

/* ============================================
   WORK (GALLERIA E FILTRI — home)
   ============================================ */
.work { padding:100px 0 140px; }
.section-head { display:flex; align-items:baseline; justify-content:space-between; gap:24px; margin-bottom:48px; flex-wrap:wrap; }
.section-title { font-family:var(--display); font-size:clamp(2rem, 4vw, 3.1rem); font-weight:800; text-transform:uppercase; line-height:1; color:#FFFFFF; }

.work-filter { display:flex; gap:10px; margin-bottom:40px; flex-wrap:wrap; }
.filter-btn { font-family:var(--mono); font-size:.78rem; letter-spacing:.03em; text-transform:uppercase; padding:8px 16px; border:1px solid var(--grey-line); border-radius:30px; background:none; color:var(--grey-text); transition:all .25s var(--ease); }
.filter-btn:hover, .filter-btn.active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

.work-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2px; background:var(--grey-line); border:1px solid var(--grey-line); }
.case-card { position:relative; background:var(--paper-dim); overflow:hidden; color:inherit; display:block; }
.case-media { position:relative; aspect-ratio:4/3; overflow:hidden; background:#000; }
.case-media img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); filter: grayscale(.2) contrast(1.1); }
.case-card:hover .case-media img { transform:scale(1.045); filter: none; }
.case-overlay { position:absolute; inset:0; display:flex; align-items:flex-end; padding:26px; background:linear-gradient(180deg, rgba(18,17,19,0) 40%, rgba(18,17,19,0.85) 100%); opacity:0; transition:opacity .35s; }
.case-card:hover .case-overlay { opacity:1; }
.case-overlay-text { color:#FFFFFF; font-family:var(--mono); font-size:.8rem; letter-spacing:.03em; }
.case-info { padding:22px 24px 26px; display:flex; justify-content:space-between; align-items:flex-start; gap:16px; }
.case-id { font-family:var(--mono); font-size:.7rem; color:var(--grey-text); letter-spacing:.04em; }
.case-name { font-family:var(--display); font-size:1.3rem; font-weight:700; text-transform:uppercase; margin-top:6px; line-height:1.1; color:#FFFFFF; }
.case-cat { font-family:var(--mono); font-size:.72rem; color:var(--vermillion); text-align:right; white-space:nowrap; letter-spacing:.03em; }

/* ============================================
   BIO E FOTO MORPHING (home)
   ============================================ */
.bio-section { padding:120px 0; border-top:1px solid var(--grey-line); position: relative; }
.bio-grid { display:grid; grid-template-columns:160px 1fr 70px; gap:56px; align-items:flex-start; }
.photo-mask {
  width:160px; height:160px;
  border-radius:50%;
  overflow:hidden; border:1px solid var(--grey-line);
  position:sticky; top:110px;
  transition: border-radius 0.1s ease-out;
  background: var(--paper-dim);
}
.photo-mask img { width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.1); }
.bio-text { font-family: var(--body); }
.bio-text p { font-size:1.05rem; line-height:1.75; color:var(--grey-text); margin-bottom:20px; text-align: justify; }
.bio-text p:first-of-type { font-size:1.2rem; font-weight:500; color:var(--ink); }
.bio-text h2 { font-family:var(--display); font-size:clamp(2rem,4vw,2.8rem); font-weight:800; text-transform:uppercase; margin-bottom:26px; line-height:1; color:#FFFFFF; }
.bio-text h2 span { color:var(--vermillion); }
.bio-side { display:flex; flex-direction:column; gap:14px; align-items:center; position:sticky; top:110px; }
.round-btn { width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:.74rem; font-weight:600; border:1px solid var(--grey-line); color:var(--ink); transition:.25s; }
.round-btn:hover { background:var(--vermillion); border-color:var(--vermillion); color:#000000; transform:translateY(-3px); }

/* ============================================
   SKILLS & INLINE INFO BOX (home)
   ============================================ */
.skills-section { padding:100px 0; border-top:1px solid var(--grey-line); display:flex; flex-direction:column; gap:64px; }
.skill-col h4 { font-family:var(--mono); font-size:.74rem; text-transform:uppercase; letter-spacing:.08em; color:var(--vermillion); margin-bottom:32px; }

.stack-container { display: grid; grid-template-columns: repeat(8, 1fr); gap: 30px 15px; }
.stack-item { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.stack-item img { width: 42px; height: 42px; object-fit: contain; transition: 0.3s; }
.stack-item span { font-family:var(--mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.5px; color:var(--grey-text); line-height: 1.1; }
.stack-item:hover img { transform: scale(1.15); filter: drop-shadow(0 0 8px rgba(255,255,255,0.2)); }
.stack-item:hover span { color: var(--ink); }

.skills-list {
  display: flex;
  flex-wrap: nowrap;
  gap: 15px 35px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.skills-list::-webkit-scrollbar { display: none; }

@media (max-width: 1100px) {
  .skills-list { flex-wrap: wrap; }
}

/* BOX INLINE PER LE SOFT SKILLS (NON BLOCCANTE) */
.skill-info-box {
  margin-top: 25px; background: rgba(255,255,255,0.03);
  border-left: 3px solid var(--vermillion); padding: 25px 30px;
  display: none; opacity: 0; transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  max-width: 800px;
}
.skill-info-box.visible { display: block; opacity: 1; transform: translateY(0); }
.skill-info-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.skill-info-title { font-family: var(--display); font-size: 1.4rem; color: var(--vermillion); text-transform: uppercase; font-weight: 800; }
.skill-info-close { background: none; border: none; color: var(--grey-text); font-size: 1.5rem; transition: 0.3s; }
.skill-info-close:hover { color: var(--ink); transform: scale(1.1); }
.skill-info-desc { font-family: var(--body); color: var(--grey-text); font-size: 1.05rem; line-height: 1.6; }

/* ============================================
   CONTACT (home)
   ============================================ */
.contact-section { padding:140px 0 100px; border-top:1px solid var(--grey-line); background:#050505; color:var(--ink); }
.contact-title { font-family:var(--display); font-size:clamp(2.2rem,6vw,4.2rem); font-weight:900; text-transform:uppercase; text-align:center; margin-bottom:48px; color:#FFFFFF; }
.contact-socials { display:flex; justify-content:center; gap:40px; margin-bottom:48px; padding-bottom:28px; border-bottom:1px solid var(--grey-line); }
.contact-socials a { font-size:1.8rem; color:var(--ink); opacity:.6; transition:.3s ease; }
.contact-socials a:hover { opacity:1; color:var(--vermillion); transform:translateY(-5px); }
.contact-form { display:grid; grid-template-columns:1fr 1fr; gap:30px; max-width:800px; margin:0 auto; }
.form-group.full { grid-column:span 2; }
.contact-form input, .contact-form textarea { background:transparent; border:none; border-bottom:1px solid rgba(255,255,255,0.2); padding:20px 0; color:var(--ink); width:100%; outline:none; font-size:1.1rem; font-family:var(--body); }
.contact-form input:focus, .contact-form textarea:focus { border-color:var(--vermillion); }
.submit-btn { grid-column:span 2; margin-top:30px; background:var(--ink); color:var(--paper); border:none; padding:22px; text-transform:uppercase; font-family:var(--display); font-weight:800; letter-spacing:2px; transition:.3s; }
.submit-btn:hover { background:var(--vermillion); color:#000000; }
.footer-meta { text-align:center; margin-top:80px; font-family:var(--mono); font-size:.7rem; opacity:.4; text-transform:uppercase; letter-spacing:2px; }

/* ============================================
   COVER PROGETTO — immagine responsive con titolo overlay
   ============================================ */
.project-cover { position: relative; width: 100%; height: 90vh; min-height: 480px; max-height: 900px; overflow: hidden; }
.project-cover img { width: 100%; height: 100%; object-fit: cover; }
.project-cover::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(18,18,20,0.15) 0%, rgba(18,18,20,0.15) 55%, rgba(18,18,20,0.95) 100%);
}
.cover-title-wrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding-bottom: clamp(30px, 5vw, 60px); }

/* Sezione titolo sotto la cover, con margine uniforme su tutte le pagine progetto */
.project-title-section { margin-top: 50px; }
.project-title {
  font-family:var(--display); font-size:clamp(1rem, 6vw, 6rem); font-weight:600;
  text-transform:uppercase; line-height:.9; letter-spacing:-0.03em;
}

/* ============================================
   META BAR — tipografica, sotto il titolo
   ============================================ */
.project-meta-bar { padding: 40px 0 60px; border-bottom: 1px solid var(--grey-line); }
.meta-typographic { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.meta-col { display:flex; flex-direction:column; gap:10px; }
.meta-label {
  font-family:var(--mono); font-size:.72rem; text-transform:uppercase; letter-spacing:.15em;
  color:var(--vermillion);
}
.meta-value { font-family:var(--display); font-size:1.4rem; font-weight:600; line-height:1.3; }
.meta-value.small { font-family:var(--body); font-size:.95rem; font-weight:400; color:var(--grey-text); line-height:1.6; }

/* ============================================
   DESCRIZIONE PROGETTO — senza titolo
   ============================================ */
.project-description { padding: 70px 0; }
.description-text { max-width: 1080px; }
.description-text p { font-size:1.15rem; color:var(--grey-text); line-height:1.85; margin-bottom:20px; }
.description-text p:first-of-type { color:var(--ink); }

/* ============================================
   GALLERIA ASIMMETRICA + DIDASCALIE
   (uniformata su Stocotto, Olimpic, Nealogic)
   ============================================ */
.gallery-section { padding: 40px 0 100px; }
.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }

.gallery-item { overflow: hidden; background: var(--paper-dim); position: relative; }
.gallery-item a { display: block; width: 100%; height: 100%; }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition: transform .6s var(--ease), filter .4s; filter: grayscale(.15); }
.gallery-item:hover img { transform: scale(1.05); filter: none; }

/* Video nella griglia gallery: stesso comportamento delle immagini + autoplay muto in loop */
.gallery-item video { width:100%; height:100%; object-fit:cover; display:block; transition: transform .6s var(--ease), filter .4s; filter: grayscale(.15); pointer-events: none; }
.gallery-item:hover video { transform: scale(1.05); filter: none; }
/* Piccola icona "play" per far capire che è un video cliccabile */
.gallery-item.is-video a::before {
  content: '\f04b';
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  background: rgba(18,18,20,0.6);
  border: 1px solid var(--grey-line);
  border-radius: 50%;
  color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem;
  z-index: 2;
  opacity: 0.85;
  transition: opacity .3s, background .3s;
}
.gallery-item.is-video:hover a::before { opacity: 1; background: var(--vermillion); color: #000000; }

/* Didascalia overlay sulla griglia, visibile in hover prima del click */
.gallery-item a::after {
  content: attr(data-caption);
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
  color: var(--ink);
  padding: 30px 15px 15px 15px;
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
  pointer-events: none;
}
.gallery-item:hover a::after {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item.wide { grid-column: span 8; aspect-ratio: 16/9; }
.gallery-item.narrow { grid-column: span 4; aspect-ratio: 3/4; }
.gallery-item.half { grid-column: span 6; aspect-ratio: 1.43/1; }
.gallery-item.full { grid-column: span 12; aspect-ratio: 21/9; }
.gallery-item.square { grid-column: span 4; aspect-ratio: 1/1; }
.gallery-item.tall { grid-column: span 5; aspect-ratio: 9/16; }
.gallery-item.medium { grid-column: span 7; aspect-ratio: 16/10; }


/* ============================================
   FANCYBOX — personalizzazione dark theme
   ============================================ */
.fancybox__container {
  --fancybox-bg: rgba(18, 18, 20, 0.98);
  --fancybox-stroke-color: var(--ink);
  z-index: 999999 !important; 
}

/* 1. RIPORTIAMO IL CERCHIETTO ANIMATO SOPRA FANCYBOX */
#cursor {
  z-index: 10000000 !important; /* Più alto di Fancybox per rimanere visibile */
}

/* 2. NASCONDIAMO LA FRECCETTA DI WINDOWS DENTRO LA GALLERIA */
.fancybox__container, 
.fancybox__container *,
.fancybox__container .f-button,
.fancybox__container .f-carousel__nav .f-button {
  cursor: none !important; /* Spegne la freccia classica di Windows */
}

.fancybox__caption {
  font-family: var(--mono) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.85rem !important;
  color: var(--ink) !important;
}

/* CONTENITORE NAVIGAZIONE GENERALE */
.fancybox__container .f-carousel__nav {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: none !important; /* Permette al mouse custom di leggere i movimenti sotto */
}

/* STILE UNIFICATO FRECCE (Prev & Next) */
.fancybox__container .f-carousel__nav .f-button,
.fancybox__container .f-button[data-carousel-prev],
.fancybox__container .f-button[data-carousel-next] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important; /* Riabilita i click solo sui bottoni */
  background: rgba(26, 26, 30, 0.8) !important; /* --paper-dim */
  border: 1px solid var(--grey-line) !important;
  color: var(--ink) !important;
  border-radius: 50% !important;
  width: 56px !important;
  height: 56px !important;
  transition: all 0.3s var(--ease) !important;
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 999999 !important;
}

/* POSIZIONAMENTO DELLE DUE FRECCE AI LATI OPPOSTI */
.fancybox__container .f-button[data-carousel-prev],
.fancybox__container .is-prev {
  left: 30px !important;
  right: auto !important;
}

.fancybox__container .f-button[data-carousel-next],
.fancybox__container .is-next {
  right: 30px !important;
  left: auto !important;
}

/* HOVER SULLE FRECCE */
.fancybox__container .f-carousel__nav .f-button:hover,
.fancybox__container .f-button[data-carousel-prev]:hover,
.fancybox__container .f-button[data-carousel-next]:hover {
  background: var(--vermillion) !important;
  border-color: var(--vermillion) !important;
  color: #000000 !important;
}

/* Icone SVG interne */
.fancybox__container .f-button svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 2.5 !important;
}

/* TOOLBAR / PULSANTE CHIUSURA (In alto a destra) */
.fancybox__toolbar {
  opacity: 1 !important;
  pointer-events: auto !important;
  top: 25px !important;
  right: 30px !important;
  left: auto !important;
  justify-content: flex-end !important;
  z-index: 1000000 !important;
}

.fancybox__toolbar .f-button.is-close-btn,
.fancybox__container [data-fancybox-close] {
  background: rgba(26, 26, 30, 0.8) !important;
  border: 1px solid var(--grey-line) !important;
  color: var(--ink) !important;
  border-radius: 50% !important;
  width: 46px !important;
  height: 46px !important;
  transition: all 0.3s var(--ease) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fancybox__toolbar .f-button.is-close-btn:hover,
.fancybox__container [data-fancybox-close]:hover {
  background: var(--vermillion) !important;
  border-color: var(--vermillion) !important;
  color: #000000 !important;
}

/* FIX RESPONSIVE MOBILE */
@media (max-width: 600px) {
  .fancybox__container .f-carousel__nav .f-button,
  .fancybox__container .f-button[data-carousel-prev],
  .fancybox__container .f-button[data-carousel-next] {
    width: 44px !important;
    height: 44px !important;
  }
  .fancybox__container .is-prev, 
  .fancybox__container [data-carousel-prev] { left: 15px !important; }
  .fancybox__container .is-next, 
  .fancybox__container [data-carousel-next] { right: 15px !important; }
  .fancybox__toolbar { top: 15px !important; right: 15px !important; }
}
/* ============================================
   VIDEO SECTION (pagine progetto)
   ============================================ */
.project-video-section { padding: 0px 0 10px; }
.video-wrap { position: relative; width: 50%; aspect-ratio: 1/1; background: var(--paper-dim); overflow: hidden; border: 1px solid var(--grey-line); }
.video-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer !important; }
.video-caption { font-family:var(--mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-text); margin-top: 16px; }

/* ============================================
   PROJECT NAVIGATION (pagine progetto)
   ============================================ */
.project-navigation-section { padding: 80px 0; border-top: 1px solid var(--grey-line); }
.work-nav-inline-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; }

.nav-project-link { display: flex; align-items: center; gap: 12px; padding: 15px 0; transition: .3s; font-family:var(--display); font-size: clamp(1rem, 2vw, 1.5rem); font-weight: 700; text-transform: uppercase; color: var(--grey-text); letter-spacing: 0.05em; }
.nav-project-link.next-work { justify-content: flex-end; }
.nav-project-link:hover { color: var(--vermillion); }

.nav-project-link i { transition: transform 0.3s var(--ease); font-size: 0.9em; }
.nav-project-link.prev-work:hover i { transform: translateX(-6px); }
.nav-project-link.next-work:hover i { transform: translateX(6px); }

.back-center-link { font-family: var(--mono); font-size: 0.85rem; text-transform: uppercase; letter-spacing: .15em; color: var(--grey-text); transition: .3s; padding: 15px 30px; }
.back-center-link:hover { color: var(--vermillion); }

/* ============================================
   FOOTER MINI (pagine progetto)
   ============================================ */
.footer-mini { padding:40px 0; text-align:center; font-family:var(--mono); font-size:.7rem; color:var(--grey-text); letter-spacing:2px; text-transform:uppercase; border-top:1px solid var(--grey-line); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:900px){
  /* home */
  .work-grid { grid-template-columns:1fr; }
  .bio-grid { grid-template-columns:1fr; gap:36px; }
  .photo-mask, .bio-side { position:relative; top:0; border-radius: 50% !important; }
  .bio-side { flex-direction:row; justify-content:center; }
  .stack-container { grid-template-columns:repeat(4,1fr); }
  .hero-title-row { flex-direction: column; align-items: flex-start; gap: 0; }

  /* pagine progetto */
  .project-cover { height: 60vh; min-height: 380px; }
  .meta-typographic { grid-template-columns: 1fr; gap: 24px; }
  .gallery-item.wide, .gallery-item.narrow, .gallery-item.half,
  .gallery-item.full, .gallery-item.square, .gallery-item.tall,
  .gallery-item.medium { grid-column: span 12; }
  /* Ogni classe mantiene il proprio aspect-ratio anche su mobile */
  .gallery-item.square { aspect-ratio: 1/1; }
  .gallery-item.tall { aspect-ratio: 9/16; }
  .gallery-item.wide, .gallery-item.medium { aspect-ratio: 16/9; }
  .gallery-item.narrow, .gallery-item.half { aspect-ratio: 4/3; }
  .gallery-item.full { aspect-ratio: 16/9; }
}
@media (max-width:600px){
  /* home */
  .stack-container { grid-template-columns:repeat(3,1fr); }
  .contact-form { grid-template-columns:1fr; }
  .form-group.full, .submit-btn { grid-column:span 1; }

  /* pagine progetto */
  .nav-inner { height: 76px; }
  .back-btn span { display: none; }
  .social-icons-header { display: none !important; }
  .gallery-grid { gap: 10px; }
  .work-nav-inline-grid { grid-template-columns: 1fr; text-align: center; gap: 10px; }
  .nav-project-link.next-work { justify-content: center; }
  .nav-project-link.prev-work { justify-content: center; }
  #pdf-viewer-frame { width:96vw; height:80vh; }
  #close-pdf-btn { top:15px; right:15px; }
}

/* ============================================
   PDF VIEWER — card + overlay fullscreen
   ============================================ */
.pdf-card {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:var(--paper-dim); border:1px solid var(--grey-line);
  transition:.3s;
}
.pdf-card i { font-size:3rem; color:var(--vermillion); transition:.3s; }
.pdf-card-title { font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:1.3rem; color:#FFFFFF; }
.pdf-card-sub { font-family:var(--mono); font-size:.78rem; color:var(--grey-text); text-transform:uppercase; letter-spacing:.05em; }
.gallery-item.full:hover .pdf-card { border-color:var(--vermillion); background:#1a1a1e; }
.gallery-item.full:hover .pdf-card i { transform:scale(1.1); }

.pdf-card {
  width:100%; height:100%; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background-color:var(--paper-dim); background-size:cover; background-position:center;
  border:1px solid var(--grey-line);
  position:relative; transition:.3s;
}
.pdf-card-overlay {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px;
  background:rgba(10,10,11,0.55); transition:.3s;
}
.gallery-item.full:hover .pdf-card-overlay { background:rgba(10,10,11,0.75); }
.gallery-item.full:hover .pdf-card { border-color:var(--vermillion); }
.gallery-item.full:hover .pdf-card i { transform:scale(1.1); }

#pdf-viewer-overlay {
  position:fixed; inset:0; z-index:999998;
  background:rgba(10,10,11,0.97);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
#pdf-viewer-overlay.active { opacity:1; pointer-events:auto; }
#pdf-viewer-frame {
  width:min(900px, 92vw); height:88vh;
  border:1px solid var(--grey-line); background:#fff;
}
#close-pdf-btn { position:absolute; top:30px; right:36px; z-index:999999; }

.portfolio-disclaimer {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
  text-align: left;
}

.portfolio-disclaimer p {
  font-size: 12px;
  color: #666666;
  line-height: 1.5;
}

.case-card.soon {
  cursor: default;
  pointer-events: none;
}

.soon-media {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #3d3d3d; /* adatta al tuo tema */
}

.marquee {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

.marquee-track {
  display: inline-flex;
  animation: scrollLeft 30s linear infinite;
}

.marquee-track span {
  font-size: 10rem;
  font-weight: 900;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: #fff;
  padding-right: 0.5rem;
}

@keyframes scrollLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}