/* ==========================================================
   HERO SLIDER — Radar Cargo Guard + fleet hero in one hero area.
   Everything is scoped under .hs / .hs__* so it cannot leak into
   hero.css or pillars.css. Delete this file + js/hero-slider.js
   and the wrapper in index.php to go back to the old layout.
   Without JavaScript the two sections simply stack, as before.
   ========================================================== */

.hs{
    position:relative;
}

/* Before the script starts, show only slide 1 (side by side, clipped) instead of
   flashing both sections stacked. Skipped when JavaScript is off. */
@media (scripting:enabled){
    .hs:not(.hs--on){
        display:flex;
        align-items:flex-start;
        overflow:hidden;
    }
    .hs:not(.hs--on) > .hs__slide{
        flex:0 0 100%;
        min-width:0;
    }
}

/* ---------- Layout (only when JS has initialised) ----------
   Slides are stacked in one box. Parked slides wait above the box; the next
   slide drops in from the top while the current one leaves through the bottom. */
.hs--on .hs__viewport{
    position:relative;
    overflow:hidden;
    touch-action:pan-y pinch-zoom;   /* vertical scroll + pinch-zoom stay native, horizontal = swipe */
    transition:height .6s cubic-bezier(.4,0,.2,1);
}
.hs--on .hs__track{
    position:relative;
    height:100%;
}
.hs--on .hs__slide{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    min-width:0;
    visibility:hidden;
    transform:translate3d(0,-100%,0);
    transition:transform .7s cubic-bezier(.65,0,.35,1);
}
.hs--on .hs__slide.is-active{
    visibility:visible;
    transform:translate3d(0,0,0);
}
.hs--on .hs__slide.is-leaving{
    visibility:visible;
    transform:translate3d(0,100%,0);
}
/* Used for jumps (page load, #hash links) so nothing animates */
.hs--instant .hs__viewport,
.hs--instant .hs__slide{
    transition:none !important;
}

/* Room for the controls under the fleet hero (its mockup touches the bottom edge).
   Hero background images stretch with it, so the look is unchanged. */
.hs--on .hs__slide > .hero{
    padding-bottom:60px;
}

/* ---------- Controls: prev, dots, next, pause ---------- */
.hs__ctrl{
    position:absolute;
    left:50%;
    bottom:10px;
    transform:translateX(-50%);
    z-index:5;                       /* far below the sticky header (1000) and mobile menu */
    display:flex;
    align-items:center;
    gap:2px;
    padding:4px;
    border-radius:999px;
    background:rgba(26,26,31,.78);
    -webkit-backdrop-filter:blur(6px);
    backdrop-filter:blur(6px);
    box-shadow:0 8px 20px -8px rgba(0,0,0,.5);
}
.hs__btn,
.hs__dot{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:32px;
    margin:0;
    padding:0;
    border:0;
    background:transparent;
    color:#fff;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
}
.hs__btn{
    width:32px;
    border-radius:50%;
    transition:background-color .2s ease;
}
.hs__btn:hover{ background:rgba(255,255,255,.16); }
.hs__dot{ width:20px; }
.hs__dot::before{
    content:"";
    width:8px;
    height:8px;
    border-radius:999px;
    background:rgba(255,255,255,.45);
    transition:width .3s ease, background-color .3s ease;
}
.hs__dot[aria-current="true"]::before{
    width:22px;
    background:#fff;
}
/* Bigger invisible tap area (about 44px) */
.hs__btn::after,
.hs__dot::after{
    content:"";
    position:absolute;
    inset:-6px -2px;
}
.hs__btn:focus-visible,
.hs__dot:focus-visible{
    outline:2px solid #fff;
    outline-offset:2px;
}
.hs__btn svg{ display:block; }
.hs--noauto .hs__pause{ display:none; }  /* no autoplay when reduced motion is on */

