/* ============================================================
   Profile Stories — Instagram-style ring + glow + full-screen viewer.
   The ring is added by story.js to any avatar carrying
   [data-story-user] whose owner has activity today.
   ============================================================ */

@property --story-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.story-avatar-wrap {
    display: inline-block;
    border-radius: 50%;
    line-height: 0;
    position: relative;
}
.story-avatar-wrap.has-story {
    padding: 4px;
    background: conic-gradient(from var(--story-angle), #25D366, #8ef6b0, #12b76a, #34e27a, #25D366);
    animation:
        storyRingSpin 3.2s linear infinite,
        storyRingPulse 1.8s ease-in-out infinite;
    cursor: pointer;
    box-shadow:
        0 0 0 0 rgba(37, 211, 102, .55),
        0 0 18px 2px rgba(37, 211, 102, .45);
}
.story-avatar-wrap.has-story::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, rgba(37, 211, 102, .35), transparent 68%);
    animation: storyGlowPulse 1.8s ease-in-out infinite;
    z-index: -1;
}
.story-avatar-wrap.has-story::after {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    pointer-events: none;
    border: 2px solid rgba(142, 246, 176, .65);
    animation: storyHalo 2s ease-in-out infinite;
}
.story-avatar-wrap.has-story > * {
    border: 2px solid #fff;
    box-sizing: border-box;
    border-radius: 50% !important;
    display: block;
}
@keyframes storyRingSpin { to { --story-angle: 360deg; } }

@keyframes storyRingPulse {
    0%, 100% {
        box-shadow:
            0 0 0 0 rgba(37, 211, 102, .55),
            0 0 14px 2px rgba(37, 211, 102, .4);
        transform: scale(1);
    }
    50% {
        box-shadow:
            0 0 0 8px rgba(37, 211, 102, 0),
            0 0 28px 6px rgba(37, 211, 102, .55);
        transform: scale(1.04);
    }
}

@keyframes storyGlowPulse {
    0%, 100% { opacity: .55; transform: scale(.92); }
    50% { opacity: 1; transform: scale(1.08); }
}

@keyframes storyHalo {
    0%, 100% { opacity: .35; transform: scale(1); }
    50% { opacity: .9; transform: scale(1.06); }
}

.story-avatar-wrap.has-story:hover { filter: brightness(1.08) }
.story-avatar-wrap.has-story:active { transform: scale(.96) }

