/*
 * "Code & career" components: the LinkedIn / site / GitHub bridge, the LinkedIn card,
 * the GitHub contribution calendar and repository cards.
 * Plain CSS on top of the design tokens in tailwind.input.css (--ink, --line, --accent, --gold).
 */

/* ---------- Identity bridge: LinkedIn  ⟷  site  ⟷  GitHub ---------- */
.pr-bridge { display: flex; align-items: center; justify-content: center; gap: 0; max-width: 46rem; margin: 0 auto; }
.pr-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: .6rem; text-decoration: none; flex-shrink: 0; }
.pr-orb {
    position: relative; width: 4.25rem; height: 4.25rem; border-radius: 1.4rem;
    display: grid; place-items: center; font-size: 1.6rem; color: #fff;
    transform: perspective(600px) rotateX(8deg);
    transition: transform .6s var(--ease-out), box-shadow .6s var(--ease-out);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .35) inset, 0 -6px 14px -8px rgba(0, 0, 0, .45) inset, 0 18px 36px -16px rgba(7, 10, 17, .55);
}
.pr-node:hover .pr-orb { transform: perspective(600px) rotateX(0) translateY(-4px) scale(1.04); }
.pr-orb::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, rgba(255, 255, 255, .38), transparent 42%); pointer-events: none; }
.pr-orb--linkedin { background: linear-gradient(150deg, #2a86de, #0a66c2 55%, #084e96); }
.pr-orb--github { background: linear-gradient(150deg, #3b4252, #171d2a 55%, #070a11); }
.dark .pr-orb--github { background: linear-gradient(150deg, #4a5366, #232b3b 55%, #0e131d); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08) inset, 0 18px 36px -16px rgba(0, 0, 0, .8); }
.pr-orb--site { width: 5.5rem; height: 5.5rem; border-radius: 1.8rem; padding: 3px; background: linear-gradient(140deg, #dcbb73, #3274f6 60%, #02acee); }
.pr-orb--site img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(1.8rem - 3px); }
.pr-orb--site .pr-verified {
    position: absolute; bottom: -6px; inset-inline-end: -6px; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    display: grid; place-items: center; font-size: .7rem; color: #fff; background: #1f5ae0; border: 3px solid var(--bg);
}
.pr-label { font-size: .72rem; font-weight: 800; color: var(--ink); white-space: nowrap; }
.pr-sub { font-size: .65rem; font-weight: 600; color: var(--muted); margin-top: -.45rem; direction: ltr; white-space: nowrap; }

.pr-link { position: relative; flex: 1 1 auto; min-width: 2.5rem; height: 2px; margin: 0 .75rem 2.4rem; border-radius: 2px; background: var(--line); overflow: hidden; }
.pr-link::before {
    content: ''; position: absolute; inset: 0; width: 45%;
    background: linear-gradient(90deg, transparent, var(--accent), var(--gold), transparent);
    animation: pr-flow 2.8s var(--ease-out) infinite;
}
.pr-link--rev::before { animation-direction: reverse; animation-delay: 1.4s; }
@keyframes pr-flow { from { transform: translateX(-110%); } to { transform: translateX(240%); } }

@media (max-width: 480px) {
    .pr-orb { width: 3.4rem; height: 3.4rem; font-size: 1.3rem; border-radius: 1.1rem; }
    .pr-orb--site { width: 4.4rem; height: 4.4rem; }
    .pr-link { margin: 0 .35rem 2.4rem; }
    .pr-sub { display: none; }
}

/* ---------- LinkedIn card ---------- */
.li-card { position: relative; overflow: hidden; border-radius: 28px; padding: 0 !important; }
.li-banner {
    height: 7.5rem; position: relative;
    background:
        radial-gradient(120% 140% at 100% 0%, rgba(220, 187, 115, .55), transparent 55%),
        radial-gradient(90% 120% at 0% 100%, rgba(2, 172, 238, .45), transparent 60%),
        linear-gradient(135deg, #0a66c2, #142247);
}
.li-banner::after {
    content: ''; position: absolute; inset: 0; opacity: .35;
    background-image: linear-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .12) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: linear-gradient(to bottom, #000, transparent);
}
.li-avatar { width: 6rem; height: 6rem; border-radius: 1.75rem; border: 4px solid var(--surface); object-fit: cover; margin-top: -3rem; position: relative; box-shadow: 0 18px 36px -16px rgba(7, 10, 17, .5); }
.li-badge { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: .6rem; font-size: .65rem; font-weight: 800; color: #fff; background: #0a66c2; }
.li-open { border: 1px dashed rgba(10, 102, 194, .35); background: rgba(10, 102, 194, .06); }
.dark .li-open { background: rgba(10, 102, 194, .12); border-color: rgba(90, 152, 255, .3); }
.li-timeline { position: relative; }
.li-timeline::before { content: ''; position: absolute; top: .5rem; bottom: .5rem; inset-inline-start: .45rem; width: 1px; background: linear-gradient(to bottom, #0a66c2, var(--line)); }
.li-dot { position: absolute; inset-inline-start: 0; top: .35rem; width: .95rem; height: .95rem; border-radius: 999px; background: var(--surface); border: 3px solid #0a66c2; }
.btn-linkedin {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 1rem; padding: .8rem 1.3rem;
    font-size: .82rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #1574d4, #0a58a8);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .25) inset, 0 10px 24px -10px rgba(10, 102, 194, .75);
    transition: transform .3s var(--ease-out), filter .3s;
}
.btn-linkedin:hover { transform: translateY(-2px); filter: brightness(1.07); }
.btn-github {
    display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 1rem; padding: .8rem 1.3rem;
    font-size: .82rem; font-weight: 800; color: #fff; background: linear-gradient(180deg, #2b3445, #0e131d);
    box-shadow: 0 1px 0 0 rgba(255, 255, 255, .15) inset, 0 10px 24px -10px rgba(7, 10, 17, .7);
    transition: transform .3s var(--ease-out), filter .3s;
}
.dark .btn-github { background: linear-gradient(180deg, #f3f5f8, #cfd5df); color: #0e131d; }
.btn-github:hover { transform: translateY(-2px); filter: brightness(1.1); }

/* ---------- GitHub contribution calendar ---------- */
.gh-cal-scroll { overflow-x: auto; scrollbar-width: none; direction: ltr; -webkit-mask-image: linear-gradient(90deg, transparent, #000 1.5rem); mask-image: linear-gradient(90deg, transparent, #000 1.5rem); }
.gh-cal-scroll::-webkit-scrollbar { display: none; }
.gh-cal { display: grid; grid-auto-flow: column; grid-template-rows: repeat(7, var(--gh-cell, 11px)); grid-auto-columns: var(--gh-cell, 11px); gap: var(--gh-gap, 3px); width: max-content; padding-inline-start: 1.5rem; }
.gh-day { border-radius: 3px; background: rgba(14, 19, 29, .06); outline: 1px solid rgba(14, 19, 29, .03); outline-offset: -1px; transition: transform .2s; }
.dark .gh-day { background: rgba(255, 255, 255, .05); outline-color: rgba(255, 255, 255, .03); }
.gh-day:hover { transform: scale(1.45); position: relative; z-index: 1; }
.gh-day.gh-empty { background: transparent !important; outline: none; }
.gh-l1 { background: #bcd6ff !important; }
.gh-l2 { background: #5a98ff !important; }
.gh-l3 { background: #1f5ae0 !important; }
.gh-l4 { background: linear-gradient(135deg, #dcbb73, #b98a36) !important; box-shadow: 0 0 8px rgba(207, 162, 76, .55); }
.dark .gh-l1 { background: #1b3673 !important; }
.dark .gh-l2 { background: #1f5ae0 !important; }
.dark .gh-l3 { background: #5a98ff !important; }
.gh-legend { display: inline-flex; align-items: center; gap: 3px; direction: ltr; }
.gh-legend .gh-day { width: 10px; height: 10px; }

/* Language bar */
.gh-langbar { display: flex; height: .55rem; border-radius: 999px; overflow: hidden; gap: 2px; background: var(--line); }
.gh-langbar span { display: block; height: 100%; }
.gh-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 999px; flex-shrink: 0; }

/* Repository cards */
.gh-repo { position: relative; overflow: hidden; }
.gh-repo::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 3px; opacity: .85;
    background: linear-gradient(90deg, var(--lang, #8b94a6), transparent 80%);
}
.gh-stat { display: inline-flex; align-items: center; gap: .35rem; font-size: .7rem; font-weight: 700; color: var(--muted); direction: ltr; }

@media (prefers-reduced-motion: reduce) {
    .pr-link::before { animation: none; }
    .pr-orb, .gh-day { transition: none; }
}

/* Language filter chips on /open-source */
.lang-chip:hover { border-color: rgba(31, 90, 224, .35); }
.lang-chip.is-active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* The site font draws every digit in Persian. English names (n8n, 2021, v2.1) keep Latin digits here. */
.pr-latin, .li-card [dir="ltr"], .gh-repo [dir="ltr"], .gh-repo [dir="auto"], .gh-stat, .gh-legend, .pr-sub, .pr-label {
    /* Latin glyphs from the system font; Persian letters still fall back to Vazirmatn. */
    font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Vazirmatn', sans-serif;
}