/* ==========================================================
VALIRINA ATELIER — ABOUT / PROCESS VIDEO STACK
PREMIUM CONTINUOUS MOTION VERSION

COLUMN SYSTEM

Desktop / Tablet:

.about-media   = flex: 1 1 0
.about-content = flex: 1 1 0

Result:
50% VIDEO / 50% CONTENT

Mobile:
columns stack vertically at 100% width.


IMPORTANT — SECTION RESPONSIBILITIES

THIS FILE controls:
- horizontal section width
- section max-width
- horizontal safety spacing
- video column
- process stack geometry
- video card dimensions
- responsive stack
- crop
- badge
- anti-aliasing

about-content.css controls:
- vertical section spacing
- 35 / 30 / 24 / 20
- text content
- rolling title
- description
- trust grid


JS controls in real time:
- transform
- x / y
- rotation
- scale
- opacity
- z-index
- blur
========================================================== */


/* ==========================================================
01 — VARIABLES — DESKTOP
========================================================== */

.valirina-about {

    /* ======================================================
       ABOUT SECTION
    ====================================================== */

    --about-section-max-width:
        1600px;

    /*
     * Horizontal safety space only.
     */
    --about-section-padding-x:
        34px;


    /* ======================================================
       MEDIA COLUMN
    ====================================================== */

    --stack-max-width:
        760px;

    --stack-height:
        520px;

    --stack-padding:
        10px;


    /* ======================================================
       CARD — DIMENSIONS
    ====================================================== */

    --card-height:
        390px;

    --card-width:
        calc(
            var(--card-height) * 0.5625
        );

    --card-radius:
        15px;

    --card-background:
        #181818;


    /* ======================================================
       GEOMETRY — Y
    ====================================================== */

    --center-y-offset:
        -28px;

    --side-y-offset:
        25px;

    --outer-y-offset:
        70px;


    /* ======================================================
       GEOMETRY — X
    ====================================================== */

    --side-offset:
        145px;

    --outer-offset:
        255px;


    /* ======================================================
       ROTATION
    ====================================================== */

    --side-rotation:
        9.5deg;

    --outer-rotation:
        18.5deg;


    /* ======================================================
       SCALE
    ====================================================== */

    --center-scale:
        1;

    --side-scale:
        0.955;

    --outer-scale:
        0.89;


    /* ======================================================
       OPACITY
    ====================================================== */

    --outer-video-opacity:
        0.92;


    /* ======================================================
       VIDEO / CROP
    ====================================================== */

    --video-fit:
        cover;

    --video-position:
        center center;


    /* ======================================================
       BLUR
    ====================================================== */

    --center-video-blur:
        0px;

    --side-video-blur:
        0px;

    --outer-video-blur:
        0.9px;


    /* ======================================================
       BADGE
    ====================================================== */

    --badge-top:
        15px;

    --badge-height:
        20px;

    --badge-padding-x:
        11px;

    --badge-radius:
        999px;

    --badge-font-size:
        8px;

    --badge-font-weight:
        700;

    --badge-letter-spacing:
        0.12em;

    --badge-background:
        rgba(255, 255, 255, 0.96);

    --badge-color:
        #161616;

    --badge-max-width:
        84%;


    /* ======================================================
       SWIPE
    ====================================================== */

    --swipe-threshold:
        45;
}


/* ==========================================================
02 — LARGE DESKTOP
1440px+
========================================================== */

@media (min-width: 1440px) {

    .valirina-about {

        --stack-max-width:
            780px;

        --stack-height:
            530px;

        --card-height:
            400px;

        --card-width:
            calc(
                var(--card-height) * 0.5625
            );

        --center-y-offset:
            -30px;

        --side-y-offset:
            26px;

        --outer-y-offset:
            72px;

        --side-offset:
            150px;

        --outer-offset:
            265px;
    }
}


/* ==========================================================
03 — SMALL LAPTOP
========================================================== */

@media (max-width: 1200px) {

    .valirina-about {

        --about-section-padding-x:
            24px;

        --stack-max-width:
            650px;

        --stack-height:
            460px;

        --card-height:
            345px;

        --card-width:
            calc(
                var(--card-height) * 0.5625
            );

        --center-y-offset:
            -24px;

        --side-y-offset:
            21px;

        --outer-y-offset:
            57px;

        --side-offset:
            126px;

        --outer-offset:
            220px;

        --side-rotation:
            9deg;

        --outer-rotation:
            17deg;

        --side-scale:
            0.95;

        --outer-scale:
            0.88;

        --outer-video-blur:
            0.8px;

        --badge-top:
            13px;

        --badge-height:
            19px;

        --badge-padding-x:
            9px;

        --badge-font-size:
            7.5px;
    }
}


