/* The original car-to-croquis scene, contained within the index section. */
.croquis-teaser-visual .inline-croquis {
  --intro-opacity: 1;
  --yard-opacity: 0;
  --statement-opacity: 0;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #090a0d;
}
.inline-croquis .journey-sticky {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: #090a0d;
}
.inline-croquis .journey-sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: var(--sky-opacity, 1);
  background: radial-gradient(circle at 50% 70%, #352125 0%, #100e11 55%, #090a0d 100%);
}
.inline-croquis #yard-world,
.inline-croquis #car-particles {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.inline-croquis #yard-world { z-index: 1; }
.inline-croquis #car-particles { z-index: 3; pointer-events: none; }
.inline-croquis .cinematic-car {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 15%;
  width: min(92%, 900px);
  opacity: var(--photo-opacity, 1);
  transform: translateX(-50%);
  mask-image: var(--photo-mask, none);
  -webkit-mask-image: var(--photo-mask, none);
  filter: drop-shadow(0 32px 26px rgba(0, 0, 0, .72));
}
.inline-croquis .cinematic-car img { position: relative; z-index: 2; width: 100%; }
.inline-croquis .cinematic-glow {
  position: absolute;
  z-index: 1;
  right: 5%;
  bottom: 4%;
  width: 30%;
  height: 22%;
  border-radius: 50%;
  background: rgba(255, 198, 116, .45);
  filter: blur(48px);
}
.inline-croquis .journey-statement { display: none; }
@media (max-width: 680px) {
  .inline-croquis .cinematic-car { width: 96%; bottom: 19%; }
}
