/* =============================================================================
   InvestProp — Country Atlas  («مشتریان ما از چه کشورهایی هستند؟»)
   -----------------------------------------------------------------------------
   Used by `site/index/atlas.blade.php`. A rendered globe carrying one marker
   per country, beside a searchable board of every country the section is
   configured with.

   Everything is scoped to `.at-atlas`, the section's own root — NOT to a page
   body class — so the section can be dropped onto another public page without
   dragging home.css along (same rule as bento.css / radar.css / pricing.css).

   Conventions this file must respect (see the site design system):
     • dark is the DEFAULT theme (`html.dark`); light is the opt-in override,
       and neither compiled sheet sets a global text colour — every block here
       declares its own.
     • RTL is the default direction; logical properties throughout, EXCEPT in
       the two geometric layers (the orbit and the globe overlay), which are
       pinned with physical `left` on purpose — see the note at `.at-slot`.

   Three renderings of the same data, in order of preference
   ---------------------------------------------------------
     1. `.at-stage.is-globe` — atlas-globe.js is alive: a canvas globe with the
        country markers positioned over it every frame.
     2. `.at-stage` alone — no JS, no canvas, or a blocked script: the CSS
        orbit rings below, which spin with no script at all.
     3. `.at-board` — always present, and the only accessible/indexable copy of
        the country list. The two stages above are decorative.
   ========================================================================== */

.at-atlas {
    /* --- palette (dark = default) ----------------------------------------- */
    --at-primary: #007BFF;
    --at-primary-2: #1C8AFF;
    --at-cyan: #5ED2EC;
    --at-sky: #8DC4FF;

    --at-surface: rgba(6, 18, 34, .62);
    --at-surface-2: rgba(9, 24, 44, .86);
    --at-line: rgba(141, 196, 255, .14);
    --at-line-2: rgba(141, 196, 255, .28);
    --at-text: #EAF2FF;
    --at-text-2: #C3D4EA;
    --at-muted: #8FA5C2;

    --at-grad: linear-gradient(94.98deg, #007BFF 4.01%, #1C8AFF 103.03%);
    --at-glow: 0 10px 40px -12px rgba(0, 123, 255, .55);
    --at-shadow: 0 24px 70px -30px rgba(0, 0, 0, .85);

    /* the square the globe and the orbit are both laid out in */
    --at-stage: clamp(300px, 42vw, 560px);

    position: relative;
    margin-top: 96px;
    overflow: hidden;
    isolation: isolate;
}

html:not(.dark) .at-atlas {
    --at-surface: rgba(255, 255, 255, .78);
    --at-surface-2: #FFFFFF;
    --at-line: rgba(0, 72, 153, .12);
    --at-line-2: rgba(0, 72, 153, .22);
    --at-text: #0A1A30;
    --at-text-2: #2B4463;
    --at-muted: #5D7492;
    --at-shadow: 0 24px 60px -34px rgba(10, 40, 80, .45);
}

@media (max-width: 767.98px) {
    .at-atlas { margin-top: 64px; }
}

/* --- ambient background ---------------------------------------------------- */
.at-atlas__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.at-atlas__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    opacity: .5;
}

html:not(.dark) .at-atlas__orb { opacity: .26; }

.at-atlas__orb--a {
    inset-inline-start: -8%;
    top: 8%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(0, 123, 255, .42), rgba(0, 123, 255, 0) 66%);
}

.at-atlas__orb--b {
    inset-inline-end: -6%;
    bottom: -12%;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(94, 210, 236, .26), rgba(94, 210, 236, 0) 68%);
}

.at-atlas__grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(to right, rgba(141, 196, 255, .07) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(141, 196, 255, .07) 1px, transparent 1px);
    background-size: 64px 64px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 0%, transparent 75%);
}

