/* =========================
   FONTS
========================= */
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BlackItalic.otf);font-weight:900;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Black.otf);font-weight:900;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBold.otf);font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-ExtraBoldItalic.otf);font-weight:800;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Bold.otf);font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-BoldItalic.otf);font-weight:700;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBold.otf);font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-SemiBoldItalic.otf);font-weight:600;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Medium.otf);font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-MediumItalic.otf);font-weight:500;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Regular.otf);font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-RegularItalic.otf);font-weight:400;font-style:italic;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-Light.otf);font-weight:300;font-style:normal;font-display:swap;}
@font-face{font-family:"Serotiva";src:url(/assets/font/Serotiva-LightItalic.otf);font-weight:300;font-style:italic;font-display:swap;}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

:root{
  --pad:24px;
  --hamburger-size:32px;
  --report-col-width:min(680px,44vw);
  --content-x:40%;
  --content-w:55%;
  --text-light:#EAE9E8;
  --text-dark:#253126;
  --gray-dark:#A7A6A6;
  --gray-light:#D1D0D1;
  --bg:#EAE9E8;
  --bg-dark:#253126;
  --accent:#ff3b30;
}

/* =========================
   BASE
========================= */
body{
  background:#EAE9E8;
  font-family:"tt-commons-pro",sans-serif;
  color:#253126;
}

.hero{
  position:relative;
  padding:var(--pad);
  width: 100%;
}

/* HERO OVERLAY - Rimosso margin-top auto e altezza fissa */
.hero-overlay {
  position: relative;
  z-index: 5;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   HEADER, LOGO & MENU - TECHNOLOGY PAGE (STATIC BLACK)
   ============================================================ */

   .hero-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: clamp(10px, 2vw, 24px) clamp(16px, 3vw, 48px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    pointer-events: none;
}

.logo-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0 12px;
    height: 40px;
    --r: 6px;
    border-radius: var(--r);
    pointer-events: auto;
    
    /* Box grigio fisso fin dal caricamento */
    background-color: #D1D0D1; 
}

.logo img {
    height: 28px;
    width: auto;
    display: block;
    /* Non servono transizioni se il logo è già nero nell'HTML */
}

/* Pulizia: rimuoviamo blur che non servono più */
.logo-blur {
    display: none !important;
}

/* technology.css */
.page-technology .logo-wrap {
    background-color: #D1D0D1 !important; /* Grigio fisso */
    opacity: 1 !important;
    visibility: visible !important;
}

.page-technology .logo-blur {
    display: none !important; /* Eliminiamo il vecchio blur */
}

/* TITOLO E SOTTOTITOLO */ /* copiare tutta per prima parte senza immagine */
.hero-content{
  margin-top: clamp(80px, 12vh, 56px); 
  margin-left:clamp(16px,3vw,calc(var(--pad)/4));
  z-index:10;
  pointer-events:none;
}
.hero-content h1{
  font-family:"Serotiva",serif;
  font-size:clamp(42px, 7vw, 100px);
  line-height:1;
  font-weight:600;
  color:var(--text-dark);
}
.hero-description {
    margin-top: 284px; 
    margin-bottom: 24px; 
    margin-left: clamp(16px, 3vw, calc(var(--pad)/4));
    z-index: 10;
    pointer-events: none;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 300;
    line-height: 1.3;
    max-width: 1200px;
    color: var(--text-dark);
}

/* Stato iniziale per i titoli e descrizioni */
.hero-content h1, 
.hero-description {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Classe attivata da JS */
body.is-loaded .hero-content h1,
body.is-loaded .hero-description {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardo per la descrizione (per far apparire prima il titolo) */
body.is-loaded .hero-description {
    transition-delay: 0.4s;
}

/* copiare tutta per prima parte senza immagine */

/* CARD CON IMMAGINE FULL-BLEED */
.events-engagement {
    width: 100%;
    padding: 0 clamp(16px, 3vw, 48px) 40px; /* per spaziatura */ 
    position: relative;
    z-index: 4;
}

.engagement-card {
    width: 100%;
    min-height: 454px; /* Altezza desiderata */
    background: var(--bg-dark);
    border-radius: 30px;
    overflow: hidden;
    position: relative; /* Necessario per il posizionamento degli elementi interni */
    display: flex;
    align-items: center; /* Centra il contenuto verticalmente */
}

/* L'immagine ora copre l'intero sfondo della card */
.engagement-card-media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.engagement-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    display: block;
    /* Opzionale: aggiunge un leggero overlay scuro per leggere meglio il testo se l'immagine è chiara */
    filter: brightness(0.6); 
}

/* Il contenitore del testo si sovrappone all'immagine */
.engagement-card-top {
    position: relative;
    z-index: 2; /* Sopra l'immagine */
    width: 100%;
    padding: 64px; 
    display: grid;
    grid-template-columns: 200px 1fr; 
    column-gap: 350px;
    align-items: start;
}

.engagement-card-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px; 
}

