/* ========== BLOCK 1 — full-screen Porsche (scroll-driven video scrub) ========== */
.block-1 {
  position: relative;
  width: 100%;
  /* Pin-zone height: 500vh on desktop = ~5 screens of scroll for 8s anim →
     ~62vh per second of footage. Mobile shorter (overridden in responsive). */
  height: 500vh;
  height: 500dvh;
  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-video,
.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[hidden] { display: none; }
/* 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; }
}

/* Android: collapse pin-zone — autoplay-once instead of scroll-scrub. */
.block-1.is-android {
  height: 100vh;
  height: 100dvh;
}

/* Android overlay: "Загрузка сайта" with progress bar → "Добро пожаловать". */
.block-1-android {
  position: absolute;
  bottom: clamp(40px, 8vh, 80px);
  left: 50%;
  transform: translateX(-50%);
  width: min(78vw, 360px);
  z-index: 4;
  pointer-events: none;
  display: none; /* shown only via .block-1.is-android */
}
.block-1.is-android .block-1-android { display: block; }

/* Both states are stacked on top of each other; we cross-fade between them. */
.block-1-android-loading,
.block-1-android-welcome {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  color: rgba(245,245,245,0.92);
  text-shadow: 0 1px 14px rgba(0,0,0,0.45);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.55s var(--ease), transform 0.55s var(--ease);
  pointer-events: none;
}
.block-1.is-android.is-loading .block-1-android-loading {
  opacity: 1;
  transform: translateY(0);
}
.block-1.is-android.is-finished .block-1-android-welcome {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.18s; /* welcome fades in slightly after loading fades out */
}
/* On finished, loading slides slightly up while fading out. */
.block-1.is-android.is-finished .block-1-android-loading {
  opacity: 0;
  transform: translateY(-6px);
}

.b1a-label {
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 14px;
}
.b1a-bar {
  width: 100%;
  height: 2px;
  background: rgba(255,255,255,0.16);
  border-radius: 2px;
  overflow: hidden;
}
.b1a-bar-fill {
  width: 0%;
  height: 100%;
  background: rgba(255,255,255,0.92);
  border-radius: 2px;
  transition: width 0.18s linear;
}
.b1a-arrow {
  font-size: 22px;
  margin-top: 10px;
  animation: hint-bounce 1.8s ease-in-out infinite;
}

/* On Android, hide the original "Прокрутите" hint — overlay replaces it. */
.block-1.is-android .block-1-hint { display: none; }