/* ============================================================
   Sleepshop Hero Slider v3.4
   ============================================================ */

/* ============================================================
   FULL-WIDTH БЕЗ ГОРИЗОНТАЛЬНОГО СКРОЛЛА
   ============================================================ */
.shs-wrapper {
    position: relative;
    width: auto;
    box-sizing: border-box;
}

.shs-slider {
    position: relative;
    margin-left:  calc(50% - 50vw + (var(--shs-scrollbar, 0px) / 2));
    margin-right: calc(50% - 50vw + (var(--shs-scrollbar, 0px) / 2));
    width: calc(100vw - var(--shs-scrollbar, 0px));
    height: var(--shs-height, 82vh);
    min-height: 520px;
    overflow: hidden;
    background: #0a0a0a;
    box-sizing: border-box;
}

.shs-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* === СЛАЙДЫ === */
.shs-slide {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
}

.shs-slide.is-active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* ============================================================
   ✨ АНИМАЦИЯ: CINEMATIC PARALLAX
   Слайд плавно появляется/исчезает через opacity.
   Фон имеет ПАРАЛЛАКС — движется быстрее и с blur,
   создавая эффект глубины и кинематографичности.
   Контент зависает на месте, появляясь с задержкой.
   ============================================================ */

/* --- Входящий слайд: сам слайд просто появляется --- */
.shs-slide.is-entering {
    z-index: 4 !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: shs-slide-in 1.1s ease both;
}

