/* Progressive enhancement: without the head bootstrap, content is visible. */
.portfolio-loader {
  position: fixed;
  inset: 0;
  z-index: 2147483646;
  display: grid;
  place-items: center;
  background: #fff;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 140ms ease-out, visibility 140ms;
}
.portfolio-loader img { width: 24px; height: 24px; animation: portfolio-loader-spin 5s linear infinite; }
.portfolio-loading .portfolio-loader { opacity: 1; visibility: visible; pointer-events: auto; }
.portfolio-loading.portfolio-revealing .portfolio-loader { opacity: 0; }
.portfolio-loading body > :not(.portfolio-loader) { visibility: hidden !important; }
/* Hold existing CSS entrance animations at their first frame, including Home grain. */
.portfolio-loading body *, .portfolio-loading body::before, .portfolio-loading body *::before,
.portfolio-loading body *::after { animation-play-state: paused !important; }
.portfolio-loading .portfolio-loader img { animation-play-state: running !important; }
.portfolio-image-pending { opacity: 0 !important; }
.hero__phone.portfolio-image-pending { animation-play-state: paused !important; }
img.portfolio-image-reveal:not([data-site-motion]) { transition: opacity 160ms ease-out; }
.vehicle-showcase-canvas::before { transition: opacity 160ms ease-out; }
.vehicle-showcase-canvas.portfolio-background-pending::before { opacity: 0; }
@keyframes portfolio-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .portfolio-loader img { animation: none; }
  .portfolio-loader, img.portfolio-image-reveal:not([data-site-motion]),
  .vehicle-showcase-canvas::before { transition: none; }
}

/* Intrinsic dimensions reserve space; CSS width keeps the original image proportions. */
.hero__phone, .phone-card > img, .onboarding__home, .onboarding__promo, .side-note img { height: auto; }