html:not(.dark) .at-atlas__grid {
    background-image:
        linear-gradient(to right, rgba(0, 90, 190, .08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(0, 90, 190, .08) 1px, transparent 1px);
}

.at-atlas .container-fluid {
    position: relative;
    z-index: 1;
}

/* --- section header -------------------------------------------------------- */
.at-head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: 44px;
    text-align: center;
}

.at-head__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    margin-bottom: 16px;
    border-radius: 999px;
    border: 1px solid var(--at-line-2);
    background: color-mix(in srgb, var(--at-primary) 10%, transparent);
    color: var(--at-sky);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .02em;
}

html:not(.dark) .at-head__eyebrow { color: #0B62C4; }

.at-head__eyebrow i { font-size: 15px; }

.at-head__title {
    margin: 0;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1.35;
    color: var(--at-text);
}

.at-head__desc {
    margin: 14px 0 0;
    font-size: 15px;
    line-height: 2;
    color: var(--at-muted);
}

/* --- layout ---------------------------------------------------------------- */
.at-layout {
    display: grid;
    gap: 40px;
    justify-items: center;
    align-items: center;
}

@media (min-width: 992px) {
    .at-layout {
        grid-template-columns: var(--at-stage) minmax(0, 1fr);
        gap: 56px;
        justify-items: stretch;
    }
}

.at-stage {
    position: relative;
    width: var(--at-stage);
    height: var(--at-stage);
    flex: 0 0 auto;
}

/* =============================================================================
   Stage rendering 2 — the CSS orbit (no JS / no canvas)
   -----------------------------------------------------------------------------
   Three nested rings of flag chips around the core. Geometry notes, all
   load-bearing:

     • `--r` is a fraction of the stage SIDE (`--at-stage`), not of its radius
       and not a percentage: a `%` inside `translateY()` would resolve against
       the pin itself. So a ring stays inside the square while
       r <= .5 - pin / (2 * stage), and two rings clear each other while
       r2 - r1 > (pin1 + pin2) / 2.
     • the slot is rotated by `--a` on to the ring, `.at-spin` cancels that
       angle statically, and the pin runs the ring's animation in reverse — so
       a flag never turns upside down. The active pin therefore grows with the
       standalone `scale` property, because `transform` is already spoken for.
   ========================================================================== */

.at-halo {
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, rgba(0, 123, 255, .30), rgba(0, 123, 255, 0) 58%),
        radial-gradient(circle at 50% 100%, rgba(94, 210, 236, .18), rgba(94, 210, 236, 0) 60%);
    filter: blur(6px);
}

html:not(.dark) .at-halo { opacity: .55; }

.at-stage.is-globe .at-halo { opacity: 0; }

.at-path {
    position: absolute;
    left: 50%;
    top: 50%;
    width: calc(var(--at-stage) * var(--r) * 2);
    height: calc(var(--at-stage) * var(--r) * 2);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px dashed var(--at-line-2);
    opacity: .7;
    pointer-events: none;
}

html:not(.dark) .at-path { opacity: 1; }

.at-ring {
    position: absolute;
    inset: 0;
    animation: at-spin var(--dur) linear infinite;
    animation-direction: var(--dir);
    will-change: transform;
}

/* NOTE: `left`, not `inset-inline-start`. Under RTL the logical property pins
   the element's RIGHT edge to the centre, and `translate(-50%)` then walks it a
   full pin-width off the orbit — the circle silently becomes a spiral. Nothing
   in a symmetric orbit should mirror anyway. */
.at-slot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--at-stage) * var(--r) * -1));
}

.at-spin {
    display: block;
    transform: rotate(calc(var(--a) * -1));
}

.at-orbit__pin {
    display: grid;
    place-items: center;
    width: calc(var(--size) * var(--pin-k, 1));
    height: calc(var(--size) * var(--pin-k, 1));
    border-radius: 50%;
    border: 1px solid var(--at-line-2);
    background: var(--at-surface-2);
    box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .8);
    overflow: hidden;
    cursor: pointer;
    animation: at-spin var(--dur) linear infinite;
    animation-direction: var(--dir);
    scale: 1;
    transition: scale .35s cubic-bezier(.2, .8, .3, 1), border-color .3s ease, box-shadow .35s ease, opacity .35s ease;
}

