/* =====================================================================
   Air Divine — হোমপেজ হিরোর ব্যাকগ্রাউন্ড ছবি/ভিডিও (r30)
   ===================================================================== */

/* ---------- সাইট ---------- */
section.hero.hh-media { background: #2e0210; }
section.hero > .hh-bg {
  position: absolute; inset: 0; z-index: -2; overflow: hidden; pointer-events: none;
}
.hh-bg .hh-pic, .hh-bg .hh-pic img, .hh-bg .hh-vid {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
}
.hh-bg .hh-pic img, .hh-bg .hh-vid {
  object-fit: cover; object-position: var(--hh-pos, 50% 50%);
}
.hh-bg .hh-vid { opacity: 0; transition: opacity .8s ease; }
.hh-bg.is-playing .hh-vid { opacity: 1; }
.hh-bg.is-playing .hh-pic { opacity: 0; transition: opacity .8s ease .2s; }

/* ধীর জুম — শুধু ছবিতে, আর যারা কম নড়াচড়া চান তাদের জন্য বন্ধ */
.hh-bg.hh-kb .hh-pic img { animation: hhKen 26s ease-in-out infinite alternate; transform-origin: var(--hh-pos, 50% 50%); }
@keyframes hhKen { from { transform: scale(1); } to { transform: scale(1.08); } }

/* লেখা পড়ার জন্য রঙের পর্দা */
.hh-bg .hh-ov { position: absolute; inset: 0; }
.hero.hh-light .hh-ov {
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(253, 251, 247, calc(var(--hh-ov) * .9)) 0%, rgba(253, 251, 247, calc(var(--hh-ov) * .55)) 60%, transparent 100%),
    linear-gradient(180deg, rgba(253, 251, 247, calc(var(--hh-ov) * .6)) 0%, rgba(251, 248, 242, calc(var(--hh-ov) * .8)) 100%);
}
.hero.hh-dark .hh-ov {
  background:
    radial-gradient(120% 70% at 50% 30%, rgba(46, 2, 16, calc(var(--hh-ov) * .55)) 0%, rgba(46, 2, 16, calc(var(--hh-ov) * .85)) 100%),
    linear-gradient(180deg, rgba(46, 2, 16, calc(var(--hh-ov) * .35)) 0%, rgba(46, 2, 16, calc(var(--hh-ov) * .9)) 100%);
}
/* নিচের অংশ পরের সেকশনের রঙে মিশে যায় — কোনো কাটা দাগ থাকে না */
.hh-bg .hh-fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(180deg, transparent, var(--bg, #f4f2f3));
}

/* ছবি থাকলে পুরনো সাজসজ্জার আভা লুকাই */
.hero.hh-media .hero__art .ha-glow { display: none; }
.hero.hh-media .hero__art { opacity: .55; }

/* গাঢ় পর্দায় হিরোর ছোট লেখাগুলো হালকা রঙে */
.hero.hh-dark .sc__chips > span { color: #f2d691 !important; }
.hero.hh-dark .bot-avatar.is-calm { filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .45)); }

@media (prefers-reduced-motion: reduce) {
  .hh-bg.hh-kb .hh-pic img { animation: none; }
}
@media (max-width: 700px) {
  .hh-bg .hh-fade { height: 60px; }
}
@media print { section.hero > .hh-bg { display: none; } }

