/* ==========================================================================
   Video Scroll Section — svs- prefix
   ========================================================================== */

/* ---- Reset box-sizing for all section elements ---- */
.svs-video-scroll-section,
.svs-video-scroll-section *,
.svs-video-scroll-section *::before,
.svs-video-scroll-section *::after {
    box-sizing: border-box;
}

/* ---- Wrapper ---- */
.svs-video-scroll-section {
    text-align: center;
    max-width: none !important;
}

/* ---- Chevron animation ---- */
.svs-chevron-container {
    display: flex;
    justify-content: center;
    width: 5%;
}

.svs-chevron {
    position: absolute;
    width: 2.1rem;   /* 0.6rem * 3.5 */
    height: 0.48rem; /* 0.6rem * 0.8 */
    opacity: 0;
    transform: scale(0.3);
    animation: svs-move-chevron 3s ease-out infinite;
}

.svs-chevron:first-child {
    animation: svs-move-chevron 3s ease-out 1s infinite;
}

.svs-chevron:nth-child(2) {
    animation: svs-move-chevron 3s ease-out 2s infinite;
}

.svs-chevron::before,
.svs-chevron::after {
    content: '';
    position: absolute;
    top: 0;
    height: 100%;
    width: 50%;
    background: #2c3e50;
}

.svs-chevron::before {
    left: 0;
    transform: skewY(30deg);
}

.svs-chevron::after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg);
}

@keyframes svs-move-chevron {
    25% {
        opacity: 1;
    }
    33.3% {
        opacity: 1;
        transform: translateY(2.28rem); /* 0.6rem * 3.8 */
    }
    66.6% {
        opacity: 1;
        transform: translateY(3.12rem); /* 0.6rem * 5.2 */
    }
    100% {
        opacity: 0;
        transform: translateY(4.8rem) scale(0.5); /* 0.6rem * 8 */
    }
}

/* ---- Scroll text row ---- */
.svs-scroll-text {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 28px;
}

.svs-scroll-text-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

@media (min-width: 992px) {
    .svs-scroll-text-inner {
        width: 58.333%; /* ~35/60 of the grid */
    }
    .svs-scroll-text {
        padding-top: 70px;
        margin-bottom: -30px;
    }
}

.svs-scroll-text h3 {
    margin: 0;
    @media (max-width: 576px) {
        font-size: 28px;
    }
}

/* ---- Video highlight section ---- */
.svs-video-highlight-section {
    padding: 0;
}

@media (min-width: 992px) {
    .svs-video-highlight-section {
        scale: 0.75;
        padding-bottom: 0;
    }
}

/* ---- Pin container ---- */
@media (max-width: 767.98px) {
    .svs-video-scroll-section {
        height: 120% !important;
        max-height: 120% !important;
    }
}

/* ---- Desktop video wrap ---- */
.svs-video-wrap {
    border: 0.6rem solid #e9e9e9;
    border-radius: 1.7rem;
    overflow: hidden;
    width: 100%;
    height: auto;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    background-color: #e9e9e9;
    position: relative;
}

.svs-video-wrap video {
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    display: block;
}

.svs-video-wrap-inner {
    border-radius: 0.8rem;
    overflow: hidden;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

/* ---- Video outer + gradient overlay ---- */
.svs-video-wrap-outer {
    position: relative;
}

.svs-video-wrap-outer::after {
    content: '';
    width: 100%;
    height: 30%;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 90%);
    pointer-events: none;
    z-index: 20;
}

@media (max-width: 767.98px) {
    .svs-video-wrap-outer::after {
        height: 50%;
    }
}

/* ---- Container ---- */
.svs-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
}

/* ---- iPhone mockup overlay ---- */
.svs-mockup-wrap-outer {
    position: absolute;
    max-width: 46rem;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    bottom: -8rem;
    z-index: 30;
}

@media (max-width: 767.98px) {
    .svs-mockup-wrap-outer {
        bottom: -7rem;
        width: 92%;
    }
}

@media (max-width: 575.98px) {
    .svs-mockup-wrap-outer {
        bottom: -5rem;
        width: 92%;
    }
}

.svs-mockup-wrap-outer img {
    z-index: 2;
    position: relative;
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

.svs-mockup-wrap-inner {
    position: absolute;
    width: 100%;
    height: 100%;
    inset: 0;
    overflow: hidden;
    border-radius: 5.3rem;
    z-index: 1;
    padding: 0.6rem;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    mask-image: radial-gradient(white, black);
}

@media (max-width: 575.98px) {
    .svs-mockup-wrap-inner {
        border-radius: 2.5rem;
        padding: 0.4rem;
    }
}

@media (max-width: 400px) {
    .svs-mockup-wrap-inner {
        transform: scale(1.02);
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .svs-mockup-wrap-inner {
        border-radius: 3rem;
    }
}

.svs-mockup-video {
    width: 100%;
    height: 100%;
    position: relative;
}

.svs-mockup-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}