/* ================================================================
   VivaCloud Animations — additive only, no conflicts with vivacloud.css
   vivacloud.css already defines: --t (.2s), --t-fast (.13s),
   transitions on a, .vc-tb-btn, .vc-sb-item, .vc-search-dropdown (display)
   ================================================================ */

/* ── Override token vivacloud.css — più morbidi ── */
:root {
  --t:       .32s cubic-bezier(0, 0, .2, 1);   /* era .2s  */
  --t-fast:  .22s cubic-bezier(0, 0, .2, 1);   /* era .13s */

  --vc-ease-spring: cubic-bezier(.22, .68, 0, 1.1);
  --vc-dur-reveal:  600ms;
  --vc-dur-page:    380ms;
}

/* ── Keyframes propri (nomi diversi da vc-fade-up di vivacloud.css) ── */
@keyframes vcRevealUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vcRevealIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes vcSlideAlert {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes vcGradientFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes vcShimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ================================================================
   Page load — fade-up sul contenuto principale
   (vivacloud.css non anima .vc-content né .vc-page-header)
   ================================================================ */
.vc-page-header {
  animation: vcRevealIn var(--vc-dur-page) cubic-bezier(0,0,.18,1) both;
}

.vc-flash .alert {
  animation: vcSlideAlert var(--vc-dur-page) cubic-bezier(0,0,.18,1) both;
}

/* ================================================================
   Scroll reveal — classi aggiunte via JS IntersectionObserver
   Completamente nuove, nessun conflitto
   ================================================================ */
.vc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity   var(--vc-dur-reveal) cubic-bezier(0,0,.18,1),
    transform var(--vc-dur-reveal) cubic-bezier(0,0,.18,1);
  will-change: opacity, transform;
}

.vc-reveal.vc-visible {
  opacity:   1;
  transform: translateY(0);
}

/* Stagger — delay progressivo sui figli diretti */
.vc-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity   var(--vc-dur-reveal) cubic-bezier(0,0,.18,1),
    transform var(--vc-dur-reveal) cubic-bezier(0,0,.18,1);
  will-change: opacity, transform;
}
.vc-stagger.vc-visible > *:nth-child(1)  { transition-delay:   0ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(2)  { transition-delay: 100ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(3)  { transition-delay: 200ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(4)  { transition-delay: 300ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(5)  { transition-delay: 400ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(6)  { transition-delay: 500ms; opacity: 1; transform: none; }
.vc-stagger.vc-visible > *:nth-child(n+7){ transition-delay: 600ms; opacity: 1; transform: none; }


/* ================================================================
   Dept cards — transizione estesa
   vivacloud.css ha solo border-color + box-shadow su .vc-dept-card
   Aggiungiamo background e transform senza sovrascrivere
   ================================================================ */
.vc-dept-card {
  transition:
    transform    .2s cubic-bezier(.23,1,.32,1),
    box-shadow   .2s cubic-bezier(.23,1,.32,1),
    border-color .2s cubic-bezier(.23,1,.32,1),
    background   .2s cubic-bezier(.23,1,.32,1);
}

/* ================================================================
   Buttons — press scale
   vivacloud.css non ha :active su .btn
   ================================================================ */
.btn:active {
  transform: scale(.96);
  transition-duration: .08s !important;
}

/* ================================================================
   Input focus — glow aggiuntivo
   Estende box-shadow già presente senza sovrascrivere border-color
   ================================================================ */
.form-control:focus,
.form-select:focus {
  box-shadow: 0 0 0 3px rgba(43,111,196,.15) !important;
}

/* ================================================================
   Hero gradiente animato
   .vc-submit-hero non è animato in vivacloud.css
   ================================================================ */
.vc-submit-hero {
  background-size: 200% 200% !important;
  animation: vcGradientFlow 9s ease infinite;
}

/* Classe utility per altri hero */
.vc-anim-hero {
  background-size: 200% 200% !important;
  animation: vcGradientFlow 9s ease infinite;
}

/* ================================================================
   Badge gradiente animato — classe utility nuova
   ================================================================ */
.vc-grad-badge {
  background: linear-gradient(135deg, #2b6fc4, #e63a77, #2b6fc4);
  background-size: 200% 200%;
  animation: vcGradientFlow 4s ease infinite;
  color: #fff;
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 11px;
  font-weight: 700;
}

/* ================================================================
   Skeleton shimmer — classe utility nuova
   ================================================================ */
.vc-skeleton {
  background: linear-gradient(
    90deg,
    var(--surface2,#f0f3f8) 25%,
    var(--surface,#fff)     50%,
    var(--surface2,#f0f3f8) 75%
  );
  background-size: 200% 100%;
  animation: vcShimmer 1.4s ease infinite;
  border-radius: 8px;
  color: transparent !important;
}

/* ================================================================
   Override animazioni hero di vivacloud.css — durate più morbide
   (originals: .4s–.5s cubic-bezier(.23,1,.32,1) — troppo veloci)
   ================================================================ */
.vc-hero,
.vc-ticket-hero,
.vc-services-hero,
.vc-profile-hero         { animation-duration: .7s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }

.vc-tiles .vc-tile        { animation-duration: .65s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-shortcuts .vc-shortcut{ animation-duration: .6s !important;  animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-quick-actions .vc-qa-item { animation-duration: .6s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-stat-cards .vc-stat-card  { animation-duration: .65s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-renewals,
.vc-dash-panels .card         { animation-duration: .7s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-svc-list .vc-svc-card     { animation-duration: .6s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-ticket-summary .vc-ticket-summary-item { animation-duration: .6s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-ticket-reply-card,
.vc-ticket-thread .vc-ticket-message { animation-duration: .65s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }
.vc-profile-grid .vc-profile-card    { animation-duration: .65s !important; animation-timing-function: cubic-bezier(0,0,.2,1) !important; }

/* ================================================================
   Prefers-reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .vc-content,
  .vc-page-header,
  .vc-flash .alert,
  .vc-submit-hero,
  .vc-anim-hero,
  .vc-grad-badge,
  .vc-skeleton {
    animation: none !important;
  }

  .vc-reveal,
  .vc-stagger > * {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }

  .panel,
  .card,
  .portlet,
  .vc-dept-card,
  .btn {
    transition: none !important;
  }
}