/* home.css — stili della front page (statement, griglia, filtri, back-top, splash) */

/* ===== Contenitore home (compensa l'header fisso) ===== */
.home-main{padding-top:100px}

/* ===== Statement ===== */
.statement-wrap{max-width:1116px;margin:0 auto;padding:clamp(24px,3.5vw,40px) clamp(14px,4vw,40px)}
.statement{font-family:'Cormorant Garamond',serif;font-size:clamp(17px,2.4vw,26px);font-weight:500;color:var(--ink);line-height:1.5;text-align:justify;letter-spacing:-0.02em;word-spacing:-0.05em;max-width:calc(66.666% - 10px)}
/* Motto come h1: stessi margini che aveva da <p> (style.css: p margin-bottom 1.5em) e niente clear di Underscores */
h1.statement{margin:0 0 1.5em;clear:none}

/* ===== Filtri (tappa 2) ===== */
.filters-wrap{padding:8px clamp(14px,4vw,40px) 16px;display:flex;gap:28px;flex-wrap:wrap;max-width:1116px;margin:0 auto;align-items:baseline}
/* padding completo: annulla lo spazio laterale ereditato dai pulsanti di Underscores (style.css) */
.filter-btn{background:none;border:none;font-family:'Montserrat',sans-serif;font-size:11px;letter-spacing:0.18em;color:var(--ink);font-weight:300;padding:6px 0 3px;cursor:none;transition:all 0.3s}
.filter-btn.active{color:var(--terracotta);font-weight:500;border-bottom:1.5px solid var(--terracotta)}
.filter-btn:hover{color:#5C2D3E}

/* ===== Griglia progetti ===== */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;padding:0 clamp(14px,4vw,40px) 40px;max-width:1116px;margin:0 auto}
.project-card{position:relative;aspect-ratio:1;overflow:hidden;cursor:none;text-decoration:none;color:inherit;display:block}
.project-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(60%);transition:filter 0.5s}
.project-card:hover img{filter:grayscale(0%)}
.project-card-overlay{position:absolute;inset:0;background:rgba(248,245,240,0.88);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:16px;opacity:0;transition:opacity 0.4s}
.project-card:hover .project-card-overlay{opacity:1}
/* Da tastiera (Tab) la card si comporta come al passaggio del mouse; solo dove esiste il mouse, su telefono nessun cambiamento */
@media (hover:hover){
  .project-card:focus-visible img{filter:grayscale(0%)}
  .project-card:focus-visible .project-card-overlay{opacity:1}
}
.project-card-title{font-size:clamp(15px,1.9vw,18px);font-weight:700;color:var(--wine-deep);letter-spacing:0.04em}
.project-card-meta{font-family:'Cormorant Garamond',serif;font-size:clamp(13px,1.57vw,16px);font-style:italic;font-weight:500;color:var(--ink-mute);margin-top:5px}
.project-card-type{font-size:clamp(11px,1.12vw,12px);font-weight:300;letter-spacing:0.08em;color:#6E635A;margin-top:4px}
.project-card.is-hidden{display:none}
.projects-empty{max-width:1116px;margin:0 auto;padding:0 clamp(14px,4vw,40px) 60px;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--ink-mute)}

/* ===== Entrata animata (attivata dallo splash, tappa 3) ===== */
body.intro .project-card{opacity:0;transform:translateY(10px)}
body.intro .project-card.animate{animation:cellIn 0.5s ease forwards}
@keyframes cellIn{to{opacity:1;transform:translateY(0)}}

/* ===== Back to top (tappa 2) ===== */
.back-top-wrap{text-align:center;padding:clamp(20px,3vw,32px) 0}
.back-top{background:none;border:none;cursor:none;display:inline-flex;flex-direction:column;align-items:center;animation:blink 1.5s ease-in-out infinite}
.back-top svg{width:28px;height:28px;fill:none;stroke:var(--blue-soft);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;margin-top:-12px}
.back-top svg:first-child{margin-top:0}

/* ===== Splash d'ingresso (tappa 3) ===== */
.splash{position:fixed;inset:0;background:var(--cream);display:none;flex-direction:column;justify-content:center;align-items:center;z-index:9999;cursor:none;transition:opacity 0.8s,visibility 0.8s}
body.intro .splash{display:flex}
.splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-logo{opacity:0;transform:scale(0.8);animation:logoIn 1.4s cubic-bezier(0.25,0.1,0.25,1) 0.4s forwards;color:var(--ink)}
.splash-logo svg,.splash-logo img{height:clamp(50px,7.5vw,76px);width:auto;max-width:80vw;display:block}
.splash-address{position:absolute;bottom:90px;font-size:10px;font-weight:300;letter-spacing:0.08em;color:var(--blue-soft);opacity:0;animation:fadeUp 0.8s ease 1.6s forwards}
.splash-social{position:absolute;bottom:28px;display:flex;gap:clamp(14px,1.5vw,20px);align-items:center;opacity:0;animation:fadeUp 0.8s ease 1.8s forwards}
.splash-social .social-icon{display:inline-flex;align-items:center;cursor:none;color:inherit;text-decoration:none}
.splash-social .social-icon svg{width:clamp(15px,1.6vw,18px);height:clamp(15px,1.6vw,18px);fill:var(--blue-soft);transition:fill 0.3s}
.splash-social .social-icon:hover svg{fill:var(--wine-deep)}
.splash-social .social-sep{width:1px;height:14px;background:var(--blue-soft);opacity:0.35}
@keyframes logoIn{from{opacity:0;transform:scale(0.8)}to{opacity:1;transform:scale(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ===== Responsive ===== */
@media(max-width:900px){
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .statement{max-width:100%}
}
@media(max-width:580px){
  .projects-grid{grid-template-columns:1fr;max-width:400px}
  /* Telefono: filtri su una riga. Via lo spazio laterale ereditato dai pulsanti di Underscores, testo e spaziature ridotti */
  .filters-wrap{gap:8px;max-width:400px}
  .filter-btn{font-size:9px;letter-spacing:0.08em;padding:6px 0 3px}
}
/* Telefoni stretti (es. Android da 360px): mezzo pixel in meno per tenere i filtri su una riga */
@media(max-width:370px){
  .filter-btn{font-size:8.5px}
}