/* ==========================================================================
   Homepage → Videos page call-to-action ("Watch All Our Videos")
   Loaded only by / and /ar/. A large cinematic pill with:
     • a rotating brand-colour gradient ring + soft pulsing glow
     • three fanned preview thumbnails of the films (they spread on hover)
     • a white play disc with a ripple, two-line label, sliding arrow
     • a periodic light sheen across the face
   Works with the site's magnetic-btn effect (--mx / --my from main.js).
   ========================================================================== */
@property --vcta-a{
    syntax:'<angle>';
    inherits:false;
    initial-value:0deg;
}

.cinema-cta{
    text-align:center;
    margin-top:40px;
    padding:0 16px;
}

.vcta{
    position:relative;
    isolation:isolate;
    display:inline-flex;
    align-items:center;
    gap:22px;
    padding:16px 40px 16px 18px;
    border-radius:999px;
    color:#fff;
    text-decoration:none;
    text-align:start;
    transform:translate(var(--mx,0px), var(--my,0px));
    transition:transform .45s cubic-bezier(.34,1.56,.64,1);
    animation:vcta-glow 3.2s ease-in-out infinite;
}
html[dir="rtl"] .vcta{ padding:16px 18px 16px 40px; }

/* rotating gradient ring (behind) */
.vcta::before{
    content:"";
    position:absolute;
    inset:-3px;
    border-radius:inherit;
    background:conic-gradient(from var(--vcta-a), #ff00aa, #913791, #4fb9c2, #85BB33, #ffad27, #ff00aa);
    animation:vcta-spin 4s linear infinite;
    z-index:-2;
}
/* face */
.vcta::after{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(135deg, #1f2550 0%, #2a1f55 55%, #3b1650 100%);
    z-index:-1;
}

.vcta:hover,
.vcta:focus-visible{
    transform:translate(var(--mx,0px), var(--my,0px)) translateY(-4px) scale(1.03);
}
.vcta:focus-visible{
    outline:3px solid #4fb9c2;
    outline-offset:6px;
}

@keyframes vcta-spin{ to{ --vcta-a:360deg; } }
@keyframes vcta-glow{
    0%, 100%{ box-shadow:0 14px 34px rgba(31,37,80,0.28), 0 0 0 rgba(255,0,170,0); }
    50%{ box-shadow:0 18px 40px rgba(31,37,80,0.32), 0 0 34px rgba(255,0,170,0.38); }
}

/* sheen sweep */
.vcta-shine{
    position:absolute;
    inset:0;
    border-radius:inherit;
    overflow:hidden;
    pointer-events:none;
}
.vcta-shine::before{
    content:"";
    position:absolute;
    top:-20%;
    bottom:-20%;
    width:38%;
    left:-50%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.28), transparent);
    transform:skewX(-20deg);
    animation:vcta-sheen 4.5s ease-in-out infinite;
}
@keyframes vcta-sheen{
    0%, 55%{ left:-50%; }
    85%, 100%{ left:120%; }
}

/* fanned preview thumbnails */
.vcta-thumbs{
    position:relative;
    width:150px;
    height:74px;
    flex:none;
}
.vcta-thumbs img{
    position:absolute;
    top:5px;
    left:31px;
    width:88px;
    height:54px;
    object-fit:cover;
    border-radius:8px;
    border:2px solid rgba(255,255,255,0.9);
    box-shadow:0 6px 14px rgba(0,0,0,0.35);
    transition:transform .5s cubic-bezier(.34,1.56,.64,1);
}
.vcta-thumbs img:nth-child(1){ transform:translateX(-30px) rotate(-12deg); z-index:1; }
.vcta-thumbs img:nth-child(2){ transform:translateY(-3px); z-index:3; }
.vcta-thumbs img:nth-child(3){ transform:translateX(30px) rotate(12deg); z-index:2; }
.vcta:hover .vcta-thumbs img:nth-child(1),
.vcta:focus-visible .vcta-thumbs img:nth-child(1){ transform:translateX(-40px) translateY(-8px) rotate(-18deg); }
.vcta:hover .vcta-thumbs img:nth-child(2),
.vcta:focus-visible .vcta-thumbs img:nth-child(2){ transform:translateY(-14px) scale(1.1); }
.vcta:hover .vcta-thumbs img:nth-child(3),
.vcta:focus-visible .vcta-thumbs img:nth-child(3){ transform:translateX(40px) translateY(-8px) rotate(18deg); }

/* play disc with ripple */
.vcta-play{
    position:relative;
    flex:none;
    width:62px;
    height:62px;
    border-radius:50%;
    background:#fff;
    color:#e0009a;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:21px;
}
.vcta-play i{ margin-left:3px; }        /* the play glyph is never mirrored */
.vcta-play::after{
    content:"";
    position:absolute;
    inset:-5px;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.75);
    animation:vcta-ripple 2.2s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes vcta-ripple{
    0%{ transform:scale(1); opacity:.9; }
    100%{ transform:scale(1.65); opacity:0; }
}

.vcta-text{
    display:flex;
    flex-direction:column;
    line-height:1.25;
}
.vcta-text strong{
    font-size:24px;
    font-weight:800;
    letter-spacing:.01em;
}
.vcta-text small{
    margin-top:5px;
    font-size:14.5px;
    font-weight:600;
    color:rgba(255,255,255,0.78);
}
html[dir="rtl"] .vcta-text strong{ letter-spacing:0; font-size:25px; }

.vcta-arrow{
    flex:none;
    font-size:19px;
    opacity:.85;
    transition:transform .4s cubic-bezier(.34,1.56,.64,1);
}
html[dir="rtl"] .vcta-arrow{ transform:scaleX(-1); }
.vcta:hover .vcta-arrow,
.vcta:focus-visible .vcta-arrow{ transform:translateX(6px); }
html[dir="rtl"] .vcta:hover .vcta-arrow,
html[dir="rtl"] .vcta:focus-visible .vcta-arrow{ transform:scaleX(-1) translateX(6px); }

/* phones */
@media (max-width:560px){
    .vcta{ gap:12px; padding:10px 20px 10px 10px; }
    html[dir="rtl"] .vcta{ padding:10px 10px 10px 20px; }
    .vcta-thumbs{ display:none; }
    .vcta-play{ width:44px; height:44px; font-size:15px; }
    .vcta-text strong,
    html[dir="rtl"] .vcta-text strong{ font-size:17.5px; }   /* beats the desktop Arabic size */
    .vcta-text small{ font-size:12px; }
}

@media (prefers-reduced-motion: reduce){
    .vcta, .vcta::before, .vcta-shine::before, .vcta-play::after{ animation:none; }
    .vcta, .vcta-thumbs img, .vcta-arrow{ transition:none; }
}