/* ==========================================================
04 — TABLET
========================================================== */

@media (max-width: 1024px) {

    .valirina-about {

        --about-section-padding-x:
            20px;

        --stack-max-width:
            560px;

        --stack-height:
            410px;

        --card-height:
            310px;

        --card-width:
            calc(
                var(--card-height) * 0.5625
            );

        --center-y-offset:
            -21px;

        --side-y-offset:
            18px;

        --outer-y-offset:
            48px;

        --side-offset:
            108px;

        --outer-offset:
            190px;

        --side-rotation:
            8.5deg;

        --outer-rotation:
            16deg;

        --side-scale:
            0.95;

        --outer-scale:
            0.87;

        --outer-video-blur:
            0.75px;

        --badge-top:
            12px;

        --badge-height:
            18px;

        --badge-padding-x:
            8px;

        --badge-font-size:
            7px;
    }
}


/* ==========================================================
05 — MOBILE
========================================================== */

@media (max-width: 767px) {

    .valirina-about {

        --about-section-padding-x:
            16px;

        --stack-max-width:
            100%;

        --stack-height:
            350px;

        --card-height:
            275px;

        --card-width:
            calc(
                var(--card-height) * 0.5625
            );

        --center-y-offset:
            -18px;

        --side-y-offset:
            15px;

        --outer-y-offset:
            40px;

        --side-offset:
            91px;

        --outer-offset:
            158px;

        --side-rotation:
            8deg;

        --outer-rotation:
            14.5deg;

        --side-scale:
            0.94;

        --outer-scale:
            0.84;

        --outer-video-blur:
            0.65px;

        --badge-top:
            10px;

        --badge-height:
            17px;

        --badge-padding-x:
            7px;

        --badge-font-size:
            6.5px;
    }
}


/* ==========================================================
06 — SMALL MOBILE
========================================================== */

@media (max-width: 390px) {

    .valirina-about {

        --about-section-padding-x:
            12px;

        --stack-height:
            315px;

        --card-height:
            245px;

        --card-width:
            calc(
                var(--card-height) * 0.5625
            );

        --center-y-offset:
            -15px;

        --side-y-offset:
            13px;

        --outer-y-offset:
            34px;

        --side-offset:
            80px;

        --outer-offset:
            139px;

        --side-rotation:
            7deg;

        --outer-rotation:
            13deg;

        --side-scale:
            0.93;

        --outer-scale:
            0.82;

        --badge-top:
            9px;

        --badge-height:
            16px;

        --badge-font-size:
            6px;
    }
}


/* ==========================================================
07 — GLOBAL RESET
========================================================== */

.valirina-about,
.valirina-about *,
.valirina-about *::before,
.valirina-about *::after {

    box-sizing:
        border-box;
}


/* ==========================================================
08 — ABOUT SECTION WRAPPER

THIS FILE CONTROLS HORIZONTAL GEOMETRY ONLY.

Do NOT set vertical padding here.

The section:
- never exceeds 1600px
- remains centered
- keeps responsive horizontal safety space
========================================================== */

.valirina-about {

    position:
        relative !important;

    width:
        calc(
            100% - (var(--about-section-padding-x) * 2)
        ) !important;

    max-width:
        var(--about-section-max-width) !important;

    margin-left:
        auto !important;

    margin-right:
        auto !important;

    overflow:
        visible !important;
}


/* ==========================================================
09 — ABOUT MEDIA — 50%
========================================================== */

.valirina-about
.about-media {

    position:
        relative !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    /*
     * EXACT SAME FLEX RATIO AS .about-content.
     *
     * media   = 1
     * content = 1
     *
     * Result: 50 / 50.
     */
    flex:
        1 1 0 !important;

    width:
        100% !important;

    min-width:
        0 !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;
}


/* ==========================================================
ABOUT MEDIA — ELEMENTOR INNER
========================================================== */

.valirina-about
.about-media > .e-con-inner {

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    width:
        100% !important;

    max-width:
        100% !important;

    min-width:
        0 !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;
}


