/* ═══════════════════════════════════════════════════════════════════════
   COFFEETE — PROFILE PERSONA THEMES
   ═══════════════════════════════════════════════════════════════════════
   One shared engine that renders a user's chosen persona (برنامه‌نویس،
   موزیسین، پادکستر، یوتیوبر، عکاس، نویسنده، هکر، گیمر، طراح، استارتاپ)
   consistently across every public surface (profile, donate page,
   wishlist, campaign, birthday, donate wall, stories, share cards).

   How it works
   ────────────
   1. The active persona's key is set as `data-persona-theme="<key>"` on
      <html> (see Views/Shared/_Layout.cshtml + Presentation/WebUi/
      Infrastracture/Helpers/ProfileThemeViewData.cs). No attribute (or
      data-persona-theme="custom") means "custom-color mode" — none of
      the rules below fire and only the page's own plain color override
      applies, exactly like before this feature existed.
   2. A small inline <style> block (built server-side by
      ProfileThemeColorHelper.BuildCssVariableBlock, per request, because
      the user can override a persona's default accent color) defines the
      actual color values on :root as --pp-persona-* custom properties —
      this file never hardcodes a persona's hex color, it only reacts to
      those variables. That is what lets one generic rule re-theme every
      page instead of needing 10 copies of every rule.
   3. Views/Shared/_ProfileThemeDecor.cshtml renders one small, fixed,
      click-through "ambient" layer (`.pp-persona-decor`) holding the
      persona's floating decorative icons/glyphs and signature animation.
      Positioned `fixed` with `z-index:-1`, it paints behind every static
      page element (nav included) and above <body>'s own background —
      see the comment on `.pp-persona-decor` below for why that's safe.
   ═══════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────
   1. Ambient background + decorative icon layer (shared skeleton)
   ───────────────────────────────────────────────────────────────────── */
