/* SLFS/web-v2 · کامپوننتِ Esanj_cls-boxes — کپیِ همین نسخه (منبع: components/boxes/Esanj_cls-boxes.html)
   منتقل‌شده از <style>ِ قالب (2026-10-02) — RULES §۳.۵ */

/* ══ CLS BOXES (۵ سطحی) — الگو از EQ_Schutte/web-v2 ══ */
@keyframes clsShimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }
@keyframes ringPulse { 0% { box-shadow: 0 0 0 0 var(--cls-ring) } 70% { box-shadow: 0 0 0 12px transparent } 100% { box-shadow: 0 0 0 0 transparent } }
@keyframes facePulse {
    0%, 100% { transform: scale(1) }
    50%      { transform: scale(1.06) }
}
@keyframes faceSink {
    0%, 100% { transform: translateY(0) }
    50%      { transform: translateY(1.5px) }
}
@keyframes smileWave {
    0%, 100% { transform: scaleX(1) }
    50%      { transform: scaleX(1.1) }
}
@keyframes blinkEye {
    0%, 92%, 100% { transform: scaleY(1) }
    96%           { transform: scaleY(.15) }
}
@keyframes sparkleTwinkle {
    0%, 100% { opacity: 0; transform: scale(.5) }
    50% { opacity: 1; transform: scale(1.1) }
}
@keyframes haloBreathe {
    0%, 100% { transform: scale(.92); opacity: .08 }
    50%      { transform: scale(1.1); opacity: .18 }
}
@keyframes tearFall {
    0%   { opacity: 0; transform: translateY(-2px) }
    25%  { opacity: 1 }
    80%  { opacity: 1; transform: translateY(14px) }
    100% { opacity: 0; transform: translateY(18px) }
}

.cls-boxes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 520px; margin: 28px auto 16px }
.cls-box { display: flex; flex-direction: row; align-items: center; height: 92px; border-radius: 18px; border: 1.5px solid #ECEDEF; background: #fff; overflow: hidden; transition: all .3s cubic-bezier(.4,0,.2,1); cursor: default; position: relative }
.cls-box--active { border: 2px solid var(--cls-color) !important; box-shadow: 0 8px 22px -6px color-mix(in srgb, var(--cls-color) 25%, transparent) }

.cls-label { flex: 1; padding: 0 16px; display: flex; align-items: center; gap: 10px }
.cls-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cls-color); flex-shrink: 0; transition: all .3s ease }
.cls-box--active .cls-dot { animation: ringPulse 1.8s ease-out infinite }
.cls-text { font-size: 14px; font-weight: 500; color: #6B7280; transition: all .3s ease }
.cls-box--active .cls-text { font-weight: 800; font-size: 15px; color: #1A1A1A }
.cls-bar { display: none; width: 3px; height: 58%; border-radius: 2px; background: var(--cls-color); margin-left: 4px; flex-shrink: 0 }
.cls-box--active .cls-bar { display: block }

.cls-img { width: 128px; height: 100%; display: flex; align-items: center; justify-content: center; border-right: 1px solid #F3F4F6; background: #FAFBFC; position: relative; overflow: hidden; transition: all .3s ease; flex-shrink: 0 }
.cls-box--active .cls-img { border-right-color: color-mix(in srgb, var(--cls-color) 22%, transparent); background: var(--cls-bg) }

.cls-emoji { width: 78px; height: 78px; position: relative; z-index: 1; color: #9CA3AF; transition: color .3s ease }
.cls-box--active .cls-emoji { color: var(--cls-ink, #1F2937) }

.cls-emoji .lf-fill { fill: currentColor }
.cls-emoji .lf-eye { fill: #FAFBFC; transform-origin: center; transform-box: fill-box }
.cls-box--active .cls-emoji .lf-eye { fill: var(--cls-bg, #fff) }
.cls-box--active .cls-emoji .lf-eye-blink { animation: blinkEye 4s ease-in-out infinite }
.cls-emoji .lf-mouth { fill: none; stroke: #FAFBFC; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round }
.cls-box--active .cls-emoji .lf-mouth { stroke: var(--cls-bg, #fff) }
.cls-emoji .lf-blush { fill: #FB7185; opacity: .55 }

.cls-emoji .lf-face { transform-origin: 24px 26px }
.cls-box--active .cls-emoji .lf-face-happy { animation: facePulse 2s ease-in-out infinite }
.cls-box--active .cls-emoji .lf-face-sad   { animation: faceSink 2.8s ease-in-out infinite }
.cls-emoji .lf-mouth-smile { transform-origin: 24px 32px }
.cls-box--active .cls-emoji .lf-mouth-smile { animation: smileWave 2.4s ease-in-out infinite }

.cls-emoji .halo { opacity: 0; transform-origin: 24px 26px }
.cls-box--active .cls-emoji .halo { animation: haloBreathe 2.4s ease-in-out infinite }
.cls-emoji .sparkle { opacity: 0; transform-origin: center; transform-box: fill-box }
.cls-box--active .cls-emoji .sparkle    { animation: sparkleTwinkle 1.8s ease-in-out infinite }
.cls-box--active .cls-emoji .sparkle--2 { animation-delay: .6s }
.cls-box--active .cls-emoji .sparkle--3 { animation-delay: 1.2s }
.cls-emoji .tear-drop { opacity: 0; transform-origin: center; transform-box: fill-box }
.cls-box--active .cls-emoji .tear-drop { animation: tearFall 2.4s ease-in infinite }

.cls-shimmer { display: none; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, var(--cls-shimmer, rgba(0,0,0,.03)) 50%, transparent 100%); background-size: 200% 100%; animation: clsShimmer 2.8s ease infinite }
.cls-box--active .cls-shimmer { display: block }

@media screen and (max-width: 576px) {
    .cls-boxes { max-width: 100%; gap: 7px }
    .cls-box { height: 78px; border-radius: 14px }
    .cls-img { width: 104px }
    .cls-emoji { width: 62px; height: 62px }
    .cls-label { padding: 0 13px; gap: 8px }
    .cls-text { font-size: 12px }
    .cls-box--active .cls-text { font-size: 13px }
    .cls-dot { width: 9px; height: 9px }
}