/* Piccolo invito giocoso della home: usa lo stesso spazio del menu, senza creare un overlay. */
.zen-triangle-menu{
  --zen-idle-duration:360ms;
}

.zen-triangle-menu .zen-idle-surprise[hidden]{display:none}
.zen-idle-surprise{
  position:absolute;
  z-index:4;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
  pointer-events:none;
  transform:scale(.82) rotate(-4deg);
  transition:opacity var(--zen-idle-duration) ease,transform var(--zen-idle-duration) cubic-bezier(.2,.85,.25,1);
}

.zen-idle-button{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  gap:15px;
  width:min(100%,420px);
  min-height:176px;
  padding:19px 23px 19px 19px;
  border:1px solid rgba(255,244,181,.88);
  border-radius:29px;
  background:linear-gradient(135deg,rgba(28,39,92,.98),rgba(14,18,49,.98) 64%);
  color:#fff;
  box-shadow:0 20px 42px rgba(0,0,0,.4),0 0 36px rgba(238,196,50,.28);
  cursor:pointer;
  font-family:"Avenir Next",Avenir,Arial,sans-serif;
  letter-spacing:normal;
  text-align:left;
  text-transform:none;
}

.zen-idle-button::before{
  content:'';
  position:absolute;
  z-index:-1;
  inset:-15%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(238,196,50,.3),rgba(253,96,53,.09) 45%,transparent 72%);
  filter:blur(13px);
  animation:zen-idle-glow 2.5s ease-in-out infinite;
}

.zen-idle-face{
  position:relative;
  display:grid;
  place-items:center;
  width:104px;
  aspect-ratio:1;
  flex:none;
  overflow:hidden;
  border:4px solid rgba(255,255,255,.88);
  border-radius:48% 52% 52% 48%;
  background:linear-gradient(135deg,#fd6035,#eec432);
  box-shadow:inset -10px -11px 18px rgba(139,56,16,.16),0 9px 20px rgba(0,0,0,.22);
  transform:rotate(-6deg);
}

.zen-idle-face::before,
.zen-idle-face::after{
  content:'';
  position:absolute;
  top:35px;
  width:20px;
  height:10px;
  border-top:4px solid #17151a;
  border-radius:50%;
}
.zen-idle-face::before{left:20px;transform:rotate(11deg)}
.zen-idle-face::after{right:20px;transform:rotate(-11deg)}
.zen-idle-mouth{
  position:absolute;
  bottom:23px;
  width:33px;
  height:16px;
  border-bottom:4px solid #17151a;
  border-radius:0 0 50% 50%;
}
.zen-idle-note{
  position:absolute;
  z-index:1;
  color:#fff4a8;
  font:700 27px/1 Georgia,serif;
  text-shadow:0 2px 6px rgba(0,0,0,.3);
  animation:zen-idle-note 1.8s ease-in-out infinite;
}
.zen-idle-note-one{top:7px;left:-6px;animation-delay:.18s}
.zen-idle-note-two{right:-5px;bottom:5px;font-size:22px;animation-delay:.62s}

.zen-idle-copy{display:grid;gap:8px;min-width:0}
.zen-idle-kicker{color:#ffe16b;font-size:11px;font-weight:800;letter-spacing:.13em}
.zen-idle-bubble{
  position:relative;
  display:block;
  color:#fff;
  font:700 clamp(19px,3.6vw,26px)/1.12 Georgia,serif;
}
.zen-idle-bubble::before{
  content:'“';
  color:#eec432;
}
.zen-idle-bubble::after{
  content:'”';
  color:#eec432;
}
.zen-idle-hint{color:rgba(255,255,255,.73);font-size:12px;font-weight:700}
.zen-idle-button:hover{background:linear-gradient(135deg,rgba(43,58,123,.99),rgba(18,23,64,.99) 64%)}
.zen-idle-button:focus-visible{outline:3px solid #fff;outline-offset:4px}

.zen-triangle-menu.is-idle-surprise .menu-art,
.zen-triangle-menu.is-idle-surprise>a{
  opacity:0!important;
  pointer-events:none!important;
  visibility:hidden;
  transition:opacity var(--zen-idle-duration) ease,visibility 0s linear var(--zen-idle-duration);
}
.zen-triangle-menu.is-idle-surprise .zen-idle-surprise{
  opacity:1;
  pointer-events:auto;
  transform:scale(1) rotate(0deg);
}

@keyframes zen-idle-glow{
  0%,100%{opacity:.48;transform:scale(.94)}
  50%{opacity:1;transform:scale(1.06)}
}
@keyframes zen-idle-note{
  0%,100%{transform:translateY(0) rotate(-8deg);opacity:.72}
  50%{transform:translateY(-11px) rotate(8deg);opacity:1}
}

@media(max-width:640px){
  .zen-idle-button{width:min(100%,345px);min-height:151px;gap:12px;padding:16px 17px 16px 14px;border-radius:25px}
  .zen-idle-face{width:82px;border-width:3px}
  .zen-idle-face::before,.zen-idle-face::after{top:28px;width:16px;height:8px;border-top-width:3px}
  .zen-idle-face::before{left:16px}.zen-idle-face::after{right:16px}
  .zen-idle-mouth{bottom:18px;width:27px;height:13px;border-bottom-width:3px}
  .zen-idle-note{font-size:23px}.zen-idle-note-two{font-size:19px}
  .zen-idle-kicker{font-size:10px}
  .zen-idle-bubble{font-size:20px}
  .zen-idle-hint{font-size:11px}
}

@media(prefers-reduced-motion:reduce){
  .zen-idle-surprise,
  .zen-idle-button,
  .zen-idle-button::before,
  .zen-idle-note,
  .zen-triangle-menu.is-idle-surprise .menu-art,
  .zen-triangle-menu.is-idle-surprise>a{
    animation:none!important;
    transition:none!important;
  }
}