.pp-persona-decor {
    /* z-index:-1 (not 0/auto) is what keeps this behind the navbar, cards
       and text without any of them needing position/z-index of their own:
       per the CSS painting order, negative-z-index boxes sit above the
       root element's own background but below every normal-flow box. */
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    transition: opacity .35s ease;
}
.pp-persona-decor .pp-decor-bg {
    position: absolute;
    inset: -10%;
    background: radial-gradient(120% 90% at 15% 0%, rgba(var(--pp-persona-accent-rgb, 41, 171, 226), .16), transparent 60%),
                radial-gradient(110% 90% at 100% 100%, rgba(var(--pp-persona-accent-2-rgb, 41, 171, 226), .14), transparent 55%),
                linear-gradient(155deg, var(--pp-persona-bg-from, #F2F5F9), var(--pp-persona-bg-to, #F2F5F9));
}
.pp-persona-decor .pp-decor-icon {
    position: absolute;
    left: var(--x, 10%);
    top: var(--y, 10%);
    font-size: var(--size, 26px);
    line-height: 1;
    font-family: var(--pp-persona-font, inherit);
    color: var(--pp-persona-accent, currentColor);
    opacity: .16;
    user-select: none;
    will-change: transform, opacity;
    animation-delay: var(--delay, 0s);
}
html:not([data-persona-theme]) .pp-persona-decor,
html[data-persona-theme="custom"] .pp-persona-decor { display: none; }

/* Light-background personas (writer/designer/startup) need darker ink
   for icons/scanlines to stay visible against a pale backdrop. */
html[data-persona-theme="writer"] .pp-decor-icon,
html[data-persona-theme="designer"] .pp-decor-icon,
html[data-persona-theme="startup"] .pp-decor-icon {
    color: var(--pp-persona-accent-dk, #334155); opacity: .12;
}

/* ─────────────────────────────────────────────────────────────────────
   2. Signature per-persona animations
   ───────────────────────────────────────────────────────────────────── */

/* برنامه‌نویس — typing caret drifting + icons blink like a terminal cursor */
@keyframes pp-anim-typing-blink { 0%, 45% { opacity: .22 } 50%, 95% { opacity: 0 } 100% { opacity: .22 } }
@keyframes pp-anim-typing-drift { 0% { transform: translateY(0) } 50% { transform: translateY(-14px) } 100% { transform: translateY(0) } }
.pp-persona-decor.pp-anim-typing .pp-decor-icon { animation: pp-anim-typing-drift 6s ease-in-out infinite, pp-anim-typing-blink 1.4s steps(1) infinite; }
.pp-persona-decor.pp-anim-typing .pp-decor-caret {
    position: absolute; bottom: 6%; right: 6%; width: 10px; height: 22px;
    background: var(--pp-persona-accent, #22C55E); animation: pp-anim-typing-blink 1s steps(1) infinite; opacity: .55;
}

/* موزیسین — equalizer bars pulsing to a fake beat */
@keyframes pp-anim-eq-bar { 0%, 100% { transform: scaleY(.25) } 50% { transform: scaleY(1) } }
.pp-persona-decor.pp-anim-equalizer .pp-decor-icon { animation: pp-anim-typing-drift 7s ease-in-out infinite; }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq { position: absolute; display: flex; align-items: flex-end; gap: 5px; bottom: 4%; left: 5%; height: 60px; opacity: .5; }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq span { width: 6px; border-radius: 3px; background: linear-gradient(180deg, var(--pp-persona-accent), var(--pp-persona-accent-2)); transform-origin: bottom; animation: pp-anim-eq-bar 1.1s ease-in-out infinite; height: 60px; }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq span:nth-child(2) { animation-delay: .12s }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq span:nth-child(3) { animation-delay: .24s }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq span:nth-child(4) { animation-delay: .36s }
.pp-persona-decor.pp-anim-equalizer .pp-decor-eq span:nth-child(5) { animation-delay: .48s }

/* پادکستر — flowing waveform strip along the bottom */
@keyframes pp-anim-wave { 0%, 100% { transform: scaleY(.35) } 50% { transform: scaleY(1) } }
.pp-persona-decor.pp-anim-waveform .pp-decor-icon { animation: pp-anim-typing-drift 8s ease-in-out infinite; }
.pp-persona-decor.pp-anim-waveform .pp-decor-wave { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; display: flex; align-items: flex-end; gap: 3px; padding: 0 4%; opacity: .4; }
.pp-persona-decor.pp-anim-waveform .pp-decor-wave span { flex: 1; max-width: 5px; border-radius: 2px 2px 0 0; background: var(--pp-persona-accent); transform-origin: bottom; animation: pp-anim-wave 1.4s ease-in-out infinite; }
.pp-persona-decor.pp-anim-waveform .pp-decor-wave span:nth-child(3n) { animation-delay: .2s; background: var(--pp-persona-accent-2) }
.pp-persona-decor.pp-anim-waveform .pp-decor-wave span:nth-child(5n) { animation-delay: .4s }

/* یوتیوبر — a slow studio spotlight sweep */
@keyframes pp-anim-spotlight-sweep { 0% { transform: translateX(-20%) rotate(0deg) } 50% { transform: translateX(20%) rotate(6deg) } 100% { transform: translateX(-20%) rotate(0deg) } }
.pp-persona-decor.pp-anim-spotlight .pp-decor-icon { animation: pp-anim-typing-drift 9s ease-in-out infinite; }
.pp-persona-decor.pp-anim-spotlight .pp-decor-spot { position: absolute; top: -30%; left: 30%; width: 70%; height: 160%; background: radial-gradient(ellipse at center, rgba(var(--pp-persona-accent-rgb), .22), transparent 60%); animation: pp-anim-spotlight-sweep 10s ease-in-out infinite; }
.pp-persona-decor.pp-anim-spotlight .pp-decor-rec { position: absolute; top: 5%; left: 6%; display: flex; align-items: center; gap: 6px; font: 700 12px/1 'Vazirmatn',sans-serif; letter-spacing: .1em; color: var(--pp-persona-accent); opacity: .55; }
.pp-persona-decor.pp-anim-spotlight .pp-decor-rec::before { content:""; width: 8px; height: 8px; border-radius: 50%; background: var(--pp-persona-accent); animation: pp-anim-typing-blink 1s steps(1) infinite; }

/* عکاس — a slowly rotating aperture/iris ring */
@keyframes pp-anim-aperture-spin { to { transform: rotate(360deg) } }
.pp-persona-decor.pp-anim-aperture .pp-decor-icon { animation: pp-anim-typing-drift 10s ease-in-out infinite; }
.pp-persona-decor.pp-anim-aperture .pp-decor-iris { position: absolute; top: 8%; left: 8%; width: 180px; height: 180px; border-radius: 50%; border: 2px dashed rgba(var(--pp-persona-accent-rgb), .3); animation: pp-anim-aperture-spin 26s linear infinite; }
.pp-persona-decor.pp-anim-aperture .pp-decor-iris::before { content:""; position: absolute; inset: 22px; border-radius: 50%; border: 1px solid rgba(var(--pp-persona-accent-rgb), .22); }

/* نویسنده — a gently turning page corner */
@keyframes pp-anim-pageflip-turn { 0%, 100% { transform: rotateY(0deg) } 50% { transform: rotateY(35deg) } }
.pp-persona-decor.pp-anim-pageflip .pp-decor-icon { animation: pp-anim-pageflip-turn 5s ease-in-out infinite; transform-style: preserve-3d; }
.pp-persona-decor.pp-anim-pageflip .pp-decor-page { position: absolute; bottom: 6%; left: 6%; width: 46px; height: 60px; background: linear-gradient(135deg, rgba(146,64,14,.14), rgba(146,64,14,.05)); border-radius: 2px 10px 2px 2px; box-shadow: 0 6px 16px rgba(0,0,0,.06); }

/* هکر — matrix code rain + CRT scanlines */
@keyframes pp-anim-matrix-fall { 0% { transform: translateY(-30px); opacity: 0 } 10% { opacity: .5 } 90% { opacity: .5 } 100% { transform: translateY(70vh); opacity: 0 } }
.pp-persona-decor.pp-anim-matrix .pp-decor-icon { animation: pp-anim-matrix-fall linear infinite; animation-duration: calc(6s + var(--dur-mod, 0s)); opacity: 0; }
.pp-persona-decor.pp-anim-matrix .pp-decor-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,255,156,.05) 0px, rgba(0,255,156,.05) 1px, transparent 2px, transparent 4px); mix-blend-mode: screen; }
.pp-persona-decor.pp-anim-matrix .pp-decor-bg { background: radial-gradient(120% 90% at 50% 0%, rgba(0,255,156,.10), transparent 60%), #000; }

/* گیمر — an animated RGB glow sweeping along the viewport edges */
@keyframes pp-anim-rgb-hue { to { filter: hue-rotate(360deg) } }
@keyframes pp-anim-rgb-pulse { 0%, 100% { opacity: .35 } 50% { opacity: .75 } }
.pp-persona-decor.pp-anim-rgb .pp-decor-icon { animation: pp-anim-typing-drift 4.5s ease-in-out infinite; }
.pp-persona-decor.pp-anim-rgb .pp-decor-glow {
    position: absolute; inset: 0; border: 3px solid var(--pp-persona-accent);
    box-shadow: inset 0 0 60px rgba(var(--pp-persona-accent-rgb), .35), inset 0 0 6px rgba(var(--pp-persona-accent-2-rgb), .5);
    animation: pp-anim-rgb-hue 8s linear infinite, pp-anim-rgb-pulse 2.4s ease-in-out infinite;
}

/* طراح — playful color blobs drifting + splashing */
@keyframes pp-anim-splash-float { 0%, 100% { transform: translate(0,0) scale(1) } 50% { transform: translate(12px,-18px) scale(1.08) } }
.pp-persona-decor.pp-anim-splash .pp-decor-icon { animation: pp-anim-splash-float 7s ease-in-out infinite; }
.pp-persona-decor.pp-anim-splash .pp-decor-blob { position: absolute; border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; filter: blur(2px); opacity: .18; animation: pp-anim-splash-float 9s ease-in-out infinite; }
.pp-persona-decor.pp-anim-splash .pp-decor-blob:nth-child(1) { width: 220px; height: 220px; top: -40px; right: -40px; background: var(--pp-persona-accent); }
.pp-persona-decor.pp-anim-splash .pp-decor-blob:nth-child(2) { width: 160px; height: 160px; bottom: 6%; left: -30px; background: var(--pp-persona-accent-2); animation-delay: 1.4s; }

/* استارتاپ — soft orbiting accent dots, minimal & calm */
@keyframes pp-anim-orbit-spin { to { transform: rotate(360deg) } }
.pp-persona-decor.pp-anim-orbit .pp-decor-icon { animation: pp-anim-typing-drift 11s ease-in-out infinite; opacity: .1; }
.pp-persona-decor.pp-anim-orbit .pp-decor-orbit { position: absolute; top: 10%; right: 8%; width: 220px; height: 220px; border-radius: 50%; border: 1px dashed rgba(var(--pp-persona-accent-rgb), .25); animation: pp-anim-orbit-spin 40s linear infinite; }
.pp-persona-decor.pp-anim-orbit .pp-decor-orbit::after { content:""; position: absolute; top: -5px; left: calc(50% - 5px); width: 10px; height: 10px; border-radius: 50%; background: var(--pp-persona-accent); box-shadow: 0 0 12px rgba(var(--pp-persona-accent-rgb), .8); }

/* ─────────────────────────────────────────────────────────────────────
   3. Site-wide color adapters — map each page's own local brand
      variables onto the shared --pp-persona-accent* variables, so every
      themed page recolors together from one source of truth without
      needing 10 copies of every rule below.
   ───────────────────────────────────────────────────────────────────── */
html[data-persona-theme]:not([data-persona-theme="custom"]) {
    /* Public profile already consumes --c-brand*/--c-amber*/--c-gift*/--c-gold*
       directly (see Profile.cshtml); those are set by the same inline
       style block that defines --pp-persona-*, so no adapter is needed
       there. Everything below is for pages with their own local scheme. */
}
html[data-persona-theme]:not([data-persona-theme="custom"]) .wlp {
    --wl-brand: var(--pp-persona-accent); --wl-teal: var(--pp-persona-accent-2);
}
html[data-persona-theme]:not([data-persona-theme="custom"]) .wld {
    --brand: var(--pp-persona-accent); --brand-dk: var(--pp-persona-accent-dk); --teal: var(--pp-persona-accent-2);
}
/* Campaign pages deliberately key their whole accent off that campaign's own
   chosen Color rather than the site/profile brand (a campaign can intentionally
   differ from its owner's persona) — so unlike the other adapters here, the
   persona is NOT force-mapped onto --cc-brand. The persona still shows up as
   the page's ambient background/icons/animation (below) for a consistent feel. */
html[data-persona-theme]:not([data-persona-theme="custom"]) .dw {
    --dw-brand: var(--pp-persona-accent); --dw-teal: var(--pp-persona-accent-2);
}
/* Birthday Celebrate already has its own richer per-month seasonal theme
   engine (wwwroot/js/birthday-celebrate.js sets --bc-accent/--bc-bg1-3 inline
   on <html> per the Persian calendar month), and Countdown keeps a fixed
   gold/purple palette by design — both are shown to visitors independent of
   any one persona, so neither's accent is force-mapped here. Both still get
   the ambient background/icon/animation layer below for a consistent feel. */

/* ─────────────────────────────────────────────────────────────────────
   4. Distinct card styling per theme — every persona ships its own
      radius/border language and a small corner "signature" badge, using
      the same generic selector list across profile, wishlist, campaign,
      donate wall and business-card surfaces.
   ───────────────────────────────────────────────────────────────────── */
html[data-persona-theme]:not([data-persona-theme="custom"]) .pcard,
html[data-persona-theme]:not([data-persona-theme="custom"]) .art-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .pp-donate-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .mini-don,
html[data-persona-theme]:not([data-persona-theme="custom"]) .mini-art,
html[data-persona-theme]:not([data-persona-theme="custom"]) .dcard,
html[data-persona-theme]:not([data-persona-theme="custom"]) .wlp-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .wld-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .wld-panel,
html[data-persona-theme]:not([data-persona-theme="custom"]) .cc-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .cc-contrib-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .dw-note,
html[data-persona-theme]:not([data-persona-theme="custom"]) .dnw-card,
html[data-persona-theme]:not([data-persona-theme="custom"]) .cd-box {
    border-radius: var(--pp-persona-radius, inherit) !important;
    position: relative;
}
html[data-persona-theme]:not([data-persona-theme="custom"]) .pcard::after,
html[data-persona-theme]:not([data-persona-theme="custom"]) .wlp-card::after,
html[data-persona-theme]:not([data-persona-theme="custom"]) .wld-card::after,
html[data-persona-theme]:not([data-persona-theme="custom"]) .cc-card::after,
html[data-persona-theme]:not([data-persona-theme="custom"]) .dw-note::after,
html[data-persona-theme]:not([data-persona-theme="custom"]) .dnw-card::after {
    content: var(--pp-persona-emoji, "");
    position: absolute;
    top: -8px; inset-inline-end: -8px;
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    font-size: 13px; border-radius: 50%;
    background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.15);
    pointer-events: none;
}

/* Terminal-flavored personas (programmer, hacker) — a monospace traffic-light
   header strip reused wherever we'd normally have a plain card header. */
html[data-persona-theme="programmer"] .pcard-hd,
html[data-persona-theme="hacker"] .pcard-hd {
    font-family: var(--pp-persona-font);
}
html[data-persona-theme="programmer"] .pcard-hd::before,
html[data-persona-theme="hacker"] .pcard-hd::before {
    content: "● ● ●"; letter-spacing: 4px; font-size: 9px; opacity: .35; margin-inline-end: 8px;
}

/* Gamer — animated RGB card border on hover for a bit of flair on the
   surfaces people interact with most. */
html[data-persona-theme="gamer"] .pcard:hover,
html[data-persona-theme="gamer"] .wlp-card:hover,
html[data-persona-theme="gamer"] .cc-card:hover,
html[data-persona-theme="gamer"] .dnw-card:hover {
    box-shadow: 0 0 0 2px var(--pp-persona-accent), 0 0 22px rgba(var(--pp-persona-accent-rgb), .45);
}

/* Photographer — a thin polaroid-style frame + slightly boosted contrast. */
html[data-persona-theme="photographer"] .pcard,
html[data-persona-theme="photographer"] .wlp-card,
html[data-persona-theme="photographer"] .dnw-card {
    border: 1px solid rgba(var(--pp-persona-accent-rgb), .35) !important;
}

/* Writer — warm paper texture card background. */
html[data-persona-theme="writer"] .pcard,
html[data-persona-theme="writer"] .wlp-card,
html[data-persona-theme="writer"] .wld-card,
html[data-persona-theme="writer"] .cc-card {
    background-image: repeating-linear-gradient(0deg, rgba(146,64,14,.025) 0px, rgba(146,64,14,.025) 1px, transparent 2px, transparent 26px);
}

/* Designer — a playful gradient accent line across card tops. */
html[data-persona-theme="designer"] .pcard::before,
html[data-persona-theme="designer"] .wlp-card::before,
html[data-persona-theme="designer"] .cc-card::before,
html[data-persona-theme="designer"] .dnw-card::before {
    content: ""; position: absolute; inset-inline: 0; top: 0; height: 4px;
    background: linear-gradient(90deg, var(--pp-persona-accent), var(--pp-persona-accent-2));
    border-radius: var(--pp-persona-radius, 6px) var(--pp-persona-radius, 6px) 0 0;
}

/* The donate wall shows many users' donations side by side, so each
   `.dnw-card`/`.dw-note` carries its own recipient's --pp-persona-* variables
   inline (see _DonateCard.cshtml) instead of relying on a page-level <html>
   attribute — these selectors are self-scoped rather than ancestor-gated. */
.dnw-card[data-persona-theme]:not([data-persona-theme="custom"]),
.dw-note[data-persona-theme]:not([data-persona-theme="custom"]) {
    border-radius: var(--pp-persona-radius, inherit) !important;
    position: relative;
}
.dnw-card[data-persona-theme]:not([data-persona-theme="custom"])::after,
.dw-note[data-persona-theme]:not([data-persona-theme="custom"])::after {
    content: var(--pp-persona-emoji, "");
    position: absolute; top: -8px; inset-inline-end: -8px;
    width: 24px; height: 24px; line-height: 24px; text-align: center;
    font-size: 12px; border-radius: 50%; background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.15); pointer-events: none;
}
.dnw-card[data-persona-theme="gamer"]:hover {
    box-shadow: 0 0 0 2px var(--pp-persona-accent), 0 0 18px rgba(var(--pp-persona-accent-rgb), .4);
}