html:not(.dark) .at-orbit__pin { box-shadow: 0 6px 18px -10px rgba(10, 40, 80, .6); }

.at-orbit__pin img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    filter: saturate(.9);
    transition: filter .3s ease;
}

.at-orbit__pin.is-active {
    scale: 1.28;
    border-color: var(--at-primary-2);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-primary) 26%, transparent),
                0 14px 34px -14px rgba(0, 123, 255, .9);
    z-index: 3;
}

.at-orbit__pin.is-active img { filter: saturate(1.05); }

.at-orbit__pin.is-dim {
    opacity: .18;
    scale: .86;
}

@keyframes at-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .at-ring,
    .at-orbit__pin { animation: none; }
}

/* =============================================================================
   Stage rendering 1 — the globe
   -----------------------------------------------------------------------------
   `atlas-globe.js` adds `.is-globe` once it is actually drawing, so every rule
   here is an upgrade over the orbit rather than a hole in its place.
   ========================================================================== */

.at-globe {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: grab;
    /* a vertical swipe still scrolls the page; the horizontal axis spins */
    touch-action: pan-y;
    opacity: 0;
    transition: opacity .7s ease;

    /* read by the renderer: a canvas has no other way to know the theme */
    --g-land: #5AAEFF;
    --g-land-back: #2E6DB4;
    --g-ocean-1: rgba(11, 34, 64, .92);
    --g-ocean-2: rgba(3, 11, 26, .96);
    --g-grid: rgba(130, 190, 255, .11);
    --g-rim: rgba(0, 132, 255, .40);
    --g-arc: #5ED2EC;
}

html:not(.dark) .at-globe {
    --g-land: #1560C8;
    --g-land-back: #96BEE9;
    --g-ocean-1: rgba(226, 240, 255, .97);
    --g-ocean-2: rgba(173, 204, 239, .97);
    --g-grid: rgba(20, 90, 170, .15);
    --g-rim: rgba(0, 110, 220, .26);
    --g-arc: #0B72AE;
}

.at-globe.is-grabbing { cursor: grabbing; }

.at-stage.is-globe .at-globe { opacity: 1; }
.at-stage.is-globe .at-orbit { display: none; }

.at-pins {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity .5s ease .3s;
}

.at-stage.is-globe .at-pins { opacity: 1; }

/* The renderer writes `transform: translate3d(x, y, 0) translate(-50%,-50%)`
   from the layer's top-left corner, so no offset here may fight it. */
.at-pin {
    position: absolute;
    top: 0;
    left: 0;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
    transition: filter .25s ease;
}

/* an ordinary country is a glowing dot … */
.at-pin::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--at-cyan);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-cyan) 22%, transparent),
                0 0 12px color-mix(in srgb, var(--at-cyan) 75%, transparent);
}

.at-pin img {
    display: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--at-line-2);
    background: var(--at-surface-2);
    box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .9);
}

/* … a featured one, and whichever is in focus, flies its flag */
.at-pin.is-flag img,
.at-pin.is-active img { display: block; }

.at-pin.is-flag::before,
.at-pin.is-active::before { display: none; }

.at-pin:hover { filter: brightness(1.15); }

.at-pin.is-active img {
    border-color: #fff;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--at-primary) 55%, transparent),
                0 0 26px color-mix(in srgb, var(--at-primary) 70%, transparent);
}

.at-pin.is-dim {
    opacity: .2 !important;
    filter: grayscale(1);
}

