/* ==========================================================================
   RSB Circular Reveal Heading
   Vanilla CSS port of the 21st.dev "circular-reveal-heading" component.
   Neumorphic disc · rotating label ring · centre logo → image reveal.
   Pairs with includes/circular-reveal-heading.php + Js/rsb-circular-reveal.js
   ========================================================================== */

/* ---- disc ------------------------------------------------------------- */
.rsb-crh{
    /* light neumorphic palette */
    --crh-base:#e6e6e6;      /* disc face            */
    --crh-shd:#bebebe;       /* soft shadow (dark)   */
    --crh-shl:#ffffff;       /* soft shadow (light)  */
    --crh-id:#d1d1d1;        /* inset shadow (dark)  */
    --crh-il:#ffffff;        /* inset shadow (light) */
    --crh-grad-a:#6d6d6d;    /* ring text gradient   */
    --crh-grad-b:#3f3f3f;
    --crh-seg-hover:#087fca; /* glass-blue active text */
    --crh-active-stroke:rgba(255,255,255,.78); /* quiet glass rim */
    --crh-active-glow:rgba(8,127,202,.34);

    /* px per viewBox unit — scales every offset/shadow with rendered size */
    --crh-u:calc(var(--crh-size,400px) / 400);

    position:relative;
    width:var(--crh-size,400px);
    height:var(--crh-size,400px);
    margin-inline:auto;
    border-radius:50%;
    background:var(--crh-base);
    box-shadow:
        calc(16 * var(--crh-u)) calc(16 * var(--crh-u)) calc(32 * var(--crh-u)) var(--crh-shd),
        calc(-16 * var(--crh-u)) calc(-16 * var(--crh-u)) calc(32 * var(--crh-u)) var(--crh-shl);
    transition:box-shadow .5s ease;
    animation:rsbCrhFloat 5s ease-in-out infinite;
    user-select:none;
    -webkit-user-select:none;
}
.rsb-crh:hover{
    box-shadow:
        calc(20 * var(--crh-u)) calc(20 * var(--crh-u)) calc(40 * var(--crh-u)) var(--crh-shd),
        calc(-20 * var(--crh-u)) calc(-20 * var(--crh-u)) calc(40 * var(--crh-u)) var(--crh-shl);
}
@keyframes rsbCrhFloat{
    0%,100%{transform:translateY(0)}
    50%{transform:translateY(calc(-8 * var(--crh-u)))}
}

/* size variants — fluid-capped so the disc never overflows its column */
.rsb-crh--sm{--crh-size:min(250px,72vw);--crh-fs:12px;--crh-track:.22em}
.rsb-crh--md{--crh-size:min(300px,70vw);--crh-fs:13.5px;--crh-track:.25em}
.rsb-crh--lg{--crh-size:min(380px,74vw);--crh-fs:15px;--crh-track:.29em}

.rsb-crh__in{position:absolute;inset:0}

/* ---- inset neumorphic rings ------------------------------------------- */
.rsb-crh__ring{position:absolute;border-radius:50%;background:var(--crh-base)}
.rsb-crh__ring--a{
    inset:calc(2 * var(--crh-u));
    box-shadow:
        inset calc(6 * var(--crh-u)) calc(6 * var(--crh-u)) calc(12 * var(--crh-u)) var(--crh-id),
        inset calc(-6 * var(--crh-u)) calc(-6 * var(--crh-u)) calc(12 * var(--crh-u)) var(--crh-il);
}
.rsb-crh__ring--b{
    inset:calc(12 * var(--crh-u));
    box-shadow:
        inset calc(4 * var(--crh-u)) calc(4 * var(--crh-u)) calc(8 * var(--crh-u)) var(--crh-id),
        inset calc(-4 * var(--crh-u)) calc(-4 * var(--crh-u)) calc(8 * var(--crh-u)) var(--crh-il);
}

/* ---- hover image reveal ------------------------------------------------ */
.rsb-crh__media{
    position:absolute;inset:0;z-index:5;
    display:flex;align-items:center;justify-content:center;
    pointer-events:none;
}
/* A soft halo makes the reference-style reveal feel like a spotlight. */
.rsb-crh__media::before{
    content:"";position:absolute;inset:19%;border-radius:50%;
    background:radial-gradient(circle,rgba(255,255,255,.42),transparent 68%);
    opacity:0;transform:scale(.72);
    transition:opacity .45s ease,transform .55s cubic-bezier(.2,.8,.2,1);
}
.rsb-crh.is-live .rsb-crh__media::before{opacity:1;transform:scale(1)}
/* Fine orbital glass rim around the revealed picture. It is intentionally
   almost invisible until a label is active, then adds premium depth. */
