/* ================== FEEDBACK INTRO — STILE NARRATIVO VISIVO ================== */


.feedback-intro-vis{


  position: relative;


  background:#a87344; /* arancio mattone */


  color:#fff;


  padding: clamp(64px, 9vh, 120px) 6vw;


  overflow: clip;


  isolation:isolate;


}





.feedback-intro-vis .vis-container{


  max-width: 1100px;


  margin: 0 auto;


  position: relative;


  z-index: 2;


}





.feedback-intro-vis .vis-title{


  font-family: "Playfair Display", serif;


  font-size: clamp(1.8rem, 3.4vw, 3rem);


  line-height: 1.15;


  text-align: center;


  margin: 0 0 2.2rem 0;


}





.feedback-intro-vis .vis-steps{


  display: grid;


  gap: clamp(22px, 2.5vh, 36px);


}





.feedback-intro-vis .vis-step{


  position: relative;


  max-width: 820px;


  font-size: clamp(1rem, 1.4vw, 1.2rem);


  line-height: 1.7;


  opacity: 0;


  transform: translateY(18px);


  transition: opacity .6s ease, transform .6s ease;


}





.feedback-intro-vis .vis-step.left{ margin-right: auto; }


.feedback-intro-vis .vis-step.right{ margin-left: auto; }





.feedback-intro-vis .vis-step.is-visible{


  opacity: 1;


  transform: none;


}





.feedback-intro-vis .hl{


  position: relative;


  font-weight: 700;


  background: linear-gradient(transparent 60%, rgba(255,255,255,.18) 60% 92%, transparent 0);


  padding-inline: 2px;


}





/* Sottolineatura “a matita” animata */


.feedback-intro-vis .scribble{


  width: 240px;


  height: 20px;


  display: block;


  margin-top: .35rem;


}


.feedback-intro-vis .scribble-path{


  fill: none;


  stroke: rgba(255,255,255,.55);


  stroke-width: 3;


  stroke-linecap: round;


  stroke-dasharray: 1;


  stroke-dashoffset: 1;


  transition: stroke-dashoffset .9s ease .05s;


}


.feedback-intro-vis .vis-step.is-visible .scribble-path{


  stroke-dashoffset: 0;


}





/* Claim finale */


.feedback-intro-vis .vis-claim{


  margin-top: clamp(36px, 6vh, 96px);


  text-align: center;


}


.feedback-intro-vis .vis-claim p{


  font-family: "Playfair Display", serif;


  font-size: clamp(1.4rem, 3.2vw, 2.4rem);


  line-height: 1.25;


  margin: 0;


}


.feedback-intro-vis .claim-arc{


  width: clamp(180px, 28vw, 320px);


  height: 60px;


  display: block;


  margin: .6rem auto 0;


}


.feedback-intro-vis .claim-arc .arc{


  fill: none;


  stroke: rgba(255,255,255,.7);


  stroke-width: 3;


  stroke-linecap: round;


  stroke-dasharray: 1;


  stroke-dashoffset: 1;


  transition: stroke-dashoffset .9s cubic-bezier(.22,.65,.22,1);


}


.feedback-intro-vis .vis-claim.is-visible .arc{


  stroke-dashoffset: 0;


}





/* Overlay SVG narrativo */


.feedback-intro-vis .vis-overlay{


  position: absolute;


  inset: 0;


  z-index: 1;


  pointer-events: none;


  opacity: .50; /* leggerezza per tenere il focus sul testo */


}


.feedback-intro-vis .vis-bg{


  width: 100%;


  height: 140%;


  position: absolute;


  top: -10%;


  left: 50%;


  transform: translateX(-50%);


}





/* Stili della linea-tempo e dei marker */


.feedback-intro-vis .vis-line{


  fill: none;


  stroke: rgb(61, 92, 77);


  stroke-width: 4;


  stroke-linecap: round;


  stroke-dasharray: 1;


  stroke-dashoffset: 1;


  filter: drop-shadow(0 0 0 rgba(0,0,0,0));


  transition: filter .2s linear;


}


.feedback-intro-vis .vis-node circle{


  fill: rgb(61, 92, 77);


  transform-origin: center;


  transform: scale(.6);


  opacity: 0;


}





/* Impronte */


.feedback-intro-vis .paw ellipse,


.feedback-intro-vis .paw circle{


  fill: rgba(255,255,255,.55);


}


.feedback-intro-vis .paw{


  opacity: 0;


  transform: translateY(6px) scale(.96);


}





/* Stato visibile “pop” con ritmi sfalsati */


.feedback-intro-vis .vis-bg.drawn .vis-node circle{


  animation: node-pop .5s ease forwards;


}


.feedback-intro-vis .vis-bg.drawn .paw{


  animation: paw-pop .6s ease forwards;


}


.feedback-intro-vis .vis-bg.drawn .p1{ animation-delay: .10s; }


.feedback-intro-vis .vis-bg.drawn .p2{ animation-delay: .25s; }


.feedback-intro-vis .vis-bg.drawn .p3{ animation-delay: .40s; }


.feedback-intro-vis .vis-bg.drawn .p4{ animation-delay: .55s; }


.feedback-intro-vis .vis-bg.drawn .p5{ animation-delay: .70s; }


.feedback-intro-vis .vis-bg.drawn .n1 circle{ animation-delay: .12s; }


.feedback-intro-vis .vis-bg.drawn .n2 circle{ animation-delay: .28s; }


.feedback-intro-vis .vis-bg.drawn .n3 circle{ animation-delay: .44s; }


.feedback-intro-vis .vis-bg.drawn .n4 circle{ animation-delay: .60s; }


.feedback-intro-vis .vis-bg.drawn .n5 circle{ animation-delay: .76s; }


.feedback-intro-vis .vis-bg.drawn .n6 circle{ animation-delay: .92s; }


.feedback-intro-vis .vis-bg.drawn .n7 circle{ animation-delay: 1.08s; }





@keyframes node-pop{


  0%{ opacity: 0; transform: scale(.6); }


  60%{ opacity: 1; transform: scale(1.2); }


  100%{ opacity: 1; transform: scale(1); }


}


@keyframes paw-pop{


  0%{ opacity: 0; transform: translateY(8px) scale(.94); }


  60%{ opacity: 1; transform: translateY(-2px) scale(1.02); }


  100%{ opacity: 1; transform: translateY(0) scale(1); }


}





/* Responsività */


@media (max-width: 768px){


  .feedback-intro-vis{ padding: 56px 5vw; }


  .feedback-intro-vis .vis-step{ font-size: 1.02rem; }


  .feedback-intro-vis .scribble{ width: 200px; }


}





/* Accessibilità / riduzione movimento */


@media (prefers-reduced-motion: reduce){


  .feedback-intro-vis .vis-step,


  .feedback-intro-vis .scribble-path,


  .feedback-intro-vis .vis-line,


  .feedback-intro-vis .vis-node circle,


  .feedback-intro-vis .paw,


  .feedback-intro-vis .arc{


    transition: none !important;


    animation: none !important;


  }


}