.at-pin__label {
    position: absolute;
    top: calc(100% + 7px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 9px;
    border-radius: 999px;
    border: 1px solid var(--at-line-2);
    background: var(--at-surface-2);
    color: var(--at-text);
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.at-pin.is-active .at-pin__label { opacity: 1; }

/* --- the core caption ------------------------------------------------------ */
.at-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: calc(var(--at-stage) * .40);
    height: calc(var(--at-stage) * .40);
    border-radius: 50%;
    text-align: center;
    border: 1px solid var(--at-line-2);
    background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--at-primary) 22%, transparent), transparent 70%),
        var(--at-surface-2);
    backdrop-filter: blur(26px);
    box-shadow: 0 0 70px -18px rgba(0, 123, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .14);
    z-index: 3;
    transition: opacity .4s ease;
}

/* in globe mode a disc in the middle would cover the planet, so the core
   becomes a caption pill under it */
.at-stage.is-globe .at-core {
    top: auto;
    bottom: -4px;
    width: auto;
    height: auto;
    min-width: 172px;
    max-width: 92%;
    padding: 9px 20px;
    border-radius: 999px;
    transform: translate(-50%, 0);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--at-primary) 12%, transparent), transparent),
        var(--at-surface-2);
    box-shadow: 0 18px 44px -22px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .12);
}

.at-ping {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--at-primary) 55%, transparent);
    animation: at-ping 3.4s ease-out infinite;
    pointer-events: none;
}

.at-stage.is-globe .at-ping { display: none; }

@keyframes at-ping {
    0%   { transform: scale(1);    opacity: .55; }
    70%  { transform: scale(1.45); opacity: 0; }
    100% { transform: scale(1.45); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .at-ping { animation: none; opacity: .3; }
}

/* Both faces share one grid cell and cross-fade, so the core never resizes. */
.at-core__face {
    grid-area: 1 / 1;
    display: grid;
    justify-items: center;
    gap: 6px;
    padding-inline: 12px;
    transition: opacity .3s ease, transform .3s ease;
}

.at-stage.is-globe .at-core__face {
    grid-auto-flow: column;
    align-items: center;
    gap: 10px;
    padding-inline: 0;
}

.at-core__face--focus {
    opacity: 0;
    transform: translateY(8px) scale(.94);
    pointer-events: none;
}

.at-stage.has-focus .at-core__face--total {
    opacity: 0;
    transform: translateY(-8px) scale(.94);
}

.at-stage.has-focus .at-core__face--focus {
    opacity: 1;
    transform: none;
}

.at-core__count {
    font-family: dana, yekanbakh, sans-serif;
    font-size: clamp(34px, 5.6vw, 54px);
    font-weight: 900;
    line-height: 1;
    direction: ltr;
    background: linear-gradient(96deg, var(--at-primary-2) 0%, var(--at-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.at-stage.is-globe .at-core__count { font-size: 26px; }

.at-core__label {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.7;
    color: var(--at-muted);
}

.at-core__flag img {
    width: clamp(38px, 6vw, 54px);
    height: auto;
    border-radius: 8px;
    box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .9), 0 0 0 1px var(--at-line-2);
}

.at-stage.is-globe .at-core__flag img { width: 30px; border-radius: 6px; }

.at-core__name {
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 800;
    line-height: 1.6;
    color: var(--at-text);
}

.at-stage.is-globe .at-core__name { font-size: 15px; }

/* --- drag hint ------------------------------------------------------------- */
/* Sits in the empty band ABOVE the sphere: under it would land outside the
   stage box, which the section clips. */
.at-hint {
    position: absolute;
    inset-inline: 0;
    top: 4px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--at-muted);
    opacity: 0;
    transition: opacity .5s ease;
    pointer-events: none;
}

.at-stage.is-globe .at-hint { opacity: 1; }
.at-stage.is-globe.has-dragged .at-hint { opacity: 0; }

.at-hint i {
    font-size: 14px;
    vertical-align: -2px;
    margin-inline-end: 4px;
}

/* =============================================================================
   The board — the accessible, indexable copy of the list
   ========================================================================== */

.at-board {
    width: 100%;
    min-width: 0;
}

.at-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 28px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--at-line);
}

