/* ============================================================
   FSA PORTFOLIO — CSS standalone v4.0
   UX/UI upgrade: full-bleed, header senza bordo,
   categoria sempre visibile, hover scale 1.02, no CTA arrow
   ============================================================ */

/* === RESET & TOKENS === */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
:root {
  --black:  #0a0a0a;
  --white:  #f2f1ee;
  --border: rgba(0,0,0,0.12);
  --accent: #ec7016;
  --card-border: rgba(255,255,255,0.07);
}
html { scroll-behavior:smooth; }
body {
  font-family:'DM Sans',sans-serif;
  background:var(--black);
  color:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  cursor:none;
}
a { color:inherit; text-decoration:none; }
img { display:block; width:100%; }

/* === CURSOR === */
#cur {
  width:9px; height:9px;
  background:var(--accent);
  border-radius:50%;
  position:fixed; pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:9999;
  transition:width .15s, height .15s, background .15s;
}
#cur.big {
  width:52px; height:52px;
  background:rgba(236,112,22,0.12);
  border:1.5px solid var(--accent);
}
@media(max-width:680px){ body{ cursor:auto; } #cur{ display:none; } }

/* === NAV (dark bg — testo bianco) === */
nav {
  position:fixed; top:0; left:0; right:0;
  display:flex; align-items:center; justify-content:space-between;
  padding:32px 40px; z-index:500;
  transition:transform .4s cubic-bezier(.7,0,.2,1), background .3s ease, padding .3s ease;
}
.n-logo {
  display:block; height:70px; position:relative; width:331px;
  transition:width .3s ease, height .3s ease;
}
.n-logo img {
  height:100%; width:auto; display:block;
  position:absolute; top:0; left:0;
  transition:opacity .3s ease;
}
.n-logo .logo-white  { opacity:1; }
.n-logo .logo-black,
.n-logo .mono-white,
.n-logo .mono-black  { opacity:0; }

.n-menu { display:flex; align-items:center; gap:65px; list-style:none; margin-left:auto; margin-right:32px; }
.n-menu a {
  font-size:18px; font-weight:400; letter-spacing:0.08em; text-transform:uppercase;
  color:#fff; text-shadow:0 1px 8px rgba(0,0,0,0.4);
  transition:opacity .2s;
}
.n-menu a:hover { opacity:0.55; }
.n-menu li.current-menu-item > a { font-weight:700; }

.n-lang {
  font-size:16px; font-weight:500; letter-spacing:0.08em;
  color:#fff; opacity:0.5;
}
.n-burger { display:none; flex-direction:column; gap:5px; cursor:none; z-index:600; }
.n-burger span { display:block; width:24px; height:1.5px; background:#fff; transition:transform .3s, opacity .3s; }

nav.nav-hidden  { transform:translateY(-100%); }
nav.nav-compact {
  background:rgba(10,10,10,0.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-top:16px; padding-bottom:16px;
  box-shadow:0 1px 0 rgba(255,255,255,0.05);
}
nav.nav-compact .n-menu { gap:40px; }
nav.nav-compact .n-menu a { font-size:14px; text-shadow:none; }
nav.nav-compact .n-lang { font-size:13px; }
nav.nav-compact .n-logo { height:49px; width:92px; }
nav.nav-compact .n-logo .logo-white { opacity:0; }
nav.nav-compact .n-logo .mono-white { opacity:1; }

/* === MOBILE MENU === */
.mobile-menu { display:none; }
@media(max-width:900px){
  .mobile-menu {
    display:flex; position:fixed; inset:0; z-index:550;
    background:var(--black);
    flex-direction:column; align-items:flex-start; justify-content:center;
    gap:8px; padding:40px;
    transform:translateY(-100%);
    transition:transform .45s cubic-bezier(.7,0,.2,1);
  }
  .mobile-menu.open { transform:translateY(0); }
  .mobile-menu a {
    font-size:34px; font-weight:700; text-transform:uppercase; color:#fff; line-height:1.15;
    opacity:0; transform:translateY(14px);
    transition:opacity .4s ease, transform .4s ease;
  }
  .mobile-menu.open a { opacity:1; transform:translateY(0); }
  .mobile-menu.open a:nth-child(1){ transition-delay:.08s; }
  .mobile-menu.open a:nth-child(2){ transition-delay:.14s; }
  .mobile-menu.open a:nth-child(3){ transition-delay:.20s; }
  .mobile-menu.open a:nth-child(4){ transition-delay:.26s; }
  .mobile-menu.open a:nth-child(5){ transition-delay:.32s; }
  .mm-lang { font-size:13px; font-weight:500; letter-spacing:0.1em; color:rgba(255,255,255,0.3); margin-top:32px; }
  .n-menu { display:none; }
  .n-lang { display:none; }
  .n-burger { display:flex; }
  body.menu-open .n-burger span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  body.menu-open .n-burger span:nth-child(2){ opacity:0; }
  body.menu-open .n-burger span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  nav { padding:18px 22px; }
  .n-logo { height:30px; width:142px; }
}

/* === HEADER STRIP === */
/* v4.0: rimosso border-bottom — griglia in continuità con header */
.pf-header {
  display:flex; align-items:flex-end; justify-content:space-between;
  padding:140px clamp(24px,5vw,80px) 28px;
}
.pf-header-left { display:flex; flex-direction:column; gap:6px; }
.pf-header-label {
  font-size:clamp(32px,4vw,56px);
  font-weight:700; letter-spacing:-0.03em;
  text-transform:uppercase; line-height:1.0;
}
.pf-header-sub {
  font-size:11px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.45);
}
.pf-header-count {
  font-size:11px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.3);
  padding-bottom:4px;
}

/* === GRIGLIA === */
/* v4.0: padding:0 — full-bleed, griglia tocca i bordi */
.pf-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2px;
  padding:0;
}

