/************************************************************


 * SEZIONE MATTONE — V5 PRO (CSS RISCRITTO DA ZERO)


 * - Sfondo immagine mattone + scrim per contrasto


 * - Stelle SVG su 3 piani, fade-in automatico (anche senza JS)


 * - Parallax opzionale se JS imposta --offset


 * - Testo con reveal “a lama” + fade


 * - Z-index blindati: testo > stelle > scrim > bg


 ************************************************************/





/* Scope: tutto dentro la sezione per evitare conflitti globali */


.sezione-mattone-v5,


.sezione-mattone-v5 * { box-sizing: border-box; }





/* ===== LAYOUT SEZIONE ===== */


.sezione-mattone-v5{


  --wave-h: clamp(48px, 9vw, 80px);


  --pad-x: 6vw;


  --pad-y: clamp(56px, 8vh, 120px);


  --stroke: 3.2;                 /* spessore raggi stelle */


  position: relative;


  background: #a87344;           /* arancio mattone */


  color: #fff;


  min-height: clamp(520px, 58vw, 900px);


  padding: var(--pad-y) var(--pad-x) calc(var(--wave-h) + 24px);


  display: grid;


  place-items: center;


  overflow: clip;                 /* evita scroll bar su parallax */


  isolation: isolate;             /* nuovo stacking context */


}











/* ===== BACKGROUND + SCRIM ===== */


.sezione-mattone-v5 .mattone-bg{


  position: absolute; inset: 0;


  background: url("../Immagini/sfondomattone.png") center/cover no-repeat;


  opacity: .28;


  z-index: 1 !important;


}


.sezione-mattone-v5 .mattone-scrim{


  position: absolute; inset: 0;


  z-index: 2 !important;


  pointer-events: none;


  /* vignetta + gradiente per mantenere leggibilità del testo */


  background:


    radial-gradient(1200px 560px at 50% 48%, rgba(0,0,0,.08) 0%, rgba(0,0,0,.34) 60%, rgba(0,0,0,.52) 100%),


    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.20) 40%, rgba(0,0,0,.35) 100%);


}





/* ===== TESTO CENTRALE ===== */


.sezione-mattone-v5 .mattone-container{


  position: relative;


  z-index: 6 !important;           /* testo sopra le stelle */


  max-width: 1100px;


  text-align: center;


}


.sezione-mattone-v5 .mattone-block{


  margin: 0;


  font-family: "Playfair Display", serif;


  font-weight: 600;


  font-size: clamp(1.18rem, 2.5vw, 1.9rem);


  line-height: 1.5;


  text-wrap: balance;


}





/* Righe: reveal a lama (clip-path) + fade */


.sezione-mattone-v5 .line{


  display: block;


  opacity: 0;


  transform: translateY(14px);


  clip-path: inset(0 100% 0 0); /* lama da sx→dx */


  transition:


    opacity .55s ease,


    transform .55s ease,


    clip-path .9s cubic-bezier(.22,.65,.22,1);


  transition-delay: var(--delay, 0s);


}


.sezione-mattone-v5 .spacer{ margin-top: .6rem; }


.sezione-mattone-v5 .claim{


  font-size: clamp(1.26rem, 2.8vw, 2.15rem);


  line-height: 1.45;


  letter-spacing: .2px;


  margin-top: .25rem;


}





/* Evidenziatori coerenti con il sito */


.sezione-mattone-v5 .hl{


  background: linear-gradient(transparent 65%, rgba(255,255,255,.18) 65% 92%, transparent 0);


  padding-inline: 2px;


  font-weight: 700;


}


.sezione-mattone-v5 .hl-strong{


  background: linear-gradient(transparent 58%, rgba(189, 128, 48, 0.26) 58% 96%, transparent 0);


  padding-inline: 3px;


  font-weight: 800;


  text-shadow: 0 1px 0 rgba(0,0,0,.25);


}





/* Stato “sezione in vista”: se JS la aggiunge, sblocca le righe */


.sezione-mattone-v5.is-visible .line{


  opacity: 1;


  transform: none;


  clip-path: inset(0 0 0 0);


}





/* ===== ONDA MINIMA (sotto al contenuto) ===== */


.sezione-mattone-v5 .mattone-wave-min{


  position: absolute; left: 0; right: 0; bottom: -1px;


  width: 100%; height: var(--wave-h);


  z-index: 2;                       /* sotto le stelle e il testo */


  pointer-events: none;


}


.sezione-mattone-v5 .mattone-wave-min path{ fill: #35392a; }





/* ===== RESPONSIVE ===== */


@media (max-width: 768px){


  .sezione-mattone-v5{


    padding: 56px 5vw calc(var(--wave-h) + 20px);


  }


  .sezione-mattone-v5 .mattone-block{ font-size: 1.08rem; }


  .sezione-mattone-v5 .claim{ font-size: 1.18rem; }





/* ===== ACCESSIBILITÀ: riduzione movimento ===== */


@media (prefers-reduced-motion: reduce){


  .sezione-mattone-v5 .star{


    animation: none !important;


    opacity: 1 !important;


    transform: none !important;


  }


  .sezione-mattone-v5 .line{


    transition: none !important;


    opacity: 1 !important;


    transform: none !important;


    clip-path: none !important;


  }


  .sezione-mattone-v5 .plane-1,


  .sezione-mattone-v5 .plane-2,


  .sezione-mattone-v5 .plane-3{


    transform: none !important;


  }


  }


  }


/* Forza il colore del testo evidenziato a ereditare dal contesto */


.sezione-mattone-v5 .hl,


.sezione-mattone-v5 .hl-strong {


  color: inherit !important;


}





/* (opzionale) se vuoi un tono leggermente più “luminoso” nel claim */


.sezione-mattone-v5 .claim .hl-strong {


  color: #afbdad  !important; /* avorio chiaro usato per i titoli */


}





/* Forza colore H1 dentro la sezione mattone */


.sezione-mattone-v5 h1 {


  color: #344735 !important;   /* scegli qui il colore che preferisci */


  text-shadow: 0 1px 2px rgba(0,0,0,.25); /* opzionale, migliora contrasto */


}