/* Entrata dal basso degli elementi rivelati allo scroll */
.to-left-anim {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 0.75s ease-out, transform 0.75s ease-out;
    will-change: opacity, transform;
  }

/* Entrata dal basso degli elementi rivelati allo scroll */
.to-right-anim {
    opacity: 0;
    transform: translate3d(0, 48px, 0);
    transition: opacity 0.75s ease-out, transform 0.75s ease-out;
    will-change: opacity, transform;
  }

/* Stato visibile applicato via IntersectionObserver */
.to-left-anim.is-visible,
.to-right-anim.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

.final-reveal-logo-wrap.from-top-anim {
    display: block;
    opacity: 0;
    transform: translate3d(0, -100%, 0);
    transition: opacity 1.15s ease-out, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
    backface-visibility: hidden;
    will-change: opacity, transform;
  }

.final-reveal-logo-wrap.from-top-anim.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

.final-reveal-links.to-left-anim {
    transform: translate3d(0, 26px, 0);
    transition-delay: 0.12s;
  }

.final-reveal-links.to-left-anim.is-visible {
    transform: translate3d(0, 0, 0);
  }

.synosia-impact-section .to-left-anim,
.synosia-impact-section .to-right-anim {
    opacity: 0;
    transform: translate3d(0, 86px, 0);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  }

.synosia-impact-section .to-left-anim.is-visible,
.synosia-impact-section .to-right-anim.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

@media (max-width: 767.98px) {
  .synosia-impact-section .to-left-anim,
  .synosia-impact-section .to-right-anim {
    transform: translate3d(0, 42px, 0);
  }
}

/* Rispetta le preferenze utente sulla riduzione movimento */
@media (prefers-reduced-motion: reduce) and (hover: hover) and (pointer: fine) {
    .to-left-anim,
    .to-right-anim {
      opacity: 1;
      transform: none;
      transition: none;
    }
  }

/* Transizione base delle immagini nelle card */
.ai-img {
    transition: transform 0.55s ease-in-out, filter 0.55s ease-in-out;
    transform-origin: center;
  }
  
  /* Movimento leggero dell'immagine in hover */
  .card-body:hover .ai-img {
    transform: translateY(-4px);
  }

  /* Variante legacy per card su background deep-blue */
  .bg-gradient-deep-blue .card {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background-color: transparent !important;
    background-image: linear-gradient(160deg, rgba(255, 255, 255, 0.96), rgba(224, 247, 250, 0.92)) !important;
    box-shadow: 0 16px 40px rgba(7, 17, 32, 0.18);
    transition: transform 0.45s ease, box-shadow 0.45s ease;
  }

  .bg-gradient-deep-blue .card-body {
    background: transparent !important;
  }

  .bg-gradient-deep-blue .card:hover {
    transform: translateY(-6px);
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.32),
      0 0 36px rgba(255, 255, 255, 0.52),
      0 18px 44px rgba(7, 17, 32, 0.22);
  }

  .bg-gradient-deep-blue .card-title,
  .bg-gradient-deep-blue .card-text,
  .bg-gradient-deep-blue .rotate-anim,
  .bg-gradient-deep-blue .rotate-anim i {
    color: #1A1F2B !important;
  }
  
  /* Setup del contenuto card sopra eventuali livelli decorativi */
  .card-body {
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    transition: transform 0.45s ease, box-shadow 0.45s ease;
  }

  .card-body > * {
    position: relative;
    z-index: 1;
  }

  .card:hover,
  .card-body:hover {
    cursor: pointer;
  }

  /* Hover interattivo delle card principali */
  .card {
    transition: transform 0.45s ease, border-color 0.45s ease, box-shadow 0.45s ease;
  }

  .card:hover {
    transform: translateY(-6px);
    border-color: rgba(8, 234, 208, 0.42) !important;
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.36) !important;
  }





/* Button */

/* Rotazione dell'icona freccia nei bottoni card */
.rotate-anim i {
    display: inline-block;
    transition: transform 0.5s ease;
  }
  
  .card:hover .rotate-anim i,
  .card-body:hover .rotate-anim i {
    transform: rotate(360deg) translate(2px, -2px);
  }

@media (max-width: 767.98px) {
  .to-left-anim,
  .to-right-anim {
    filter: none;
    text-shadow: none;
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    will-change: opacity, transform;
  }

  h1.to-left-anim,
  h2.to-left-anim,
  h3.to-left-anim,
  h4.to-left-anim,
  h5.to-left-anim,
  h6.to-left-anim,
  h1.to-right-anim,
  h2.to-right-anim,
  h3.to-right-anim,
  h4.to-right-anim,
  h5.to-right-anim,
  h6.to-right-anim {
    text-shadow: none;
  }

  .card,
  .card-body,
  .card .card-body > img.ai-img,
  .rotate-anim i {
    transition-duration: 0.28s;
  }
}