/* =============================================================================
 * trupija.css - Stili estratti da index.html (FASE A refactor)
 * NOTA: path font resi assoluti (/fonts/...) per funzionare da assets/css/
 * ============================================================================= */

/* ---------- Font-face Nunito custom (originariamente righe 95-100) ---------- */
    @font-face{font-family:'Nunito';font-style:normal;font-weight:300;font-display:swap;src:url('../../fonts/nunito-300.woff2') format('woff2');}
    @font-face{font-family:'Nunito';font-style:normal;font-weight:400;font-display:swap;src:url('../../fonts/nunito-400.woff2') format('woff2');}
    @font-face{font-family:'Nunito';font-style:normal;font-weight:700;font-display:swap;src:url('../../fonts/nunito-700.woff2') format('woff2');}
    @font-face{font-family:'Nunito';font-style:normal;font-weight:900;font-display:swap;src:url('../../fonts/nunito-900.woff2') format('woff2');}

/* ---------- iOS optimizations (originariamente righe 115-139) ---------- */
    /* Su iOS, sostituisco backdrop-blur con sfondo opaco (no GPU memory waste) */
    .is-ios .backdrop-blur-xl,
    .is-ios .backdrop-blur-lg,
    .is-ios .backdrop-blur-md,
    .is-ios .backdrop-blur-sm,
    .is-ios .backdrop-blur,
    .is-ios [class*="backdrop-blur"] {
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    /* Aumento l'opacità degli sfondi che usavano blur+transparency su iOS,
       cosi' la UI resta leggibile senza l'effetto vetro */
    .is-ios .bg-black\/95,
    .is-ios .bg-black\/90 { background-color: rgba(0,0,0,0.97) !important; }
    .is-ios .bg-black\/98,
    .is-ios .bg-black\/99 { background-color: rgba(0,0,0,0.99) !important; }
    .is-ios .bg-black\/80,
    .is-ios .bg-black\/70,
    .is-ios .bg-black\/60 { background-color: rgba(0,0,0,0.92) !important; }
    .is-ios .bg-white\/10,
    .is-ios .bg-white\/20 { background-color: rgba(31,41,55,0.95) !important; }
    /* Tolgo will-change inutile su iOS (forzano layer GPU pesanti) */
    .is-ios * { will-change: auto !important; }

/* ---------- Tema Trupija principale (originariamente righe 175-945) ---------- */
    #hero-section { transition: background 1.5s ease-in-out; } #hero-bg-image { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; z-index: 0; transition: all 1.5s ease-in-out; }
    @keyframes coinFlip { 0% { transform: perspective(800px) rotateY(0deg) scale(1); } 50% { transform: perspective(800px) rotateY(180deg) scale(1.15); } 100% { transform: perspective(800px) rotateY(360deg) scale(1); } } .animate-coin { animation: coinFlip 0.8s cubic-bezier(0.45, 0.05, 0.55, 0.95); }
    @keyframes marquee { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } }
    .animate-marquee { animation: marquee 30s linear infinite; }
    .animate-marquee:hover { animation-play-state: paused; }
    /* Logo: niente "Salva immagine" su long-press */
    img[alt="Trupija Logo"] {
      -webkit-touch-callout: none !important;
      -webkit-user-select: none !important;
      user-select: none !important;
      -webkit-user-drag: none !important;
      pointer-events: auto;
    }
    @keyframes saltoCarpiato {
      0%   { transform: translateY(0) rotate(0deg) scale(1); }
      15%  { transform: translateY(-90px) rotate(180deg) scale(1.05); }
      25%  { transform: translateY(-130px) rotate(360deg) scale(1); }
      35%  { transform: translateY(-50px) rotate(540deg) scale(1.05); }
      45%  { transform: translateY(0) rotate(720deg) scale(0.85, 1.15); }
      55%  { transform: translateY(-110px) rotate(900deg) scale(1.05); }
      65%  { transform: translateY(-150px) rotate(1080deg) scale(1); }
      80%  { transform: translateY(-40px) rotate(1260deg) scale(1.05); }
      92%  { transform: translateY(0) rotate(1440deg) scale(0.8, 1.2); }
      100% { transform: translateY(0) rotate(1440deg) scale(1); }
    }
    .animate-salto-carpiato {
      animation: saltoCarpiato 1.4s cubic-bezier(0.5, 0.05, 0.4, 1);
      filter: drop-shadow(0 20px 25px rgba(212,239,0,0.45));
    }
    @keyframes float { 0% { transform: translateY(100vh) translateX(0px); opacity: 0; } 10% { opacity: 0.4; } 90% { opacity: 0.4; } 100% { transform: translateY(-10vh) translateX(50px); opacity: 0; } } .particle { position: absolute; font-size: 1.5rem; color: rgba(212, 239, 0, 0.6); animation: float 10s infinite linear; filter: drop-shadow(0 0 5px rgba(212, 239, 0, 0.5)); }
    @keyframes dinoWander { 0% { transform: translate(-20vw, 80vh) scaleX(-1) rotate(0deg); opacity: 0; } 2% { opacity: 1; } 5% { transform: translate(10vw, 70vh) scaleX(-1) rotate(-15deg); } 10% { transform: translate(30vw, 85vh) scaleX(-1) rotate(10deg); } 15% { transform: translate(50vw, 70vh) scaleX(-1) rotate(-15deg); } 20% { transform: translate(70vw, 85vh) scaleX(-1) rotate(10deg); } 25% { transform: translate(120vw, 70vh) scaleX(-1) rotate(0deg); opacity: 1; } 26% { opacity: 0; transform: translate(120vw, 30vh) scaleX(1) rotate(0deg); } 27% { opacity: 1; } 30% { transform: translate(90vw, 40vh) scaleX(1) rotate(-15deg); } 35% { transform: translate(70vw, 25vh) scaleX(1) rotate(10deg); } 40% { transform: translate(50vw, 40vh) scaleX(1) rotate(-15deg); } 45% { transform: translate(30vw, 25vh) scaleX(1) rotate(10deg); } 50% { transform: translate(-20vw, 40vh) scaleX(1) rotate(0deg); opacity: 1; } 51% { opacity: 0; transform: translate(-20vw, 80vh) scaleX(-1) rotate(0deg); } 100% { opacity: 0; transform: translate(-20vw, 80vh) scaleX(-1) rotate(0deg); } }
    .cloud-card { background: rgba(30, 58, 138, 0.2); backdrop-filter: blur(12px); border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; border: 1px solid rgba(212, 239, 0, 0.2); box-shadow: 0 15px 35px rgba(0,0,0,0.4); transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cloud-card:hover { border-radius: 50%; transform: translateY(-5px) scale(1.02); border-color: rgba(212, 239, 0, 0.8); } .cloud-image-wrapper { border-radius: 35% 55% 65% 35% / 40% 45% 55% 45%; overflow: hidden; transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .cloud-card:hover .cloud-image-wrapper { border-radius: 50%; }
    ::-webkit-scrollbar { width: 6px; } ::-webkit-scrollbar-thumb { background: #d4ef00; border-radius: 10px; } .custom-scrollbar::-webkit-scrollbar { width: 4px; } .custom-scrollbar::-webkit-scrollbar-thumb { background: #4b5563; border-radius: 10px; }
    @keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .marquee-container { overflow: hidden; width: 100vw; position: relative; left: 50%; margin-left: -50vw; padding: 2rem 0; } .marquee-track { display: flex; width: max-content; animation: scrollMarquee 40s linear infinite; gap: 2rem; padding: 0 1rem; } .marquee-track:hover, .marquee-track:active { animation-play-state: paused; }
    .modal-open { opacity: 1 !important; transform: scale(1) !important; pointer-events: auto !important; } .modal-container { transition: all 0.3s ease-out; opacity: 0; transform: scale(0.95); pointer-events: none; }

    /* ===== COVERFLOW 3D ===== */
    .cf-wrapper { width: 100%; position: relative; padding: 0; }
    .cf-stage {
      position: relative; height: 460px;
      display: flex; align-items: center; justify-content: center;
      perspective: 1400px;
      overflow: hidden;
      -webkit-tap-highlight-color: transparent;
      touch-action: pan-y;
    }
    .cf-track {
      position: relative;
      width: var(--cf-w, 320px); height: var(--cf-h, 400px);
      transform-style: preserve-3d;
    }
    .cf-card {
      position: absolute; inset: 0;
      border-radius: 20px; overflow: hidden;
      cursor: grab;
      backface-visibility: hidden;
      border: 3px solid rgba(255,255,255,0.1);
      transition: opacity 0.4s, border-color 0.4s, box-shadow 0.5s;
      box-shadow: 0 25px 50px rgba(0,0,0,0.7);
      background: rgba(20, 20, 20, 0.25); /* Card molto più trasparente per far passare il video */
      backdrop-filter: blur(2px);
      will-change: transform, opacity;
    }
    .cf-card:active { cursor: grabbing; }
    .cf-card img, .cf-card video { width: 100%; height: 65%; object-fit: cover; display: block; user-select: none; -webkit-user-drag: none; }
    .cf-card.is-center { border-color: #d4ef00; box-shadow: 0 30px 60px rgba(212,239,0,0.35), 0 0 0 1px rgba(212,239,0,0.2); }

    .cf-card .cf-info {
      padding: 14px 18px 16px; height: 35%;
      /* Info-block molto trasparente: sfumatura leggera, niente nero pieno in fondo */
      background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
      backdrop-filter: blur(4px);
      display: flex; flex-direction: column; justify-content: center;
      text-shadow: 0 2px 6px rgba(0,0,0,0.85); /* Leggibilità testo sopra video */
    }
    .cf-card .cf-data { color: #d4ef00; font-weight: 900; font-size: 18px; text-transform: uppercase; letter-spacing: -0.5px; line-height: 1; margin-bottom: 6px; }
    .cf-card .cf-titolo { font-weight: 900; font-size: 17px; color: #fff; text-transform: uppercase; letter-spacing: -0.3px; line-height: 1.15; margin: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .cf-card .cf-desc { color: #94a3b8; font-size: 11px; font-weight: 400; line-height: 1.35; margin-top: 6px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

    .cf-card.cf-gallery img, .cf-card.cf-gallery video { height: 100%; }
    .cf-card.cf-gallery .cf-info {
      position: absolute; inset: auto 0 0 0; height: auto;
      /* Gradiente galleria molto più chiaro e trasparente per far vedere i video */
      background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
      padding: 30px 18px 18px;
    }
    .cf-card.cf-gallery .cf-titolo { color: #d4ef00; font-size: 19px; }
    .cf-card.cf-gallery .cf-badge-foto {
      position: absolute; top: 12px; right: 12px;
      background: #d4ef00; color: #000;
      padding: 5px 10px; border-radius: 999px;
      font-size: 10px; font-weight: 900; letter-spacing: 0.5px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.4);
      display: flex; align-items: center; gap: 4px;
    }
    .cf-card.cf-gallery::after {
      content: 'RIVIVI L\'EVENTO'; position: absolute; top: 14px; left: 14px;
      background: rgba(0,0,0,0.7); backdrop-filter: blur(6px);
      color: #d4ef00; padding: 4px 10px; border-radius: 999px;
      font-size: 9px; font-weight: 900; letter-spacing: 1.5px;
      border: 1px solid rgba(212,239,0,0.3);
      opacity: 0; transition: opacity 0.4s;
    }
    .cf-card.cf-gallery.is-center::after { opacity: 1; }

    .cf-controls { display: flex; gap: 14px; justify-content: center; margin-top: 28px; align-items: center; }
    .cf-controls button { background: #d4ef00; color: #000; border: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; font-size: 16px; font-weight: 900; transition: all 0.3s; box-shadow: 0 8px 20px rgba(212,239,0,0.4); display: flex; align-items: center; justify-content: center; }
    .cf-controls button:hover { transform: scale(1.12); background: #fff; }
    .cf-controls button:active { transform: scale(0.95); }
    .cf-counter { color: #d4ef00; font-weight: 900; font-size: 13px; letter-spacing: 2px; min-width: 70px; text-align: center; font-variant-numeric: tabular-nums; }
    .cf-dots { display: flex; gap: 6px; justify-content: center; margin-top: 14px; flex-wrap: wrap; padding: 0 20px; }
    .cf-dots .cf-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.2); cursor: pointer; transition: all 0.3s; border: none; padding: 0; }
    .cf-dots .cf-dot.active { background: #d4ef00; width: 24px; border-radius: 999px; }

    .cf-empty { text-align: center; padding: 40px 20px; color: #475569; font-style: italic; font-size: 15px; }

    @media (max-width: 640px) {
      .cf-stage { height: 420px; }
      .cf-track { --cf-w: 240px; --cf-h: 340px; }
      .cf-card .cf-data { font-size: 16px; }
      .cf-card .cf-titolo { font-size: 15px; }
      .cf-card .cf-desc { font-size: 10px; }
      .cf-controls button { width: 42px; height: 42px; }
    }
    @media (min-width: 641px) { .cf-track { --cf-w: 320px; --cf-h: 400px; } }

    @media (prefers-reduced-motion: reduce) {
      .cf-card { transition: opacity 0.3s, border-color 0.3s; }
      .burst-thumb { animation: none !important; }
    }

    /* ===== BURST GALLERY ===== */
    .burst-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      width: 100%;
      max-width: 1100px;
      margin: 0 auto;
      padding: 10px 0 40px;
    }
    @media (min-width: 640px) { .burst-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; } }
    @media (min-width: 900px) { .burst-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; } }
    @media (min-width: 1200px) { .burst-grid { grid-template-columns: repeat(6, 1fr); } }

    .burst-thumb {
      position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; cursor: pointer;
      border: 2px solid rgba(212,239,0,0.15); background: #111;
      /* Stato base SICURO: visibile. L'animation entra in scena modificando opacity/translate */
      opacity: 1;
      transform: none;
      animation: burstIn 0.55s cubic-bezier(0.34, 1.45, 0.64, 1) both;
      animation-delay: var(--burst-delay, 0s);
      /* Transition NON include transform: evita conflitti con l'animation e con :hover */
      transition: border-color 0.3s ease, box-shadow 0.3s ease;
    }
    /* Fallback aspect-ratio per Safari iOS < 15 (alcuni iPhone vecchi):
       crea un placeholder che da' altezza al box, poi posiziono l'img in assoluto. */
    @supports not (aspect-ratio: 1 / 1) {
      .burst-thumb::before {
        content: ''; display: block; padding-top: 100%;
      }
      .burst-thumb img {
        position: absolute; top: 0; left: 0;
      }
      /* Su browser vecchi senza aspect-ratio, disabilito l'animazione che potrebbe lasciare opacity:0 */
      .burst-thumb {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
      }
    }
    .burst-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); }
    .burst-thumb:hover { border-color: #d4ef00; box-shadow: 0 15px 30px rgba(212,239,0,0.3); z-index: 2; }
    .burst-thumb:hover img { transform: scale(1.1); }
    .burst-thumb:active img { transform: scale(0.97); }
    .burst-thumb::after {
      content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.5), transparent 40%);
      opacity: 0; transition: opacity 0.3s; pointer-events: none;
    }
    .burst-thumb:hover::after { opacity: 1; }
    .burst-thumb .burst-num {
      position: absolute; bottom: 6px; left: 8px; color: #d4ef00; font-weight: 900; font-size: 11px;
      text-shadow: 0 2px 6px rgba(0,0,0,0.9); opacity: 0; transition: opacity 0.3s; z-index: 2;
    }
    .burst-thumb:hover .burst-num { opacity: 1; }

    @keyframes burstIn {
      0%   { opacity: 0; transform: translateY(20px) scale(0.85); }
      60%  { opacity: 1; transform: translateY(-4px) scale(1.04); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* ===== MODALE CHI SIAMO (testo lungo, mobile-first) ===== */
    #modal-chisiamo { padding: 0 !important; align-items: stretch !important; justify-content: stretch !important; }
    .cs-shell {
      width: 100%; max-width: 100% !important;
      max-height: 100vh; height: 100vh;
      display: flex; flex-direction: column;
      background: #0a0a0a;
      border-radius: 0 !important;
      border: none !important;
      padding: 0 !important;
      position: relative;
    }
    @media (min-width: 768px) {
      .cs-shell {
        max-width: 720px !important;
        max-height: 92vh; height: auto;
        margin: 4vh auto;
        border-radius: 24px !important;
        border: 1px solid rgba(212,239,0,0.2) !important;
        box-shadow: 0 30px 80px rgba(0,0,0,0.7);
      }
    }
    .cs-header {
      position: sticky; top: 0; z-index: 10;
      padding: 18px 22px 14px;
      background: rgba(10,10,10,0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(212,239,0,0.15);
      display: flex; align-items: center; justify-content: space-between; gap: 14px;
    }
    .cs-header h2 {
      font-size: 18px; font-weight: 900; color: #d4ef00;
      text-transform: uppercase; letter-spacing: 2px; margin: 0;
      flex: 1;
    }
    @media (min-width: 768px) { .cs-header h2 { font-size: 22px; } }
    .cs-close {
      flex-shrink: 0;
      width: 38px; height: 38px; border-radius: 50%;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: #fff; font-size: 22px; line-height: 1;
      cursor: pointer; transition: all 0.25s;
      display: flex; align-items: center; justify-content: center;
    }
    .cs-close:hover { background: #ef4444; border-color: #ef4444; color: #fff; transform: rotate(90deg); }
    .cs-progress {
      position: absolute; left: 0; right: 0; bottom: -1px;
      height: 2px; background: rgba(255,255,255,0.05);
    }
    .cs-progress-fill {
      height: 100%;
      background: linear-gradient(90deg, #3b82f6, #d4ef00);
      width: 0%; transition: width 0.1s linear;
      box-shadow: 0 0 10px rgba(212,239,0,0.6);
    }
    .cs-body {
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      padding: 30px 22px 80px;
      scroll-behavior: smooth;
    }
    @media (min-width: 768px) { .cs-body { padding: 40px 50px 60px; } }
    .cs-body::-webkit-scrollbar { width: 5px; }
    .cs-body::-webkit-scrollbar-track { background: transparent; }
    .cs-body::-webkit-scrollbar-thumb { background: rgba(212,239,0,0.4); border-radius: 10px; }

    /* Capolettera prima lettera */
    .cs-body .cs-intro::first-letter {
      font-size: 4.2em; font-weight: 900; color: #d4ef00;
      float: left; line-height: 0.85; margin: 6px 10px 0 0;
      text-shadow: 0 4px 14px rgba(212,239,0,0.35);
      font-family: 'Nunito', sans-serif;
    }

    .cs-body p {
      color: #d1d5db; font-size: 16px; line-height: 1.75; font-weight: 400;
      margin: 0 0 18px;
    }
    @media (min-width: 768px) { .cs-body p { font-size: 17px; } }
    .cs-body p strong { color: #fff; font-weight: 800; }
    .cs-body p em { color: #d4ef00; font-style: italic; font-weight: 600; }

    /* Sottotitoli sezione */
    .cs-section-title {
      display: flex; align-items: center; gap: 12px;
      margin: 36px 0 18px; padding-top: 6px;
    }
    .cs-section-title::before {
      content: ''; flex-shrink: 0;
      width: 32px; height: 3px; background: #d4ef00; border-radius: 2px;
    }
    .cs-section-title h3 {
      font-size: 14px; font-weight: 900; color: #d4ef00;
      text-transform: uppercase; letter-spacing: 2.5px; margin: 0;
    }

    /* Citazione laterale (per "trupija = temporale") */
    .cs-quote {
      position: relative;
      padding: 18px 22px;
      margin: 24px 0;
      background: linear-gradient(135deg, rgba(30,58,138,0.25), rgba(212,239,0,0.08));
      border-left: 4px solid #d4ef00;
      border-radius: 12px;
    }
    .cs-quote p { margin: 0; color: #e5e7eb; font-style: italic; font-size: 15px; line-height: 1.65; }
    .cs-quote::before {
      content: '"'; position: absolute; top: -8px; right: 14px;
      font-size: 60px; color: rgba(212,239,0,0.2); font-family: serif; line-height: 1;
    }

    /* Lista eventi format */
    .cs-eventi-list {
      list-style: none; padding: 0; margin: 18px 0 24px;
      display: flex; flex-direction: column; gap: 12px;
    }
    .cs-eventi-list li {
      padding: 14px 16px;
      background: rgba(30,58,138,0.18);
      border: 1px solid rgba(59,130,246,0.2);
      border-radius: 14px;
      color: #e5e7eb; font-size: 15px; line-height: 1.55;
      transition: all 0.3s;
    }
    .cs-eventi-list li:hover {
      border-color: rgba(212,239,0,0.4);
      transform: translateX(4px);
    }
    .cs-eventi-list li strong { color: #d4ef00; display: block; margin-bottom: 4px; font-size: 16px; }

    /* CTA finale */
    .cs-cta {
      margin-top: 36px;
      padding: 24px 22px;
      background: linear-gradient(135deg, rgba(212,239,0,0.15), rgba(30,58,138,0.2));
      border: 1.5px solid rgba(212,239,0,0.35);
      border-radius: 18px;
      text-align: center;
    }
    .cs-cta h4 {
      font-size: 22px; font-weight: 900; color: #d4ef00;
      text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px;
    }
    .cs-cta p { font-size: 15px; color: #d1d5db; margin-bottom: 18px; }
    .cs-cta button {
      display: inline-flex; align-items: center; gap: 10px;
      background: #d4ef00; color: #000;
      padding: 14px 28px; border-radius: 999px;
      font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: 1.5px;
      border: none; cursor: pointer;
      transition: all 0.3s;
      box-shadow: 0 10px 25px rgba(212,239,0,0.35);
    }
    .cs-cta button:hover { transform: translateY(-3px); box-shadow: 0 15px 35px rgba(212,239,0,0.5); }

    /* Pulsante torna su */
    .cs-back-top {
      position: absolute; bottom: 20px; right: 20px;
      width: 44px; height: 44px; border-radius: 50%;
      background: rgba(212,239,0,0.9); color: #000;
      border: none; cursor: pointer;
      box-shadow: 0 8px 20px rgba(212,239,0,0.4);
      opacity: 0; transform: translateY(10px); pointer-events: none;
      transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
      z-index: 5;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
    }
    .cs-back-top.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
    .cs-back-top:hover { transform: translateY(-4px); background: #fff; }

    /* Animazioni d'ingresso paragrafi */
    .cs-fade-in { opacity: 0; transform: translateY(15px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
    .cs-fade-in.visible { opacity: 1; transform: translateY(0); }

    @media (prefers-reduced-motion: reduce) {
      .cs-fade-in { opacity: 1; transform: none; }
      .cs-close, .cs-cta button, .cs-back-top { transition: none; }
    }

    /* ===== LIGHTBOX ===== */
    #lightbox-modal { touch-action: pan-y; }
    .lb-content { position: relative; width: 100%; max-width: 1200px; margin: auto; display: flex; align-items: center; justify-content: center; }
    .lb-track { position: relative; width: 100%; height: 80vh; overflow: hidden; }
    .lb-slide {
      position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
      transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s; will-change: transform, opacity;
    }
    .lb-slide img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; box-shadow: 0 30px 60px rgba(0,0,0,0.8); user-select: none; -webkit-user-drag: none; }
    .lb-nav {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.6); backdrop-filter: blur(10px); border: 1.5px solid rgba(212,239,0,0.4);
      color: #d4ef00; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; font-size: 16px;
      display: flex; align-items: center; justify-content: center; transition: all 0.3s; z-index: 5;
    }
    .lb-nav:hover { background: #d4ef00; color: #000; transform: translateY(-50%) scale(1.1); }
    .lb-nav:disabled { opacity: 0.3; cursor: not-allowed; }
    .lb-prev { left: 10px; } .lb-next { right: 10px; }
    .lb-counter { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.75); backdrop-filter: blur(8px); color: #d4ef00; font-weight: 900; font-size: 12px; letter-spacing: 2px; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(212,239,0,0.3); z-index: 5; }
    @media (max-width: 640px) { .lb-nav { width: 40px; height: 40px; font-size: 14px; } .lb-prev { left: 6px; } .lb-next { right: 6px; } .lb-track { height: 75vh; } }

    /* ===== TEMA HARRY POTTER ===== */
    @keyframes snitchFly {
      0%   { transform: translate(0, 80vh) rotate(-15deg); opacity: 0; }
      8%   { opacity: 1; }
      25%  { transform: translate(30vw, 30vh) rotate(20deg); }
      40%  { transform: translate(60vw, 60vh) rotate(-10deg); }
      55%  { transform: translate(75vw, 20vh) rotate(15deg); }
      70%  { transform: translate(50vw, 50vh) rotate(-15deg); }
      85%  { transform: translate(20vw, 35vh) rotate(20deg); }
      95%  { opacity: 1; }
      100% { transform: translate(110vw, 70vh) rotate(0deg); opacity: 0; }
    }
    .particle-snitch { position: absolute; pointer-events: none; animation: snitchFly 16s infinite linear; filter: drop-shadow(0 0 12px rgba(212,239,0,0.8)) drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
    .particle-magic { text-shadow: 0 0 8px currentColor, 0 0 16px currentColor; }

    /* ===== TRUPIJA RUN: GAME ===== */
    #modal-trupija-run #tr-canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
    #modal-trupija-run #tr-screen-intro,
    #modal-trupija-run #tr-screen-pause,
    #modal-trupija-run #tr-screen-over,
    #modal-trupija-run #tr-screen-limit {
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    /* FIX iPhone: bottoni HUD devono essere immediatamente cliccabili (no 300ms delay) */
    #modal-trupija-run button {
      touch-action: manipulation;
      -webkit-tap-highlight-color: rgba(255,255,255,0.2);
      cursor: pointer;
    }
    /* I bottoni HUD hanno z-index alto per non venire nascosti dal canvas */
    #modal-trupija-run #tr-hud button {
      position: relative;
      z-index: 20;
    }

    /* ===== TRUPIJA RUN: CACCIA AL FULMINE ===== */
    .trupija-bolt {
      position: fixed; z-index: 9990;
      width: 56px; height: 72px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      animation: boltAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, boltPulse 0.7s ease-in-out infinite alternate 0.4s;
      filter: drop-shadow(0 0 16px rgba(212,239,0,0.9)) drop-shadow(0 0 32px rgba(212,239,0,0.5));
      pointer-events: auto;
    }
    .trupija-bolt-emoji {
      font-size: 56px;
      line-height: 1;
      user-select: none;
      -webkit-user-select: none;
    }
    .trupija-bolt:hover { transform: scale(1.15) rotate(-5deg); }
    .trupija-bolt.disappearing { animation: boltDisappear 0.5s ease-in forwards; }
    .trupija-bolt.caught { animation: boltCaught 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
    @keyframes boltAppear {
      0%   { transform: scale(0) rotate(-180deg); opacity: 0; }
      60%  { transform: scale(1.2) rotate(15deg); opacity: 1; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    @keyframes boltPulse {
      0%   { filter: drop-shadow(0 0 12px rgba(212,239,0,0.8)) drop-shadow(0 0 24px rgba(212,239,0,0.4)); }
      100% { filter: drop-shadow(0 0 22px rgba(212,239,0,1)) drop-shadow(0 0 44px rgba(212,239,0,0.7)); }
    }
    @keyframes boltDisappear {
      0%   { opacity: 1; transform: scale(1); }
      40%  { opacity: 1; transform: scale(1.4); filter: brightness(2) drop-shadow(0 0 30px white); }
      100% { opacity: 0; transform: scale(0.5) rotate(45deg); }
    }
    @keyframes boltCaught {
      0%   { transform: scale(1) rotate(0deg); opacity: 1; }
      30%  { transform: scale(2.5) rotate(-15deg); filter: brightness(3) drop-shadow(0 0 40px white) drop-shadow(0 0 80px #d4ef00); }
      100% { transform: scale(0) rotate(720deg); opacity: 0; }
    }

    /* MODALE "FULMINE CATTURATO" */
    .bolt-caught-modal {
      position: fixed; inset: 0; z-index: 9999;
      background: radial-gradient(ellipse at center, rgba(30,58,138,0.95) 0%, rgba(0,0,0,0.98) 70%);
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      animation: bcmFade 0.5s ease-out;
    }
    @keyframes bcmFade {
      from { opacity: 0; backdrop-filter: blur(0); }
      to   { opacity: 1; backdrop-filter: blur(20px); }
    }
    .bcm-card {
      background: linear-gradient(135deg, #1e3a8a 0%, #000 100%);
      border: 2px solid #d4ef00;
      border-radius: 24px;
      padding: 30px 24px;
      max-width: 400px; width: 100%;
      text-align: center;
      box-shadow: 0 0 60px rgba(212,239,0,0.4), inset 0 0 30px rgba(212,239,0,0.1);
      position: relative;
      animation: bcmCardIn 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s both;
    }
    @keyframes bcmCardIn {
      0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
      100% { transform: scale(1) rotate(0deg); opacity: 1; }
    }
    .bcm-card::before {
      content: ''; position: absolute; inset: -2px;
      background: linear-gradient(45deg, #d4ef00, #ef4444, #d4ef00, #d4ef00);
      background-size: 400% 400%;
      border-radius: 24px;
      z-index: -1;
      animation: bcmBorderShine 3s linear infinite;
    }
    @keyframes bcmBorderShine {
      0%, 100% { background-position: 0% 50%; }
      50%      { background-position: 100% 50%; }
    }
    .bcm-cloud {
      width: 100px; height: 100px; margin: 0 auto 16px;
      animation: bcmFloat 2s ease-in-out infinite;
    }
    @keyframes bcmFloat {
      0%, 100% { transform: translateY(0); }
      50%      { transform: translateY(-8px); }
    }
    .bcm-title {
      font-size: 13px; color: #d4ef00; font-weight: 900;
      letter-spacing: 4px; text-transform: uppercase; margin: 0 0 6px;
      text-shadow: 0 0 10px rgba(212,239,0,0.6);
    }
    .bcm-subtitle {
      font-size: 24px; color: #fff; font-weight: 900; margin: 0 0 14px;
      line-height: 1.1;
    }
    .bcm-msg {
      font-size: 14px; color: #d1d5db; line-height: 1.5; margin: 0 0 22px;
    }
    .bcm-btn {
      display: inline-block;
      background: linear-gradient(135deg, #d4ef00, #f59e0b);
      color: #0f172a;
      padding: 14px 28px; border-radius: 999px;
      font-size: 14px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase;
      border: none; cursor: pointer;
      box-shadow: 0 8px 24px rgba(212,239,0,0.4);
      transition: all 0.2s;
      width: 100%;
    }
    .bcm-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(212,239,0,0.6); }
    .bcm-btn:active { transform: translateY(0); }
    .bcm-skip {
      display: block; margin-top: 14px;
      background: none; border: none;
      color: #94a3b8; font-size: 12px; cursor: pointer;
      transition: color 0.2s;
    }
    .bcm-skip:hover { color: #fff; }

    /* ===== EASTER EGG: CORIANDOLI ===== */
    .conf {
      position: absolute; width: 10px; height: 14px;
      top: -20px; opacity: 0;
      animation: confettiFall var(--conf-dur, 3.5s) var(--conf-delay, 0s) ease-out forwards;
    }
    @keyframes confettiFall {
      0%   { transform: translateY(-20px) rotate(0deg); opacity: 0; }
      8%   { opacity: 1; }
      100% { transform: translateY(110vh) rotate(720deg); opacity: 1; }
    }

    /* ===== EASTER EGG: TEMPORALE ===== */
    .temporale-overlay {
      position: fixed; inset: 0; pointer-events: none; z-index: 9998;
      background: rgba(0, 10, 30, 0.25);
      backdrop-filter: blur(0.5px);
      animation: temporaleAmbiente 4.5s ease-out forwards;
    }
    @keyframes temporaleAmbiente {
      0%   { background: rgba(0, 10, 30, 0); backdrop-filter: blur(0); }
      15%  { background: rgba(0, 10, 30, 0.35); backdrop-filter: blur(1px); }
      85%  { background: rgba(0, 10, 30, 0.35); backdrop-filter: blur(1px); }
      100% { background: rgba(0, 10, 30, 0); backdrop-filter: blur(0); }
    }
    .temp-flash {
      position: fixed; inset: 0; background: white; pointer-events: none; z-index: 9999;
      opacity: 0; animation: tempFlash 0.25s ease-out;
    }
    @keyframes tempFlash {
      0%, 100% { opacity: 0; }
      50%      { opacity: 0.85; }
    }
    .temp-rain {
      position: absolute; width: 2px; background: linear-gradient(transparent, #93c5fd);
      pointer-events: none;
      animation: tempRainFall var(--rain-dur, 0.8s) var(--rain-delay, 0s) linear infinite;
    }
    @keyframes tempRainFall {
      0%   { transform: translateY(-20vh); opacity: 0; }
      10%  { opacity: 0.7; }
      100% { transform: translateY(120vh); opacity: 0.3; }
    }
    .shake-logo { animation: shakeLogo 0.15s linear infinite; }
    @keyframes shakeLogo {
      0%   { transform: translate(0, 0) rotate(0deg); }
      25%  { transform: translate(-3px, 2px) rotate(-2deg); }
      50%  { transform: translate(3px, -2px) rotate(2deg); }
      75%  { transform: translate(-2px, 3px) rotate(-1deg); }
      100% { transform: translate(0, 0) rotate(0deg); }
    }

    /* ===== EASTER EGG: CREDITS PINCH ===== */
    .credits-overlay {
      position: fixed; inset: 0; z-index: 9998; pointer-events: none;
      background: radial-gradient(ellipse at center, rgba(30,58,138,0.85), rgba(0,0,0,0.95));
      display: flex; align-items: center; justify-content: center;
      opacity: 0; animation: creditsFade 4.5s ease-out forwards;
    }
    @keyframes creditsFade {
      0%   { opacity: 0; }
      15%  { opacity: 1; }
      85%  { opacity: 1; }
      100% { opacity: 0; }
    }
    .credits-text {
      text-align: center; padding: 30px;
      animation: creditsZoom 4.5s ease-out forwards;
    }
    @keyframes creditsZoom {
      0%   { transform: scale(0.5); }
      30%  { transform: scale(1); }
      100% { transform: scale(1.05); }
    }
    .credits-text h3 { font-size: 14px; font-weight: 900; color: #d4ef00; letter-spacing: 4px; text-transform: uppercase; margin-bottom: 14px; }
    .credits-text h2 { font-size: 32px; font-weight: 900; color: #fff; margin: 0 0 14px; line-height: 1.1; text-shadow: 0 4px 20px rgba(212,239,0,0.5); }
    .credits-text p { font-size: 15px; color: #cbd5e1; line-height: 1.6; max-width: 400px; }
    .credits-text .heart { color: #ef4444; display: inline-block; animation: heartBeat 1s ease-in-out infinite; }
    @keyframes heartBeat {
      0%, 100% { transform: scale(1); }
      50%      { transform: scale(1.2); }
    }

    /* ===== EASTER EGG: BABBO NATALE ESTIVO ===== */
    .santa-beach {
      position: fixed; bottom: 20px; left: -120px; z-index: 50;
      pointer-events: none;
      animation: santaWalk 22s linear infinite;
      animation-delay: 5s;
    }
    @keyframes santaWalk {
      0%   { left: -120px; }
      48%  { left: calc(50vw - 50px); }
      52%  { left: calc(50vw - 50px); }
      100% { left: 110vw; }
    }
    /* Camminata: dondolio su-giù sincronizzato come passi */
    .santa-beach .santa-bob {
      animation: santaWalk2 0.55s ease-in-out infinite;
      transform-origin: bottom center;
      display: inline-block;
    }
    @keyframes santaWalk2 {
      0%   { transform: translateY(0) rotate(-2deg); }
      25%  { transform: translateY(-3px) rotate(1deg); }
      50%  { transform: translateY(-1px) rotate(2deg); }
      75%  { transform: translateY(-3px) rotate(-1deg); }
      100% { transform: translateY(0) rotate(-2deg); }
    }
    /* Cocktail/braccio destro: brindisi periodico ogni 4 secondi */
    .santa-beach .santa-arm-cocktail {
      transform-origin: 95px 80px;
      animation: santaCheers 4s ease-in-out infinite;
    }
    @keyframes santaCheers {
      0%, 70%, 100% { transform: rotate(0deg); }
      78%           { transform: rotate(-12deg) translateY(-2px); }
      85%           { transform: rotate(-8deg) translateY(-2px); }
      92%           { transform: rotate(-12deg) translateY(-2px); }
    }
    /* Pompon che oscilla a tempo coi passi */
    .santa-beach .santa-pompon {
      transform-origin: 88px 18px;
      animation: santaPompon 0.55s ease-in-out infinite;
    }
    @keyframes santaPompon {
      0%, 100% { transform: rotate(-3deg); }
      50%      { transform: rotate(3deg); }
    }
    /* Barba che ondeggia (vento marino) */
    .santa-beach .santa-barba {
      transform-origin: 70px 50px;
      animation: santaBarba 1.6s ease-in-out infinite;
    }
    @keyframes santaBarba {
      0%, 100% { transform: rotate(-1.5deg) translateY(0); }
      50%      { transform: rotate(1.5deg) translateY(-1px); }
    }
    /* Scintille agli occhiali: brillano ogni 3 secondi */
    .santa-beach .santa-flash {
      animation: santaFlash 3s ease-out infinite;
      transform-origin: center;
    }
    @keyframes santaFlash {
      0%, 88%, 100% { opacity: 0; transform: scale(0.5); }
      90%           { opacity: 1; transform: scale(2); }
      94%           { opacity: 1; transform: scale(2.5); }
      96%           { opacity: 0.6; transform: scale(1.5); }
    }

    /* ===== CHI SIAMO: tasto ricicla con contatore ===== */
    .cs-recycle-btn {
      display: inline-flex; align-items: center; gap: 8px;
      background: rgba(34,197,94,0.15);
      border: 1.5px solid rgba(34,197,94,0.4);
      color: #4ade80;
      padding: 8px 14px; border-radius: 999px;
      font-size: 12px; font-weight: 800; letter-spacing: 0.5px;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
      margin-top: 8px;
    }
    .cs-recycle-btn:hover { background: rgba(34,197,94,0.3); transform: scale(1.04); }
    .cs-recycle-btn:active { transform: scale(0.95); }
    .cs-recycle-counter {
      margin-top: 14px; padding: 16px;
      background: linear-gradient(135deg, rgba(34,197,94,0.15), rgba(22,163,74,0.05));
      border: 1.5px solid rgba(34,197,94,0.4);
      border-radius: 14px;
      text-align: center;
      max-height: 0; overflow: hidden;
      opacity: 0; transform: translateY(-10px);
      transition: all 0.4s cubic-bezier(0.16,1,0.3,1);
    }
    .cs-recycle-counter.visible { max-height: 200px; opacity: 1; transform: translateY(0); padding: 16px; }
    .cs-recycle-counter .label { font-size: 11px; color: #4ade80; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; }
    .cs-recycle-counter .number { font-size: 44px; font-weight: 900; color: #4ade80; line-height: 1; margin: 6px 0 4px; tabular-nums: tabular-nums; text-shadow: 0 4px 14px rgba(34,197,94,0.4); }
    .cs-recycle-counter .unit { font-size: 13px; color: #d1d5db; font-weight: 600; }
.banner-caparra {
    display: flex;
    align-items: flex-start;
    background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
    color: #4e342e;
    border-left: 4px solid #ffb300;
    border-radius: 6px;
    padding: 15px;
    margin: 20px 0;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.banner-icona {
    font-size: 36px;
    margin-right: 15px;
    line-height: 1;
}

.banner-contenuto {
    flex: 1;
}

.banner-titolo {
    font-weight: bold;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    color: #3e2723;
}

.banner-lista {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 1.5;
}

.banner-lista li {
    margin-bottom: 4px;
}

/* ---------- Animazioni aggiuntive (originariamente righe 1045-1054) ---------- */
    @keyframes slide-up {
      from { transform: translateY(100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }
    .animate-slide-up { animation: slide-up 0.35s ease-out; }
    @media (min-width: 768px) {
      .animate-slide-up { animation: slide-up 0.25s ease-out; }
    }