/* AUTOMART — нүүр хуудасны hero: бүтэн дэлгэцийн зураг + голлуулсан бичиг. */

.hero-film{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:min(100vh,980px);
  background:#08090b;
  color:#fff;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- Зураг ---------- */
.hero-film-stage{position:absolute;inset:0;z-index:0}
.hf-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  transition:opacity 1.2s ease;
  will-change:opacity;
}
.hf-slide.is-active{opacity:1}
.hf-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:var(--pos,50% 50%);
  transform:scale(1.02);
  filter:saturate(1.05) contrast(1.03);
}
.hf-slide.is-active img{animation:hfZoom 9s ease-out forwards}
@keyframes hfZoom{from{transform:scale(1.02)}to{transform:scale(1.09)}}

.hero-film-veil{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    radial-gradient(74% 54% at 50% 47%,rgba(6,7,9,.56) 0%,rgba(6,7,9,.24) 56%,transparent 84%),
    linear-gradient(180deg,rgba(6,7,9,.72) 0%,rgba(6,7,9,.2) 20%,rgba(6,7,9,.16) 52%,rgba(6,7,9,.72) 84%,rgba(6,7,9,.94) 100%);
}

/* ---------- Голын агуулга ---------- */
.hero-film-body{
  position:relative;
  z-index:2;
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:0;
  padding:150px max(45px,calc((100vw - var(--max))/2)) 20px;
  text-align:center;
}
/* Автомашины марк — голлосон, нимгэн, өргөн зайтай */
.hf-brandline{
  margin:0;
  font-size:clamp(13px,1.45vw,20px);
  text-shadow:0 2px 16px rgba(0,0,0,.92);
}
.hf-brandline span{
  font-weight:200;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.92);
}
.hf-title{
  margin:18px 0 0;
  font-size:clamp(33px,5.8vw,82px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.035em;
  text-shadow:0 6px 40px rgba(0,0,0,.72);
}
.hf-title strong{display:block;font-weight:800;color:#fff}

/* Зураг солигдоход бичиг ээлжлэн зөөлөн орж ирнэ. */
.hero-film-body.is-in .hf-brandline{animation:hfIn .7s cubic-bezier(.2,.8,.2,1) both}
.hero-film-body.is-in .hf-title{animation:hfIn .75s cubic-bezier(.2,.8,.2,1) .07s both}
.hero-film-body.is-in .hf-tag{animation:hfIn .8s cubic-bezier(.2,.8,.2,1) .14s both}
@keyframes hfIn{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:none}}
.hf-tag{
  margin:18px 0 0;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
/* ---------- Доод үйлдлийн хэсэг ---------- */
.hero-film-lower{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:0 max(45px,calc((100vw - var(--max))/2)) 58px;
  text-align:center;
}
.hf-meta{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  margin:0;
  font-size:12px;
  font-weight:500;
  letter-spacing:.02em;
  color:rgba(255,255,255,.9);
  text-shadow:0 2px 16px rgba(0,0,0,.8);
}
.hf-meta i{
  display:inline-block;
  width:1px;
  height:12px;
  margin:0 16px;
  background:rgba(255,255,255,.4);
  font-style:normal;
}
.hf-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:12px;
}
/* Тунгалаг хувилбар — «Автомашин үзэх»-ийн ард Trade-in. */
.hf-btn-ghost .hf-btn-ico{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4)}
.hf-btn-ghost:hover .hf-btn-ico{background:var(--red);border-color:var(--red);box-shadow:0 8px 22px rgba(240,24,45,.55)}
.hf-btn{
  position:relative;
  margin-top:26px;
  height:58px;
  padding:0 8px 0 30px;
  display:inline-flex;
  align-items:center;
  gap:20px;
  border:1px solid rgba(255,255,255,.5);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  backdrop-filter:blur(14px);
  color:#fff;
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
  overflow:hidden;
  transition:color .45s ease,border-color .45s ease,box-shadow .45s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
/* Хулганаар дээгүүр өнгөрөхөд цагаан дүүргэлт зүүнээс баруун тийш гулсана. */
.hf-btn:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:#fff;
  transform:scaleX(0);
  transform-origin:right center;
  transition:transform .55s cubic-bezier(.65,0,.35,1);
}
.hf-btn:hover:before,.hf-btn:focus-visible:before{transform:scaleX(1);transform-origin:left center}
.hf-btn-label,.hf-btn-ico{position:relative;z-index:1}
.hf-btn-ico{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--red);
  color:#fff;
  box-shadow:0 6px 18px rgba(240,24,45,.4);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease;
}
.hf-btn-ico svg{width:16px;height:16px}
.hf-btn:hover{
  color:var(--ink);
  border-color:#fff;
  transform:translateY(-3px);
  box-shadow:0 20px 46px rgba(0,0,0,.42);
}
.hf-btn:hover .hf-btn-ico{transform:rotate(45deg);box-shadow:0 8px 22px rgba(240,24,45,.55)}

/* Слайдын зураас заагч */
.hf-dots{display:flex;align-items:center;gap:14px;margin-top:34px}
.hf-dots button{
  width:44px;
  height:2px;
  padding:0;
  border:0;
  background:rgba(255,255,255,.42);
  cursor:pointer;
  transition:background .3s,transform .3s;
}
.hf-dots button:hover{background:rgba(255,255,255,.75)}
.hf-dots button.active{background:var(--red);transform:scaleY(2)}

@media (prefers-reduced-motion:reduce){
  .hf-slide.is-active img{animation:none;transform:scale(1.02)}
  .hf-slide{transition:opacity .2s linear}
}

@media(max-width:1100px){
  .hero-film{min-height:auto}
  .hero-film-body{padding:126px 24px 18px}
  .hero-film-lower{padding:0 24px 44px}
}
@media(max-width:650px){
  .hero-film{min-height:min(94vh,760px)}
  .hero-film-veil{
    background:
      radial-gradient(96% 52% at 50% 44%,rgba(6,7,9,.6) 0%,rgba(6,7,9,.3) 58%,transparent 86%),
      linear-gradient(180deg,rgba(6,7,9,.74) 0%,rgba(6,7,9,.22) 22%,rgba(6,7,9,.2) 50%,rgba(6,7,9,.8) 84%,rgba(6,7,9,.96) 100%);
  }
  .hero-film-body{padding:104px 18px 14px}
  .hero-film-lower{padding:0 18px 36px}
  .hf-brandline{font-size:11px}
  .hf-brandline span{letter-spacing:.24em}
  .hf-title{margin-top:14px;font-size:clamp(29px,9.2vw,40px)}
  .hf-meta{font-size:11px}
  .hf-tag{margin-top:14px;font-size:9px;letter-spacing:.18em}
  .hf-meta i{margin:0 10px;height:10px}
  .hf-actions{gap:8px}
  .hf-btn{margin-top:20px;height:48px;padding:0 6px 0 16px;gap:10px;font-size:9px;letter-spacing:.1em}
  .hf-btn-ico{width:36px;height:36px}
  .hf-dots{margin-top:24px;gap:10px}
  .hf-dots button{width:30px}
}