/* ===== Voci per Voi — stile premium (complementa Tailwind CDN) ===== */
:root { --brand:#b21e1e; --brand-light:#d83232; --ink:#0e0e10; }

html { scroll-behavior:smooth; }
body { overflow-x:hidden; }
::selection { background:var(--brand); color:#fff; }

/* Scrollbar */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0a0a0b; }
::-webkit-scrollbar-thumb { background:#2a2a2e; border-radius:6px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand); }

/* ---------- NAV ---------- */
#nav.scrolled { background:rgba(14,14,16,.92); backdrop-filter:blur(10px); box-shadow:0 8px 30px rgba(0,0,0,.4); }
#nav.scrolled .h-20 { height:4rem; }
.nav-link { position:relative; color:rgba(255,255,255,.82); transition:color .2s; padding-bottom:4px; }
.nav-link:hover { color:#fff; }
.nav-link::after { content:""; position:absolute; left:0; bottom:0; height:2px; width:0; background:var(--brand); transition:width .3s; }
.nav-link:hover::after { width:100%; }

.burger-line { width:24px; height:2px; background:#fff; transition:.3s; transform-origin:center; }
#burger.open .burger-line:nth-child(1){ transform:translateY(6px) rotate(45deg); }
#burger.open .burger-line:nth-child(2){ opacity:0; }
#burger.open .burger-line:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
#mobile-menu.open { transform:translateX(0); }
.m-link { color:rgba(255,255,255,.85); transition:color .2s; }
.m-link:hover { color:var(--brand-light); }

/* ---------- BUTTONS ---------- */
.btn-primary { display:inline-flex; align-items:center; gap:.5rem; background:var(--brand); color:#fff;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; font-weight:500;
  padding:.85rem 1.9rem; border-radius:9999px; transition:.25s; }
.btn-primary:hover { background:var(--brand-light); transform:translateY(-2px); box-shadow:0 12px 30px rgba(178,30,30,.4); }
.btn-ghost { display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.35); color:#fff;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.08em; padding:.85rem 1.9rem; border-radius:9999px; transition:.25s; }
.btn-ghost:hover { background:#fff; color:var(--ink); }

/* ---------- SECTIONS ---------- */
.section { padding:7rem 0; }
@media (max-width:768px){ .section{ padding:4.5rem 0; } }

/* ---------- HERO ---------- */
.hero-slide { position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.hero-slide.is-active { opacity:1; }
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center; transform:scale(1.08); }
.hero-slide.is-active .hero-bg { animation:kenburns 8s ease forwards; }
@keyframes kenburns { from{ transform:scale(1.08);} to{ transform:scale(1.18);} }

.hero-arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:20; width:54px; height:54px;
  border:1px solid rgba(255,255,255,.3); border-radius:9999px; color:#fff; font-size:30px; line-height:1;
  background:rgba(0,0,0,.2); transition:.25s; display:grid; place-items:center; }
.hero-arrow:hover { background:var(--brand); border-color:var(--brand); }
.hero-dot { width:11px; height:11px; border-radius:9999px; border:1.5px solid #fff; opacity:.6; transition:.25s; }
.hero-dot.is-active { background:var(--brand); border-color:var(--brand); opacity:1; width:30px; border-radius:6px; }
.hero-caption { font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; opacity:.85; }

.scroll-mouse { width:22px; height:36px; border:2px solid rgba(255,255,255,.5); border-radius:14px; position:relative; }
.scroll-mouse::after { content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; background:#fff; border-radius:3px; transform:translateX(-50%); animation:scrolldot 1.6s infinite; }
@keyframes scrolldot { 0%{opacity:0;transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0;transform:translate(-50%,12px);} 100%{opacity:0;} }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal { opacity:0; transform:translateY(34px); transition:opacity .8s ease, transform .8s ease; }
.reveal.in { opacity:1; transform:none; }

/* ---------- PROSE ---------- */
.prose-dark { color:rgba(255,255,255,.72); line-height:1.75; }
.prose-dark p { margin-bottom:1rem; }
.prose-dark strong { color:#fff; }
.prose-dark em { color:var(--brand-light); font-style:italic; }
.prose-dark a { color:var(--brand-light); text-decoration:underline; }
.prose-dark ul { list-style:disc; padding-left:1.25rem; margin-bottom:1rem; }

.stat { border-left:2px solid var(--brand); padding-left:1rem; }

/* ---------- EVENTI ---------- */
.event-card { background:#17171a; border:1px solid #2a2a2e; border-radius:1rem; overflow:hidden; transition:.3s; }
.event-card:hover { transform:translateY(-6px); border-color:var(--brand); box-shadow:0 20px 40px rgba(0,0,0,.5); }
.event-img { position:relative; height:220px; background-size:cover; background-position:center; }
.event-date { position:absolute; top:1rem; left:1rem; background:var(--brand); color:#fff; padding:.6rem .9rem; border-radius:.6rem; text-align:center; font-family:'Oswald',sans-serif; }

/* ---------- CORISTI ---------- */
.chorister { border-radius:1rem; overflow:hidden; background:#17171a; border:1px solid #2a2a2e; transition:.3s; }
.chorister:hover { border-color:var(--brand); transform:translateY(-4px); }
.chorister-photo { aspect-ratio:1/1; background-size:cover; background-position:center; filter:grayscale(.35); transition:.4s; }
.chorister:hover .chorister-photo { filter:grayscale(0); }
.chorister-info { padding:.85rem 1rem 1.1rem; }

/* ---------- GALLERIA ---------- */
.gallery-grid { columns:1; column-gap:1.25rem; }
@media (min-width:640px){ .gallery-grid{ columns:2; } }
@media (min-width:1024px){ .gallery-grid{ columns:3; } }
.gallery-item { break-inside:avoid; margin-bottom:1.25rem; position:relative; border-radius:1rem; overflow:hidden; cursor:pointer; }
.gallery-img { min-height:240px; background-size:cover; background-position:center; transition:transform .6s; }
.gallery-item:nth-child(3n) .gallery-img { min-height:320px; }
.gallery-item:nth-child(4n) .gallery-img { min-height:280px; }
.gallery-item:hover .gallery-img { transform:scale(1.07); }
.gallery-cap { position:absolute; inset:auto 0 0 0; padding:1.4rem 1.2rem .9rem; display:flex; flex-direction:column;
  background:linear-gradient(to top,rgba(14,14,16,.95),transparent); opacity:0; transition:.3s; }
.gallery-item:hover .gallery-cap { opacity:1; }

/* Lightbox */
#lightbox { position:fixed; inset:0; z-index:80; background:rgba(8,8,9,.96); display:none; align-items:center; justify-content:center; flex-direction:column; padding:2rem; }
#lightbox.open { display:flex; }
#lightbox img { max-width:92vw; max-height:80vh; border-radius:.5rem; box-shadow:0 30px 80px rgba(0,0,0,.7); }
#lightbox .lb-meta { margin-top:1rem; text-align:center; font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.05em; }
#lightbox .lb-close { position:absolute; top:1.4rem; right:1.6rem; font-size:2rem; color:#fff; cursor:pointer; }

/* ---------- CONTATTI ---------- */
.contact-row { display:flex; gap:1rem; align-items:center; }
.contact-ico { flex:none; width:46px; height:46px; border-radius:9999px; display:grid; place-items:center; background:rgba(178,30,30,.15); color:var(--brand-light); font-size:1.1rem; }
.contact-form { background:#17171a; border:1px solid #2a2a2e; border-radius:1.25rem; padding:2rem; }
.field { background:#0e0e10; border:1px solid #34343a; border-radius:.6rem; padding:.8rem 1rem; color:#fff; transition:.2s; }
.field:focus { outline:none; border-color:var(--brand); }
.field::placeholder { color:rgba(255,255,255,.4); }

.social-ico { width:40px; height:40px; border-radius:9999px; border:1px solid rgba(255,255,255,.2); display:grid; place-items:center;
  font-family:'Oswald',sans-serif; text-transform:lowercase; transition:.25s; color:rgba(255,255,255,.7); }
.social-ico:hover { background:var(--brand); border-color:var(--brand); color:#fff; }

#to-top.show { opacity:1; pointer-events:auto; }