/* Video skeleton loader animation */
@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Wrapper to accommodate the shadow effect */
.video-shadow-wrapper {
    position: relative;
    padding-right: 40px;
    padding-bottom: 24px;
}

/* Line art shadow effect behind video - varied line lengths */
.video-shadow-wrapper::before {
    content: '';
    position: absolute;
    top: 24px;
    left: 40px;
    right: 0;
    bottom: 0;
    /* SVG with varied horizontal line lengths on both edges */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' width='100%25' height='160' viewBox='0 0 1000 160'%3E%3Cstyle%3E.l%7Bstroke:%23143CFF;stroke-width:1.5;stroke-linecap:round%7D%3C/style%3E%3Cline class='l' x1='225' y1='4' x2='925' y2='4'/%3E%3Cline class='l' x1='100' y1='12' x2='980' y2='12'/%3E%3Cline class='l' x1='300' y1='20' x2='890' y2='20'/%3E%3Cline class='l' x1='175' y1='28' x2='950' y2='28'/%3E%3Cline class='l' x1='375' y1='36' x2='870' y2='36'/%3E%3Cline class='l' x1='75' y1='44' x2='940' y2='44'/%3E%3Cline class='l' x1='250' y1='52' x2='900' y2='52'/%3E%3Cline class='l' x1='150' y1='60' x2='960' y2='60'/%3E%3Cline class='l' x1='350' y1='68' x2='880' y2='68'/%3E%3Cline class='l' x1='125' y1='76' x2='970' y2='76'/%3E%3Cline class='l' x1='275' y1='84' x2='910' y2='84'/%3E%3Cline class='l' x1='200' y1='92' x2='935' y2='92'/%3E%3Cline class='l' x1='325' y1='100' x2='860' y2='100'/%3E%3Cline class='l' x1='50' y1='108' x2='990' y2='108'/%3E%3Cline class='l' x1='240' y1='116' x2='920' y2='116'/%3E%3Cline class='l' x1='110' y1='124' x2='955' y2='124'/%3E%3Cline class='l' x1='290' y1='132' x2='885' y2='132'/%3E%3Cline class='l' x1='190' y1='140' x2='945' y2='140'/%3E%3Cline class='l' x1='360' y1='148' x2='875' y2='148'/%3E%3Cline class='l' x1='140' y1='156' x2='965' y2='156'/%3E%3C/svg%3E");
    background-repeat: repeat-y;
    background-size: 100% 164px;
    opacity: 0.15;
    border-radius: 0.75rem;
    pointer-events: none;
    /* Fade out towards top-left */
    mask-image: linear-gradient(135deg, transparent 0%, transparent 10%, black 45%);
    -webkit-mask-image: linear-gradient(135deg, transparent 0%, transparent 10%, black 45%);
}

.video-container-hero {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
}

.video-skeleton {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #e9ecef 25%, #f8f9fa 50%, #e9ecef 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s ease-in-out infinite;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

.video-hero {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid #dee2e6;
    box-shadow: none;
    outline: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-hero.loaded {
    opacity: 1;
}

/* Add bottom margin to video container on desktop */
@media (min-width: 992px) {
    .video-container-hero {
        margin-bottom: 2rem;
    }
    
    /* Align landing page video with h1 headline */
    .video-container-hero-landing {
        margin-top: 3.5rem;
        margin-bottom: 2rem;
    }
}