/*
 * SoftKey Related Projects — v2.2
 * Transparent section, premium cards, animated SoftKey gradient details.
 */
.skrp-carousel {
    --skrp-accent-1: #B47EF2;
    --skrp-accent-mid: #C96BDD;
    --skrp-accent-2: #F049BF;
    --skrp-card-bg: #060914;
    --skrp-gap: 22px;
    --skrp-per-view: 3;

    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 0 12px;
    background: transparent !important;
    overflow: visible;
    font-family: inherit;
}

/* No panel/background around the widget — the page background remains visible. */
.skrp-carousel::before,
.skrp-carousel::after {
    content: none !important;
}

.skrp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 20px;
    padding: 0 4px;
}

.skrp-heading-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.skrp-dot {
    width: 9px;
    height: 9px;
    flex: 0 0 9px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--skrp-accent-1) 0%, var(--skrp-accent-mid) 48%, var(--skrp-accent-2) 100%);
    box-shadow:
        0 0 8px rgba(180,126,242,.48),
        0 0 14px rgba(240,73,191,.24);
}

.skrp-heading {
    margin: 0;
    color: #fff;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -.02em;
}

.skrp-slider-shell {
    position: relative;
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 58px;
    align-items: center;
    gap: 14px;
    width: 100%;
}

.skrp-viewport {
    min-width: 0;
    overflow: hidden;
    padding: 6px 2px 12px;
    margin: -6px -2px -12px;
}

.skrp-track {
    display: flex;
    gap: var(--skrp-gap);
    transform: translate3d(0,0,0);
    transition: transform .58s cubic-bezier(.22,.61,.36,1);
    will-change: transform;
}

/* Card width is calculated from the Elementor responsive 'Visible Projects Per Screen' control. */
.skrp-slide {
    flex: 0 0 calc((100% - (var(--skrp-gap) * (var(--skrp-per-view) - 1))) / var(--skrp-per-view));
    min-width: 0;
    padding: 1px;
}

/* ===== Premium project card ===== */
.skrp-card {
    position: relative;
    display: block;
    min-height: 100%;
    color: inherit;
    text-decoration: none !important;
    border-radius: 18px;
    overflow: hidden;
    isolation: isolate;
    background: var(--skrp-card-bg);
    border: 1px solid rgba(180,126,242,.30);
    box-shadow:
        0 10px 26px rgba(0,0,0,.18),
        inset 0 0 0 1px rgba(255,255,255,.018);
    transition:
        transform .38s cubic-bezier(.2,.7,.2,1),
        border-color .34s ease,
        box-shadow .38s ease;
}

/* Animated gradient border that wakes up on hover. */
.skrp-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(
        115deg,
        var(--skrp-accent-1) 0%,
        var(--skrp-accent-mid) 42%,
        var(--skrp-accent-2) 72%,
        var(--skrp-accent-1) 100%
    );
    background-size: 220% 220%;
    opacity: .58;
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    transition: opacity .35s ease;
}

/* Soft accent glow under the card, not a background panel. */
.skrp-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    left: 12%;
    right: 12%;
    bottom: -10px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--skrp-accent-1), var(--skrp-accent-2));
    filter: blur(18px);
    opacity: 0;
    transition: opacity .35s ease;
}

.skrp-card:hover {
    transform: translateY(-7px);
    border-color: rgba(240,73,191,.62);
    box-shadow:
        0 20px 38px rgba(0,0,0,.30),
        0 0 20px rgba(180,126,242,.12),
        0 0 30px rgba(240,73,191,.07);
}

.skrp-card:hover::before {
    opacity: 1;
    animation: skrp-card-gradient 3.8s linear infinite;
}

.skrp-card:hover::after {
    opacity: .32;
}

.skrp-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #0A0D19;
}

.skrp-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transform: scale(1);
    transition:
        transform .7s cubic-bezier(.16,.76,.3,1),
        filter .42s ease;
}

.skrp-card:hover .skrp-card-media img {
    transform: scale(1.045);
    filter: saturate(1.08) contrast(1.035) brightness(.96);
}

.skrp-placeholder {
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 25% 20%, rgba(180,126,242,.28), transparent 32%),
        linear-gradient(135deg, rgba(180,126,242,.16), rgba(240,73,191,.075));
}

/* Cinematic image fade into the text area. */
.skrp-media-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 44%, rgba(4,6,15,.12) 64%, rgba(4,6,15,.72) 100%);
    pointer-events: none;
}

/* Small premium action badge, revealed on hover. */
.skrp-card-action {
    position: absolute;
    z-index: 4;
    right: 12px;
    top: 12px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(5,8,18,.78);
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 7px 18px rgba(0,0,0,.18);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transform: translate(7px,-7px) scale(.88);
    transition: opacity .3s ease, transform .38s cubic-bezier(.2,.8,.2,1), border-color .3s ease, box-shadow .3s ease;
}

.skrp-card-action::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, var(--skrp-accent-1), var(--skrp-accent-mid), var(--skrp-accent-2));
    opacity: .72;
}

.skrp-card-action::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: inherit;
    background: rgba(6,8,18,.92);
}

.skrp-card-action svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .3s ease;
}

.skrp-card:hover .skrp-card-action {
    opacity: 1;
    transform: translate(0,0) scale(1);
    box-shadow: 0 0 16px rgba(180,126,242,.20), 0 0 22px rgba(240,73,191,.10);
}

.skrp-card:hover .skrp-card-action svg {
    transform: translate(1px,-1px);
}

