/* Sfondo Relay — il menu in alto in vetro scuro, su tutte le pagine del sito */
/* il vetro sta su un livello sotto la barra: un backdrop-filter sulla barra stessa
   intrappolerebbe dentro di lei il pannello del menu mobile (position: fixed) */
body.wst-glassmenu .sticky-menu { background-color: transparent !important; }
body.wst-glassmenu .sticky-menu::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-color: rgba(16, 16, 16, .58); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); }
body.wst-glassmenu .sticky-menu .mobile-menu-area { background-color: transparent !important; }
body.wst-glassmenu .sticky-menu { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 71, 28, .22) !important; }
body.wst-glassmenu .sticky-menu .sub-menu { background-color: rgba(18, 18, 18, .82) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

/* menu mobile: pannello in vetro scuro con luce rossa, voci grandi che entrano in sequenza */
body.wst-glassmenu .mobile-menu-overlay.active { background: rgba(0, 0, 0, .55) !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.wst-glassmenu .mobile-menu-main { z-index: 1001 !important; background:
    radial-gradient(120% 60% at 100% 0%, rgba(255, 71, 28, .28), rgba(255, 71, 28, 0) 60%),
    radial-gradient(90% 50% at 0% 100%, rgba(255, 154, 61, .12), rgba(255, 154, 61, 0) 60%),
    rgba(14, 14, 14, .86) !important;
  -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, .08); border-radius: 26px !important;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06); }
body.wst-glassmenu .mobile-menu-main::before { content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 2px; border-radius: 2px; background: linear-gradient(90deg, rgba(255, 71, 28, 0), #ff471c, #ff9a3d, rgba(255, 71, 28, 0)); }
body.wst-glassmenu .mobile-menu-main .menu-list > ul > li { border-color: rgba(255, 255, 255, .06) !important; }
body.wst-glassmenu .mobile-menu-main .menu-list > ul > li > a { font-size: 22px !important; font-weight: 600; letter-spacing: -.01em; transition: color .3s ease, transform .3s ease; }
body.wst-glassmenu .mobile-menu-main .menu-list > ul > li > a:hover,
body.wst-glassmenu .mobile-menu-main .menu-list > ul > li.current-menu-item > a { color: #ff471c !important; transform: translateX(6px); }
body.wst-glassmenu .mobile-menu-main .menu-list ul ul a { font-size: 16px !important; color: #b1b1b1 !important; }
body.wst-glassmenu .mobile-menu-main .menu-list ul ul a:hover { color: #fff !important; }
body.wst-glassmenu .mobile-menu-main .sub-mobile-menu > a > i { width: 30px; height: 30px; line-height: 30px; text-align: center; border-radius: 50%; background: rgba(255, 71, 28, .14) !important; color: #ff471c !important; border: 1px solid rgba(255, 71, 28, .45); font-size: 12px; transition: transform .3s ease; }
body.wst-glassmenu .mobile-menu-main .off-contact-area { margin-top: 18px; padding: 20px; border-radius: 18px; background: rgba(255, 255, 255, .03); border: 1px solid rgba(255, 255, 255, .06); }
body.wst-glassmenu .mobile-menu-main .off-contact-area .sub-info { color: #ff471c !important; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
body.wst-glassmenu .mobile-menu-main .social-icon a { border-radius: 50%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: background .3s ease, border-color .3s ease; }
body.wst-glassmenu .mobile-menu-main .social-icon a:hover { background: #ff471c; border-color: #ff471c; }
@keyframes wst-menu-in { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li,
body.wst-glassmenu .mobile-menu-main.active .off-contact-area { animation: wst-menu-in .55s cubic-bezier(.2, .7, .2, 1) both; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(1) { animation-delay: .06s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(2) { animation-delay: .12s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(3) { animation-delay: .18s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(4) { animation-delay: .24s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(5) { animation-delay: .30s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(6) { animation-delay: .36s; }
body.wst-glassmenu .mobile-menu-main.active .menu-list > ul > li:nth-child(n+7) { animation-delay: .42s; }
body.wst-glassmenu .mobile-menu-main.active .off-contact-area { animation-delay: .48s; }
@media (prefers-reduced-motion: reduce) { body.wst-glassmenu .mobile-menu-main.active * { animation: none !important; } }

/* mobile: la barra fissa è l'area del menu mobile (86px, posizionata sopra l'header di 36px):
   il vetro scuro va su tutta l'area, con la stessa linea rossa sotto */
@media (max-width: 1199px) {
  body.wst-glassmenu .sticky-menu::before { display: none; }
  body.wst-glassmenu .sticky-menu .mobile-menu-area::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-color: rgba(16, 16, 16, .72); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
    box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .6), inset 0 -1px 0 rgba(255, 71, 28, .22); }
}