@keyframes shs-slide-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --- Фон входящего слайда: параллакс справа --- */
.shs-slider[data-dir="1"] .shs-slide.is-entering .shs-bg,
.shs-slide.is-entering .shs-bg {
    animation: shs-parallax-in-right 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

/* --- Фон входящего слайда: параллакс слева --- */
.shs-slider[data-dir="-1"] .shs-slide.is-entering .shs-bg {
    animation: shs-parallax-in-left 1.1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes shs-parallax-in-right {
    from {
        transform: translateX(14%) scale(1.1);
        filter: blur(6px);
    }
    45% { filter: blur(0px); }
    to {
        transform: translateX(0) scale(1);
        filter: blur(0px);
    }
}

@keyframes shs-parallax-in-left {
    from {
        transform: translateX(-14%) scale(1.1);
        filter: blur(6px);
    }
    45% { filter: blur(0px); }
    to {
        transform: translateX(0) scale(1);
        filter: blur(0px);
    }
}

/* --- Уходящий слайд: исчезает --- */
.shs-slide.is-leaving {
    z-index: 3 !important;
    opacity: 1 !important;
    visibility: visible !important;
    animation: shs-slide-out 0.85s ease both;
}

@keyframes shs-slide-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}

/* --- Фон уходящего слайда: параллакс в противоположную сторону --- */
.shs-slider[data-dir="1"] .shs-slide.is-leaving .shs-bg {
    animation: shs-parallax-out-left 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
.shs-slider[data-dir="-1"] .shs-slide.is-leaving .shs-bg {
    animation: shs-parallax-out-right 0.95s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes shs-parallax-out-left {
    from { transform: translateX(0) scale(1); filter: blur(0px); }
    to   { transform: translateX(-9%) scale(1.04); filter: blur(4px); }
}

@keyframes shs-parallax-out-right {
    from { transform: translateX(0) scale(1); filter: blur(0px); }
    to   { transform: translateX(9%) scale(1.04); filter: blur(4px); }
}

/* --- Световой sweep в направлении перехода --- */
.shs-slider::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 28%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 50%,
        transparent 100%
    );
    z-index: 9;
    pointer-events: none;
    will-change: transform;
    opacity: 0;
}

.shs-slider[data-dir="1"].is-transitioning::after {
    opacity: 1;
    animation: shs-sweep-right 0.85s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s both;
}
.shs-slider[data-dir="-1"].is-transitioning::after {
    opacity: 1;
    animation: shs-sweep-left 0.85s cubic-bezier(0.25, 0.1, 0.25, 1) 0.05s both;
}

@keyframes shs-sweep-right {
    from { transform: skewX(-8deg) translateX(-220%); }
    to   { transform: skewX(-8deg) translateX(480%); }
}
@keyframes shs-sweep-left {
    from { transform: skewX(8deg) translateX(480%); }
    to   { transform: skewX(8deg) translateX(-220%); }
}

/* === ФОН === */
.shs-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.shs-bg > img,
.shs-bg > .shs-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ken Burns только на активном слайде */
.shs-slide.is-active .shs-bg > img,
.shs-slide.is-active .shs-bg > .shs-video {
    animation: shs-kenburns 14s ease-out forwards;
}

@keyframes shs-kenburns {
    0%   { transform: scale(1); }
    100% { transform: scale(1.07); }
}

.shs-bg .shs-mobile-fallback { display: none; }

.shs-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* === КОНТЕНТ === */
.shs-content {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 110px;
    color: #fff;
    pointer-events: none;
    box-sizing: border-box;
}

.shs-content-inner {
    pointer-events: auto;
    max-width: 720px;
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity   0.8s ease 0.55s,
        transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}

.shs-slide.is-active .shs-content-inner,
.shs-slide.is-entering .shs-content-inner {
    opacity: 1;
    transform: translateY(0);
}

.shs-align-center { align-items: center; text-align: center; }
.shs-align-center .shs-content-inner { margin: 0 auto; }
.shs-align-left   { align-items: flex-start; text-align: left; }
.shs-align-right  { align-items: flex-end;   text-align: right; }

.shs-eyebrow {
    display: inline-block;
    font-size: 12px;
    letter-spacing: 5px;
    text-transform: uppercase;
    margin-bottom: 26px;
    font-weight: 600;
    padding: 7px 20px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 100px;
    color: #fff;
}

/* Заголовок: тонкий, элегантный — наследует шрифт темы */
.shs-heading {
    font-family: inherit !important;
    font-size: clamp(38px, 5.5vw, 88px) !important;
    font-weight: 300 !important;
    line-height: 1.05 !important;
    margin: 0 0 26px !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.shs-sub {
    font-size: clamp(15px, 1.3vw, 20px) !important;
    line-height: 1.6 !important;
    max-width: 580px;
    margin: 0 0 40px !important;
    color: rgba(255, 255, 255, 0.88) !important;
    font-weight: 400;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
}

.shs-align-center .shs-sub { margin-left: auto; margin-right: auto; }

/* === КНОПКИ === */
.shs-buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.shs-align-center .shs-buttons { justify-content: center; }
.shs-align-right  .shs-buttons { justify-content: flex-end; }

.shs-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 16px 34px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    border-width: 1.5px !important;
    border-style: solid !important;
    box-sizing: border-box !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.shs-btn-primary,
.shs-btn-primary:link,
.shs-btn-primary:visited {
    background: #fff !important;
    color: #0a0a0a !important;
    border-color: #fff !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22) !important;
}

.shs-btn-primary:hover,
.shs-btn-primary:focus {
    background: transparent !important;
    color: #fff !important;
    border-color: #fff !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32) !important;
}

.shs-btn-secondary,
.shs-btn-secondary:link,
.shs-btn-secondary:visited {
    background: transparent !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.52) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.shs-btn-secondary:hover,
.shs-btn-secondary:focus {
    background: #fff !important;
    color: #0a0a0a !important;
    border-color: #fff !important;
    transform: translateY(-3px) !important;
}

/* ============================================================
   СТРЕЛКИ — обе гарантированно видны
   ============================================================ */
.shs-slider .shs-arrow {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    position:  absolute !important;
    top:       50% !important;
    transform: translateY(-50%) !important;
    z-index:   8 !important;
    width:  58px !important;
    height: 58px !important;
    border-radius:      50% !important;
    background:         rgba(255, 255, 255, 0.13) !important;
    backdrop-filter:    blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border:    1.5px solid rgba(255, 255, 255, 0.3) !important;
    color:     #fff !important;
    padding:    0 !important;
    margin:     0 !important;
    outline:    none !important;
    box-shadow: none !important;
    cursor:     pointer !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    font-size:   0 !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity:    1 !important;
    transition:
        background   0.3s ease,
        border-color 0.3s ease,
        transform    0.3s ease,
        box-shadow   0.3s ease !important;
}

.shs-slider .shs-arrow:hover,
.shs-slider .shs-arrow:focus {
    background:   rgba(255, 255, 255, 0.95) !important;
    color:        #0a0a0a !important;
    border-color: #fff !important;
    transform:    translateY(-50%) scale(1.1) !important;
    box-shadow:   0 8px 28px rgba(0, 0, 0, 0.28) !important;
}

.shs-slider .shs-arrow svg {
    width:  22px !important;
    height: 22px !important;
    stroke: currentColor !important;
    fill:   none !important;
    pointer-events: none !important;
    display: block !important;
}

.shs-slider .shs-prev {
    left:  24px !important;
    right: auto !important;
}

.shs-slider .shs-next {
    right: 24px !important;
    left:  auto !important;
}

/* === ТОЧКИ ВНИЗУ === */
.shs-slider .shs-dots {
    position:   absolute !important;
    bottom:     36px !important;
    left:       50% !important;
    transform:  translateX(-50%) !important;
    z-index:    8 !important;
    display:    flex !important;
    gap:        12px !important;
    background: rgba(0, 0, 0, 0.22) !important;
    backdrop-filter:         blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    padding:       10px 16px !important;
    border-radius: 100px !important;
    border:        1px solid rgba(255, 255, 255, 0.15) !important;
}

.shs-slider .shs-dot {
    display:       block !important;
    width:         9px !important;
    height:        9px !important;
    border-radius: 50% !important;
    border:        none !important;
    background:    rgba(255, 255, 255, 0.3) !important;
    cursor:        pointer !important;
    padding:       0 !important;
    margin:        0 !important;
    transition:    all 0.35s ease !important;
    position:      relative !important;
    overflow:      hidden !important;
    outline:       none !important;
    -webkit-appearance: none !important;
    appearance:         none !important;
    visibility:    visible !important;
    opacity:       1 !important;
}

.shs-slider .shs-dot:hover {
    background: rgba(255, 255, 255, 0.6) !important;
    transform:  scale(1.3) !important;
}

.shs-slider .shs-dot.is-active {
    width:         34px !important;
    border-radius: 100px !important;
    background:    rgba(255, 255, 255, 0.25) !important;
}

.shs-slider .shs-dot-fill {
    position:      absolute !important;
    inset:         0 !important;
    background:    #ffffff !important;
    transform-origin: left !important;
    transform:     scaleX(0) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

.shs-slider .shs-dot.is-active .shs-dot-fill {
    animation: shs-dot-progress var(--shs-autoplay, 7000ms) linear forwards !important;
}

@keyframes shs-dot-progress {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
}

/* === АДАПТИВ === */
@media (max-width: 1024px) {
    .shs-content { padding: 40px 70px !important; }
    .shs-slider .shs-arrow { width: 48px !important; height: 48px !important; }
    .shs-slider .shs-prev  { left: 14px !important; }
    .shs-slider .shs-next  { right: 14px !important; }
}

@media (max-width: 768px) {
    .shs-slider { min-height: 480px; height: 84vh; }
    .shs-content { padding: 28px 20px !important; }
    .shs-content-inner { max-width: 100%; }

    .shs-heading { font-size: clamp(30px, 9vw, 48px) !important; }
    .shs-eyebrow { font-size: 10px; letter-spacing: 3px; padding: 6px 13px; margin-bottom: 16px; }
    .shs-sub     { font-size: 14px !important; margin-bottom: 26px !important; }

    .shs-buttons { flex-direction: column; width: 100%; gap: 10px; }
    .shs-btn     { width: 100% !important; justify-content: center !important; padding: 14px 18px !important; }

    .shs-slider .shs-arrow { width: 40px !important; height: 40px !important; }
    .shs-slider .shs-prev  { left: 8px !important; }
    .shs-slider .shs-next  { right: 8px !important; }
    .shs-slider .shs-arrow svg { width: 16px !important; height: 16px !important; }

    .shs-slider .shs-dots  { bottom: 20px !important; padding: 8px 12px !important; gap: 9px !important; }
    .shs-slider .shs-dot   { width: 7px !important; height: 7px !important; }
    .shs-slider .shs-dot.is-active { width: 24px !important; }

    .shs-bg > .shs-video { display: none; }
    .shs-bg .shs-mobile-fallback[data-type="video"] {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shs-slide.is-entering .shs-bg,
    .shs-slide.is-leaving {
        animation: none !important;
        transition: opacity 0.4s ease !important;
    }
    .shs-slider.is-transitioning::after {
        animation: none !important;
        opacity: 0 !important;
    }
}