/* ============================================================
   ФОТО-ИСТОРИЯ НА СКРОЛЛЕ (5 кадров)
   Полноэкранные фотографии сменяют друг друга по мере прокрутки,
   поверх — H1 и смысловые блоки. Только opacity/transform.
   ============================================================ */

/* высокий трек — задаёт длительность истории */
.enter-house{ position:relative; height:520vh; background:#0b0d10; padding:0; }

/* сцена «прилипает» к экрану, пока листаем трек */
.eh-stage{ position:sticky; top:0; height:100vh; overflow:hidden; background:#0b0d10; }

/* кадры-фото: только opacity/scale — дёшево для GPU */
.eh-frame{ position:absolute; inset:0; opacity:0; z-index:1; will-change:opacity; }
.eh-frame.eh-first{ opacity:1; }
.eh-frame img{ width:100%; height:100%; object-fit:cover; object-position:center 45%; display:block; will-change:transform; }

/* вуаль для читаемости: темнее сверху (шапка) и снизу (H1), светлее в центре (для карточек) */
.eh-scrim{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(11,13,16,.46) 0%, rgba(11,13,16,.12) 20%,
    rgba(11,13,16,.06) 50%, rgba(11,13,16,.40) 76%, rgba(11,13,16,.74) 100%);
}

/* ---------- слой текста ---------- */
.eh-beats{ position:absolute; inset:0; z-index:3; }

/* стартовый H1 — крупно в нижнем-левом углу поверх первого кадра */
.eh-title{ position:absolute; left:0; right:0; bottom:12%; padding:0; text-align:left; color:#fff; will-change:opacity,transform; }
.eh-title-inner{ max-width:1160px; margin:0 auto; padding:0 clamp(24px,5vw,48px); }
.eh-rule{ display:block; width:60px; height:3px; background:#fff; margin-bottom:22px; box-shadow:0 2px 16px rgba(0,0,0,.4); }
.eh-title h1{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  letter-spacing:.01em; line-height:1.08; margin:0; color:#fff;
  max-width:min(720px,86vw); font-size:clamp(1.7rem,4.2vw,3.2rem);
  text-shadow:0 4px 34px rgba(0,0,0,.55);
}

/* смысловые блоки — светлое стекло, тёмный текст (читаются на любом фото) */
.eh-beat{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; will-change:opacity,transform; }
.eh-beat .inner{
  max-width:600px; margin:0 24px; text-align:center; color:#1B1F24;
  background:rgba(255,255,255,.92); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  border:1px solid rgba(255,255,255,.7); border-radius:18px;
  padding:34px 40px; box-shadow:0 26px 70px rgba(0,0,0,.34);
}
.eh-beat .label{
  display:inline-block; margin-bottom:14px;
  font-family:'JetBrains Mono',monospace; font-size:.72rem;
  letter-spacing:.18em; text-transform:uppercase; color:#5E6660;
  padding:5px 12px; border:1px solid rgba(27,31,36,.18); border-radius:100px;
}
.eh-beat h2{
  font-family:'Oswald',sans-serif; font-weight:600; text-transform:uppercase;
  font-size:clamp(1.5rem,4vw,2.6rem); line-height:1.08; margin:0 0 12px; color:#1B1F24;
}
.eh-beat p{
  font-family:'Manrope',sans-serif; font-size:clamp(1rem,2.1vw,1.15rem);
  line-height:1.6; color:#5E6660; margin:0 auto; max-width:480px;
}
.eh-beat .eh-cta{
  display:inline-block; margin-top:22px; background:#1B1F24; color:#fff; font-weight:700;
  font-family:'Oswald',sans-serif; text-transform:uppercase; letter-spacing:.04em; font-size:.95rem;
  padding:14px 32px; border-radius:10px; text-decoration:none; cursor:pointer;
  transition:transform .2s ease, background .2s ease;
}
.eh-beat .eh-cta:hover{ background:#33383F; transform:translateY(-2px); }

/* подсказка «листайте вниз» */
.eh-hint{
  position:absolute; left:50%; bottom:4.5%; z-index:3; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  color:#fff; font-family:'Manrope',sans-serif; font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase; text-shadow:0 2px 12px rgba(0,0,0,.7); will-change:opacity;
}
.eh-hint .mouse{ width:25px; height:40px; border:2px solid rgba(255,255,255,.75); border-radius:14px; position:relative; }
.eh-hint .mouse::after{ content:""; position:absolute; left:50%; top:8px; width:4px; height:8px; background:#fff; border-radius:2px; transform:translateX(-50%); animation:eh-wheel 1.5s ease-in-out infinite; }
@keyframes eh-wheel{ 0%{opacity:0;transform:translate(-50%,0)} 30%{opacity:1} 100%{opacity:0;transform:translate(-50%,12px)} }

/* кнопка «пропустить» */
.eh-skip{
  position:absolute; top:82px; right:22px; z-index:4;
  font-family:'Manrope',sans-serif; font-size:.8rem; color:#fff; text-decoration:none;
  padding:8px 16px; border:1px solid rgba(255,255,255,.45); border-radius:100px;
  background:rgba(0,0,0,.28); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.eh-skip:hover{ border-color:#fff; background:rgba(0,0,0,.5); }

/* полоска прогресса истории */
.eh-progress{
  position:absolute; left:0; bottom:0; height:3px; width:0%; z-index:4;
  background:linear-gradient(90deg,#fff,#B8BDC4); box-shadow:0 0 10px rgba(255,255,255,.4);
}

/* шапка остаётся видимой во время истории */
header{ transition:transform .45s ease, opacity .45s ease; }

/* мобильные: сцена короче, кадр держит людей ближе к центру */
@media (max-width:640px){
  .enter-house{ height:460vh; }
  .eh-frame img{ object-position:center 46%; }
  .eh-beat .inner{ padding:26px 22px; }
}

/* ============================================================
   ДОСТУПНОСТЬ / «уменьшить движение»
   Историю видят ВСЕ: JS оставляет только мягкое появление кадров
   (без «наездов» и параллакса — легко для слабых машин). Здесь лишь
   гасим автоанимацию подсказки «листайте вниз».
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .eh-hint .mouse::after{ animation:none; }
}