/* =============================================================================
   Merkez Lab — Hero Slideshow (Ken Burns Effect)
   Plugin: merkez-lab-hero v1.1.0
   ============================================================================= */

:root {
    --hs-height:     min(72vh, 580px);
    --hs-min-height: 500px;
    --hs-accent:     #E8192C;
    --hs-accent-lt:  #FF3347;
    --hs-nav-h:      64px;
    --hs-ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --hs-gutter:     clamp(2rem, 7vw, 5rem);
    --hs-kb-speed:   11s;
    --hs-transition: 1.4s;
}

/* ── CONTAINER ─────────────────────────────────────────────────────────────── */

.hs-hero {
    position:    relative;
    height:      var(--hs-height);
    min-height:  var(--hs-min-height);
    overflow:    hidden;
    background:  #12151E;
    font-family: inherit;
    padding:     0;
    color:       #fff;
}

/* ── TRACK & SLIDES ─────────────────────────────────────────────────────────── */

.hs-track {
    position: absolute;
    inset:    0;
}

.hs-slide {
    position:       absolute;
    inset:          0;
    opacity:        0;
    z-index:        0;
    pointer-events: none;
    transition:     opacity var(--hs-transition) var(--hs-ease);
}

.hs-slide.is-active {
    opacity:        1;
    z-index:        1;
    pointer-events: auto;
}

/* ── KEN BURNS BACKGROUND ───────────────────────────────────────────────────── */

.hs-bg {
    position:         absolute;
    inset:            -8%;
    transform-origin: center center;
    will-change:      transform;
}

@keyframes hs-kb1 {
    0%   { transform: scale(1.12) translate( 1.5%,  1%); }
    100% { transform: scale(1.00) translate( 0,      0 ); }
}
@keyframes hs-kb2 {
    0%   { transform: scale(1.00) translate( 0,      0 ); }
    100% { transform: scale(1.12) translate(-1.5%, -1%); }
}
@keyframes hs-kb3 {
    0%   { transform: scale(1.10) translate(-1%,  1.5%); }
    100% { transform: scale(1.00) translate( 1%, -0.5%); }
}
@keyframes hs-kb4 {
    0%   { transform: scale(1.00) translate( 1%, -0.5%); }
    100% { transform: scale(1.10) translate(-1%,  1.5%); }
}

.hs-slide.is-active .hs-kb-1 { animation: hs-kb1 var(--hs-kb-speed) ease-out    forwards; }
.hs-slide.is-active .hs-kb-2 { animation: hs-kb2 var(--hs-kb-speed) ease-in-out forwards; }
.hs-slide.is-active .hs-kb-3 { animation: hs-kb3 var(--hs-kb-speed) ease-out    forwards; }
.hs-slide.is-active .hs-kb-4 { animation: hs-kb4 var(--hs-kb-speed) ease-in-out forwards; }

/* ── OVERLAY ────────────────────────────────────────────────────────────────── */

.hs-overlay {
    position:   absolute;
    inset:      0;
    z-index:    1;
    background: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.52) 100%);
}

/* ── HOVER PAUSE (Ken Burns) ────────────────────────────────────────────────── */

.hs-hero.is-hovered .hs-bg {
    animation-play-state: paused;
}

/* ── HOVER DIM ──────────────────────────────────────────────────────────────── */

.hs-hero.is-dimmed::after {
    content:        '';
    position:       absolute;
    inset:          0;
    z-index:        5;
    background:     rgba(0, 0, 0, 0.32);
    pointer-events: none;
    transition:     background 0.35s;
}

/* ── CONTENT OVERLAY ────────────────────────────────────────────────────────── */

.hs-content {
    position:        absolute;
    inset:           0;
    z-index:         3;
    display:         flex;
    align-items:     flex-end;
    padding:         0 var(--hs-gutter) calc(var(--hs-nav-h) + 2rem);
    pointer-events:  none;
}

.hs-content-inner {
    max-width:       620px;
    pointer-events:  auto;
    animation:       hs-fade-up 0.8s ease-out both;
}

@keyframes hs-fade-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Badge */
.hs-badge {
    display:          inline-block;
    background:       rgba(232, 25, 44, 0.18);
    border:           1px solid rgba(232, 25, 44, 0.35);
    color:            #fff;
    font-size:        0.72rem;
    font-weight:      600;
    letter-spacing:   0.06em;
    text-transform:   uppercase;
    padding:          0.35em 0.9em;
    border-radius:    20px;
    margin-bottom:    1rem;
    backdrop-filter:  blur(4px);
}

/* Title */
.hs-title {
    font-size:    clamp(1.8rem, 4.5vw, 3rem);
    font-weight:  800;
    line-height:  1.15;
    color:        #fff;
    margin:       0 0 0.75rem;
    text-shadow:  0 2px 12px rgba(0, 0, 0, 0.35);
}

.hs-title span {
    color: var(--hs-accent-lt);
}

