@charset "UTF-8";
/*
* Version 1.0.0
*/
/*
*
* Contexts
*/
/* Overlay del loader */
    #loader {
      position: fixed;
      inset: 0;
      background: #ffffff;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 0.14s ease;
    }

    /* Contenitore linea + logo */
    .loader-line {
      position: relative;
      display: flex;
      align-items: center;
      width: 80%;
      max-width: 1800px;
      gap: 28px;
    }

    /* LOGO con fade-in fluido (senza salto iniziale di scala) */
    .loader-logo {
      width: 300px;
      height: auto;
      opacity: 0;
      transform: translate3d(0, 0, 0);
      backface-visibility: hidden;
      will-change: opacity;
      animation: logoFadeIn 250ms ease-out both;
    }

    @keyframes logoFadeIn {
      from {
        opacity: 1;
      }
      to {
        opacity: 1;
      }
    }

    /* Linee ROSSE più spesse */
    .line {
      height: 5px;
      background: #c21f1f;
      flex-grow: 1;
      border-radius: 4px;
      animation: grow 1.2s ease-in-out infinite alternate;
      box-shadow: 0 0 0.5px rgba(0,0,0,0.08), 0 0 6px rgba(194,31,31,0.12) inset;
    }

    /* Origini diverse ma animazione IDENTICA → sincronizzate */
    .line.left {
      transform-origin: left;
    }
    .line.right {
      transform-origin: right;
    }

    /* Animazione perfettamente sincronizzata */
    @keyframes grow {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }

    .content {
      padding: 40px;
      text-align: center;
      font-family: Arial, sans-serif;
    }

    /* === OTTIMIZZAZIONE MOBILE === */

    /* Tablet e dispositivi medi (fino a 768px) */
    @media (max-width: 768px) {
      .loader-line {
        width: 90%;
        gap: 20px;
      }

      .loader-logo {
        width: 200px;
      }

      .line {
        height: 4px;
      }
    }

    /* Smartphone (fino a 480px) */
    @media (max-width: 480px) {
      .loader-line {
        width: 85%;
        gap: 12px;
      }

      .loader-logo {
        width: 140px;
      }

      .line {
        height: 3px;
      }
    }

    /* Smartphone piccoli (fino a 360px) */
    @media (max-width: 360px) {
      .loader-line {
        width: 90%;
        gap: 8px;
      }

      .loader-logo {
        width: 110px;
      }

      .line {
        height: 2.5px;
      }
    }