.indy-prix-anime-widget {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding-bottom: 56px;
  color: #222c36;
  text-align: center;
  overflow: clip;
}

.indy-prix-anime-widget .animation-scene {
  position: relative;
  width: 214px;
  height: 430px;
  flex-shrink: 0;
  overflow: hidden;
  pointer-events: none;
}

.indy-prix-anime-widget .piggy-coin-animation {
  display: block;
  width: 100%;
  height: 100%;
  transform: translateY(-1px);
}

/* Timeline pilotée par le scroll (JS) : les animations ne jouent jamais seules. */
.indy-prix-anime-widget .piggy-coin-animation * {
  animation-play-state: paused !important;
}

/* Chrome : la timeline de vue fait avancer les keyframes, il ne faut pas les figer. */
.indy-prix-anime-widget.is-view-driven .piggy-coin-animation * {
  animation-play-state: running !important;
  animation-iteration-count: 1 !important;
  animation-fill-mode: both !important;
}

.indy-prix-anime-widget .content-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  max-width: 640px;
}

.indy-prix-anime-widget .title.title-h2 {
  margin: 0;
  font-size: 40px;
  line-height: 40px;
  letter-spacing: -0.88px;
  color: #222c36;
}

.indy-prix-anime-widget .subtitle {
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.16px;
  color: rgba(34, 44, 54, 0.8);
}

.indy-prix-anime-widget .subtitle p {
  margin: 0;
}

.indy-prix-anime-widget .subtitle p+p {
  margin-top: 0;
}

.indy-prix-anime-widget .cta-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.indy-prix-anime-widget .cta-footnote {
  margin: 0;
  font-size: 14px;
  line-height: 24px;
  color: rgba(34, 44, 54, 0.5);
}

/* Effet "Appear" Framer : opacity 0 + y 20px -> visible, spring (duration .8, bounce .2).
   Rejoué à chaque entrée/sortie du viewport, comme animateOnce: false. */
.indy-prix-anime-widget {
  --indy-prix-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Délai de base avant l'apparition du titre (le sous-titre suit à +0.2s). */
  --indy-prix-reveal-delay: 0.3s;
}

@supports (transition-timing-function: linear(0, 1)) {
  .indy-prix-anime-widget {
    /* Courbe exacte du spring framer-motion (stiffness 126.4, damping 18). */
    --indy-prix-reveal-ease: linear(0, 0.0224, 0.0794, 0.1581, 0.2486, 0.3435, 0.4375, 0.5269, 0.6093, 0.6833, 0.7484, 0.8044, 0.8518, 0.8911, 0.9231, 0.9487, 0.9688, 0.9841, 0.9954, 1.0036, 1.0091, 1.0125, 1.0144, 1.0151, 1.015, 1.0142, 1.0131, 1.0118, 1.0104, 1.0089, 1.0076, 1.0063, 1.0051, 1.0041, 1.0032, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1);
  }
}

.indy-prix-anime-widget .reveal-item {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.8s var(--indy-prix-reveal-ease),
    transform 0.8s var(--indy-prix-reveal-ease);
  transition-delay: var(--indy-prix-reveal-delay);
}

.indy-prix-anime-widget .reveal-item--subtitle {
  transition-delay: calc(var(--indy-prix-reveal-delay) + 0.2s);
}

.indy-prix-anime-widget .reveal-item.is-in-view,
.indy-prix-anime-widget.is-revealed .reveal-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  .indy-prix-anime-widget .reveal-item {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 767px) {
  .indy-prix-anime-widget .title.title-h2 {
    font-size: 32px;
    line-height: 40px;
    letter-spacing: -0.64px;
  }
}