@supports not (background: conic-gradient(from var(--story-angle), #000, #fff)) {
    .story-avatar-wrap.has-story { background: linear-gradient(135deg, #25D366, #12b76a); }
}

@media (prefers-reduced-motion: reduce) {
    .story-avatar-wrap.has-story,
    .story-avatar-wrap.has-story::before,
    .story-avatar-wrap.has-story::after { animation: none }
    .story-avatar-wrap.has-story {
        box-shadow: 0 0 0 3px rgba(37, 211, 102, .45), 0 0 16px rgba(37, 211, 102, .35);
        transform: none;
    }
}

/* ── Full-screen viewer ── */
.story-viewer {
    position: fixed; inset: 0; z-index: 2000;
    background: #0b0b0f;
    display: none;
    align-items: center; justify-content: center;
    touch-action: none; user-select: none;
    font-family: "Vazirmatn", Tahoma, sans-serif;
}
.story-viewer.open { display: flex; }
.story-viewer.closing { animation: storyClose .25s ease forwards; }
@keyframes storyClose { to { opacity: 0; transform: translateY(40px); } }

.story-frame {
    position: relative;
    width: 100%; height: 100%;
    max-width: 460px; max-height: 900px;
    background: #16161c;
    overflow: hidden;
    border-radius: 0;
    display: flex; flex-direction: column;
}
@media (min-width: 520px) { .story-frame { border-radius: 16px; margin: 12px; height: calc(100% - 24px); } }

/* progress bars */
.story-progress { position: absolute; top: 8px; left: 10px; right: 10px; z-index: 6; display: flex; gap: 4px; }
.story-progress-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,.32); overflow: hidden; }
.story-progress-bar > i { display: block; height: 100%; width: 0; background: #fff; border-radius: 3px; }
.story-progress-bar.done > i { width: 100%; }
.story-progress-bar.active > i { width: 100%; transition: width linear; }

/* header */
.story-head { position: absolute; top: 20px; left: 12px; right: 12px; z-index: 6; display: flex; align-items: center; gap: 10px; }
.story-head img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1.5px solid rgba(255,255,255,.6); }
.story-head .s-name { color: #fff; font-weight: 700; font-size: .9rem; text-shadow: 0 1px 4px rgba(0,0,0,.5); flex: 1; min-width: 0; }
.story-head .s-name small { display: block; font-weight: 500; font-size: .7rem; opacity: .8 }
.story-close { background: none; border: none; color: #fff; font-size: 1.5rem; cursor: pointer; line-height: 1; padding: 4px 8px; text-shadow: 0 1px 4px rgba(0,0,0,.5); }

/* stage / slides */
.story-stage { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.story-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 64px 28px 40px; color: #fff; }
.story-slide.show { animation: storyFadeIn .35s ease; }
@keyframes storyFadeIn { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }

/* tap zones */
.story-tap { position: absolute; top: 0; bottom: 0; width: 33%; z-index: 5; }
.story-tap.prev { left: 0; } .story-tap.next { right: 0; width: 67%; }

/* birthday slide */
.story-slide.birthday {
  background:
    radial-gradient(circle at 20% 20%, rgba(251,191,36,.35), transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(244,63,94,.3), transparent 42%),
    linear-gradient(160deg, #7c2d12, #9a3412 40%, #431407);
}
.story-slide.donation {
  background:
    radial-gradient(circle at 70% 15%, rgba(251,191,36,.4), transparent 45%),
    linear-gradient(160deg, #b45309, #92400e 50%, #451a03);
}
.story-slide.campaign {
  background:
    radial-gradient(circle at 30% 20%, rgba(167,139,250,.4), transparent 45%),
    linear-gradient(160deg, #5b21b6, #4c1d95 55%, #1e1b4b);
  padding: 0; align-items: stretch; justify-content: flex-end;
}
.story-slide.wishlist {
  background:
    radial-gradient(circle at 75% 20%, rgba(244,114,182,.45), transparent 45%),
    linear-gradient(160deg, #be185d, #9d174d 50%, #500724);
}
.story-slide.article { padding: 0; align-items: stretch; justify-content: flex-end; background: #0b0b0f; }

.s-badge-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.16); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 4px 12px; font-size: .72rem; font-weight: 800; margin-bottom: 14px;
}
.s-emoji { font-size: 4.6rem; line-height: 1; margin-bottom: 14px; filter: drop-shadow(0 6px 16px rgba(0,0,0,.4)); animation: storyPop .5s cubic-bezier(.2,.9,.3,1.2); }
.s-emoji-bounce { animation: storyPop .5s cubic-bezier(.2,.9,.3,1.2), storyBob 2.8s ease-in-out 0.6s infinite; }
@keyframes storyPop { from { transform: scale(.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes storyBob { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-8px) } }
.s-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 6px; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.s-sub { font-size: .95rem; opacity: .85; margin: 0 0 22px; line-height: 1.8; }
.s-actions { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; position: relative; z-index: 2; }
.s-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: .8rem 1rem; border-radius: 14px;
    font-weight: 800; font-size: .92rem; text-decoration: none; border: none; cursor: pointer; }
.s-btn.primary { background: #fff; color: #1a0a2e; }
.s-btn.ghost { background: rgba(255,255,255,.14); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }

.s-amount { font-size: 2rem; font-weight: 900; margin: 6px 0; }
.s-amount small { font-size: 1rem; font-weight: 700; opacity: .8; }
.s-supporter { font-size: 1rem; font-weight: 700; opacity: .95; margin-bottom: 4px; }
.s-msg { margin-top: 16px; background: rgba(255,255,255,.12); border-radius: 14px; padding: 12px 16px; font-size: .9rem; line-height: 1.9; max-width: 320px; }

.story-slide.article .s-art-img,
.story-slide.campaign .s-art-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
.story-slide.article .s-art-shade,
.story-slide.campaign .s-art-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.92) 8%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.55)); }
.story-slide.article .s-art-body,
.story-slide.campaign .s-art-body { position: relative; z-index: 1; padding: 30px 26px 40px; text-align: right; width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
.s-art-title { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; line-height: 1.5; }
.s-art-summary { font-size: .86rem; opacity: .85; line-height: 1.9; margin: 0 0 18px;
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

.s-deco { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.s-deco-bday span {
  position: absolute; width: 10px; height: 14px; border-radius: 50% 50% 45% 45%;
  animation: storyRise 5s ease-in-out infinite;
}
.s-deco-bday span:nth-child(1){ top:70%; left:12%; background:#fb7185; animation-delay:0s }
.s-deco-bday span:nth-child(2){ top:62%; right:16%; background:#fbbf24; animation-delay:-1.2s }
.s-deco-bday span:nth-child(3){ top:78%; left:40%; background:#2dd4bf; animation-delay:-2.4s }
.s-deco-bday span:nth-child(4){ top:55%; right:30%; background:#a78bfa; animation-delay:-3.1s }
@keyframes storyRise { 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-18px) } }
.s-deco-don::before, .s-deco-don::after,
.s-deco-camp::before, .s-deco-camp::after,
.s-deco-wish::before, .s-deco-wish::after {
  content:""; position:absolute; border-radius:50%;
  background: rgba(255,255,255,.08);
}
.s-deco-don::before { width:220px; height:220px; top:-60px; right:-40px }
.s-deco-don::after { width:160px; height:160px; bottom:-40px; left:-30px }
.s-deco-camp::before { width:240px; height:240px; top:-80px; left:-50px }
.s-deco-camp::after { width:140px; height:140px; bottom:10%; right:-20px }
.s-deco-wish::before { width:200px; height:200px; top:-50px; right:-30px }
.s-deco-wish::after { width:180px; height:180px; bottom:-60px; left:-40px }

.story-hint { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.5); font-size: .68rem; z-index: 6; pointer-events: none; }