/* === CARD ANIMATION === */
@keyframes pfIn {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}

/* === CARD === */
.pf-card {
  position:relative; overflow:hidden;
  display:block;
  animation:pfIn 0.8s cubic-bezier(.2,.7,.2,1) both;
}

a.pf-card { cursor:none; }
div.pf-card { cursor:default; }

/* Immagine */
.pf-card-bg {
  aspect-ratio:3/4;
  background:#181818;
  position:relative;
  overflow:hidden;
}
.pf-card-bg img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 1.4s cubic-bezier(.16,1,.3,1);
}
/* v4.0: scala ridotta 1.04 → 1.02 */
a.pf-card:hover .pf-card-bg img { transform:scale(1.02); }

/* Overlay */
.pf-card::after {
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.3)  45%,
    rgba(0,0,0,0.05) 100%
  );
  transition:opacity .5s ease;
  pointer-events:none;
}
a.pf-card:hover::after { opacity:1.0; }
div.pf-card::after { opacity:0.55; }

/* Numero progetto */
.pf-num {
  position:absolute; top:24px; left:28px;
  font-size:10px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(255,255,255,0.35);
  z-index:2;
  transition:color .3s;
}
a.pf-card:hover .pf-num { color:rgba(255,255,255,0.6); }

/* Info overlay */
.pf-info {
  position:absolute; bottom:0; left:0; right:0;
  padding:0 32px 32px;
  z-index:2;
  display:flex; flex-direction:column; gap:6px;
}

/* v4.0: categoria sempre visibile a riposo */
.pf-info-cat {
  font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(255,255,255,0.55);
}

/* v4.0: titolo emerge sull'hover (nascosto a riposo) */
.pf-info-title {
  font-size:clamp(20px,2.2vw,32px);
  font-weight:700; letter-spacing:-0.02em;
  line-height:1.0; text-transform:uppercase;
  color:#fff;
  transform:translateY(8px);
  opacity:0;
  transition:transform .45s cubic-bezier(.2,.7,.2,1) .04s, opacity .45s ease .04s;
}

/* Hover: titolo sale e appare */
a.pf-card:hover .pf-info-title { transform:translateY(0); opacity:1; }

/* Senza link: titolo sempre visibile */
div.pf-card .pf-info-title { transform:translateY(0); opacity:1; }

/* === FOOTER === */
.pf-foot {
  display:flex; align-items:center; justify-content:space-between;
  padding:28px clamp(24px,5vw,80px);
  border-top:1px solid rgba(255,255,255,0.08);
  font-size:11px; color:rgba(255,255,255,0.3);
}
.pf-foot-links { display:flex; gap:24px; }
.pf-foot-links a { color:rgba(255,255,255,0.3); transition:color .2s; }
.pf-foot-links a:hover { color:#fff; }

/* === MOBILE === */
@media(max-width:680px){
  .pf-header {
    flex-direction:column; gap:12px; align-items:flex-start;
    padding:100px 22px 22px;
  }
  .pf-header-count { padding-bottom:0; }

  /* v4.0: mobile full-bleed */
  .pf-grid { grid-template-columns:1fr 1fr; gap:2px; padding:0; }
  .pf-card-bg { aspect-ratio:3/4; }

  /* Su mobile: tutto sempre visibile */
  .pf-info { padding:0 20px 24px; }
  .pf-info-cat { opacity:0.55; }
  .pf-info-title { transform:translateY(0); opacity:1; font-size:22px; }
  .pf-num { top:16px; left:18px; }

  .pf-foot { flex-direction:column; gap:14px; text-align:center; padding:28px 22px; }
  .pf-foot-links { justify-content:center; }
}

@media(prefers-reduced-motion:reduce){
  .pf-card { animation:none; opacity:1; }
}