/* ---------- Deadline countdown (added above the KRA plate) ---------- */
.hs__count{
    display:flex;
    align-items:center;
    gap:10px;
    width:fit-content;
    max-width:100%;
    margin:0 0 14px;
    padding:7px 14px 7px 12px;
    border-radius:999px;
    background:#1a1a1f;
    color:#fff;
    font-size:.82rem;
    font-weight:600;
    line-height:1.2;
    box-shadow:0 10px 20px -10px rgba(0,0,0,.5);
}
.hs__count strong{ font-weight:800; }
.hs__count::before{
    content:"";
    flex:none;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#ff5d84;
    box-shadow:0 0 0 3px rgba(255,93,132,.3);
}

/* ---------- Motion: one entrance moment on the Cargo Guard slide ----------
   Notes: the lock photo uses mix-blend-mode, so its parents are never given
   opacity/transform animations (that would put a white box behind the lock).
   The lock lifts with `top`, the labels and cards fade. */
@keyframes hs-pulse{
    0%  { box-shadow:0 0 0 3px rgba(255,93,132,.3), 0 0 0 0 rgba(255,93,132,.55); }
    70% { box-shadow:0 0 0 3px rgba(255,93,132,.3), 0 0 0 10px rgba(255,93,132,0); }
    100%{ box-shadow:0 0 0 3px rgba(255,93,132,.3), 0 0 0 0 rgba(255,93,132,0); }
}
@keyframes hs-lift{
    from{ top:22px; }
    to  { top:0; }
}
@keyframes hs-fade{
    from{ opacity:0; }
    to  { opacity:1; }
}
@keyframes hs-rise{
    from{ opacity:0; transform:translateY(16px); }
    to  { opacity:1; transform:none; }
}

.hs--on .hs__slide.is-active .hs__count::before{
    animation:hs-pulse 1.8s ease-out infinite;
}
.hs--on .hs__slide.is-active #pillars .rt-device{
    animation:hs-lift .7s .15s cubic-bezier(.2,.7,.2,1) backwards;
}
.hs--on .hs__slide.is-active #pillars .rt-tag{
    animation:hs-fade .45s ease-out backwards;
}
.hs--on .hs__slide.is-active #pillars .rt-tag:nth-of-type(1){ animation-delay:.45s; }
.hs--on .hs__slide.is-active #pillars .rt-tag:nth-of-type(2){ animation-delay:.6s; }
.hs--on .hs__slide.is-active #pillars .rt-tag:nth-of-type(3){ animation-delay:.75s; }
.hs--on .hs__slide.is-active #pillars .rt-tag:nth-of-type(4){ animation-delay:.9s; }
.hs--on .hs__slide.is-active #pillars .rt-feat{
    animation:hs-rise .5s cubic-bezier(.2,.7,.2,1) backwards;
}
.hs--on .hs__slide.is-active #pillars .rt-feat:nth-child(1){ animation-delay:.5s; }
.hs--on .hs__slide.is-active #pillars .rt-feat:nth-child(2){ animation-delay:.62s; }
.hs--on .hs__slide.is-active #pillars .rt-feat:nth-child(3){ animation-delay:.74s; }

/* ---------- Phones ---------- */
@media (max-width:640px){
    .hs__ctrl{ bottom:2px; padding:3px; }   /* Cargo Guard has 40px bottom padding on phones */
    .hs__btn,
    .hs__dot{ height:30px; }
    .hs__btn{ width:30px; }
    .hs__count{ font-size:.78rem; padding:6px 12px 6px 10px; margin-bottom:12px; }
}

/* ---------- Reduced motion: no sliding, no entrances, no pulse ---------- */
@media (prefers-reduced-motion: reduce){
    .hs--on .hs__viewport,
    .hs--on .hs__slide,
    .hs__dot::before,
    .hs__btn{ transition:none !important; }
    .hs--on .hs__slide.is-active .hs__count::before,
    .hs--on .hs__slide.is-active #pillars .rt-device,
    .hs--on .hs__slide.is-active #pillars .rt-tag,
    .hs--on .hs__slide.is-active #pillars .rt-feat{ animation:none !important; }
}