/* =========================================================
   MOTION SYSTEM – Assitec
   ========================================================= */

/* ---------- 1. Token ---------- */
:root {
  --ease: cubic-bezier(
    0.22,
    1,
    0.36,
    1
  ); /* ease-out morbido, niente rimbalzi */
  --dur: 0.8s; /* durata standard */
  --step: 0.08s; /* ritardo tra elementi fratelli (stagger) */
}

/* ---------- 2. Keyframes ---------- */
/* Overlay hero: parte nero pieno, arriva all'opacità reale definita in main.css */
@keyframes hero-light {
  from {
    opacity: 1;
  }
}

/* Testo a maschera: sale dal basso. Margine 0.25em per non tagliare accenti e discendenti */
@keyframes reveal {
  from {
    transform: translateY(100%);
    clip-path: inset(-0.25em -0.25em calc(100% + 0.25em) -0.25em);
  }
  to {
    transform: translateY(0);
    clip-path: inset(-0.25em);
  }
}

/* Dissolvenza + salita. Distanza personalizzabile per elemento con --y */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(var(--y, 16px));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Linea che si disegna in orizzontale (serve transform-origin sull'elemento) */
@keyframes line {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* Zoom-out: sfondo hero (a tempo) e immagine banner (da scroll) */
@keyframes zoom-out {
  from {
    transform: scale(1.05);
  }
  to {
    transform: scale(1);
  }
}

/* Parallasse: spostamento e scala calano INSIEME fino a 0 / 1.
   Con scala = 1 + 2 × spostamento, lo zoom residuo copre sempre lo spostamento residuo:
   mai bordi vuoti (a patto che l'immagine riempia il contenitore) */
@keyframes parallax {
  from {
    translate: 0 calc(var(--par) * -10%);
    scale: calc(1 + var(--par) * 0.1);
  }
  to {
    translate: 0 0;
    scale: 1;
  }
}

/* ---------- 3. Hero: parte al caricamento, NON dipende da JS ---------- */

/* Fuori dalla media query: è layout, non animazione */
.hero-cover .hero__divider {
  transform-origin: left center; /* center se su mobile il blocco è centrato */
}

@media (prefers-reduced-motion: no-preference) {
  body:not(.elementor-editor-active) .hero-cover {
    position: relative; /* riferimento per ::before */
    overflow: hidden; /* taglia lo sfondo ingrandito */
    isolation: isolate; /* ::before a z-index -1 resta dentro la section */
  }

  /* Sfondo: zoom-out */
  body:not(.elementor-editor-active) .hero-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: inherit; /* stessa immagine, size e position della section */
    pointer-events: none;
    animation: zoom-out 2.4s var(--ease) backwards;
  }

  /* Overlay: la luce sale (richiede l'opacità di riposo definita in main.css) */
  body:not(.elementor-editor-active) .hero-cover::after {
    animation: hero-light 1.6s var(--ease) backwards;
  }

  body:not(.elementor-editor-active) .hero-cover .rank-math-breadcrumb p {
    animation: reveal 0.8s var(--ease) 0.1s backwards;
  }
  body:not(.elementor-editor-active) .hero-cover .hero__divider {
    animation: line 1s var(--ease) 0.25s backwards;
  }
  body:not(.elementor-editor-active) .hero-cover .hero__title {
    animation: reveal 0.9s var(--ease) 0.35s backwards;
  }
  body:not(.elementor-editor-active) .hero-cover .hero__text {
    animation: fade-up var(--dur) var(--ease) 0.5s backwards;
  }
  /* Si anima il GRUPPO, non il singolo .btn, per evitare il doppio movimento */
  body:not(.elementor-editor-active) .hero-cover .wrap-buttons {
    animation: fade-up var(--dur) var(--ease) 0.6s backwards;
  }
}

/* ---------- 4. Elementi sotto la hero: partono quando entrano nel viewport ----------
   Le animazioni nascono in pausa; motion.js aggiunge .inview e le fa partire.
   Se aggiungi un selettore qui, aggiungilo anche in ITEMS dentro motion.js.
   Niente !important: :where() tiene la specificità a (0,1,0), un blocco può sovrascrivere */
@media (prefers-reduced-motion: no-preference) {
  /* Titoli e testi: reveal */
  .motion
    :where(
      .grid-icon-title,
      .grid-icon-text,
      .media-testo__title,
      .media-testo__text,
      .media-testo .btn,
      .banner-md__title,
      .banner-md__text,
      .banner-md .btn,
      .listing__title,
      .listing__text,
      .intro__col,
      .element-fade-up,
      .part-1__title,
      .part-1__text,
      .part-1__sub-title,
      .step-slider__title,
      .step-slider__text,
      .full-text__title,
      .full-text__text,
      .media-list__title,
      .media-list__text
    ) {
    animation: reveal var(--dur) var(--ease) backwards paused;
  }
  .motion :where(.intro-divider) {
    animation: line var(--dur) var(--ease) backwards paused;
  }
  /* Card e step: fade-up con stagger tra fratelli */
  .motion
    :where(
      .grid__el,
      .grid-card__el,
      .step-slider__item,
      .el__flex,
      .grid-cards__card,
      .media-list__list li,
      .faq-item
    ) {
    animation: fade-up var(--dur) var(--ease) backwards paused;
    animation-delay: calc(
      var(--step) * var(--i, 0)
    ); /* --i scritto da motion.js */
  }

  /* Interruttore: specificità (0,2,0), batte le regole sopra senza !important */
  .motion .inview {
    animation-play-state: running;
  }
}

/* ---------- 5. Parallasse e zoom da scroll (indipendenti da JS) ---------- */

/* Contenitore: la finestra che taglia l'immagine.
   !important solo su overflow, per battere gli stili di Elementor. MAI su --par */
.parallax {
  --par: 0.6; /* ampiezza standard */
  overflow: clip !important;
}
.parallax--soft {
  --par: 0.3;
}
.parallax--strong {
  --par: 1;
}

/* Solo dove supportato; altrove l'immagine resta ferma e normale */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Il wrapper è la finestra di ritaglio e la timeline.
       clip (non hidden): ritaglia senza creare un contenitore di scroll.
       !important solo su overflow, per battere gli stili di Elementor */
    body:not(.elementor-editor-active) .media-testo__wrap-img {
      overflow: clip !important;
      view-timeline: --par-tl block;
    }

    /* L'immagine segue la timeline del suo wrapper */
    body:not(.elementor-editor-active) .media-testo__wrap-img > img.parallax {
      animation: parallax linear both;
      animation-timeline: --par-tl; /* sempre DOPO lo shorthand */
      animation-range: cover 0% cover 50%;
    }

    /* Immagine banner: zoom-out con la propria timeline */
    body:not(.elementor-editor-active) .banner-md__image {
      animation: zoom-out linear both;
      animation-timeline: view(block); /* sempre DOPO lo shorthand */
      animation-range: cover 0% cover 50%;
    }
  }
}

