@supports (animation-timeline: view()){
  .quote-slide{
    view-timeline-name: --q;
    view-timeline-axis: block;
  }

  .quote-card{
    animation: cardLuxury 1s linear both;
    animation-timeline: --q;
    animation-range: entry 0% cover 78%;
  }

  @keyframes cardLuxury{
  0%   { transform: translate3d(0, 46px, 0) scale(.982); opacity:1; }
  38%  { transform: translate3d(0, -22px, 0) scale(1.015); opacity:1; }
  62%  { transform: translate3d(0, 12px, 0)  scale(.996); opacity:1; }
  100% { transform: translate3d(0, 0, 0)     scale(1);    opacity:1; }
}
  .quote-crown{
    animation: crownLuxury 1s linear both;
    animation-timeline: --q;
    animation-range: entry 0% cover 78%;
  }

  @keyframes crownLuxury{
  0%   { transform: scale(.93); }
  48%  { transform: scale(1.035); }
  100% { transform: scale(1.00); }
}

  .quote-divider{
    animation: lineLuxury 1s linear both;
    animation-timeline: --q;
    animation-range: entry 0% cover 78%;
  }

 @keyframes lineLuxury{
  0%   { width: min(220px, 55vw); }
  52%  { width: min(560px, 86vw); }
  100% { width: min(420px, 72vw); }
}
}