*, *::before, *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: #0a0a0a;
      font-family: system-ui, sans-serif;
    }

    /* ========================================
       PRELOADER
       ======================================== */
    #preloader {
      position: fixed;
      inset: 0;
      z-index: 10000;
      background: #0a0a0a;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #preloader-logo {
      width: min(70vw, 400px);
      position: relative;
    }

    .logo-layer {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Layer bianco: posizione base */
    .logo-white {
      position: relative;
    }

    /* Wrapper giallo: sovrapposto al bianco, overflow hidden, width 0% → 100% */
    #preloader-fill {
      position: absolute;
      top: 0;
      left: 0;
      width: 0%;
      height: 100%;
      overflow: hidden;
    }

    /* SVG giallo: deve avere la STESSA dimensione del contenitore padre (#preloader-logo)
       non del wrapper clippato, così le lettere restano allineate */
    .logo-gold {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

    /* Forza la larghezza dell'SVG giallo a quella del container padre */
    #preloader-fill .logo-gold {
      width: 0px; /* verrà impostata via JS alla larghezza reale del logo */
      min-width: 0px;
    }

    nav .logo {
      display: flex;
      align-items: center;
    }
    
    nav .logo svg { 
      height: clamp(100px, 2vw, 150px); 
      width: auto; 
    padding:10px;}

    /* ========================================
       INTRO OVERLAY
       ======================================== */
    #intro-overlay {
      position: fixed;
      inset: 0;
      z-index: 9999;
      overflow: hidden;
      visibility: hidden; /* JS lo rende visibile dopo il preload */
    }

    #intro-counter {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      z-index: 10001;
      color: #fff;
      font-size: 0.75rem;
      font-weight: 300;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      opacity: 0; /* GSAP lo anima a 0.7 */
      font-variant-numeric: tabular-nums;
    }

    .intro-slide {
      position: absolute;
      inset: 0;
      overflow: hidden;
      will-change: transform, opacity;
    }

    /*
      STACKING: la slide 1 sta sopra tutte, la 4 sotto tutte.
      Quando la slide corrente svanisce, quella sotto è GIÀ visibile.
      Nessun nero tra le transizioni.
    */
    #slide-1 { z-index: 4; }
    #slide-2 { z-index: 3; }
    #slide-3 { z-index: 2; }
    #slide-4 { z-index: 1; }

    .intro-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      will-change: transform;
    }

    /* ========================================
       CURTAIN PANELS (nero, sopra tutto)
       Si aprono dal centro per rivelare slide 1
       ======================================== */
    .curtain-panel {
      position: absolute;
      left: 0;
      width: 100%;
      height: 50.1%; /* mezzo pixel di overlap per evitare linea sottile */
      background: #0a0a0a;
      z-index: 10;  /* sopra tutte le slide */
      will-change: transform;
    }

    #curtain-top {
      top: 0;
    }

    #curtain-bottom {
      bottom: 0;
    }

    /* ========================================
       MAIN CONTENT
       ======================================== */
    #main-content {
      width: 100%;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      color: #fff;
      font-size: 1.5rem;
      letter-spacing: 0.05em;
    }

    @media (min-width: 768px) {
      #main-content { font-size: 2rem; }
    }