.engagement-card-label .dot {
    width: 6px;
    height: 6px;
    background-color: #E6362A;
    border-radius: 50%;
}

.engagement-card-label .label-text {
    font-size: 20px;
    color: #EAE9E8;
    font-weight: 0;
}

.engagement-card-text {
    font-size: clamp(24px, 3.8vw, 46px);
    line-height: 1.2;
    font-weight: 300;
    color: #EAE9E8;
    margin: 0;
    max-width: 95%;
    /* Migliora la leggibilità su sfondi complessi */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2); 
}

/* =========================
   RESPONSIVE (MOBILE)
========================= */
@media (max-width: 980px) {
    .engagement-card {
        min-height: 320px;
    }

    .engagement-card-top {
        grid-template-columns: 1fr;
        padding: 40px 32px;
        gap: 20px;
    }
    
    .engagement-card-text {
        font-size: clamp(20px, 5vw, 28px);
        max-width: 100%;
    }

    .engagement-card-label {
        margin-top: 0;
    }
}

/* 3 CARDS */
.system{width:100%;}
.system-top{
  padding:12px calc((var(--pad)*2) + var(--hamburger-size)) 0 clamp(16px,3vw,calc(var(--pad)*2)); /* per spaziatura */ 
}
.system-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:300;
  color:#253126;
}
.system-cards{
  margin-top:32px;
  padding: 0 clamp(16px, 3vw, calc(var(--pad)*2)) 40px; /* per spaziatura */ 
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}
.system-card{
  background:#253126;
  color:var(--text-light);
  border-radius:20px;
  min-height:400px;
  padding:32px 28px 28px;
  display:flex;
  flex-direction:column;
  gap:16px;
}
.system-card h3{
  margin-top:auto;
  font-size:48px;
  font-weight:300;
}
.system-card p{
  font-size:20px;
  font-weight: 300;
  line-height:1.2;
  color:#D1D0D1;
}

/* animazione */
/* Stato iniziale Card .system */
.system-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
  }
  
  /* Classe attivata via JavaScript */
  .system-card.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  
  /* Effetto cascata (stagger) per le 3 card */
  .system-card:nth-child(2) { transition-delay: 0.2s; }
  .system-card:nth-child(3) { transition-delay: 0.4s; }

