/* ===== منتقل‌شده از CSS اسکوپ‌شده‌ی Blazor: ImageCompare.razor.css =====
   اکنون سراسری است؛ برای حفظ همان اولویت قبلی (specificity) انتخاب‌گرها ایمن‌سازی شده‌اند. */
/* ============================================================
   قاب اصلی: حاشیه‌ی رنگیِ در حال چرخش + درخشش نرم + ورود آرام
   ============================================================ */
.icv.icv {
    font-family: var(--font-main);
    --thumb: 48px;
    position: relative;
    max-width: 1800px; /* جلوگیری از خیلی پهن شدن */
    margin: 15px auto; /* فاصله از بالا/پایین + وسط‌چین افقی */
    padding: 3px;
    border-radius: 20px;
    background: conic-gradient(from var(--ang), #7c5cff, #22d3ee, #34d399, #fbbf24, #f472b6, #7c5cff);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    animation: icv-spin 16s linear infinite, icv-enter 1.6s cubic-bezier(.16, .84, .3, 1) backwards;
    transition: transform 1.2s cubic-bezier(.2, .8, .2, 1), box-shadow 1.2s ease;
}

.icv.icv:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .55);
}

/* هاله‌ی رنگی پشت قاب */
.icv.icv::after {
    content: "";
    position: absolute;
    inset: -16px;
    z-index: -1;
    border-radius: 34px;
    background: inherit;
    filter: blur(34px);
    opacity: .4;
    animation: icv-halo 8s ease-in-out infinite alternate;
}

@keyframes icv-spin  { to { --ang: 360deg; } }
@keyframes icv-halo  { from { opacity: .25; } to { opacity: .55; } }
@keyframes icv-enter {
    from { opacity: 0; transform: translateY(40px) scale(.96); filter: blur(10px); }
    to   { opacity: 1; transform: none; filter: none; }
}

.icv-inner.icv-inner {
    --p: var(--pos);
    position: relative;
    width: 100%;
    aspect-ratio: var(--ratio, 16 / 9);
    overflow: hidden;
    border-radius: 17px;
    background: #0b1020;
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y;
    /* وقتی کاربر می‌کشد، خط با کمی تأخیرِ نرم دنبال می‌شود */
    transition: --p .45s cubic-bezier(.22, .8, .3, 1);
}

/* ============================================================
   پخش خودکار: رفت‌وبرگشتِ بسیار آهسته با مکث در دو انتها
   ============================================================ */
.icv-auto .icv-inner.icv-inner {
    animation: icv-sweep 30s ease-in-out infinite;
}

.icv-paused .icv-inner.icv-inner {
    animation-play-state: paused;
}

/* لغزش نرم به نقطه‌ی شروع هنگام «پخش خودکار» */
.icv-glide .icv-inner.icv-inner {
    transition-duration: 1.25s;
}

@keyframes icv-sweep {
    0%, 6%   { --p: var(--pos); }
    50%, 56% { --p: 900; }
    100%     { --p: var(--pos); }
}

/* ============================================================
   دو تصویر (هر کدام داخل لایه‌ی خودش تا برش دقیق بماند)
   ============================================================ */
.icv-layer.icv-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

/* تصویر «قبل» فقط تا محل خط دیده می‌شود */
.icv-before.icv-before {
    clip-path: inset(0 calc(100% - var(--p) * 0.1%) 0 0);
}

.icv-img.icv-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    transform-origin: 62% 55%;
    /* زوم بسیار آهسته‌ی سینمایی؛ هر دو تصویر هم‌زمان و یکسان */
    animation: icv-kenburns 45s ease-in-out infinite alternate;
}

@keyframes icv-kenburns {
    from { transform: scale(1) translate(0, 0); }
    to   { transform: scale(1.07) translate(-1.2%, .8%); }
}

/* سایه‌ی گوشه‌ها برای عمق */
.icv-shade.icv-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(120% 90% at 50% 45%, transparent 55%, rgba(0, 0, 0, .38) 100%);
}

/* رگه‌ی نوری که آرام روی تصویر می‌گذرد */
.icv-sheen.icv-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    mix-blend-mode: screen;
    background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, .13) 50%, transparent 58%);
    background-size: 260% 100%;
    animation: icv-sheen 14s ease-in-out infinite;
}

@keyframes icv-sheen {
    0%   { background-position: 160% 0; }
    60%, 100% { background-position: -60% 0; }
}

/* ============================================================
   برچسب‌ها: شیشه‌ای، شناور، و محو شدن هنگام رسیدن خط
   ============================================================ */
.icv-label.icv-label {
    --fade: 1;
    position: absolute;
    top: 14px;
    z-index: 2;
    padding: 5px 14px;
    font-size: .88rem;
    letter-spacing: .02em;
    color: #fff;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .35);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 999px;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    animation: icv-float 7s ease-in-out infinite alternate;
}

.icv-label-before.icv-label-before {
    left: 14px;
    opacity: clamp(0, calc((var(--p) - 90) / 90), 1);
}

.icv-label-after.icv-label-after {
    right: 14px;
    opacity: clamp(0, calc((910 - var(--p)) / 90), 1);
    animation-delay: -3.5s;
}

@keyframes icv-float {
    from { translate: 0 -3px; }
    to   { translate: 0 4px; }
}

/* ============================================================
   خط جداکننده: درخشان، با نورِ روان و جرقه‌های شناور
   ============================================================ */
