/* ============================================================
   Arena Light Slider — استایل سایت
   ============================================================ */

.als-slider {
    position: relative;
    width: 100%;
    height: clamp(220px, 52vw, var(--als-height, 520px));
    margin: 0 auto;
    overflow: hidden;
    border-radius: 18px;
    background: #0a0e18;
    box-shadow: 0 12px 45px rgba(0, 0, 0, .35);
    isolation: isolate;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    direction: inherit;
}
.als-slider:focus-visible {
    box-shadow: 0 0 0 3px rgba(94, 180, 255, .7), 0 12px 45px rgba(0, 0, 0, .35);
}

/* ---------- اسلایدها (حالت محو) ---------- */
.als-track { position: absolute; inset: 0; }

.als-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity .85s ease, transform 1.4s ease;
    z-index: 1;
    pointer-events: none;
}
.als-slide.is-active {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
    pointer-events: auto;
}

.als-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* ---------- حالت کشویی ---------- */
.als-transition-slide .als-track {
    display: flex;
    direction: ltr;
    transition: transform .75s cubic-bezier(.72, .05, .25, 1);
    will-change: transform;
}
.als-transition-slide .als-slide {
    position: relative;
    inset: auto;
    flex: 0 0 100%;
    min-width: 0;
    opacity: 1;
    transform: none;
    transition: none;
    pointer-events: auto;
}

/* ---------- زوم آرام Ken Burns ---------- */
.als-kenburns .als-slide.is-active img {
    animation: als-kb 9s ease-out forwards;
}
@keyframes als-kb {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.13) translate(1.4%, -1.2%); }
}

/* ---------- کپشن (عنوان + توضیح + دکمه) ---------- */
.als-caption {
    position: absolute;
    z-index: 3;
    width: max-content;
    max-width: min(560px, 84%);
    padding: 20px 24px;
    border-radius: 14px;
    color: #fff;
    background: rgba(10, 14, 26, .42);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .25);
}
.als-slide.is-active .als-caption {
    animation: als-cap-in .75s .3s cubic-bezier(.2, .7, .3, 1) both;
}
@keyframes als-cap-in {
    from { opacity: 0; transform: translateY(26px); }
    to   { opacity: 1; transform: translateY(0); }
}

.als-pos-start  { inset-inline-start: 5%; bottom: 11%; }
.als-pos-end    { inset-inline-end: 5%;  bottom: 11%; text-align: start; }
.als-pos-center { inset-inline: 0; margin-inline: auto; bottom: 11%; text-align: center; }
.als-pos-middle { inset-inline: 0; margin-inline: auto; top: 50%; translate: 0 -50%; text-align: center; }

.als-caption-title {
    margin: 0 0 6px;
    font-size: clamp(19px, 3.4vw, 36px);
    font-weight: 800;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
}
.als-caption-desc {
    margin: 0;
    font-size: clamp(13px, 1.5vw, 17px);
    line-height: 1.9;
    color: rgba(255, 255, 255, .9);
}

/* دکمهٔ لینک با گرادیان نئونی */
.als-btn {
    display: inline-block;
    margin-top: 14px;
    padding: 10px 28px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(120deg, #2fd8f5, #7c5cff 55%, #ff5ce1);
    background-size: 220% 100%;
    background-position: 0% 0;
    box-shadow: 0 0 18px rgba(86, 180, 255, .5), 0 4px 14px rgba(0, 0, 0, .3);
    transition: background-position .5s ease, box-shadow .35s ease, transform .25s ease;
}
.als-btn:hover,
.als-btn:focus-visible {
    background-position: 100% 0;
    box-shadow: 0 0 30px rgba(150, 120, 255, .85), 0 6px 18px rgba(0, 0, 0, .35);
    transform: translateY(-2px);
    color: #fff;
}

/* ---------- فلش‌ها ---------- */
.als-arrow {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
    z-index: 5;
    width: 44px;
    height: 44px;
    padding: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(10, 14, 26, .35);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    transition: box-shadow .3s ease, background .3s ease, transform .2s ease;
}
.als-arrow:hover {
    background: rgba(24, 34, 58, .65);
    box-shadow: 0 0 18px rgba(120, 200, 255, .85);
}
.als-arrow:active { transform: scale(.92); }
.als-prev { inset-inline-start: 16px; }
.als-next { inset-inline-end: 16px; }
[dir="rtl"] .als-arrow svg { transform: scaleX(-1); }

/* ---------- نقاط ناوبری ---------- */
.als-dots {
    position: absolute;
    bottom: 14px;
    inset-inline: 0;
    z-index: 5;
    display: flex;
    gap: 8px;
    justify-content: center;
    pointer-events: none;
}
.als-dot {
    pointer-events: auto;
    width: 10px;
    height: 10px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, .38);
    cursor: pointer;
    transition: width .35s ease, background .3s ease, box-shadow .3s ease;
}
.als-dot:hover { background: rgba(255, 255, 255, .7); }
.als-dot.is-active {
    width: 28px;
    background: linear-gradient(90deg, #4de3ff, #b47bff);
    box-shadow: 0 0 12px rgba(100, 190, 255, .95);
}

/* ============================================================
   افکت‌های نوری
   ============================================================ */

.als-light-layer {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    direction: ltr; /* محاسبات انیمیشن بر مبنای چپ انجام می‌شود */
}

/* --- ۱) نور لغزان --- */
.als-effect-shine .als-light-layer::before {
    content: "";
    position: absolute;
    top: -70%;
    bottom: -70%;
    width: 38%;
    left: -55%;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .10) 30%,
        rgba(255, 255, 255, .5) 50%,
        rgba(255, 255, 255, .10) 70%,
        rgba(255, 255, 255, 0) 100%);
    filter: blur(2px);
    transform: skewX(-16deg);
    animation: als-shine 4.5s cubic-bezier(.6, .1, .3, .9) infinite;
}
@keyframes als-shine {
    0%   { left: -55%; opacity: 0; }
    10%  { opacity: 1; }
    60%  { left: 115%; opacity: 1; }
    61%  { opacity: 0; }
    100% { left: 115%; opacity: 0; }
}