/* STEPS */
.steps{width:100%;}
.steps-top{
    padding:12px calc((var(--pad)*2) + var(--hamburger-size)) 0 clamp(16px,3vw,calc(var(--pad)*2)); /* per spaziatura */ 
}
.steps-label{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:20px;
  font-weight:300;
  color:#253126;
}
.steps-list{
  margin-top:32px;
  padding: 0 clamp(16px, 3vw, calc(var(--pad)*2)) 40px; /* per spaziatura */ 
  display:flex;
  flex-direction:column;
  gap:24px;
}
.step-item{border-bottom:1.5px solid #D1D0D1;padding-bottom:48px;}
.step-trigger{
  width:100%;
  display:grid;
  grid-template-columns:minmax(80px,120px) 1fr auto;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  text-align:left;
}
.step-num{font-size: clamp(48px, 7vw, 84px);line-height:1.05;color:#A7A6A6;font-weight:300;}
.step-title{font-size:clamp(48px, 7vw, 84px);line-height:1.05;font-weight:400;color:var(--text-dark);}

/* CONTENITORE ICONA */
.step-icon {
    position: relative;
    width: 24px;  /* Larghezza dell'area cliccabile dell'icona */
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* LINEE DELL'ICONA */
.step-icon span {
    position: absolute;
    background-color: #E6362A; /* Il tuo rosso */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* Linea Orizzontale (rimane sempre visibile per fare il "meno") */
.line-horizontal {
    width: 20px;
    height: 1.5px;
}

/* Linea Verticale (quella che ruota/sparisce) */
.line-vertical {
    width: 1.5px;
    height: 20px;
}

/* ==================================================
   ANIMAZIONE ALL'APERTURA (.is-open aggiunta allo step-item)
   ================================================== */

/* Ruotiamo la linea verticale per sovrapporla a quella orizzontale */
.step-item.is-open .line-vertical {
    transform: rotate(90deg);
    opacity: 0; /* Opzionale: la facciamo sparire per pulizia visiva */
}

/* Opzionale: rotazione leggera di tutta l'icona per dinamismo */
.step-item.is-open .step-icon {
    transform: rotate(180deg);
    transition: transform 0.5s ease;
}

/* Aggiornamento trigger per allineamento */
.step-trigger {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(80px, 120px) 1fr auto; /* 'auto' per l'icona */
    align-items: center;
    gap: 24px;
    background: none;
    border: none;
    padding: 24px 0; /* Aggiunto padding per migliorare il click */
    cursor: pointer;
    text-align: left;
}

.step-panel{max-height:0;overflow:hidden;transition:max-height 420ms ease;}
.step-item.is-open .step-panel{max-height:1200px;}

/* ==================================================
   SMOOTH ACCORDION ANIMATION
   ================================================== */

/* Contenitore principale del pannello */
.step-panel {
    max-height: 0;
    overflow: hidden;
    /* Transizione più morbida con timing specifico */
    transition: max-height 700ms cubic-bezier(0.4, 0, 0.2, 1);
}

.step-item.is-open .step-panel {
    /* Valore sufficiente per contenere testo + immagini */
    max-height: 1400px; 
}

/* Effetto di apparizione per i contenuti interni */
.step-details, .step-media {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Ritardo per aspettare che l'accordion inizi ad aprirsi */
    transition-delay: 100ms;
}

/* Quando l'item è aperto, i contenuti scorrono verso l'alto e appaiono */
.step-item.is-open .step-details,
.step-item.is-open .step-media {
    opacity: 1;
    transform: translateY(0);
}

/* Ritardo aggiuntivo per le immagini (effetto cascata) */
.step-item.is-open .step-media {
    transition-delay: 300ms;
}

/* Ottimizzazione immagini interne */
.step-media-item {
    transition: transform 0.8s ease;
}

.step-item.is-open .step-media-item:hover {
    transform: scale(1.02);
}

.step-details{
  display:grid;
  grid-template-columns: 1fr; 
  gap:48px;
  padding:24px 0 8px;
}
.step-details p{
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 300;
  line-height: 1.3;
  color:var(--text-dark);
  width:var(--content-w);
  margin-left:var(--content-x);
}
.step-stats{
  display:flex;
  gap:48px;
  width:var(--content-w);
  margin-left:var(--content-x);
}
.step-stat-value{font-size: clamp(48px, 7vw, 84px);line-height:1.05;color:#E6362A;font-weight:400;}
.step-stat-label{font-size:20px;line-height:1.3;color:#E6362A;margin-top:3px; font-weight: 300;}

.step-media{
  margin-top:36px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}
.step-media-item{
  height:400px;
  border-radius: 30px;
  background:#ddd;
  overflow:hidden;
}
.step-media-item img{width:100%;height:100%;object-fit:cover;display:block;}

/* ==================================================
   STEP IMAGES ANIMATION (MATCHING SYSTEM-CARD STYLE)
   ================================================== */

/* Contenitore immagini */
.step-media {
    margin-top: 36px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    /* Rimuoviamo la transizione dal contenitore per gestirla sui singoli figli */
}

/* Stato iniziale delle singole immagini (come .system-card) */
.step-media-item {
    height: 400px;
    border-radius: 30px;
    overflow: hidden;
    opacity: 0;
    transform: translateY(30px);
    /* Transizione identica alle System Cards */
    transition: opacity 1.4s cubic-bezier(0.2, 0.8, 0.2, 1), 
                transform 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

/* Quando la sezione si apre, le immagini diventano visibili */
.step-item.is-open .step-media-item {
    opacity: 1;
    transform: translateY(0);
}

/* Effetto cascata (stagger) identico alle 3 card della pagina Technology */
.step-item.is-open .step-media-item:nth-child(1) { 
    transition-delay: 0.1s; 
}
.step-item.is-open .step-media-item:nth-child(2) { 
    transition-delay: 0.3s; 
}
.step-item.is-open .step-media-item:nth-child(3) { 
    transition-delay: 0.5s; 
}

.step-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 980px) {
  :root {
    --content-x: 0%;
    --content-w: 100%;
  }

  .system-cards {
    grid-template-columns: 1fr;
  }

  .system-card {
    min-height: 320px;
    padding: 24px 22px 20px;
    gap: 12px;
  }

  .system-card h3 {
    font-size: clamp(32px, 6vw, 40px);
  }

  .system-card p {
    font-size: 18px;
  }

  .step-media {
    grid-template-columns: 1fr;
  }

  .step-media-item {
    height: 240px;
  }

  .step-trigger {
    grid-template-columns: minmax(48px, 72px) 1fr auto;
    gap: 2px;
    padding: 16px 0;
  }

  .step-num,
  .step-title {
    font-size: clamp(28px, 6.2vw, 38px);
  }

  .step-item {
    padding-bottom: 24px;
  }

  .steps-list {
    gap: 16px;
  }
}