/* ==========================================================
10 — PROCESS STACK

STACK ITSELF REMAINS FIXED.

JS modifies only individual cards.
========================================================== */

.valirina-about
.process-stack {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    max-width:
        var(--stack-max-width) !important;

    height:
        var(--stack-height) !important;

    min-height:
        var(--stack-height) !important;

    margin:
        0 auto !important;

    padding:
        var(--stack-padding) !important;

    overflow:
        hidden !important;

    isolation:
        isolate;

    touch-action:
        pan-y;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

    cursor:
        grab;

    transform:
        none !important;

    translate:
        none !important;

    overscroll-behavior-x:
        contain;

    contain:
        layout paint;
}


/* ==========================================================
11 — STACK — DRAGGING
========================================================== */

.valirina-about
.process-stack.is-dragging {

    cursor:
        grabbing;

    transform:
        none !important;

    translate:
        none !important;
}


/* ==========================================================
12 — PROCESS STACK — ELEMENTOR INNER
========================================================== */

.valirina-about
.process-stack > .e-con-inner {

    position:
        static !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        visible !important;

    transform:
        none !important;

    translate:
        none !important;
}


/* ==========================================================
13 — PROCESS CARD

No CSS transform animation.
JS animates frame-by-frame.
========================================================== */

.valirina-about
.process-card {

    position:
        absolute !important;

    top:
        50% !important;

    left:
        50% !important;

    display:
        block !important;

    flex:
        none !important;

    width:
        var(--card-width) !important;

    min-width:
        var(--card-width) !important;

    max-width:
        var(--card-width) !important;

    height:
        var(--card-height) !important;

    min-height:
        var(--card-height) !important;

    max-height:
        var(--card-height) !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    border-radius:
        var(--card-radius) !important;

    background:
        var(--card-background) !important;

    overflow:
        hidden !important;

    transform:
        translate3d(
            -50%,
            -50%,
            0
        );

    transform-origin:
        center center;

    transition:
        none !important;

    will-change:
        transform,
        opacity;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;

    transform-style:
        preserve-3d;

    clip-path:
        inset(
            0.3px
            round
            var(--card-radius)
        );

    -webkit-mask-image:
        -webkit-radial-gradient(
            white,
            black
        );

    contain:
        paint;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;

    cursor:
        pointer;
}


/* ==========================================================
14 — CARD INNER
========================================================== */

.valirina-about
.process-card > .e-con-inner {

    position:
        relative !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    min-width:
        100% !important;

    min-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;

    border:
        0 !important;

    border-radius:
        inherit !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;

    user-select:
        none;

    -webkit-user-select:
        none;

    -webkit-user-drag:
        none;
}


/* ==========================================================
15 — ROLE CLASSES
========================================================== */

.valirina-about
.process-card.is-center {

    cursor:
        grab;
}


.valirina-about
.process-card.is-left-1,
.valirina-about
.process-card.is-right-1,
.valirina-about
.process-card.is-left-2,
.valirina-about
.process-card.is-right-2 {

    cursor:
        pointer;
}


.valirina-about
.process-card.is-hidden-stack {

    display:
        block !important;

    visibility:
        visible !important;
}


/* ==========================================================
16 — DRAG
========================================================== */

.valirina-about
.process-stack.is-dragging
.process-card {

    transition:
        none !important;
}


/* ==========================================================
17 — VIDEO WIDGET
========================================================== */

.valirina-about
.process-video {

    position:
        absolute !important;

    inset:
        0 !important;

    z-index:
        1 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        none !important;

    outline:
        none !important;

    border-radius:
        inherit !important;

    overflow:
        hidden !important;

    background:
        var(--card-background) !important;

    user-select:
        none !important;

    -webkit-user-select:
        none !important;

    -webkit-user-drag:
        none !important;

    pointer-events:
        none !important;
}


/* ==========================================================
18 — VIDEO — ELEMENTOR WRAPPER
========================================================== */

.valirina-about
.process-video
.elementor-widget-container {

    position:
        absolute !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    border-radius:
        inherit !important;

    overflow:
        hidden !important;

    background:
        transparent !important;

    box-shadow:
        none !important;

    user-select:
        none !important;

    -webkit-user-select:
        none !important;

    -webkit-user-drag:
        none !important;

    pointer-events:
        none !important;
}