/* --- ۲) هاله نئون --- */
.als-effect-glow { animation: als-glow 7s linear infinite; }
@keyframes als-glow {
    0%, 100% { box-shadow: 0 0 30px 3px rgba(72, 190, 255, .55), 0 0 80px 6px rgba(72, 190, 255, .20); }
    33%      { box-shadow: 0 0 34px 4px rgba(178, 102, 255, .60), 0 0 90px 8px rgba(178, 102, 255, .24); }
    66%      { box-shadow: 0 0 30px 3px rgba(255, 120, 210, .55), 0 0 80px 6px rgba(255, 120, 210, .20); }
}
.als-effect-glow .als-light-layer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: als-frame 3.4s ease-in-out infinite alternate;
}
@keyframes als-frame {
    from { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .10), inset 0 0 20px rgba(110, 190, 255, .22); }
    to   { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .30), inset 0 0 48px rgba(150, 120, 255, .50); }
}

/* --- ۳) ذرات نور (بوکه) — با جاوااسکریپت ساخته می‌شوند --- */
.als-particle {
    position: absolute;
    bottom: -8vh;
    left: 0;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle at 38% 35%,
        rgba(255, 255, 255, .95) 0%,
        rgba(255, 255, 255, .28) 45%,
        rgba(255, 255, 255, 0) 72%);
    box-shadow: 0 0 14px 3px currentColor;
    opacity: 0;
    will-change: transform, opacity;
    animation: als-rise-a var(--d, 9s) linear var(--dl, 0s) infinite;
}
@keyframes als-rise-a {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: var(--o, .8); }
    85%  { opacity: var(--o, .8); }
    100% { transform: translate3d(4vw, -118vh, 0); opacity: 0; }
}
@keyframes als-rise-b {
    0%   { transform: translate3d(0, 0, 0); opacity: 0; }
    10%  { opacity: var(--o, .8); }
    85%  { opacity: var(--o, .8); }
    100% { transform: translate3d(-4vw, -118vh, 0); opacity: 0; }
}

/* --- ۴) فلر لنز --- */
.als-effect-flare .als-light-layer::before {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    left: -30%;
    top: 8%;
    border-radius: 50%;
    background: radial-gradient(circle,
        rgba(255, 255, 255, .95) 0%,
        rgba(160, 210, 255, .55) 18%,
        rgba(120, 140, 255, .18) 42%,
        rgba(255, 255, 255, 0) 70%);
    mix-blend-mode: screen;
    filter: blur(1px);
    animation: als-flare 7s ease-in-out infinite;
}
@keyframes als-flare {
    0%       { left: -30%; top: 8%;  transform: scale(.7);  opacity: 0; }
    14%      { opacity: 1; }
    50%      { transform: scale(1.15); }
    86%      { opacity: 1; }
    100%     { left: 110%; top: 24%; transform: scale(.8);  opacity: 0; }
}
.als-effect-flare .als-light-layer::after {
    content: "";
    position: absolute;
    left: -40%;
    top: 22%;
    width: 260px;
    height: 3px;
    border-radius: 3px;
    background: linear-gradient(90deg, transparent, rgba(190, 225, 255, .95), transparent);
    filter: blur(1px);
    mix-blend-mode: screen;
    animation: als-streak 7s ease-in-out infinite;
}
@keyframes als-streak {
    0%, 12%   { left: -40%; opacity: 0; }
    20%, 78%  { opacity: .9; }
    88%, 100% { left: 110%; opacity: 0; }
}

/* ============================================================
   ریسپانسیو
   ============================================================ */

@media (max-width: 640px) {
    .als-slider { border-radius: 12px; height: clamp(200px, 60vw, var(--als-height, 520px)); }
    .als-caption { padding: 13px 16px; max-width: 88%; border-radius: 12px; }
    .als-caption-title { margin-bottom: 3px; }
    .als-caption-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.7;
    }
    .als-btn { margin-top: 10px; padding: 8px 20px; font-size: 13px; }
    .als-arrow { width: 36px; height: 36px; }
    .als-prev { inset-inline-start: 10px; }
    .als-next { inset-inline-end: 10px; }
    .als-pos-start, .als-pos-end, .als-pos-center { bottom: 13%; }
}

/* احترام به ترجیح کاهش حرکت کاربر */
@media (prefers-reduced-motion: reduce) {
    .als-slide,
    .als-transition-slide .als-track,
    .als-caption,
    .als-kenburns .als-slide.is-active img {
        transition: none !important;
        animation: none !important;
    }
    .als-light-layer::before,
    .als-light-layer::after,
    .als-particle,
    .als-effect-glow {
        animation: none !important;
    }
    .als-slide.is-active .als-caption { animation: none; }
}