/* ---------- অ্যাডমিন এডিটর ---------- */
.hhx .hhx__box { width: min(1040px, 100%); }
.hhx__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.hhx__col { display: grid; gap: 14px; min-width: 0; }
.hhx__slot { border: 1px solid #ecdcc0; border-radius: 10px; padding: 12px; background: #fffdf8; display: grid; gap: 10px; }
.hhx__st b { display: block; font-size: 13.5px; color: #730522; }
.hhx__st small { font-size: 11.5px; color: #8a7e82; font-weight: 500; line-height: 1.45; }
.hhx__drop { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; }
.hhx__thumb { width: 96px; height: 64px; border-radius: 8px; overflow: hidden; background: repeating-conic-gradient(#f3ece0 0 25%, #fff 0 50%) 0 0/14px 14px; display: grid; place-items: center; border: 1px solid #eee; }
.hhx__thumb img, .hhx__thumb video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hhx__thumb em { font-size: 11px; color: #a3969a; font-style: normal; }
.hhx__act { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.hhx__act input[type=text] { flex: 1 1 100%; }
.hhx__up { cursor: pointer; }
.hhx__slot:not(.has) [data-rm] { display: none; }
.hhx__bar { height: 4px; border-radius: 4px; background: #f1e8d6; overflow: hidden; display: none; }
.hhx__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d1a13d, #730522); transition: width .2s; }
.hhx__slot.is-up .hhx__bar { display: block; }
.hhx__ph b { display: block; font-size: 13.5px; color: #2e0210; }
.hhx__ph small { font-size: 11.5px; color: #8a7e82; }

.hhx__pv { display: grid; grid-template-columns: 1fr 96px; gap: 12px; align-items: end; }
.hhx__desk, .hhx__mob {
  position: relative; overflow: hidden; cursor: crosshair; background: #f7f3f4;
  border: 1px solid #e3d6bd; box-shadow: 0 10px 24px -16px rgba(46, 2, 16, .5);
}
.hhx__desk { aspect-ratio: 16 / 9; border-radius: 8px; }
.hhx__mob { aspect-ratio: 9 / 19; border-radius: 14px; border-width: 3px; border-color: #2e0210; }
.hhx__desk > img, .hhx__desk > video, .hhx__mob > img, .hhx__mob > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--hh-pos, 50% 50%);
}
.hhx__desk > em, .hhx__mob > em { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; color: #a3969a; font-style: normal; text-align: center; padding: 6px; }
.hhx__ov { position: absolute; inset: 0; pointer-events: none; }
.hhx__ov--light { background: rgba(253, 251, 247, calc(var(--hh-ov) * .75)); }
.hhx__ov--dark { background: rgba(46, 2, 16, calc(var(--hh-ov) * .75)); }
/* হিরোর জিনিসগুলোর নকশা — কোথায় কী বসবে বোঝার জন্য */
.hhx__mock { position: absolute; inset: 0; pointer-events: none; }
.hhx__mock i { position: absolute; left: 50%; transform: translateX(-50%); border-radius: 6px; }
.hhx__mock .m-bot { top: 12%; width: 11%; aspect-ratio: 4/5; border-radius: 40% 40% 30% 30%; background: rgba(216, 163, 176, .85); }
.hhx__mock .m-say { top: 18%; left: 64%; width: 18%; height: 9%; background: rgba(255, 255, 255, .85); border: 1px solid rgba(201, 162, 74, .6); }
.hhx__mock .m-card { top: 52%; width: 82%; height: 30%; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .4); }
.hhx__mob .hhx__mock .m-bot { top: 8%; width: 30%; }
.hhx__mob .hhx__mock .m-say { top: 30%; left: 50%; width: 70%; height: 6%; }
.hhx__mob .hhx__mock .m-card { top: 40%; width: 88%; height: 46%; }
.hhx__dot {
  position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid #fff; background: #d1a13d; box-shadow: 0 0 0 3px rgba(115, 5, 34, .5); pointer-events: none;
}
.hhx__tag { position: absolute; left: 6px; bottom: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(46, 2, 16, .7); padding: 2px 7px; border-radius: 6px; pointer-events: none; }
.hhx select { width: 100%; padding: 9px 10px; border: 1px solid #ddd; border-radius: 7px; font: inherit; font-size: 14px; font-weight: 400; background: #fff; }
.hhx input[type=range] { width: 100%; accent-color: #730522; }
.hhx output { color: #730522; }
.hhx .adm-adx__foot { display: flex; align-items: center; gap: 10px; }
.hhx .adm-adx__foot .adm-adx__msg { margin-right: auto; }

@media (max-width: 760px) {
  .hhx__grid { grid-template-columns: 1fr; }
  .hhx__pv { grid-template-columns: 1fr 80px; }
}
.hhx label.adm-adx__on { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.hhx label.adm-adx__on input { width: 16px; height: 16px; accent-color: #730522; flex: none; }
.hhx .hhx__up { display: inline-flex; align-items: center; cursor: pointer; padding: 7px 12px; border-radius: 7px; background: #730522; color: #fff; font-size: 12.5px; font-weight: 600; }
.hhx .hhx__up:hover { background: #8f0a30; }