/* Description */
.hs-desc {
    font-size:    clamp(0.88rem, 1.4vw, 1.05rem);
    line-height:  1.6;
    color:        rgba(255, 255, 255, 0.78);
    margin:       0 0 1.5rem;
    max-width:    480px;
    text-shadow:  0 1px 6px rgba(0, 0, 0, 0.25);
}

/* CTA Group */
.hs-cta-group {
    display:   flex;
    gap:       0.75rem;
    flex-wrap: wrap;
}

.hs-cta-primary,
.hs-cta-secondary {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         0.75em 1.6em;
    font-size:       0.88rem;
    font-weight:     700;
    border-radius:   6px;
    text-decoration: none;
    cursor:          pointer;
    transition:      background 0.25s, color 0.25s, border-color 0.25s, transform 0.18s;
    white-space:     nowrap;
}

.hs-cta-primary {
    background:   var(--hs-accent);
    color:        #fff;
    border:       2px solid var(--hs-accent);
}
.hs-cta-primary:hover {
    background:   var(--hs-accent-lt);
    border-color: var(--hs-accent-lt);
    transform:    translateY(-2px);
    color:        #fff;
}

.hs-cta-secondary {
    background:   rgba(255, 255, 255, 0.08);
    color:        #fff;
    border:       2px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(4px);
}
.hs-cta-secondary:hover {
    background:   rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.6);
    transform:    translateY(-2px);
    color:        #fff;
}

/* ── ARROW BUTTONS ──────────────────────────────────────────────────────────── */

.hs-arrow {
    position:                absolute;
    top:                     50%;
    transform:               translateY(-50%);
    z-index:                 10;
    width:                   48px;
    height:                  48px;
    background:              rgba(255, 255, 255, 0.1);
    backdrop-filter:         blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border:                  1.5px solid rgba(255, 255, 255, 0.2);
    color:                   #fff;
    border-radius:           50%;
    display:                 flex;
    align-items:             center;
    justify-content:         center;
    cursor:                  pointer;
    padding:                 0;
    transition:              background 0.2s, border-color 0.2s, transform 0.2s;
}
.hs-arrow:hover {
    background:   rgba(232, 25, 44, 0.32);
    border-color: rgba(232, 25, 44, 0.55);
    transform:    translateY(-50%) scale(1.08);
}
.hs-prev { left:  1.5rem; }
.hs-next { right: 1.5rem; }

/* ── BOTTOM NAVIGATION ──────────────────────────────────────────────────────── */

.hs-nav {
    position:    absolute;
    bottom:      0;
    left:        0;
    right:       0;
    height:      var(--hs-nav-h);
    z-index:     10;
    display:     flex;
    align-items: center;
    padding:     0 var(--hs-gutter);
    gap:         1.25rem;
    background:  linear-gradient(to top, rgba(0, 0, 0, 0.45) 0%, transparent 100%);
}

/* Counter */
.hs-counter {
    font-family:    "Outfit", monospace;
    font-size:      0.78rem;
    color:          rgba(255, 255, 255, 0.5);
    letter-spacing: 0.06em;
    flex-shrink:    0;
    min-width:      42px;
}
.hs-counter strong {
    font-size:   1.05rem;
    font-weight: 800;
    color:       #fff;
}

/* Progress bar */
.hs-progress-wrap {
    flex:          1;
    height:        2px;
    background:    rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow:      hidden;
}
.hs-progress-bar {
    height:        100%;
    width:         0%;
    background:    var(--hs-accent);
    border-radius: 2px;
}

/* Dots */
.hs-dots {
    display:     flex;
    gap:         7px;
    flex-shrink: 0;
}
.hs-dot {
    width:         8px;
    height:        8px;
    border-radius: 50%;
    border:        none;
    background:    rgba(255, 255, 255, 0.28);
    cursor:        pointer;
    padding:       0;
    transition:    background 0.25s, width 0.3s, border-radius 0.3s;
}
.hs-dot.is-active {
    background:    var(--hs-accent);
    width:         26px;
    border-radius: 4px;
}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    :root { --hs-gutter: 2rem; }
    .hs-content-inner { max-width: 480px; }
}

@media (max-width: 680px) {
    :root {
        --hs-height:     min(72vh, 480px);
        --hs-min-height: 360px;
        --hs-nav-h:      58px;
        --hs-gutter:     1.25rem;
    }
    .hs-arrow { width: 40px; height: 40px; }
    .hs-prev  { left:  0.6rem; }
    .hs-next  { right: 0.6rem; }

    .hs-content { align-items: center; text-align: center; }
    .hs-content-inner { max-width: 100%; }
    .hs-desc { max-width: 100%; }
    .hs-cta-group { justify-content: center; }
    .hs-badge { font-size: 0.65rem; }
}

@media (max-width: 420px) {
    :root { --hs-height: 70vh; --hs-min-height: 320px; }
    .hs-cta-group { flex-direction: column; }
    .hs-cta-primary,
    .hs-cta-secondary { width: 100%; text-align: center; }
}