/* ==========================================================================
   Home hero slider (right side of the home hero)
   ========================================================================== */
.hs { position: relative; }
.hs-frame {
    position: relative; aspect-ratio: 16 / 10.5; border-radius: 28px; overflow: hidden; isolation: isolate; cursor: pointer;
    background: var(--navy-800); border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .65);
}
.hs-slide { position: absolute; inset: 0; margin: 0; opacity: 0; visibility: hidden; transition: opacity .9s var(--ease), visibility 0s .9s; }
.hs-slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s var(--ease); z-index: 1; }
/* Blurred fill so posters of any shape are shown in full, never cropped */
.hs-slide::before { content: ""; position: absolute; inset: -30px; background: var(--bg) center / cover; filter: blur(24px) saturate(1.2) brightness(.7); transform: scale(1.1); }
.hs-slide img { position: relative; width: 100%; height: 100%; object-fit: contain; transform: scale(1.04); transition: transform 6s linear; }
.hs-slide.is-active img { transform: scale(1); }
.hs-frame::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(4, 13, 36, .85)); }

.hs-btn {
    position: absolute; top: 50%; z-index: 4; width: 46px; height: 46px; margin-top: -23px; border-radius: 50%;
    display: grid; place-items: center; font-size: 15px; color: #fff; cursor: pointer;
    background: rgba(4, 13, 36, .45); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px);
    opacity: 0; transition: opacity .25s, background .25s, transform .25s;
}
.hs-prev { left: 16px; transform: translateX(-6px); }
.hs-next { right: 16px; transform: translateX(6px); }
.hs:hover .hs-btn, .hs-btn:focus-visible { opacity: 1; transform: none; }
.hs-btn:hover { background: var(--gold-500); color: var(--navy-900); border-color: var(--gold-500); }

.hs-caption { position: absolute; left: 22px; right: 22px; bottom: 22px; z-index: 3; display: flex; align-items: center; gap: 14px; color: #fff; pointer-events: none; }
.hs-count { flex-shrink: 0; font: 600 13px var(--font-display); color: #c9d4ea; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .18); backdrop-filter: blur(8px); }
.hs-count b { color: var(--gold-400); font-weight: 800; }
.hs-title { font: 700 16px/1.3 var(--font-display); text-shadow: 0 2px 10px rgba(0, 0, 0, .5); animation: capIn .6s var(--ease); }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.hs-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; z-index: 3; background: rgba(255, 255, 255, .15); }
.hs-progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-400), var(--gold-500)); }
.hs-progress span.run { animation: hsProgress var(--hs-interval, 5.5s) linear forwards; }
.hs.is-paused .hs-progress span.run { animation-play-state: paused; }
@keyframes hsProgress { to { width: 100%; } }

.hs-thumbs { display: flex; gap: 10px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding: 4px 2px; }
.hs-thumbs::-webkit-scrollbar { display: none; }
.hs-thumb { flex: 1 0 64px; max-width: 96px; height: 52px; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer;
    border: 2px solid rgba(255, 255, 255, .15); background: var(--navy-800); opacity: .55; transition: opacity .25s, border-color .25s, transform .25s; }
.hs-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hs-thumb:hover { opacity: .9; }
.hs-thumb.is-active { opacity: 1; border-color: var(--gold-400); transform: translateY(-2px); }

/* Float cards sit around the slider frame */
.hero-visual .float-card { z-index: 5; }
/* Both cards on the top corners so the caption and controls stay clear */
.hero-visual .float-card.fc-1 { top: -22px; bottom: auto; left: -30px; }
.hero-visual .float-card.fc-2 { top: auto; bottom: 110px; right: -22px; }
@media (max-width: 1080px) {
    .hero-visual .float-card.fc-1 { left: 12px; }
    .hero-visual .float-card.fc-2 { right: 12px; }
}

@media (max-width: 760px) {
    .hs-frame { border-radius: 20px; }
    .hs-btn { opacity: 1; transform: none; width: 38px; height: 38px; margin-top: -19px; font-size: 13px; }
    .hs-prev { left: 10px; }
    .hs-next { right: 10px; }
    .hs-caption { left: 14px; right: 14px; bottom: 14px; gap: 10px; }
    .hs-title { font-size: 13.5px; }
    .hs-count { font-size: 11.5px; padding: 4px 9px; }
    .hs-thumb { height: 42px; flex-basis: 52px; }
    .hero-visual .float-card { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .hs-slide img { transition: none; transform: none; }
}