/* =========================================================
   INDEX.CSS — stili specifici della Home
   (hero + sezione "Il mio stack")
========================================================= */

/* =========================================================
   HERO
========================================================= */
.hero{
  position:relative;
  min-height:calc(100vh - var(--nav-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  background:linear-gradient(120deg, var(--black) 0%, var(--black) 38%, var(--race-red-dark) 78%, var(--race-red) 100%);
  background-size:220% 220%;
  animation:hero-shift 14s ease-in-out infinite;
}
@keyframes hero-shift{
  0%{ background-position:0% 50%; }
  50%{ background-position:100% 50%; }
  100%{ background-position:0% 50%; }
}
.hero::before{
  /* faint carbon-fiber grid texture */
  content:"";
  position:absolute;
  inset:0;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 10px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 10px);
  pointer-events:none;
}

.hero .container{
  display:grid;
  grid-template-columns:minmax(220px, 360px) 1fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:2;
  padding-top:40px;
  padding-bottom:40px;
}

.hero-logo-slot{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  max-width:340px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px dashed rgba(255,255,255,0.25);
  border-radius:12px;
  background:rgba(255,255,255,0.04);
}
.hero-logo-slot img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:18px;
}
.hero-logo-slot .slot-label{
  position:absolute;
  bottom:-30px;
  left:0;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.45);
  text-transform:uppercase;
}

.hero-copy .eyebrow{ color:rgba(255,255,255,0.85); margin-bottom:18px; }
.hero-copy .eyebrow::before{ background:var(--white); }

.hero-name{
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  color:var(--white);
  margin-bottom:6px;
}
.hero-role{
  font-family:var(--font-display);
  font-size:clamp(1.1rem, 2.2vw, 1.5rem);
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.85);
  margin-bottom:26px;
}
.hero-role .pulse-dot{
  display:inline-block;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--white);
  margin-right:10px;
  animation:pulse 1.6s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{ opacity:1; transform:scale(1); }
  50%{ opacity:0.4; transform:scale(0.75); }
}

.hero-desc{
  max-width:560px;
  color:rgba(255,255,255,0.82);
  margin-bottom:34px;
  font-size:1.02rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

@media (max-width:760px){
  .hero .container{ grid-template-columns:1fr; text-align:left; padding-top:60px; }
  .hero-logo-slot{ max-width:220px; margin-bottom:10px; }
}

/* =========================================================
   STACK / SKILLS — "Pit board" a tier (senza percentuali)

   Ogni tecnologia ha un badge di stato qualitativo invece di
   una percentuale: più onesto per un junior dev e meno
   "vetrina di numeri" da giustificare.

   Tier disponibili (classe su .stack-tier):
   - tier-daily   -> "Uso quotidiano"
   - tier-solid   -> "Solido"
   - tier-growing -> "In crescita"
========================================================= */
.stack-board{
  background:var(--carbon);
  border:1px solid var(--carbon-2);
}

.stack-board-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 24px;
  border-bottom:1px solid var(--carbon-2);
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--steel-dim);
}
.stack-board-head .live{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--race-red);
}
.stack-board-head .live .dot{
  width:6px; height:6px;
  border-radius:50%;
  background:var(--race-red);
  animation:pulse 1.6s ease-in-out infinite;
}

.stack-categories{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
}
@media (min-width:760px){
  .stack-categories{ grid-template-columns:repeat(4, 1fr); }
}

.stack-cat-col{
  padding:24px;
  border-right:1px solid var(--carbon-2);
  border-bottom:1px solid var(--carbon-2);
}
@media (min-width:760px){
  .stack-cat-col:nth-child(5n){ border-right:none; }
  .stack-cat-col{ border-bottom:none; }
}
@media (max-width:759px){
  .stack-cat-col:nth-child(2n){ border-right:none; }
}

.stack-cat-label{
  font-family:var(--font-display);
  font-size:0.78rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--race-red);
  margin-bottom:18px;
  padding-bottom:10px;
  border-bottom:1px solid var(--carbon-2);
}

.stack-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}
.stack-item:last-child{ border-bottom:none; }

.stack-item-name{
  font-family:var(--font-body);
  font-weight:600;
  font-size:0.92rem;
  color:var(--white);
}

/* Badge di tier qualitativo */
.stack-tier{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-mono);
  font-size:0.62rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 9px;
  border:1px solid var(--carbon-3);
  white-space:nowrap;
}
.stack-tier::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  flex-shrink:0;
}

.stack-tier.tier-daily{
  color:var(--race-red);
  border-color:rgba(225,6,0,0.4);
  background:rgba(225,6,0,0.08);
}
.stack-tier.tier-daily::before{ background:var(--race-red); }

.stack-tier.tier-solid{
  color:var(--white);
  border-color:var(--carbon-3);
  background:rgba(255,255,255,0.04);
}
.stack-tier.tier-solid::before{ background:var(--steel); }

.stack-tier.tier-growing{
  color:var(--steel);
  border-color:var(--carbon-3);
  background:transparent;
}
.stack-tier.tier-growing::before{
  background:transparent;
  border:1px solid var(--steel-dim);
}