/* ─── disattiva la maschera di Illustrator ─── */
.cls-4{ mask:none!important; }

/* ─── NASTRO ─── */
.nastro{
  fill:none;
  stroke:#3a5935;     /* verde scuro */
  stroke-width:10px;  /* spessore bordo */
  stroke-linecap:round;
  stroke-linejoin:round;
  stroke-dasharray:1000;  /* sovrascritto via JS */
  stroke-dashoffset:1000;
}
.logo-wrapper.animate .nastro{
  animation:draw 1.4s ease-out forwards;
}
@keyframes draw{ to{ stroke-dashoffset:0; } }

/* ─── BORDO REALE ─── */
.bordo-reale{ fill:#3a5935; display:none; }  /* invisibile finché il nastro finisce */

/* ─── PETALI ─── */
.petalo{opacity:0;transform:translateY(40px);}
.logo-wrapper.show-petali .petalo{
  animation:petaloIn .8s ease-out forwards;
  animation-delay:var(--delay);
}
@keyframes petaloIn{to{opacity:1;transform:translateY(0);}}


/* ─── zoom/fade dell’intero logo ─── */
.logo-container{
  width:100%;height:50vh;
  display:flex;justify-content:center;align-items:center;
  background:#fff;overflow:hidden;
  padding-top: 0px;
}
.logo-wrapper svg{
  width:350px;max-width:100%;
  opacity:0;transform:scale(.88);
  transition:opacity .6s ease;
}
.logo-wrapper.fade-in svg{opacity:1;transform:scale(1);}
/* ─── RIBBON INTRO ─── */
/* Ribbon che scivola dentro */
.ribbon-intro{ fill:#3a5935; transform:translateX(100vw); }
.logo-wrapper.slide .ribbon-intro{
  animation:ribbonSlide .8s ease-out forwards; }
@keyframes ribbonSlide{ to{ transform:translateX(0); } }

/* Nastro (mask) – invariato */
.nastro{ /* … stroke:#fff; stroke-width:120px; … */ }
.logo-wrapper.animate .nastro{
  animation:drawNastro 1.6s ease-out forwards; }