/* Avviso all'apertura del menu e temi stagionali.
   Caricato dal menu pubblico e dal pannello (per l'anteprima). */

/* ---------------- finestra dell'avviso ---------------- */
.cm-fondo{
  position:fixed;inset:0;z-index:200;
  display:flex;align-items:center;justify-content:center;
  padding:20px 16px;
  background:rgba(20,18,16,.55);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;
}
.cm-fondo.cm-aperto{opacity:1;}
.cm-box{
  position:relative;width:100%;max-width:400px;max-height:calc(100vh - 40px);overflow:auto;
  background:var(--cm-sfondo,#fff);color:var(--cm-testo,#1f1d1b);
  border-radius:20px !important;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
  transform:translateY(16px) scale(.97);transition:transform .3s cubic-bezier(.2,.9,.3,1.2);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
.cm-aperto .cm-box{transform:none;}
.cm-box:focus{outline:none;}
.cm-x{
  position:absolute;top:10px;right:10px;z-index:3;
  width:40px;height:40px;border-radius:50% !important;border:0;cursor:pointer;
  background:rgba(255,255,255,.88);color:#1f1d1b;font-size:17px;line-height:40px;text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.cm-testa{
  position:relative;overflow:hidden;min-height:118px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cm-accento,#023059);
  border-radius:20px 20px 0 0 !important;
}
.cm-testa-bassa{min-height:18px;}
.cm-con-img{min-height:0;}
.cm-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;position:relative;z-index:1;}
.cm-icona{font-size:58px;line-height:1;position:relative;z-index:2;filter:drop-shadow(0 3px 6px rgba(0,0,0,.25));}
.cm-con-img .cm-icona{
  position:absolute;left:16px;bottom:-26px;font-size:40px;width:64px;height:64px;
  display:flex;align-items:center;justify-content:center;
  background:var(--cm-sfondo,#fff);border-radius:50% !important;box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.cm-strato{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:2;}
.cm-corpo{padding:22px 22px 22px;}
.cm-con-img + .cm-corpo{padding-top:34px;}
.cm-titolo{
  font-family:'Cormorant Garamond',Georgia,serif;font-weight:700;
  font-size:27px;line-height:1.15;margin:0 0 10px;color:inherit;
}
.cm-testo{font-size:16px;line-height:1.55;}
.cm-testo b{font-weight:700;}
.cm-nota-ai{font-size:11.5px;opacity:.6;margin-top:10px;}
.cm-vai{
  display:block;width:100%;margin-top:20px;min-height:50px;padding:12px 18px;
  border:0;cursor:pointer;border-radius:999px !important;
  background:var(--cm-accento,#023059);color:#fff;
  font:600 15px/1.2 'Inter',-apple-system,sans-serif;letter-spacing:.6px;text-transform:uppercase;
}
.cm-vai:focus-visible,.cm-x:focus-visible{outline:3px solid rgba(0,0,0,.35);outline-offset:2px;}

/* stili */
.cm-stile-info .cm-testa{background:linear-gradient(135deg,#023059,#0a4478);}
.cm-stile-attenzione .cm-testa{background:linear-gradient(135deg,#b45309,#e08a1e);}
.cm-stile-attenzione{border-top:0;}
.cm-stile-urgente .cm-testa{background:linear-gradient(135deg,#991b1b,#d03030);}
.cm-stile-festa .cm-testa{background:linear-gradient(135deg,#f2a541,#e85d75 50%,#7b3fb5);}
.cm-stile-elegante{border:2px solid var(--cm-accento);}
.cm-stile-elegante .cm-testa{background:radial-gradient(circle at 50% 30%,#0a4478,#011f3a);}
.cm-stile-elegante .cm-titolo{color:var(--cm-accento);}
.cm-stile-elegante .cm-vai{color:#011f3a;}
.cm-stile-personalizzato .cm-testa{background:var(--cm-accento);}

/* se c'e' un tema sul menu, la festa ne prende i colori */
html[data-tema] .cm-stile-festa .cm-testa{background:linear-gradient(135deg,var(--navy),var(--gold));}
html[data-tema] .cm-stile-festa .cm-vai{background:var(--navy);}

/* anteprima nel pannello: sopra a tutto, con una scritta */
.cm-anteprima .cm-box:before{
  content:"ANTEPRIMA";position:absolute;top:14px;left:14px;z-index:3;
  font:700 10px/1 sans-serif;letter-spacing:1.5px;color:#fff;background:rgba(0,0,0,.45);padding:5px 8px;border-radius:6px !important;
}

/* ---------------- particelle ---------------- */
.cm-p{position:absolute;top:-30px;display:block;will-change:transform;pointer-events:none;}
.cm-p svg{display:block;width:100%;height:100%;}
.cm-cor{border-radius:2px !important;}
.cm-emo{line-height:1;}
.cm-cade{animation:cm-cade linear infinite;}
.cm-sale{top:auto;bottom:-30px;animation:cm-sale linear infinite;}
.cm-vola{left:-60px;animation:cm-vola linear infinite;}
.cm-vola svg{animation:cm-ali .35s ease-in-out infinite alternate;}
@keyframes cm-cade{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  100%{transform:translate3d(var(--deriva,20px),calc(100vh + 60px),0) rotate(360deg);}
}
.cm-strato .cm-cade{animation-name:cm-cade-box;}
@keyframes cm-cade-box{
  0%{transform:translate3d(0,0,0) rotate(0deg);}
  100%{transform:translate3d(var(--deriva,20px),200px,0) rotate(300deg);}
}
@keyframes cm-sale{
  0%{transform:translate3d(0,0,0) scale(.8);opacity:0;}
  10%{opacity:.9;}
  100%{transform:translate3d(var(--deriva,20px),calc(-100vh - 60px),0) scale(1.1);opacity:0;}
}
.cm-strato .cm-sale{animation-name:cm-sale-box;}
@keyframes cm-sale-box{
  0%{transform:translate3d(0,0,0);opacity:0;}
  15%{opacity:1;}
  100%{transform:translate3d(var(--deriva,20px),-170px,0);opacity:0;}
}
@keyframes cm-vola{
  0%{transform:translate3d(0,0,0);}
  50%{transform:translate3d(55vw,-24px,0);}
  100%{transform:translate3d(calc(100vw + 120px),8px,0);}
}
.cm-strato .cm-vola{animation-name:cm-vola-box;}
@keyframes cm-vola-box{
  0%{transform:translate3d(0,0,0);}
  100%{transform:translate3d(520px,-10px,0);}
}
@keyframes cm-ali{from{transform:scaleY(1);}to{transform:scaleY(.55);}}

/* sul menu le particelle stanno DIETRO a tutto: si vedono nei bordi e fra le
   schede, mai sopra ai piatti e ai prezzi */
#cm-strato-menu{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;opacity:.75;}

@media (prefers-reduced-motion: reduce){
  .cm-p{display:none;}
  .cm-box{transition:none;}
}

/* ---------------- tema sul menu ---------------- */
html[data-tema] .head-landing{border-bottom:3px solid var(--gold);}
html[data-tema] .header-sec{position:relative;}
.cm-angolo{
  position:absolute;top:18px;width:58px;height:58px;pointer-events:none;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.12));
  animation:cm-dondola 4s ease-in-out infinite alternate;
}
.cm-angolo svg{width:100%;height:100%;display:block;}
.cm-angolo .cm-emo{font-size:46px;display:block;text-align:center;}
.cm-sx{left:4px;transform-origin:50% 0;}
.cm-dx{right:4px;animation-delay:-2s;transform-origin:50% 0;}
@keyframes cm-dondola{from{transform:rotate(-6deg);}to{transform:rotate(6deg);}}
#cm-scritta{
  display:inline-block;margin-top:10px;padding:6px 16px;
  font-family:var(--serif,'Cormorant Garamond',Georgia,serif);font-style:italic;font-weight:600;font-size:19px;
  color:var(--navy);background:var(--gold-wash,#f6efdd);
  border:1px solid var(--gold);border-radius:999px;
}
@media (min-width:600px){
  .cm-angolo{width:76px;height:76px;top:26px;}
  .cm-sx{left:12%;}
  .cm-dx{right:12%;}
}
html[data-tema="halloween"] body{
  background-image:radial-gradient(circle at 10% 0%,rgba(232,116,28,.10),transparent 40%),radial-gradient(circle at 90% 20%,rgba(43,22,64,.08),transparent 45%);
  background-attachment:fixed;
}
html[data-tema="natale"] body{
  background-image:radial-gradient(circle at 15% 5%,rgba(200,16,46,.07),transparent 40%),radial-gradient(circle at 85% 15%,rgba(15,61,46,.08),transparent 45%);
  background-attachment:fixed;
}
html[data-tema="capodanno"] body{
  background-image:radial-gradient(circle at 50% 0%,rgba(212,175,55,.14),transparent 50%);
  background-attachment:fixed;
}

/* striscia "anteprima del tema" */
.cm-banner-prova{
  position:fixed;left:0;right:0;bottom:0;z-index:150;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:#111;color:#fff;font:600 13px/1.35 'Inter',sans-serif;text-align:center;
}