/* ─────────────────────────────────────────────────────────────────────
   5. Stories — the full-screen viewer's progress bars and header accent
      pick up the story owner's persona (see wwwroot/js/story.js, which
      sets --pp-persona-accent/-2 on .story-viewer per story opened). The
      small "new story" ring drawn on avatars stays the familiar green —
      like most apps, that's a universal "unviewed" indicator, not part
      of any one user's theme.
   ───────────────────────────────────────────────────────────────────── */
.story-viewer[data-persona-theme]:not([data-persona-theme="custom"]) .story-progress-bar > i {
    background: linear-gradient(90deg, var(--pp-persona-accent), var(--pp-persona-accent-2, var(--pp-persona-accent)));
}
.story-viewer[data-persona-theme]:not([data-persona-theme="custom"]) .story-frame {
    box-shadow: inset 0 0 0 2px rgba(var(--pp-persona-accent-rgb), .35);
}

/* ─────────────────────────────────────────────────────────────────────
   6. Business / share card — persona accent flows into the existing
      --bc-primary custom properties (see wwwroot/js/business-card.js).
   ───────────────────────────────────────────────────────────────────── */
.bcard[data-persona-theme]:not([data-persona-theme="custom"]) {
    --bc-primary: var(--pp-persona-accent);
    --bc-primary-rgb: var(--pp-persona-accent-rgb);
    --bc-accent: var(--pp-persona-accent-2);
    --bc-accent-rgb: var(--pp-persona-accent-2-rgb);
}