/* ---------- 6. Hover card download ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hovering {
    transition:
      transform 0.35s ease-in-out,
      border-color 0.35s ease-in-out,
      box-shadow 0.35s ease-in-out;
  }
}
/* hover e focus da tastiera condividono lo stesso stile */
.hovering:has(.btn-download:is(:hover, :focus-visible)) {
  transform: scale(1.05);
  border-color: var(--primary);
  box-shadow: 2px 2px 8px 1px #0000005f;
}

/* ============================================================
   BG-BLUR-FULL — fade dei testi all'arrivo di ogni sezione
   ============================================================ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Ogni sezione dichiara la propria timeline:
		   i testi leggono quella della sezione che li contiene */
    .blob-wrapper {
      view-timeline: --blob-section block;
    }

    .bg-blur-full__title,
    .bg-blur-full__text {
      animation: text-fade ease-out both; /* lo shorthand azzera la timeline… */
      animation-timeline: --blob-section; /* …quindi questa riga va DOPO */
      /* Il titolo parte quando la sezione è a circa un terzo del suo ingresso */
      animation-range: entry 25% entry 100%;
    }

    /* I paragrafi poco dopo: tutto pieno quando la sezione arriva in posizione */
    .bg-blur-full__text {
      animation-range: entry 25% entry 100%;
    }
  }
}

/* Solo il fotogramma di partenza: l'arrivo è l'opacità naturale del testo */
@keyframes text-fade {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
}