/* ==========================================================================
   Sidar intro video - homepage hero (fa / en / ar)
   The poster is a plain <picture>; the <video> is only created when the
   visitor presses play, so nothing of the video is downloaded on page load.
   ========================================================================== */

.sidar-intro {
    --si-ratio: 1920 / 810;           /* wide poster + video are 21:9 (2.37:1) */
    --si-play-x: 50%;                 /* centre of the play button drawn on the poster */
    --si-play-y: 38.9%;
    --si-play-size: 9.4%;             /* its diameter, relative to the frame width */
    --si-radius: clamp(16px, 1.8vw, 28px);
    --si-navy: #0d2d73;
    position: relative;
    padding: clamp(10px, 2vw, 28px) clamp(10px, 2.2vw, 32px) clamp(18px, 3vw, 40px);
    isolation: isolate;
}

    /* soft blue halo behind the frame */
    .sidar-intro::before {
        content: "";
        position: absolute;
        inset: 8% 6% 0;
        z-index: -1;
        background: radial-gradient(60% 70% at 50% 45%, rgba(37, 99, 235, .22), rgba(14, 165, 233, .08) 55%, transparent 75%);
        filter: blur(30px);
        pointer-events: none;
    }

.sidar-intro__frame {
    position: relative;
    width: min(100%, 1600px, calc((100svh - 110px) * 1920 / 810));
    min-width: min(100%, 720px);
    aspect-ratio: var(--si-ratio);
    margin-inline: auto;
    overflow: hidden;
    border-radius: var(--si-radius);
    background: linear-gradient(135deg, #12357f 0%, #1a56b8 55%, #1aa3dc 100%);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 1px 2px rgba(13, 45, 115, .12), 0 18px 40px -12px rgba(13, 45, 115, .35), 0 40px 90px -30px rgba(26, 86, 184, .45);
    transform: translateZ(0); /* keeps the rounded clip on Safari while the video plays */
}

    /* thin glass edge on top of everything */
    .sidar-intro__frame::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        border-radius: inherit;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
        pointer-events: none;
    }

.sidar-intro__poster,
.sidar-intro__poster img,
.sidar-intro__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

    .sidar-intro__poster img {
        object-fit: cover;
        transition: transform .9s cubic-bezier(.2, .7, .2, 1), filter .5s ease;
    }

.sidar-intro__video {
    z-index: 1;
    object-fit: contain;
    background: var(--si-navy);
    opacity: 0;
    transition: opacity .45s ease;
}

/* ---------- play button (covers the whole poster) ---------- */
.sidar-intro__play {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

    .sidar-intro__play:focus {
        outline: none;
    }

    .sidar-intro__play:focus-visible {
        outline: 3px solid #fbbf24;
        outline-offset: -6px;
        border-radius: var(--si-radius);
    }

/* animated rings sitting exactly on the play icon printed on the poster */
.sidar-intro__pulse {
    position: absolute;
    left: var(--si-play-x);
    top: var(--si-play-y);
    width: var(--si-play-size);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    pointer-events: none;
}

    .sidar-intro__pulse::before,
    .sidar-intro__pulse::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 2px solid rgba(255, 255, 255, .75);
        opacity: 0;
        animation: sidar-intro-ring 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
    }

    .sidar-intro__pulse::after {
        animation-delay: 1.3s;
    }

@keyframes sidar-intro-ring {
    0% {
        transform: scale(1);
        opacity: .85;
    }

    100% {
        transform: scale(1.75);
        opacity: 0;
    }
}

@media (hover: hover) {
    .sidar-intro__frame:hover .sidar-intro__poster img {
        transform: scale(1.018);
        filter: saturate(1.08) brightness(1.03);
    }

    .sidar-intro__frame:hover .sidar-intro__pulse::before,
    .sidar-intro__frame:hover .sidar-intro__pulse::after {
        animation-duration: 1.6s;
    }
}

/* ---------- loading / buffering spinner ---------- */
.sidar-intro__loader {
    position: absolute;
    left: var(--si-play-x);
    top: var(--si-play-y);
    z-index: 4;
    width: calc(var(--si-play-size) * 1.12);
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility 0s linear .25s;
}

    .sidar-intro__loader::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 50%;
        border: 3px solid rgba(255, 255, 255, .25);
        border-top-color: #fff;
        animation: sidar-intro-spin .8s linear infinite;
    }

@keyframes sidar-intro-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------- states ---------- */
.sidar-intro.is-loading .sidar-intro__pulse,
.sidar-intro.is-playing .sidar-intro__pulse {
    visibility: hidden;
}

.sidar-intro.is-loading .sidar-intro__loader,
.sidar-intro.is-buffering .sidar-intro__loader {
    opacity: 1;
    visibility: visible;
    transition: opacity .25s ease;
}

/* once the video is actually painting frames, it takes over */
.sidar-intro.is-playing .sidar-intro__video {
    opacity: 1;
}

.sidar-intro.is-playing .sidar-intro__play {
    visibility: hidden;
}

.sidar-intro.is-playing .sidar-intro__loader {
    left: 50%;
    top: 50%;
    width: clamp(44px, 6vw, 72px);
}

/* ---------- mobile: portrait 9:16 poster & video ---------- */
@media (max-width: 767.98px) {
    .sidar-intro {
        --si-ratio: 9 / 16;
        --si-play-y: 50%;
        --si-play-size: 20.4%;
        --si-radius: 18px;
        padding: 10px 12px 22px;
    }

    .sidar-intro__frame {
        /* never taller than the screen, so the whole poster is visible */
        width: min(100%, calc((100svh - 96px) * 9 / 16));
        min-width: min(100%, 300px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sidar-intro__pulse::before,
    .sidar-intro__pulse::after {
        animation: none;
    }

    .sidar-intro__poster img,
    .sidar-intro__video {
        transition: none;
    }
}