/* Home · tarassaco 3D (assets/js/tarassaco-3d.js). Caricato solo sulla Home.
   Sezione a tutta larghezza sul crema del sito: la scena ha lo stesso fondo,
   in alto e in basso la tela sfuma, e il fondo della sezione scende verso il
   bianco della sezione clienti, così non si vede nessuna "scatola". */
.tarassaco-section {
  position: relative;
  background: linear-gradient(to bottom, var(--clarity-cream, #f9edda) 0, var(--clarity-cream, #f9edda) calc(100% - 160px), var(--white, #fff) 100%);
  padding: 0 0 clamp(24px, 4vw, 56px);
  overflow: hidden;
}

.tarassaco-stage {
  position: relative;
  width: 100%;
  height: min(80vh, 760px);
  margin: 0;
}

.tarassaco-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ingresso morbido la prima volta che la sezione entra in vista */
.tarassaco-stage.is-ready.is-in-view canvas {
  opacity: 1;
  transform: none;
}

.tarassaco-stage.is-unavailable {
  display: none;
}

@media (max-width: 640px) {
  .tarassaco-stage {
    height: auto;
    aspect-ratio: 4 / 5;
    max-height: 88vh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tarassaco-stage canvas {
    transform: none;
    transition: none;
  }
}

.a11y-reduce-motion .tarassaco-stage canvas {
  transform: none;
  transition: none;
}