.rsb-crh__media::after{
    content:"";position:absolute;inset:12%;border-radius:50%;
    border:1px solid rgba(255,255,255,.16);
    border-top-color:rgba(255,255,255,.72);
    border-bottom-color:rgba(29,126,190,.28);
    opacity:0;transform:scale(.8) rotate(-20deg);
    box-shadow:inset 0 0 calc(8 * var(--crh-u)) rgba(255,255,255,.08),0 0 calc(12 * var(--crh-u)) rgba(78,174,232,.12);
    transition:opacity .45s ease,transform .7s cubic-bezier(.2,.8,.2,1);
}
.rsb-crh.is-live .rsb-crh__media::after{
    opacity:1;transform:scale(1) rotate(0deg);
    animation:rsbCrhOrbit 9s linear infinite;
}
@keyframes rsbCrhOrbit{to{transform:scale(1) rotate(360deg)}}
.rsb-crh__img{
    position:absolute;inset:0;margin:auto;
    width:75%;height:75%;
    object-fit:cover;
    border-radius:50%;
    border:calc(3 * var(--crh-u)) solid rgba(255,255,255,.72);
    box-shadow:0 calc(10 * var(--crh-u)) calc(24 * var(--crh-u)) rgba(0,0,0,.22);
    filter:brightness(.9) blur(8px);
    will-change:opacity,transform,filter,clip-path;
    opacity:0;
    transform:scale(.72) rotate(-5deg);
    clip-path:circle(34% at 50% 50%);
    transition:opacity .18s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .45s ease,clip-path .5s ease;
}
.rsb-crh__img.is-on{
    opacity:1;transform:scale(1) rotate(0deg);filter:brightness(.9) blur(0);
    clip-path:circle(50% at 50% 50%);
    animation:rsbCrhReveal .55s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes rsbCrhReveal{
    0%{opacity:0;transform:scale(.72) rotate(-7deg);clip-path:circle(24% at 50% 50%);filter:brightness(.75) blur(10px)}
    60%{opacity:1;transform:scale(1.035) rotate(1deg);clip-path:circle(52% at 50% 50%);filter:brightness(.9) blur(0)}
    100%{opacity:1;transform:scale(1) rotate(0);clip-path:circle(50% at 50% 50%);filter:brightness(.9) blur(0)}
}

/* ---- centre content (logo) -------------------------------------------- */
.rsb-crh__center{
    position:absolute;inset:0;z-index:4;
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;
    pointer-events:none; /* never blocks the interactive SVG labels */
    transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease;
}
.rsb-crh__center[href]{pointer-events:auto}
.rsb-crh.is-live .rsb-crh__center{opacity:0;transform:scale(.76);filter:blur(8px)}
.rsb-crh__logo{
    width:60%;height:auto;max-height:54%;
    object-fit:contain;
    filter:drop-shadow(0 calc(6 * var(--crh-u)) calc(14 * var(--crh-u)) rgba(0,0,0,.14));
}

/* ---- rotating label ring ----------------------------------------------- */
.rsb-crh__spin{
    position:absolute;inset:0;z-index:3;
    transform-origin:50% 50%;
    animation:rsbCrhSpin var(--crh-spin,30s) linear infinite;
    will-change:transform;
}
@keyframes rsbCrhSpin{to{transform:rotate(360deg)}}
/* pause while the pointer is on the disc so labels are easy to read/hit */
.rsb-crh.is-paused .rsb-crh__spin,
.rsb-crh.is-live .rsb-crh__spin{animation-play-state:paused}
/* pause all motion while the disc is off-screen (saves CPU/battery) */
.rsb-crh.is-offscreen,
.rsb-crh.is-offscreen .rsb-crh__spin{animation-play-state:paused}

.rsb-crh__svg{width:100%;height:100%;display:block;overflow:visible}
.rsb-crh__seg{
    font-size:var(--crh-fs,14px);
    letter-spacing:var(--crh-track,.3em);
    /* constant weight — changing it on hover reflows the text along the
       path and makes the whole ring look unstable */
    font-weight:600;
    cursor:pointer;
}
.rsb-crh__seg textPath{
    transition:fill .4s ease,stroke .4s ease,stroke-width .4s ease,opacity .4s ease;
    paint-order:stroke fill;
    stroke:transparent;
    stroke-width:0;
    stroke-linejoin:round;
    stroke-linecap:round;
    text-rendering:geometricPrecision;
}
/* Active label — crisp engraved look: a solid readable face, a thin opaque
   rim drawn *under* the glyphs, plus two zero-blur drop-shadows (light on
   top, dark below). Zero blur keeps the Persian text razor sharp; a blurred
   glow is what made it look fuzzy. */
.rsb-crh__seg:hover textPath,
.rsb-crh__seg.is-active textPath{
    fill:var(--crh-seg-hover);
    stroke:var(--crh-active-stroke);
    stroke-width:calc(1.15 * var(--crh-u));
    filter:
        drop-shadow(0 calc(-1 * var(--crh-u)) 0 rgba(255,255,255,.78))
        drop-shadow(0 calc(2 * var(--crh-u)) 0 rgba(10,32,56,.42));
}
/* The active word grows and gently lifts with a spring instead of becoming
   a fuzzy glow. The movement is deliberately small so the ring remains calm. */
.rsb-crh__seg.is-active{
    font-size:calc(var(--crh-fs,14px) * 1.32);
    font-weight:800;
    transform-box:fill-box;
    transform-origin:center;
    will-change:font-size,transform;
    animation:rsbCrhTextSpring .72s cubic-bezier(.2,1.55,.45,1) both;
}
@keyframes rsbCrhTextSpring{
    0%{font-size:var(--crh-fs,14px);transform:translateY(0) scale(1)}
    54%{font-size:calc(var(--crh-fs,14px) * 1.46);transform:translateY(calc(-4 * var(--crh-u))) scale(1.035)}
    78%{font-size:calc(var(--crh-fs,14px) * 1.25);transform:translateY(calc(-1.5 * var(--crh-u))) scale(.99)}
    100%{font-size:calc(var(--crh-fs,14px) * 1.32);transform:translateY(calc(-2.5 * var(--crh-u))) scale(1)}
}
/* Service-card palette, reused by the active circular label. Each tone keeps
   the same glass treatment but gets its own identity color. */
.rsb-crh__seg--green{--crh-seg-hover:#3d9b68;--crh-active-stroke:rgba(96,206,143,.72);--crh-active-glow:rgba(61,155,104,.34)}
.rsb-crh__seg--orange{--crh-seg-hover:#d88727;--crh-active-stroke:rgba(255,194,104,.78);--crh-active-glow:rgba(216,135,39,.34)}
.rsb-crh__seg--red{--crh-seg-hover:#cf4b59;--crh-active-stroke:rgba(255,137,148,.74);--crh-active-glow:rgba(207,75,89,.34)}
.rsb-crh__seg--purple{--crh-seg-hover:#8066d8;--crh-active-stroke:rgba(183,164,255,.76);--crh-active-glow:rgba(128,102,216,.34)}
.rsb-crh__seg--blue{--crh-seg-hover:#087fca;--crh-active-stroke:rgba(112,211,255,.76);--crh-active-glow:rgba(8,127,202,.34)}
/* Keep the ring colorful even before interaction, but intentionally muted so
   the active state still feels special. */
.rsb-crh__seg--green textPath{fill:#4f9b70;opacity:.76}
.rsb-crh__seg--orange textPath{fill:#c1833b;opacity:.76}
.rsb-crh__seg--red textPath{fill:#bd6570;opacity:.76}
.rsb-crh__seg--purple textPath{fill:#7569b5;opacity:.76}
.rsb-crh__seg--blue textPath{fill:#4387b7;opacity:.76}
.rsb-crh__seg.is-active textPath{opacity:1}
/* When the pointer is anywhere on the disc but not yet on a word, gently
   pulse the label rims in sequence. This teaches the interaction without
   adding a loud permanent UI badge. */
.rsb-crh.is-paused:not(.is-live) .rsb-crh__seg textPath{
    stroke:var(--crh-active-stroke);
    stroke-width:calc(1.2 * var(--crh-u));
    filter:
        drop-shadow(0 calc(-1 * var(--crh-u)) 0 rgba(255,255,255,.72))
        drop-shadow(0 calc(2 * var(--crh-u)) 0 var(--crh-active-glow));
    animation:rsbCrhHint 3.4s ease-in-out infinite;
}
.rsb-crh.is-paused:not(.is-live) .rsb-crh__seg:nth-of-type(2) textPath{animation-delay:.68s}
.rsb-crh.is-paused:not(.is-live) .rsb-crh__seg:nth-of-type(3) textPath{animation-delay:1.36s}
.rsb-crh.is-paused:not(.is-live) .rsb-crh__seg:nth-of-type(4) textPath{animation-delay:2.04s}
.rsb-crh.is-paused:not(.is-live) .rsb-crh__seg:nth-of-type(5) textPath{animation-delay:2.72s}
@keyframes rsbCrhHint{
    0%,72%,100%{opacity:.82;stroke-width:calc(1 * var(--crh-u))}
    82%{opacity:1;stroke-width:calc(1.9 * var(--crh-u))}
}
@keyframes rsbCrhTextShimmer{
    0%,100%{opacity:.96;filter:
        drop-shadow(0 calc(1.4 * var(--crh-u)) calc(1 * var(--crh-u)) rgba(255,255,255,.72))
        drop-shadow(0 calc(3.5 * var(--crh-u)) calc(4 * var(--crh-u)) var(--crh-active-glow))}
    50%{opacity:1;filter:
        drop-shadow(0 calc(1.8 * var(--crh-u)) calc(1 * var(--crh-u)) rgba(255,255,255,1))
        drop-shadow(0 calc(4.5 * var(--crh-u)) calc(7 * var(--crh-u)) var(--crh-active-glow))
        drop-shadow(calc(1 * var(--crh-u)) calc(6 * var(--crh-u)) calc(10 * var(--crh-u)) rgba(14,43,76,.26))}
}
.rsb-crh__stop-a{stop-color:var(--crh-grad-a)}
.rsb-crh__stop-b{stop-color:var(--crh-grad-b)}

/* ---- dark theme -------------------------------------------------------- */
[data-theme="dark"] .rsb-crh{
    --crh-base:#1d1d21;
    --crh-shd:rgba(0,0,0,.7);
    --crh-shl:rgba(255,255,255,.06);
    --crh-id:rgba(0,0,0,.6);
    --crh-il:rgba(255,255,255,.07);
    --crh-grad-a:#d9d9e0;
    --crh-grad-b:#a4a4b0;
    --crh-seg-hover:#ffffff;
    --crh-active-stroke:rgba(125,211,252,.7);
}
/* the wordmark glyphs are dark — put the logo on a soft light pad so it
   stays readable on the dark disc (mirrors .rsb-co__avatar's white backer) */
[data-theme="dark"] .rsb-crh__logo{
    width:56%;max-height:52%;
    background:#f4f4f6;
    padding:calc(10 * var(--crh-u)) calc(16 * var(--crh-u));
    border-radius:calc(26 * var(--crh-u));
    box-shadow:0 calc(8 * var(--crh-u)) calc(24 * var(--crh-u)) rgba(0,0,0,.4);
    filter:none;
}
[data-theme="dark"] .rsb-crh__img{filter:brightness(.82)}
[data-theme="dark"] .rsb-crh__seg--green textPath{fill:#78d69a}
[data-theme="dark"] .rsb-crh__seg--orange textPath{fill:#ffc16b}
[data-theme="dark"] .rsb-crh__seg--red textPath{fill:#ff8b98}
[data-theme="dark"] .rsb-crh__seg--purple textPath{fill:#b8a8ff}
[data-theme="dark"] .rsb-crh__seg--blue textPath{fill:#78d6ff}

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
    .rsb-crh{animation:none}
    .rsb-crh__spin{animation:none}
    .rsb-crh__img,.rsb-crh__center,.rsb-crh__media::before,.rsb-crh__media::after,.rsb-crh__seg textPath{transition:none}
    .rsb-crh__img.is-on{animation:none;filter:brightness(.9);clip-path:circle(50% at 50% 50%);transform:none}
    .rsb-crh.is-live .rsb-crh__media::after{animation:none;transform:scale(1)}
    .rsb-crh__seg.is-active{animation:none;transform:none;font-size:calc(var(--crh-fs,14px) * 1.32)}
    .rsb-crh__seg.is-active textPath{animation:none;opacity:1}
    .rsb-crh.is-paused:not(.is-live) .rsb-crh__seg textPath{animation:none;stroke-width:calc(1 * var(--crh-u))}
}
@media (max-width:575.98px){
    .rsb-crh__img{width:72%;height:72%}
    .rsb-crh__logo{width:58%;max-height:52%}
    .rsb-home-work .our-work{margin-top:1rem}
}
@media (max-width:360px){
    .rsb-crh--md{--crh-size:min(270px,70vw)}
    .rsb-crh--lg{--crh-size:min(290px,72vw)}
}

/* ==========================================================================
   Homepage "کارهای ما" column — replaces the old .project-image circle slider
   ========================================================================== */
.rsb-home-work{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    margin-top:clamp(1.2rem,3vw,2.6rem);
}
.rsb-home-work__caption{
    display:block;
    position:relative;
    z-index:4;
    margin-top:.8rem;
    min-height:1.5em;
    clear:both;
}
.rsb-home-work__caption .our-work{
    display:block;
    margin:0!important;
    line-height:1.5;
}
@media (max-width:991.98px){
    /* Bootstrap's col-lg-* already stacks these in most cases; make the
       contract explicit so theme utilities cannot form a two-column wrap. */
    .home-concept > .container > .row > [class*="col-"]{
        flex:0 0 100%;
        width:100%;
        max-width:100%;
        margin-left:0!important;
        margin-right:0!important;
        text-align:center;
    }
    .home-concept > .container > .row > [class*="col-"] .process-image,
    .home-concept > .container > .row > [class*="col-"] .rsb-home-work{
        margin-left:auto!important;
        margin-right:auto!important;
    }
    .home-concept{overflow:visible}
    .rsb-home-work{margin-top:clamp(1.25rem,4vw,2rem);padding-bottom:1rem}
    .rsb-home-work__caption{margin-top:.55rem}
    .rsb-home-work__caption .our-work{margin:0!important}
}

/* ==========================================================================
   Company-intro layout: text + links beside the disc (Company_introduction)
   ========================================================================== */
.rsb-co-crh__panel{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:clamp(1.6rem,4.5vw,3.2rem);
    align-items:center;
    max-width:66rem;
    margin:0 auto;
    padding:clamp(1.8rem,4vw,3rem) clamp(1.4rem,4vw,3rem);
    border-radius:28px;
    background:var(--co-surface,#fff);
    border:1px solid var(--co-surface-line,rgba(0,86,179,.12));
    box-shadow:0 24px 50px -22px rgba(0,86,179,.25);
}
.rsb-co-crh__intro .rsb-co__eyebrow{margin-bottom:.7rem}
.rsb-co-crh__intro .rsb-co__title{margin:0 0 .8rem}
.rsb-co-crh__intro .rsb-co__sub{margin:0;max-width:34rem}
.rsb-co-crh__stage{display:flex;justify-content:center;align-items:center;min-width:0}
.rsb-co-crh__links{
    list-style:none;margin:1.35rem 0 0;padding:0;
    display:flex;flex-wrap:wrap;gap:.55rem;
}
.rsb-co-crh__links a{
    display:inline-flex;align-items:center;gap:.55rem;
    padding:.5rem .95rem;border-radius:999px;
    border:1px solid var(--co-surface-line,rgba(0,86,179,.15));
    background:var(--co-card-bg,#fff);
    color:var(--co-surface-text,#0b2b5e);
    font-size:.85rem;font-weight:600;text-decoration:none;
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.rsb-co-crh__links a i{color:var(--co-accent-2,#0056b3);font-size:.9em}
.rsb-co-crh__links a:hover{
    transform:translateY(-2px);
    border-color:var(--co-accent-2-border,rgba(0,86,179,.5));
    box-shadow:0 8px 18px -8px rgba(0,86,179,.35);
    color:var(--co-surface-text,#0b2b5e);
}
@media (max-width:900px){
    .rsb-co-crh__panel{grid-template-columns:1fr;text-align:center;gap:1.25rem;padding:1.5rem 1rem}
    .rsb-co-crh__stage{order:-1}
    .rsb-co-crh__intro .rsb-co__sub{margin-inline:auto}
    .rsb-co-crh__links{justify-content:center}
}
@media (max-width:575.98px){
    .rsb-co-crh__panel{border-radius:20px;padding:.9rem .65rem 1.25rem}
    .rsb-co-crh__intro .rsb-co__title{font-size:1.55rem}
    .rsb-co-crh__intro .rsb-co__sub{font-size:.88rem;line-height:1.9}
    .rsb-co-crh__links{gap:.4rem;margin-top:.9rem}
    .rsb-co-crh__links a{padding:.42rem .7rem;font-size:.76rem}
}