/* ============================================================
   Высота — Image placeholders
   Кинематографичные заглушки под палитру Warm Focus.
   Заменить реальными кадрами из prompts-chatgpt.md.
   Использование: <div class="vy-img vy-img--hero"></div>
   ============================================================ */

.vy-img {
  position: relative;
  background-color: var(--beige-300);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}

/* Тонкое зерно/фактура поверх — «плёночность» */
.vy-img::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(45,31,14,0.05) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
  opacity: 0.5;
  pointer-events: none;
}

/* ---- HERO: крыша на закате, тёплый янтарь ---- */
.vy-img--hero {
  background-image:
    radial-gradient(120% 80% at 70% 18%, rgba(232,160,75,0.55) 0%, rgba(212,125,31,0) 55%),
    radial-gradient(90% 70% at 20% 90%, rgba(45,31,14,0.55) 0%, rgba(45,31,14,0) 60%),
    linear-gradient(160deg, #e8a04b 0%, #b45309 38%, #6e3206 74%, #2d1f0e 100%);
}

/* ---- Номер на закате/вечер: бирюза в стекле ---- */
.vy-img--room {
  background-image:
    radial-gradient(80% 60% at 78% 30%, rgba(73,197,182,0.30) 0%, rgba(73,197,182,0) 55%),
    radial-gradient(120% 90% at 25% 85%, rgba(45,31,14,0.45) 0%, rgba(45,31,14,0) 60%),
    linear-gradient(150deg, #f2e7d3 0%, #d8c6a8 30%, #8a7a62 70%, #2d1f0e 100%);
}

/* ---- Город днём: бежево-кремовый ---- */
.vy-img--city {
  background-image:
    radial-gradient(100% 80% at 50% 15%, rgba(255,253,248,0.7) 0%, rgba(255,253,248,0) 55%),
    linear-gradient(165deg, #faf2e4 0%, #e8dcc8 45%, #c2ab85 100%);
}

/* ---- Деталь/фактура: латунь ---- */
.vy-img--detail {
  background-image:
    radial-gradient(90% 90% at 30% 30%, rgba(232,160,75,0.5) 0%, rgba(232,160,75,0) 60%),
    linear-gradient(135deg, #d07d1f 0%, #944308 60%, #2d1f0e 100%);
}

/* Метка-заглушка (показывает, что кадр временный) */
.vy-img__tag {
  position: absolute; left: 12px; bottom: 10px; z-index: 2;
  font-family: var(--font-sans);
  font-size: var(--t-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: rgba(254,249,240,0.82);
  padding: 4px 8px;
  border: 1px solid rgba(254,249,240,0.28);
  border-radius: var(--r-pill);
  background: rgba(20,12,4,0.22);
  backdrop-filter: blur(4px);
}

/* ---- Blur-up: low-res -> high-res ----
   Прелоадер: лёгкий low-res слой, плавная подмена на high-res.
   .is-loaded снимается, когда high-res готов. */
.vy-blurup { position: relative; overflow: hidden; }
.vy-blurup__low {
  position: absolute; inset: 0;
  filter: blur(18px) saturate(1.1);
  transform: scale(1.06);
  transition: opacity var(--dur-cinema) var(--ease-in-out);
}
.vy-blurup__high {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity var(--dur-cinema) var(--ease-in-out);
}
.vy-blurup.is-loaded .vy-blurup__high { opacity: 1; }
.vy-blurup.is-loaded .vy-blurup__low  { opacity: 0; }