/* ==========================================================================
   Melodies — Videos page (/videos/ and /ar/videos/)
   Builds on styles.css + service-styles.css (header, footer, page-header,
   detail-section, back-cta, contact card, wave bands). Everything here is
   scoped to .vg-* classes so it can't affect any other page.
   ========================================================================== */

:root{
    --vg-card:#ffffff;
    --vg-text:#1f2550;
    --vg-muted:#5a6079;
    --vg-line:#e6e9f3;
    --vg-shadow:0 18px 45px rgba(31,37,80,0.12);
}
html[data-theme="dark"]{
    --vg-card:#1b2140;
    --vg-text:#eef0fa;
    --vg-muted:#aab0d0;
    --vg-line:rgba(255,255,255,0.08);
    --vg-shadow:0 18px 45px rgba(0,0,0,0.4);
}

/* ---------- capability chips under the page intro ---------- */
.vg-chips{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:10px;
    margin:26px auto 0;
    padding:0;
    list-style:none;
    max-width:760px;
}
.vg-chips li{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 16px;
    border-radius:999px;
    background:var(--vg-card);
    color:var(--vg-text);
    font-size:14px;
    font-weight:700;
    box-shadow:0 6px 18px rgba(31,37,80,0.08), 0 0 0 0 transparent;
    cursor:default;
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .35s ease, background .35s ease;
}
.vg-chips li i{
    color:var(--c, #ff00aa);
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
/* hover / tap: lift, glow ring in the chip's own colour, icon pops */
.vg-chips li:hover,
.vg-chips li.is-hit{
    transform:translateY(-4px);
    background:color-mix(in srgb, var(--c, #ff00aa) 10%, var(--vg-card));
    box-shadow:0 12px 26px rgba(31,37,80,0.16), 0 0 0 2px var(--c, #ff00aa), 0 0 22px color-mix(in srgb, var(--c, #ff00aa) 45%, transparent);
}
.vg-chips li:hover i,
.vg-chips li.is-hit i{
    animation:vg-chip-pop .55s cubic-bezier(.34,1.56,.64,1);
}
@keyframes vg-chip-pop{
    0%{ transform:scale(1) rotate(0); }
    40%{ transform:scale(1.45) rotate(-14deg); }
    70%{ transform:scale(.92) rotate(6deg); }
    100%{ transform:scale(1) rotate(0); }
}
/* entrance: chips rise in one after another (class added by gallery.js) */
.vg-chips.vg-stagger li{
    opacity:0;
    transform:translateY(14px) scale(.96);
}
.vg-chips.vg-stagger.is-in li{
    animation:vg-chip-in .6s cubic-bezier(.2,.8,.2,1) forwards;
    animation-delay:calc(var(--i, 0) * 90ms);
}
@keyframes vg-chip-in{
    to{ opacity:1; transform:none; }
}

/* ---------- featured showreel (inline player) ---------- */
.vg-featured{
    max-width:1100px;
    margin:0 auto;
    padding:0 20px;
}
.vg-stage{
    position:relative;
    border-radius:26px;
    overflow:hidden;
    background:#0d1226;
    box-shadow:0 30px 80px rgba(31,37,80,0.28);
    aspect-ratio:16 / 9;
    isolation:isolate;
}
.vg-stage::after{                       /* thin brand-colour frame line */
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:2px;
    background:linear-gradient(120deg,#ff00aa,#913791,#4fb9c2,#85BB33,#ffad27);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    pointer-events:none;
    z-index:3;
}
.vg-stage video{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    background:#0d1226;
}
.vg-stage-cover{
    position:absolute;
    inset:0;
    z-index:2;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:clamp(18px,4vw,44px);
    color:#fff;
    text-align:start;
    text-decoration:none;
    background:linear-gradient(180deg, rgba(13,18,38,0) 35%, rgba(13,18,38,0.88) 100%);
    border:0;
    width:100%;
    cursor:pointer;
    font:inherit;
    transition:opacity .45s ease, visibility .45s ease;
}
.vg-stage.is-playing .vg-stage-cover{
    opacity:0;
    visibility:hidden;
}
.vg-stage-cover img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-1;
    transform:scale(1.02);
    transition:transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.vg-stage-cover:hover img,
.vg-stage-cover:focus-visible img{ transform:scale(1.07); }
.vg-kicker{
    display:inline-block;
    align-self:flex-start;
    padding:5px 14px;
    border-radius:999px;
    background:rgba(255,0,170,0.92);
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    margin-bottom:12px;
}
html[dir="rtl"] .vg-kicker{ letter-spacing:0; }
.vg-stage-title{
    font-size:clamp(24px,3.6vw,42px);
    font-weight:800;
    line-height:1.2;
    margin:0 0 8px;
}
.vg-stage-desc{
    margin:0;
    max-width:640px;
    font-size:clamp(14px,1.6vw,16.5px);
    line-height:1.75;
    color:rgba(255,255,255,0.88);
}
/* phones: the 16:9 frame is small — keep only a compact title over it
   (the description stays in the DOM for search engines) */
@media (max-width:600px){
    .vg-stage{ border-radius:18px; }
    .vg-stage-cover{ padding:14px 16px; }
    .vg-kicker, .vg-stage-desc{ display:none; }
    .vg-stage-title{ font-size:17px; margin:0; }
    .vg-duration{ top:10px; inset-inline-start:10px; }
}

/* big play button with brand-colour ripples */
.vg-play{
    position:absolute;
    top:50%;
    left:50%;
    width:clamp(64px,9vw,96px);
    height:clamp(64px,9vw,96px);
    margin:calc(clamp(64px,9vw,96px) / -2) 0 0 calc(clamp(64px,9vw,96px) / -2);
    border-radius:50%;
    background:#fff;
    color:#1f2550;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:clamp(20px,2.6vw,30px);
    box-shadow:0 14px 40px rgba(0,0,0,0.35);
    transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, color .3s;
}
/* the media "play" glyph is universal and is never mirrored in RTL;
   the small left offset just centres the triangle optically */
.vg-play i{ margin-left:4px; }
.vg-play::before,
.vg-play::after{
    content:"";
    position:absolute;
    inset:-6px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.7);
    animation:vg-ripple 2.4s cubic-bezier(.2,.7,.3,1) infinite;
}
.vg-play::after{ animation-delay:1.2s; border-color:rgba(255,0,170,0.8); }
@keyframes vg-ripple{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.7); opacity:0; }
}
.vg-stage-cover:hover .vg-play,
.vg-stage-cover:focus-visible .vg-play,
.vg-card-media:hover .vg-play,
.vg-card-media:focus-visible .vg-play{
    transform:scale(1.1);
    background:#ff00aa;
    color:#fff;
}
.vg-duration{
    position:absolute;
    top:16px;
    inset-inline-start:16px;
    padding:4px 10px;
    border-radius:8px;
    background:rgba(13,18,38,0.78);
    color:#fff;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.03em;
    direction:ltr;
}

/* ---------- productions grid (wave band behind, like service pages) ---------- */
.vg-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr));
    gap:28px;
    max-width:1200px;
    margin:0 auto;
    padding:44px 20px;
    position:relative;
    z-index:0;
}
.vg-grid::before{
    content:'';
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    transform:translateX(-50%);
    background-image:var(--wave-bg);
    background-repeat:repeat-x;
    background-position-x:0;
    background-position-y:center;
    background-size:1200px 200px;
    animation:wave-flow 30s linear infinite;
    z-index:-1;
}
html[data-theme="dark"] .vg-grid::before{ filter:brightness(1.6) saturate(1.15); }

