/* Motion layer (light motion graphics). Every animation starts from a hidden or
   offset state and ends on the original one, so at rest layout, text and images
   are unchanged. Rules apply only with the .motion class on <html>, added by
   motion.js, and never with "reduce motion". Colours: palette.css tokens only. */
:root {
  --m-ease: cubic-bezier(.16, 1, .3, 1);
  --m-ease-io: cubic-bezier(.65, 0, .35, 1);
}

@media screen and (prefers-reduced-motion: no-preference) {
  /* Start-up: content appears once the animations are ready. If the script never
     finishes, the failsafe animation shows it after 2.5 seconds. */
  .motion:not(.motion-ready) :is(.site-header, main, .site-footer) { opacity: 0; animation: m-failsafe .01s linear 2.5s forwards; }
  .motion-ready main { animation: m-fade .7s ease-out backwards; }
  .motion-ready .site-header { animation: m-drop .9s var(--m-ease) backwards; }

  /* Header: items drop in one after another; on mobile, when the menu opens. */
  @media (min-width: 1041px) {
    .motion-ready .site-header :is(.brand, .nav > *, .header-demo) { animation: m-drop-sm .8s var(--m-ease) backwards; }
    .motion-ready .site-header .brand { animation-delay: .12s; }
    .motion-ready .site-header .nav > :nth-child(1) { animation-delay: .2s; }
    .motion-ready .site-header .nav > :nth-child(2) { animation-delay: .26s; }
    .motion-ready .site-header .nav > :nth-child(3) { animation-delay: .32s; }
    .motion-ready .site-header .nav > :nth-child(4) { animation-delay: .38s; }
    .motion-ready .site-header .nav > :nth-child(5) { animation-delay: .44s; }
    .motion-ready .site-header .header-demo { animation-delay: .52s; }
  }
  @media (max-width: 1040px) {
    .motion .site-header .nav.is-open > * { animation: m-drop-sm .5s var(--m-ease) backwards; }
    .motion .site-header .nav.is-open > :nth-child(2) { animation-delay: .04s; }
    .motion .site-header .nav.is-open > :nth-child(3) { animation-delay: .08s; }
    .motion .site-header .nav.is-open > :nth-child(4) { animation-delay: .12s; }
    .motion .site-header .nav.is-open > :nth-child(5) { animation-delay: .16s; }
  }
  .motion .nav-group[open] > .nav-submenu { animation: m-drop-sm .32s var(--m-ease); }

  /* Scroll entrances: motion.js assigns data-m and the --m-delay stagger. */
  .motion [data-m]:not([data-m="scene"]):not(.is-in) { opacity: 0; }
  .motion [data-m].is-in {
    animation-duration: 1s;
    animation-timing-function: var(--m-ease);
    animation-delay: var(--m-delay, 0s);
    animation-fill-mode: backwards;
  }
  .motion [data-m="rise"].is-in { animation-name: m-rise; }
  .motion [data-m="fade"].is-in { animation-name: m-fade; animation-timing-function: ease-out; }
  .motion [data-m="heading"].is-in { animation-name: m-heading; animation-duration: 1.25s; }
  .motion [data-m="card"].is-in { animation-name: m-card; animation-duration: 1.15s; }
  .motion [data-m="pop"].is-in { animation-name: m-pop; animation-duration: .95s; }
  .motion [data-m="right"].is-in { animation-name: m-right; }
  .motion [data-m="iris"].is-in { animation-name: m-iris; animation-duration: 1.7s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }
  .motion [data-m="wipe"].is-in { animation-name: m-wipe; animation-duration: 1.5s; animation-timing-function: cubic-bezier(.7, 0, .2, 1); }

  /* 01 · Hero: title, text and slogan appear letter by letter (motion.js wraps
     each letter in .m-char with its own delay --c), then buttons and window. */
  .motion .hero:not(.is-in) :is(.m-char, .hero-actions) { opacity: 0; }
  .motion .hero.is-in .m-char { animation: m-fade .35s ease-out var(--c, 0s) backwards; }
  .motion .hero.is-in .hero-actions { animation: m-rise 1s var(--m-ease) calc(var(--m-type-end, 2s) - .3s) backwards; }
  /* The window already runs its float animations, so its entrance uses transitions. */
  .motion .hero .product-window { transition: opacity 1.2s ease-out 1.6s, translate 1.8s var(--m-ease) 1.6s, scale 1.8s var(--m-ease) 1.6s; }
  .motion .hero:not(.is-in) .product-window { opacity: 0; translate: 0 90px; scale: .92; }

  /* 02 · The lines from the DatiPro hub draw in, then the three modules enter. */
  .motion .data-modules:not(.is-in)::before,
  .motion .data-modules:not(.is-in)::after,
  .motion .data-modules:not(.is-in) > li { opacity: 0; }
  .motion .data-modules > li:nth-child(1) { --m-step: .75s; }
  .motion .data-modules > li:nth-child(2) { --m-step: .87s; }
  .motion .data-modules > li:nth-child(3) { --m-step: .99s; }
  .motion .data-modules.is-in::before { transform-origin: 50% 0; animation: m-grow-y .45s var(--m-ease-io) calc(var(--m-delay, 0s) + .05s) backwards; }
  .motion .data-modules.is-in::after { animation: m-grow-x .7s var(--m-ease-io) calc(var(--m-delay, 0s) + .4s) backwards; }
  .motion .data-modules.is-in > li { animation: m-card 1.05s var(--m-ease) calc(var(--m-delay, 0s) + var(--m-step, .75s)) backwards; }
  .motion .data-modules.is-in > li::before { transform-origin: 50% 0; animation: m-grow-y .35s var(--m-ease-io) calc(var(--m-delay, 0s) + var(--m-step, .75s)) backwards; }
  @media (max-width: 900px) {
    .motion .data-modules.is-in::after { transform-origin: 100% 50%; }
    .motion .data-modules.is-in > li::before { transform-origin: 0 50%; animation-name: m-grow-x; }
    .motion .data-modules.is-in > li::after { transform-origin: 50% 0; animation: m-grow-y .5s var(--m-ease-io) calc(var(--m-delay, 0s) + var(--m-step, .75s)) backwards; }
  }

  /* 03 · Advantage cards: the list items follow the card. */
  .motion .advantage-overview__card.is-in .advantage-overview__number { animation: m-fade 1s ease-out calc(var(--m-delay, 0s) + .4s) backwards; }
  .motion .advantage-overview__card.is-in li { animation: m-left .8s var(--m-ease) calc(var(--m-delay, 0s) + .5s) backwards; }
  .motion .advantage-overview__card.is-in li + li { animation-delay: calc(var(--m-delay, 0s) + .62s); }

  /* 04 · Card numbers, and orbits that turn slowly. */
  .motion .features-benefits .feature-card.is-in .feature-number { animation: m-num 1s var(--m-ease) calc(var(--m-delay, 0s) + .2s) backwards; }
  .motion .benefit-orbits::before { transform-origin: 0 0; animation: m-spin 150s linear infinite; }
  .motion .benefit-orbits::after { transform-origin: 0 0; animation: m-breathe 7s ease-in-out infinite alternate; }

  /* 05 · Carousel: panel, text and icon enter on every step change. */
  .motion .workflow-carousel.is-in .workflow-slide.is-active > img { transform-origin: 0 0; animation: m-settle 5s cubic-bezier(.2, .6, .3, 1) backwards; }
  .motion .workflow-carousel.is-in .workflow-slide.is-active .workflow-slide__content { animation: m-rise 1s var(--m-ease) calc(var(--m-delay, 0s) + .4s) backwards; }
  .motion .workflow-carousel.is-in .workflow-slide.is-active .workflow-slide__content :is(h3, p) { animation: m-rise .9s var(--m-ease) calc(var(--m-delay, 0s) + .55s) backwards; }
  .motion .workflow-carousel.is-in .workflow-slide.is-active .workflow-slide__content p { animation-delay: calc(var(--m-delay, 0s) + .68s); }
  .motion .workflow-carousel.is-in .workflow-slide.is-active .workflow-slide__icon svg > * { animation: m-stroke 1.8s var(--m-ease-io) calc(var(--m-delay, 0s) + .6s) backwards; }

  /* 06 · Each item's dot appears after its text. */
  .motion .autonomy-points li.is-in::before { animation: m-dot .7s var(--m-ease) calc(var(--m-delay, 0s) + .25s) backwards; }

  /* 07 · Cards scale around their own centre during the entrance. */
  .motion .language-card { transform-origin: 0 0; }

  /* 08 · Piani tariffari: the summary card builds up line by line, logos and items in sequence;
     each module card brings in its price after the card. */
  .motion .pricing-card.is-in .pricing-card__label { animation: m-fade .8s ease-out calc(var(--m-delay, 0s) + .35s) backwards; }
  .motion .pricing-card.is-in .pricing-card__description { animation: m-rise .9s var(--m-ease) calc(var(--m-delay, 0s) + .45s) backwards; }
  .motion .pricing-card.is-in .pricing-card__brands img { animation: m-pop .8s var(--m-ease) calc(var(--m-delay, 0s) + var(--m-step, .6s)) backwards; }
  .motion .pricing-card__brands img:nth-child(2) { --m-step: .68s; }
  .motion .pricing-card__brands img:nth-child(3) { --m-step: .76s; }
  .motion .pricing-card__brands img:nth-child(4) { --m-step: .84s; }
  .motion .pricing-card.is-in .pricing-card__detail { animation: m-rise .9s var(--m-ease) calc(var(--m-delay, 0s) + .95s) backwards; }
  .motion .pricing-card.is-in .pricing-card__rule { transform-origin: 0 50%; animation: m-grow-x .7s var(--m-ease-io) calc(var(--m-delay, 0s) + 1.05s) backwards; }
  .motion .pricing-card.is-in .pricing-card__list li { animation: m-left .8s var(--m-ease) calc(var(--m-delay, 0s) + var(--m-step, 1.15s)) backwards; }
  .motion .pricing-card__list li:nth-child(2) { --m-step: 1.23s; }
  .motion .pricing-card__list li:nth-child(3) { --m-step: 1.31s; }
  .motion .pricing-card__list li:nth-child(4) { --m-step: 1.39s; }
  .motion .pricing-plan.is-in .pricing-plan__price { animation: m-num 1s var(--m-ease) calc(var(--m-delay, 0s) + .35s) backwards; }
  .motion .pricing-plan.is-in .pricing-plan__link { animation: m-fade .8s ease-out calc(var(--m-delay, 0s) + .6s) backwards; }

  /* Micro-motion: eyebrow dots and button arrows. */
  .motion .eyebrow-dot { position: relative; }
  .motion .eyebrow-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: m-ping 3.2s var(--m-ease) infinite; pointer-events: none; }
  .motion :is(.button, .text-link) > span[aria-hidden="true"] { transition: translate .35s var(--m-ease); }
  .motion :is(.button, .text-link):hover > span[aria-hidden="true"] { translate: 4px 0; }
  .motion .text-link[href^="#"]:hover > span[aria-hidden="true"] { translate: 0 3px; }
  .motion .header-demo:hover > span[aria-hidden="true"] { translate: 2px -2px; }

  @keyframes m-failsafe { to { opacity: 1; } }
  @keyframes m-fade { from { opacity: 0; } }
  @keyframes m-drop { from { opacity: 0; translate: 0 -100%; } }
  @keyframes m-drop-sm { from { opacity: 0; translate: 0 -10px; } }
  @keyframes m-rise { from { opacity: 0; translate: 0 30px; } }
  @keyframes m-heading { from { opacity: 0; translate: 0 26px; filter: blur(10px); } }
  @keyframes m-card { from { opacity: 0; translate: 0 56px; scale: .96; } }
  @keyframes m-pop { from { opacity: 0; translate: 0 14px; scale: .8; } }
  @keyframes m-left { from { opacity: 0; translate: -20px 0; } }
  @keyframes m-right { from { opacity: 0; translate: 28px 0; } }
  @keyframes m-num { from { opacity: 0; translate: -22px 0; filter: blur(8px); } }
  @keyframes m-dot { from { scale: 0; } 60% { scale: 1.6; } }
  @keyframes m-iris { from { opacity: 0; clip-path: circle(0% at 50% 50%); scale: 1.16; } 25% { opacity: 1; } }
  @keyframes m-wipe { from { clip-path: inset(100% 0 0 0 round 22px); scale: 1.06; } to { clip-path: inset(0 0 0 0 round 22px); } }
  @keyframes m-grow-x { from { scale: 0 1; } }
  @keyframes m-grow-y { from { scale: 1 0; } }
  @keyframes m-settle { from { scale: 1.06; } }
  @keyframes m-stroke {
    from { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: var(--len, 0); }
    to { stroke-dasharray: var(--len, 0) var(--len, 0); stroke-dashoffset: 0; }
  }
  @keyframes m-spin { to { rotate: 360deg; } }
  @keyframes m-breathe { to { scale: 1.035; } }
  @keyframes m-ping {
    0% { box-shadow: 0 0 0 0 rgb(var(--palette-accent-rgb) / .55); }
    70%, 100% { box-shadow: 0 0 0 10px rgb(var(--palette-accent-rgb) / 0); }
  }
}