.icv-line.icv-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--p) * 0.1%);
    width: 3px;
    margin-left: -1.5px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(255, 255, 255, .55), #fff 25%, #fff 75%, rgba(255, 255, 255, .55));
    box-shadow: 0 0 10px rgba(255, 255, 255, .9), 0 0 28px rgba(120, 200, 255, .75);
    pointer-events: none;
}

/* نوری که مدام روی خط بالا و پایین می‌رود */
.icv-bead.icv-bead {
    position: absolute;
    left: -2px;
    width: 7px;
    height: 110px;
    border-radius: 6px;
    background: linear-gradient(180deg, transparent, #bfe9ff, transparent);
    filter: blur(1.5px);
    animation: icv-bead 6s ease-in-out infinite;
}

@keyframes icv-bead {
    from { top: -20%; }
    to   { top: 100%; }
}

/* جرقه‌هایی که از خط آرام بالا می‌روند */
.icv-spark.icv-spark {
    position: absolute;
    left: 50%;
    top: calc(var(--i) * 10% + 6%);
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 8px 2px rgba(160, 220, 255, .9);
    opacity: 0;
    animation: icv-rise calc(6s + var(--i) * .55s) ease-in-out infinite;
    animation-delay: calc(var(--i) * -1.1s);
}

@keyframes icv-rise {
    0%   { transform: translate(0, 0) scale(.4); opacity: 0; }
    20%  { opacity: 1; }
    100% { transform: translate(calc((var(--i) - 4) * 7px), -90px) scale(1.1); opacity: 0; }
}

/* دستگیره */
.icv-knob.icv-knob {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--thumb);
    height: var(--thumb);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff, #e9f3ff 70%);
    box-shadow: 0 0 0 6px rgba(255, 255, 255, .2), 0 8px 24px rgba(0, 0, 0, .5), 0 0 30px rgba(120, 200, 255, .7);
    animation: icv-breathe 4.5s ease-in-out infinite;
}

@keyframes icv-breathe {
    0%, 100% { scale: 1; }
    50%      { scale: 1.07; }
}

/* حلقه‌های موجی دور دستگیره */
.icv-ring.icv-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .8);
    opacity: 0;
    animation: icv-ripple 3.6s ease-out infinite;
}

.icv-ring-2.icv-ring-2 { animation-delay: -1.8s; }

@keyframes icv-ripple {
    0%   { transform: scale(1);   opacity: .8; }
    100% { transform: scale(2.4); opacity: 0; }
}

.icv-knob.icv-knob::before,
.icv-knob.icv-knob::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-style: solid;
}

.icv-knob.icv-knob::before {
    left: 9px;
    border-width: 6px 8px 6px 0;
    border-color: transparent #222 transparent transparent;
    animation: icv-nudge-l 3.6s ease-in-out infinite;
}

.icv-knob.icv-knob::after {
    right: 9px;
    border-width: 6px 0 6px 8px;
    border-color: transparent transparent transparent #222;
    animation: icv-nudge-r 3.6s ease-in-out infinite;
}

@keyframes icv-nudge-l { 50% { translate: -3px 0; } }
@keyframes icv-nudge-r { 50% { translate: 3px 0; } }

/* ============================================================
   اسلایدر واقعی: کاملاً شفاف و روی کل تصویر
   ============================================================ */
.icv-range.icv-range {
    position: absolute;
    top: 0;
    left: calc(var(--thumb) / -2);
    width: calc(100% + var(--thumb));
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 3;
    opacity: 0;
    cursor: ew-resize;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
}

.icv-range.icv-range::-webkit-slider-runnable-track { height: 100%; background: transparent; }

.icv-range.icv-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: var(--thumb);
    height: 100%;
    background: transparent;
    border: 0;
    cursor: ew-resize;
}

.icv-range.icv-range::-moz-range-track { height: 100%; background: transparent; }

.icv-range.icv-range::-moz-range-thumb {
    width: var(--thumb);
    height: 100%;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: ew-resize;
}

/* دسترس‌پذیری: با کیبورد (کلیدهای چپ/راست) هم قابل استفاده است */
.icv-range:focus-visible ~ .icv-line .icv-knob.icv-knob {
    outline: 3px solid #4c9ffe;
    outline-offset: 3px;
}

/* ============================================================
   دکمه‌ی پخش / توقف
   ============================================================ */
.icv-toggle.icv-toggle {
    position: absolute;
    left: 50%;
    bottom: 14px;
    translate: -50% 0;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    font: inherit;
    font-size: .85rem;
    color: #fff;
    cursor: pointer;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 999px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    transition: background .5s ease, scale .5s ease;
}

.icv-toggle.icv-toggle:hover { background: rgba(255, 255, 255, .3); scale: 1.06; }
.icv-toggle.icv-toggle:focus-visible { outline: 3px solid #4c9ffe; outline-offset: 2px; }

.icv-ico.icv-ico { position: relative; width: 12px; height: 12px; display: inline-block; }

.icv-ico-play.icv-ico-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 0 6px 10px;
    border-color: transparent transparent transparent #fff;
}

.icv-ico-pause.icv-ico-pause::before,
.icv-ico-pause.icv-ico-pause::after {
    content: "";
    position: absolute;
    top: 0;
    width: 4px;
    height: 12px;
    background: #fff;
    border-radius: 1px;
}

.icv-ico-pause.icv-ico-pause::before { left: 0; }
.icv-ico-pause.icv-ico-pause::after  { right: 0; }