.skrp-card-body {
    position: relative;
    z-index: 2;
    min-height: 92px;
    padding: 17px 18px 18px;
    background:
        linear-gradient(180deg, rgba(7,9,20,.985) 0%, rgba(4,6,15,1) 100%);
}

/* Slim gradient detail makes the project tile feel designed, not generic. */
.skrp-card-body::before {
    content: "";
    position: absolute;
    left: 18px;
    right: 18px;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, var(--skrp-accent-1), var(--skrp-accent-mid), var(--skrp-accent-2), transparent 88%);
    opacity: .35;
    transition: opacity .3s ease, right .4s ease;
}

.skrp-card:hover .skrp-card-body::before {
    opacity: .9;
    right: 34%;
}

.skrp-card-title {
    margin: 0 0 7px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -.012em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s ease, text-shadow .3s ease;
}

.skrp-card:hover .skrp-card-title {
    color: #fff;
    text-shadow: 0 0 12px rgba(180,126,242,.16);
}

.skrp-card-category {
    color: rgba(255,255,255,.60);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color .3s ease;
}

.skrp-card:hover .skrp-card-category {
    color: rgba(255,255,255,.82);
}

/* ===== Navigation ===== */
.skrp-nav {
    position: relative;
    z-index: 6;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    color: #E7C6FF;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    justify-self: center;
    isolation: isolate;
    transition: transform .3s ease, color .3s ease, filter .3s ease, opacity .3s ease;
}

/* Animated gradient ring */
.skrp-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--skrp-accent-1), var(--skrp-accent-mid), var(--skrp-accent-2), var(--skrp-accent-1));
    background-size: 220% 220%;
    opacity: 1;
    box-shadow: 0 0 16px rgba(180,126,242,.28), 0 0 26px rgba(240,73,191,.12);
    animation: skrp-nav-gradient 5s ease infinite;
}

.skrp-nav::after {
    content: "";
    position: absolute;
    inset: 1.5px;
    z-index: -1;
    border-radius: 50%;
    background: rgba(12,9,24,.88);
    box-shadow: inset 0 0 12px rgba(180,126,242,.05);
    transition: inset .3s ease, background .3s ease;
}

.skrp-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(180,126,242,.25));
    transition: transform .3s ease, filter .3s ease;
}

.skrp-nav:hover {
    color: #fff;
    transform: translateY(-3px) scale(1.08);
    filter: drop-shadow(0 0 9px rgba(180,126,242,.24)) drop-shadow(0 0 15px rgba(240,73,191,.12));
}

.skrp-nav:hover::after {
    inset: 0;
    background: linear-gradient(135deg, rgba(180,126,242,.92), rgba(240,73,191,.92));
}

.skrp-prev:hover svg { transform: translateX(-3px); }
.skrp-next:hover svg { transform: translateX(3px); }

.skrp-nav:active {
    transform: scale(.92);
}

.skrp-nav:disabled {
    opacity: .58;
    cursor: default;
    transform: none;
    filter: none;
}

.skrp-nav:disabled::before {
    animation: none;
    opacity: .62;
}

.skrp-empty {
    color: rgba(255,255,255,.72);
    padding: 20px 4px;
    font-size: 14px;
}

@keyframes skrp-card-gradient {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes skrp-nav-gradient {
    0%,100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (max-width: 1024px) {
    .skrp-carousel {
        padding: 4px 0 10px;
    }

    .skrp-slider-shell {
        grid-template-columns: 48px minmax(0,1fr) 48px;
        gap: 8px;
    }

    .skrp-card-title { font-size: 17px; }
    .skrp-card-category { font-size: 14px; }
}

@media (max-width: 767px) {
    .skrp-carousel {
        padding: 2px 0 8px;
    }

    .skrp-header {
        margin-bottom: 13px;
        padding: 0 2px;
    }

    .skrp-heading { font-size: 21px; }
    .skrp-dot { width: 10px; height: 10px; flex-basis: 10px; }

    .skrp-slider-shell {
        grid-template-columns: 42px minmax(0,1fr) 42px;
        gap: 6px;
    }

    .skrp-nav {
        width: 40px;
        height: 40px;
    }

    .skrp-nav svg {
        width: 18px;
        height: 18px;
    }

    .skrp-card {
        border-radius: 13px;
    }

    .skrp-card-media {
        aspect-ratio: 16 / 9;
    }

    .skrp-card-body {
        min-height: 86px;
        padding: 15px 15px 16px;
    }

    .skrp-card-title {
        font-size: 18px;
    }

    .skrp-card-category {
        font-size: 13.5px;
    }

    .skrp-card-action {
        width: 32px;
        height: 32px;
        right: 10px;
        top: 10px;
        opacity: 1;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skrp-track,
    .skrp-card,
    .skrp-card-media img,
    .skrp-card-action,
    .skrp-nav {
        transition-duration: .01ms !important;
    }

    .skrp-card:hover::before,
    .skrp-nav::before {
        animation: none !important;
    }
}


/* Arabic page only: RTL copy while keeping the carousel track LTR for JS stepping. */
.skrp-carousel[dir="rtl"] { direction: rtl; font-family: "Cairo", "Tajawal", Tahoma, Arial, sans-serif; }
.skrp-carousel[dir="rtl"] .skrp-heading,
.skrp-carousel[dir="rtl"] .skrp-card-body { text-align: right; letter-spacing: 0; }
.skrp-carousel[dir="rtl"] .skrp-track { direction: ltr; }
.skrp-carousel[dir="rtl"] .skrp-slide { direction: rtl; }
.skrp-carousel[dir="rtl"] .skrp-nav svg { transform: scaleX(-1); }