/*====================================================
  LESBIANTH — COMMONS (riusabile per index, login, main)
  Palette, font, layout base, componenti condivisi
====================================================*/

/* --- Variabili --- */
:root{
  /* palette neon */
  --neon-pink:#ff2ccd; --neon-cyan:#14f6ff; --neon-violet:#9b5cff; --neon-yellow:#ffc857;
  /* grigi */
  --gray-950:#07080b; --gray-900:#0b0c10; --gray-850:#161820; --gray-820:#1a1d26; --gray-800:#1f1f24;
  --white:#fafafa;
  /* raggi e spaziature comuni */
  --radius-xl:28px; --radius-xxl:36px;
  color-scheme: dark light;
  --step--1: clamp(.85rem, .78rem + .2vw, .95rem);
  --step-0:  clamp(1rem,  .92rem + .3vw, 1.125rem);
  --step-1:  clamp(1.25rem,1.1rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.3rem + 1vw,  2rem);
} /* scrollbar, form, etc. */
* { scrollbar-width: thin; scrollbar-color: #4dfcff #0a0a0f; }
::-webkit-scrollbar{ width:.6rem } 
::-webkit-scrollbar-thumb{ background: linear-gradient(#14f6ff,#ff2ccd); }
body{ font-size:var(--step-0); }
h1{ font-size:var(--step-2); }
h2{ font-size:var(--step-1); }


/* --- Base / Typography --- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"IBM Plex Sans",Arial,Helvetica,sans-serif;
  background:var(--gray-900); color:var(--white);
  overflow-x:hidden;
}
.section-title{
  font-family:"Orbitron",sans-serif; font-weight:700;
  letter-spacing:.5px; text-transform:uppercase;
}
.gradient-text{
  background:linear-gradient(90deg,var(--neon-pink),var(--neon-cyan),var(--neon-violet));
  -webkit-background-clip:text; color:transparent;
}

/* --- Navbar (riusabile ovunque) --- */
.navbar{backdrop-filter:blur(6px); background:rgba(15,15,20,.55)!important}
.navbar-brand{font-family:"Orbitron",sans-serif}
.nav-link{color:#fff!important}
.nav-link:hover{color:var(--neon-pink)!important}
.glass-nav{background:rgba(15,15,20,.45)!important; backdrop-filter:saturate(120%) blur(8px)}
.neon-edge{position:relative}
.neon-edge::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; opacity:.9;
  background:linear-gradient(90deg,transparent,var(--neon-pink),var(--neon-cyan),transparent);
}

/* --- Pulsanti --- */
.btn-lesb{
  background:var(--neon-pink); border:none; color:#fff; font-weight:700;
  padding:.85rem 2.2rem; border-radius:999px;
  box-shadow:0 0 8px var(--neon-pink); transition:transform .25s, box-shadow .25s;
}
.btn-lesb:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 0 16px var(--neon-cyan)}

/* --- Sezioni comuni (riusabili) --- */
.section{
  position:relative; padding:7rem 0;           /* più grande come richiesto */
  margin-block:2.25rem;
  border-radius:var(--radius-xxl);
  overflow:hidden;                              /* per divider/pannelli */
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04) inset,
    0 10px 30px rgba(0,0,0,.35),
    0 0 24px rgba(20,246,255,.06),
    0 0 24px rgba(255,44,205,.06);
}

/* Varianti riusabili di sezione */
.section-gradient{
  background:linear-gradient(180deg,#15161b 0%, #0b0c10 100%);
}
.section-ink{
  background:linear-gradient(180deg,#0d0f15 0%, #0b0c10 100%);
}
.section-grid{
  background:
    radial-gradient(1200px 900px at 12% 10%, rgba(20,246,255,.14), transparent 60%),
    radial-gradient(900px 700px at 88% 0%,  rgba(255,44,205,.14), transparent 60%),
    #12151c;
}
.section-grid-alt{
  background:
    radial-gradient(1000px 800px at 80% 18%, rgba(155,92,255,.14), transparent 60%),
    radial-gradient(900px 700px at 0% 100%,  rgba(255,200,87,.14), transparent 60%),
    #141820;
}
/* Foto di sfondo riusabile: imposta --photo in linea o via classe specifica */
.section-photo{background:var(--gray-900)}
.section-photo::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:var(--photo); background-size:cover; background-position:center;
  filter:contrast(1.07) brightness(.72);
}
.section-photo::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.6));
}

/* Pannelli (riusabili) */
.panel{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
  border-radius:var(--radius-xl);
  box-shadow:0 10px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.04);
  padding:2rem;
}
.panel-translucent{
  background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.2));
  border-color:rgba(255,255,255,.08);
}
.panel-dark{
  background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.35));
  border-color:rgba(255,255,255,.06);
}
.panel-light{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid rgba(255,255,255,.10);
}

/* Divider diagonali (riusabili) */
.divider{position:absolute; left:0; right:0; height:84px; overflow:hidden; pointer-events:none}
.divider-bottom{bottom:-2px}
.divider svg{display:block; width:100%; height:100%}
.divider polygon{
  /* fallback gradient */
  fill:linear-gradient(90deg,transparent,var(--neon-pink),var(--neon-cyan),transparent);
}
.cards{ display:grid; gap:1rem; grid-template-columns:1fr; }
.cards > *{ container-type:inline-size; }
@container (min-width:40rem){
  .cards{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}

/* Cards (riutilizzabili in varie pagine) */
.card-lesb{
  background:var(--gray-800);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:0 0 0 1px rgba(255,255,255,.04) inset, 0 8px 26px rgba(0,0,0,.35);
  transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card-lesb:hover{
  transform:translateY(-6px);
  box-shadow:0 0 24px rgba(155,92,255,.35), 0 10px 30px rgba(0,0,0,.45);
  border-color:rgba(155,92,255,.55);
}
.card-lesb img{height:220px; object-fit:cover; filter:brightness(.9)}
.card-title{color:var(--neon-cyan); font-family:"Orbitron",sans-serif}

/* Liste / micro-typography */
.lore-item h5{color:var(--neon-yellow); font-family:"Orbitron",sans-serif}
hr.glow{
  border:none; height:2px;
  background:linear-gradient(90deg,transparent, var(--neon-pink), var(--neon-cyan),transparent);
  opacity:.6
}

/* Footer (riusabile) */
.site-footer{
  background:#111115; color:#a8a8a8; text-align:center;
  padding:2.5rem 0; font-size:.9rem;
}
.site-footer a{color:var(--neon-cyan); text-decoration:none}
.site-footer a:hover{text-decoration:underline}

/* Utilities */
.reveal{opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease}
.reveal.active{opacity:1; transform:none}
:focus-visible{outline:2px solid var(--neon-cyan); outline-offset:2px; border-radius:.25rem}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto}
}