/* ========== BLOCK 1 — full-screen Porsche (кадры по прокрутке, scroll-frames.js) ========== */
.block-1 {
  position: relative;
  width: 100%;
  /* Зона прокрутки анимации: 3,5 экрана; на узких экранах короче (responsive.css). */
  height: 350vh;
  height: 350dvh;
  background: #050505;
  z-index: 1;
}
.block-1-pin {
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}
.block-1-stage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.block-1-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 1;
}
/* Пока не пришёл первый кадр — та же картинка «под тканью», без чёрного экрана. */
.block-1-canvas { background: #050505 url(../../img/porsche-covered.webp) center / cover no-repeat; }
@media (orientation: portrait) {
  .block-1-canvas { background-image: url(../../img/porsche-covered-mobile.webp); }
}
/* Full-quality final frame — fades in once animation completes. */
.block-1-final {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
  z-index: 2;
}
.block-1.is-finished .block-1-final {
  opacity: 1;
}
.block-1-vignette {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at center, transparent 50%, rgba(5,5,5,0.55) 100%),
    linear-gradient(180deg, rgba(5,5,5,0.35) 0%, transparent 18%, transparent 70%, rgba(5,5,5,0.85) 100%);
}
.block-1-hint {
  position: absolute;
  bottom: clamp(28px, 5vh, 56px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,245,245,0.7);
  opacity: var(--hint-opacity, 1);
  transition: opacity 0.3s var(--ease);
  pointer-events: none;
  user-select: none;
}
.block-1-hint-l { font-weight: 500; }
.block-1-hint-arrow {
  font-size: 16px;
  letter-spacing: 0;
  animation: hint-bounce 1.8s ease-in-out infinite;
}
@keyframes hint-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.7; }
  50% { transform: translateY(6px); opacity: 1; }
}