/* ==========================================================
19 — VIDEO HTML5
========================================================== */

.valirina-about
.process-video video {

    position:
        absolute !important;

    inset:
        0 !important;

    display:
        block !important;

    width:
        100% !important;

    min-width:
        100% !important;

    max-width:
        100% !important;

    height:
        100% !important;

    min-height:
        100% !important;

    max-height:
        100% !important;

    margin:
        0 !important;

    padding:
        0 !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    border-radius:
        inherit !important;

    aspect-ratio:
        9 / 16 !important;

    object-fit:
        var(--video-fit) !important;

    object-position:
        var(--video-position) !important;

    background:
        var(--card-background) !important;

    pointer-events:
        none !important;

    user-select:
        none !important;

    -webkit-user-select:
        none !important;

    -webkit-user-drag:
        none !important;

    transform:
        translateZ(0);

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;

    transition:
        none !important;

    will-change:
        transform,
        filter;
}


/* ==========================================================
20 — NO OVERLAY
========================================================== */

.valirina-about
.process-card::after {

    display:
        none !important;

    content:
        none !important;
}


/* ==========================================================
21 — BADGE
========================================================== */

.valirina-about
.process-card::before {

    position:
        absolute;

    top:
        var(--badge-top);

    left:
        50%;

    right:
        auto;

    z-index:
        999;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        max-content;

    min-width:
        0;

    max-width:
        var(--badge-max-width);

    height:
        var(--badge-height);

    min-height:
        var(--badge-height);

    margin:
        0;

    padding:
        0
        var(--badge-padding-x);

    border:
        0;

    outline:
        0;

    border-radius:
        var(--badge-radius);

    background:
        var(--badge-background);

    color:
        var(--badge-color);

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size:
        var(--badge-font-size);

    font-weight:
        var(--badge-font-weight);

    line-height:
        1;

    letter-spacing:
        var(--badge-letter-spacing);

    text-transform:
        uppercase;

    white-space:
        nowrap;

    overflow:
        hidden;

    text-overflow:
        ellipsis;

    pointer-events:
        none;

    opacity:
        1;

    visibility:
        visible;

    box-shadow:
        none;

    transform:
        translate3d(
            -50%,
            0,
            1px
        );

    transition:
        none;

    -webkit-font-smoothing:
        antialiased;

    -moz-osx-font-smoothing:
        grayscale;

    -webkit-backface-visibility:
        hidden;

    backface-visibility:
        hidden;
}


/* ==========================================================
22 — BADGE TEXTS
========================================================== */

.valirina-about
.process-card-1::before {

    content:
        "PRÉPARATION";
}


.valirina-about
.process-card-2::before {

    content:
        "IMPRESSION";
}


.valirina-about
.process-card-3::before {

    content:
        "PERSONNALISATION";
}


.valirina-about
.process-card-4::before {

    content:
        "BRODERIE";
}


.valirina-about
.process-card-5::before {

    content:
        "FINITION";
}


/* ==========================================================
23 — HIDE ELEMENTOR BADGE
========================================================== */

.valirina-about
.process-badge {

    display:
        none !important;
}


/* ==========================================================
24 — BLOCK NATIVE DRAG
========================================================== */

.valirina-about
.process-stack img,
.valirina-about
.process-stack video,
.valirina-about
.process-stack a {

    -webkit-user-drag:
        none !important;

    user-select:
        none !important;

    -webkit-user-select:
        none !important;
}


/* ==========================================================
25 — MOBILE STACK

On mobile the two columns are no longer 50 / 50.
Each receives full width because they are stacked vertically.
========================================================== */

@media (max-width: 767px) {

    .valirina-about
    .about-media {

        flex:
            0 0 100% !important;

        width:
            100% !important;

        max-width:
            100% !important;
    }


    .valirina-about
    .process-stack {

        width:
            100% !important;

        max-width:
            100% !important;
    }
}


/* ==========================================================
26 — TOUCH DEVICES
========================================================== */

@media (hover: none) and (pointer: coarse) {

    .valirina-about
    .process-stack,
    .valirina-about
    .process-card {

        cursor:
            default;
    }
}


/* ==========================================================
27 — REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    .valirina-about
    .process-card,
    .valirina-about
    .process-video video,
    .valirina-about
    .process-card::before {

        transition:
            none !important;
    }
}