/* =========================================================
   109TECH — stile del solo archivio (portfolio.html)
   Le parti comuni stanno in style.css.
========================================================= */

/* === TESTATA === */
.top{
  position:relative;z-index:5;
  display:flex;flex-direction:column;justify-content:center;
  padding:170px 40px 40px;
  max-width:1280px;margin:0 auto;
}
.top .tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.4em;color:var(--dim);
  text-transform:uppercase;margin-bottom:34px;display:flex;align-items:center;gap:14px;
}
.top .tag .line{width:60px;height:1px;background:linear-gradient(90deg,var(--dim),transparent)}
.top .glyph{font-size:clamp(52px,11vw,168px);margin-bottom:36px}
.top .meta-grid{margin-top:64px}

/* === REGISTRO === */
.projects{border-top:1px solid rgba(255,255,255,.1)}

.proj{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:76px minmax(0,1fr) 230px;gap:40px;
  padding:52px 24px 52px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  background:rgba(3,3,3,.62);
  transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.9,.2,1),
             background .5s,padding-left .6s cubic-bezier(.2,.9,.2,1);
}
.proj::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:0;
  background:linear-gradient(90deg,rgba(200,255,0,.09),rgba(200,255,0,0) 70%);
  transition:width .7s cubic-bezier(.2,.9,.2,1);pointer-events:none;
}
.proj:hover{background:rgba(6,6,6,.74);padding-left:24px}
.proj:hover::before{width:100%}

.proj .idx{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3em;color:var(--dim);
  padding-top:6px;padding-left:24px;transition:color .4s;
}
.proj:hover .idx{color:var(--accent)}

.proj .kicker{
  font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.3em;
  color:var(--dim);text-transform:uppercase;
}
.proj .name{
  font-family:'Space Grotesk',sans-serif;font-weight:300;
  font-size:clamp(32px,4.4vw,56px);line-height:1;letter-spacing:-.02em;
  margin-top:12px;color:var(--ink);text-shadow:var(--lift);
  transition:color .4s;
}
.proj:hover .name{color:var(--accent)}

/* La riga criptica: stessa voce della home, una frase sola. */
.proj .cifra{
  font-family:'Space Grotesk',sans-serif;font-weight:300;font-style:italic;
  font-size:clamp(17px,1.7vw,22px);line-height:1.35;letter-spacing:-.01em;
  color:var(--ink);margin-top:18px;max-width:600px;
  padding-left:16px;border-left:1px solid rgba(200,255,0,.45);
}

/* Il paragrafo tecnico: qui si dice cosa fa davvero. */
.proj .desc{
  font-weight:300;font-size:clamp(15px,1.35vw,17px);line-height:1.65;color:var(--dim);
  margin-top:20px;max-width:640px;
}
.proj .desc b{color:var(--ink);font-weight:400}

.proj .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.proj .tags span{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);
  border:1px solid rgba(255,255,255,.14);padding:6px 12px;border-radius:999px;
  transition:border-color .4s,color .4s;
}
.proj:hover .tags span{border-color:rgba(200,255,0,.3);color:var(--ink)}

/* Il link vero. ::after lo estende a tutta la scheda, così
   l'intera riga è cliccabile restando un solo <a>. */
.proj .go{
  display:inline-flex;align-items:center;gap:12px;margin-top:28px;
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);border:1px solid rgba(255,255,255,.2);
  padding:13px 22px;border-radius:999px;
  transition:border-color .35s,background .35s,color .35s;
}
.proj .go::after{content:"";position:absolute;inset:0;z-index:1}
.proj .go .arw{color:var(--accent);transition:transform .45s cubic-bezier(.2,.9,.2,1)}
.proj:hover .go{border-color:var(--accent);background:rgba(200,255,0,.1);color:var(--accent)}
.proj:hover .go .arw{transform:translate(4px,-4px)}

/* Colonna destra: coordinata + sigillo */
.proj .side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  text-align:right;gap:26px;padding-right:8px;
}
.proj .side .coord{
  font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:.2em;
  color:var(--dim);text-transform:uppercase;line-height:1.9;
}
.proj .side .coord b{display:block;color:var(--ink);font-weight:400}
.proj .sym{
  font-family:'Major Mono Display',monospace;font-size:82px;line-height:1;
  color:var(--ink);opacity:.22;
  transition:transform .8s cubic-bezier(.2,.9,.2,1),color .4s,opacity .4s;
}
.proj:hover .sym{transform:translateY(-8px) rotate(-4deg);color:var(--accent);opacity:1}

/* === CHIUSURA === */
.outro{text-align:center;padding:150px 40px 100px;position:relative;z-index:5}
.outro .big{
  font-family:'Major Mono Display',monospace;
  font-size:clamp(34px,8vw,120px);line-height:.95;letter-spacing:-.02em;
  background:linear-gradient(180deg,#fff,#666);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin-bottom:34px;
}
.outro .whisper{
  font-family:'Space Grotesk',sans-serif;font-weight:300;font-style:italic;
  font-size:clamp(16px,1.7vw,21px);line-height:1.45;color:var(--dim);
  max-width:520px;margin:0 auto 40px;text-shadow:var(--lift);
}
.outro .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

@media (max-width:1040px){
  .proj{grid-template-columns:64px minmax(0,1fr);gap:22px}
  .proj .side{
    grid-column:2;flex-direction:row;align-items:flex-end;justify-content:space-between;
    text-align:left;margin-top:34px;padding-right:0;
    border-top:1px solid rgba(255,255,255,.1);padding-top:24px;
  }
  .proj .side .coord{line-height:1.7}
  .proj .sym{font-size:56px}
}
@media (max-width:760px){
  .top{padding:130px 22px 20px}
  .top .glyph{margin-bottom:26px}
  .proj{padding:40px 18px 40px 0;gap:16px;grid-template-columns:46px minmax(0,1fr)}
  .proj .idx{padding-left:18px}
  .proj:hover{padding-left:18px}
  .proj .cifra{padding-left:12px}
  .outro{padding:100px 22px 70px}
}

/* Dove non c'e' un mouse il :hover resta appiccicato dopo il tap:
   l'animazione del padding rifaceva il layout della riga a meta'
   scroll. L'effetto e' pensato per il puntatore, qui non serve. */
@media (hover:none){
  .proj{transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.9,.2,1)}
  .proj:hover{background:rgba(3,3,3,.62);padding-left:0}
  .proj:hover::before{width:0}
}
@media (hover:none) and (max-width:760px){
  .proj:hover{padding-left:0}
}