.at-stat {
    display: grid;
    gap: 2px;
    min-width: 120px;
}

.at-stat__num {
    font-family: dana, yekanbakh, sans-serif;
    font-size: 22px;
    font-weight: 900;
    color: var(--at-text);
}

.at-stat__label {
    font-size: 12.5px;
    line-height: 1.8;
    color: var(--at-muted);
}

.at-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.at-search {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 44px;
    flex: 1 1 200px;
    max-width: 260px;
    padding-inline: 14px;
    border-radius: 12px;
    border: 1px solid var(--at-line);
    background: var(--at-surface);
    backdrop-filter: blur(18px);
    color: var(--at-muted);
    transition: border-color .25s ease;
}

.at-search:focus-within { border-color: var(--at-primary-2); }

.at-search i { font-size: 17px; }

.at-search input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--at-text);
    font-size: 13.5px;
    font-weight: 600;
    appearance: none;
    -webkit-appearance: none;
}

.at-search input::placeholder { color: var(--at-muted); }
.at-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.at-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.at-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding-inline: 14px;
    border-radius: 999px;
    border: 1px solid var(--at-line);
    background: transparent;
    color: var(--at-text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease;
}

.at-tab b {
    font-family: dana, yekanbakh, sans-serif;
    font-size: 11px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--at-primary) 16%, transparent);
    color: var(--at-sky);
}

html:not(.dark) .at-tab b { color: #0B62C4; }

.at-tab:hover {
    color: var(--at-text);
    border-color: var(--at-line-2);
}

.at-tab.is-active {
    color: #fff;
    border-color: transparent;
    background: var(--at-grad);
    box-shadow: var(--at-glow);
}

.at-tab.is-active b { background: rgba(255, 255, 255, .22); color: #fff; }

.at-list {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    list-style: none;
    margin: 0;
    padding: 2px 2px 8px;
    max-height: clamp(260px, 34vh, 400px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--at-line-2) transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 88%, transparent 100%);
}

.at-list.is-empty {
    -webkit-mask-image: none;
    mask-image: none;
}

.at-list::-webkit-scrollbar { width: 5px; }

.at-list::-webkit-scrollbar-thumb {
    background: var(--at-line-2);
    border-radius: 999px;
}

.at-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    border-radius: 999px;
    border: 1px solid var(--at-line);
    background: var(--at-surface);
    color: var(--at-text-2);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .25s ease, background-color .25s ease, color .25s ease, transform .25s ease;
}

/* the list is filtered by toggling [hidden], which the flex display would win */
.at-chip[hidden] { display: none; }

.at-chip img {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 0 0 1px var(--at-line-2);
}

.at-chip:hover,
.at-chip.is-active {
    color: var(--at-text);
    border-color: var(--at-primary-2);
    background: color-mix(in srgb, var(--at-primary) 14%, var(--at-surface));
    transform: translateY(-2px);
}

.at-empty {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--at-muted);
}

@media (max-width: 991.98px) {
    .at-atlas { --at-stage: min(360px, 84vw); }
    .at-stage { --pin-k: .74; }
    .at-board { max-width: 620px; }
}

@media (max-width: 575.98px) {
    .at-atlas { --at-stage: min(320px, 90vw); }
    .at-stage { --pin-k: .62; }
    .at-stat { min-width: 96px; }
    .at-search { max-width: none; }
    .at-pin,
    .at-pin img { width: 22px; height: 22px; }
    .at-pin::before { width: 7px; height: 7px; }
    .at-pin__label { font-size: 10.5px; }
    .at-stage.is-globe .at-core { padding: 7px 14px; min-width: 150px; }
    .at-stage.is-globe .at-core__count { font-size: 22px; }
}