.vg-card{
    background:var(--vg-card);
    border-radius:22px;
    overflow:hidden;
    box-shadow:var(--vg-shadow);
    display:flex;
    flex-direction:column;
    transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s;
}
.vg-card:hover{
    transform:translateY(-6px);
    box-shadow:0 26px 60px rgba(31,37,80,0.18);
}
.vg-card-media{
    position:relative;
    display:block;
    aspect-ratio:16 / 9;
    overflow:hidden;
    background:#0d1226;
}
.vg-card-media img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform 1s cubic-bezier(.2,.7,.2,1), filter .4s;
}
.vg-card-media:hover img,
.vg-card-media:focus-visible img{ transform:scale(1.08); filter:brightness(.82); }
.vg-card-media .vg-play{
    width:62px;
    height:62px;
    margin:-31px 0 0 -31px;
    font-size:20px;
}
.vg-card-media .vg-play::before,
.vg-card-media .vg-play::after{ display:none; }
.vg-card-media .vg-duration{ top:auto; bottom:12px; inset-inline-start:auto; inset-inline-end:12px; }
.vg-card-body{
    text-align:start;
    padding:20px 22px 24px;
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
}
.vg-tag{
    align-self:flex-start;
    font-size:12px;
    font-weight:800;
    letter-spacing:.05em;
    text-transform:uppercase;
    color:var(--tag, #913791);
}
html[dir="rtl"] .vg-tag{ letter-spacing:0; }
/* dark cards: brighter tints of each tag colour (all ≥ 5.6:1 on #1b2140) */
html[data-theme="dark"] .vg-tag[style*="#23808b"]{ color:#4fb9c2; }
html[data-theme="dark"] .vg-tag[style*="#913791"]{ color:#cf86cf; }
html[data-theme="dark"] .vg-tag[style*="#c0007f"]{ color:#ff5cc8; }
.vg-card h3{
    margin:0;
    font-size:19px;
    line-height:1.35;
    color:var(--vg-text);
}
.vg-card p{
    margin:0;
    font-size:14.5px;
    line-height:1.75;
    color:var(--vg-muted);
}

/* ---------- process / capability steps ---------- */
.vg-steps{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
    gap:22px;
    max-width:1100px;
    margin:0 auto;
    padding:10px 20px 0;
    counter-reset:vgstep;
    list-style:none;
}
.vg-steps li{
    text-align:start;
    position:relative;
    background:var(--vg-card);
    border-radius:20px;
    padding:28px 22px 24px;
    box-shadow:var(--vg-shadow);
    counter-increment:vgstep;
}
.vg-steps li::before{
    content:counter(vgstep, decimal-leading-zero);
    position:absolute;
    top:18px;
    right:20px;               /* physical, not inline-end: direction:ltr below would */
    font-size:30px;
    font-weight:800;
    color:var(--c, #4fb9c2);
    opacity:.22;
    direction:ltr;
}
/* …resolve "inline-end" to the right in Arabic too, on top of the icon */
html[dir="rtl"] .vg-steps li::before{ right:auto; left:20px; }
.vg-steps .vg-step-icon{
    width:50px;
    height:50px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:color-mix(in srgb, var(--c, #4fb9c2) 14%, transparent);
    color:var(--c, #4fb9c2);
    font-size:21px;
    margin-bottom:14px;
}
html[data-theme="dark"] .vg-steps .vg-step-icon{ filter:brightness(1.3); }
.vg-steps h3{ margin:0 0 6px; font-size:17px; color:var(--vg-text); }
.vg-steps p{ margin:0; font-size:14.5px; line-height:1.75; color:var(--vg-muted); }

/* ---------- cinema lightbox ---------- */
.vg-lightbox{
    position:fixed;
    inset:0;
    z-index:10050;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:clamp(12px,3vw,40px);
    background:rgba(8,11,26,0.93);
    -webkit-backdrop-filter:blur(6px);
            backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    transition:opacity .35s ease, visibility .35s ease;
}
.vg-lightbox.is-open{ opacity:1; visibility:visible; }
.vg-lb-inner{
    width:min(1100px, 100%);
    transform:scale(.94) translateY(16px);
    transition:transform .45s cubic-bezier(.2,.8,.2,1);
}
.vg-lightbox.is-open .vg-lb-inner{ transform:none; }
.vg-lb-frame{
    position:relative;
    border-radius:18px;
    overflow:hidden;
    background:#000;
    aspect-ratio:16 / 9;
    box-shadow:0 30px 90px rgba(0,0,0,0.6);
}
.vg-lb-frame video{ width:100%; height:100%; display:block; background:#000; }
.vg-lb-meta{
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
    justify-content:space-between;
    gap:6px 18px;
    color:#fff;
    padding:18px 4px 0;
}
.vg-lb-title{ margin:0; font-size:clamp(18px,2.4vw,24px); font-weight:800; }
.vg-lb-desc{ margin:6px 0 0; color:rgba(255,255,255,0.78); font-size:15px; line-height:1.75; flex-basis:100%; }
.vg-lb-count{ color:rgba(255,255,255,0.6); font-size:13.5px; font-weight:700; direction:ltr; }
.vg-lb-btn{
    position:absolute;
    z-index:2;
    width:48px;
    height:48px;
    border-radius:50%;
    border:0;
    background:rgba(255,255,255,0.12);
    color:#fff;
    font-size:18px;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background .25s, transform .25s;
}
.vg-lb-btn:hover, .vg-lb-btn:focus-visible{ background:#ff00aa; transform:scale(1.08); }
.vg-lb-btn:focus-visible, .vg-stage-cover:focus-visible, .vg-card-media:focus-visible{ outline:3px solid #4fb9c2; outline-offset:3px; }
.vg-lb-close{ top:16px; inset-inline-end:16px; }
.vg-lb-prev{ top:50%; left:14px; margin-top:-24px; }
.vg-lb-next{ top:50%; right:14px; margin-top:-24px; }
html[dir="rtl"] .vg-lb-prev{ left:auto; right:14px; }
html[dir="rtl"] .vg-lb-next{ right:auto; left:14px; }
@media (max-width:900px){
    .vg-lb-prev, .vg-lb-next{ top:auto; bottom:16px; margin-top:0; }
    .vg-lb-meta{ padding-bottom:60px; }
}
html.vg-lock, html.vg-lock body{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
    .vg-play::before, .vg-play::after{ animation:none; display:none; }
    .vg-grid::before{ animation:none; }
    .vg-card, .vg-card-media img, .vg-stage-cover img, .vg-lightbox, .vg-lb-inner{ transition:none; }
    .vg-chips.vg-stagger li{ opacity:1; transform:none; animation:none; }
    .vg-chips li, .vg-chips li i{ transition:none; animation:none !important; }
}