/* =========================================================
   ANIMAZIONI MOBILE – rifatte da zero (solo telefono/tablet)
   Regola d'oro: si animano solo opacity e transform, niente blur in movimento.
   ========================================================= */
@media (max-width: 768px){

  /* 1. Comparsa allo scroll: breve, morbida, senza attese */
  .reveal-up,.reveal-scale,.reveal{
    opacity:0;transform:translate3d(0,16px,0) !important;
    transition:opacity .42s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1) !important;
    transition-delay:0s !important;will-change:auto !important}
  .reveal-up.is-visible,.reveal-scale.is-visible,.reveal.is-visible,.reveal.reveal{opacity:1;transform:none !important}
  .tagline.reveal{transform:none !important}

  /* 2. Vetro leggero: niente sfocatura sulle card (solo sulla barra in basso) */
  .box,.qform,.me,.w-feature,.w-card,.w-tl,.a-stats,.a-step,.a-val,.a-edu-item,
  .form-panel,.pitch-box,.method-card,.card,.faq details,.chip,.w-badge,.w-tags span,
  .cta-btn,.w-btn,.a-btn,.pick-btn,.btn-submit,.q-submit{
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .box,.qform,.me,.w-feature,.w-card,.w-tl,.a-stats,.a-step,.a-val,.a-edu-item,.form-panel,.pitch-box,.method-card,.card{
    background:linear-gradient(135deg,rgba(38,26,52,.86),rgba(16,10,24,.9) 55%,rgba(30,10,44,.88)) !important}
  body::before{animation:none !important}

  /* 3. Niente effetti "hover" che restano attaccati dopo il tocco */
  .box:hover,.w-card:hover,.a-step:hover,.a-val:hover,.method-card:hover,.w-feature:hover,.card:hover{
    transform:none !important;animation:none !important}
  /* feedback al tocco: piccola pressione */
  a,button{-webkit-tap-highlight-color:transparent}
  .cta-btn,.w-btn,.a-btn,.pick-btn,.btn-submit,.q-submit,.chip,#matrix-toggle{transition:transform .15s ease,box-shadow .2s ease,background .2s ease !important}
  .cta-btn:active,.w-btn:active,.a-btn:active,.pick-btn:active,.btn-submit:active,.q-submit:active,.chip:active,#matrix-toggle:active{transform:scale(.96) !important}
  .box:active,.w-card:active,.method-card:active{transform:scale(.985) !important;transition:transform .15s ease !important}

  /* 4. Cambio pagina: dissolvenza rapida, la barra in basso resta ferma */
  .m-tabbar{view-transition-name:tabbar}
  ::view-transition-old(root){animation:mOut .18s ease-in both !important}
  ::view-transition-new(root){animation:mIn .3s cubic-bezier(.2,.7,.2,1) both !important}
  ::view-transition-group(tabbar){animation:none !important}
  ::view-transition-old(tabbar){display:none}
  ::view-transition-new(tabbar){animation:none !important}
  html:not(.vt) .pt-c{animation:mIn .3s cubic-bezier(.2,.7,.2,1) backwards !important}
  html.pt-leave .pt-c{animation:mOut .18s ease-in both !important}
}
@keyframes mOut{to{opacity:0;transform:translate3d(0,-6px,0)}}
@keyframes mIn{from{opacity:0;transform:translate3d(0,10px,0)}}

@media (max-width:768px) and (prefers-reduced-motion:reduce){
  .reveal-up,.reveal-scale,.reveal{opacity:1 !important;transform:none !important;transition:none !important}
  ::view-transition-old(root),::view-transition-new(root),.pt-c{animation:none !important}
}

/* LED fisso in cima allo schermo su mobile */
@media (max-width:768px){
  html::after{content:"";position:fixed;left:0;right:0;top:0;height:3px;z-index:10001;pointer-events:none;
    background-color:#d85cff;box-shadow:0 2px 8px 1px #bc13fe,0 10px 20px 2px rgba(188,19,254,.8);
    animation:glitchNeon 4s infinite normal}
}

/* ---- Correzioni mobile (vetro sopra il LED, niente alone, ancore centrate) ---- */
@media (max-width:768px){
  /* fascia di vetro in cima, con il LED sul bordo inferiore */
  html::before{content:"";position:fixed;left:0;right:0;top:0;height:18px;z-index:10000;pointer-events:none;
    background:linear-gradient(180deg,rgba(20,12,30,.75),rgba(20,12,30,.45));
    -webkit-backdrop-filter:blur(14px) saturate(180%);backdrop-filter:blur(14px) saturate(180%);
    box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
  html::after{top:18px !important;box-shadow:0 1px 6px rgba(188,19,254,.9),0 4px 10px rgba(188,19,254,.35) !important}
  /* niente alone viola durante lo scroll */
  body::before{display:none !important}
  html,body{background:#000 !important}
  .m-tabbar{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px rgba(0,0,0,.65) !important}
  /* le sezioni si fermano con il titolo giusto in alto */
  html{scroll-padding-top:0 !important}
  .sec{scroll-margin-top:-26px}
}
/* Mobile: niente striscia LED in alto */
@media (max-width:768px){html::after{display:none !important;content:none !important}}
/* Mobile: niente fascia di vetro in alto */
@media (max-width:768px){html::before{display:none !important;content:none !important}}
/* Mobile: niente "rimbalzo" quando arrivi in fondo (o in cima), che causava il lag */
@media (max-width:768px){
  html,body{overscroll-behavior-y:none}
  canvas#matrix{will-change:auto;transform:translateZ(0)}
}