/* =============================================================================
   InvestProp — Advantage showcase («چرا اینوست پراپ»)
   -----------------------------------------------------------------------------
   Used by `site/index/about.blade.php`, driven by `site/assets/js/about.js`.
   Replaces the old Swiper "cards" carousel with a pinned stage: the illustration
   stands still in the middle of the screen while the seven advantages scroll
   past it, and the render swaps for the chapter that has reached the middle.

   Nothing else on the home page is scroll-driven, and no other section gives an
   image this much room — which is the whole point of the layout.

   Everything is scoped to `.ab-show`, 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 atlas.css / bento.css / roadmap.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.

   Two layouts, one content set
   ----------------------------
     • ≥992px — `.ab-stage` is `position: sticky` inside a column as tall as the
       chapter list, so it stays centred for the whole scroll. The chapters dim
       except the one that owns the stage.
     • <992px — the stage is `display: none` and each chapter carries its own
       illustration (`.ab-step__media`). Sticky panels and phones do not mix,
       and a grid item can only stick inside its own row anyway. The two image
       sets never both download: whichever one is `display: none` holds lazy
       images that never intersect anything.

   And with about.js blocked: no chapter is dimmed, the stage rests on the first
   illustration, and the section is a plain readable list. Nothing is hidden.
   ========================================================================== */

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

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

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

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

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

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

/* -----------------------------------------------------------------------------
   Ambient background
   -----------------------------------------------------------------------------
   Pinned to the section, not to the stage, so the light stays put while the
   chapters travel through it. `overflow: hidden` on the layer keeps an orb from
   widening the page — the usual source of horizontal scroll on mobile.
   -------------------------------------------------------------------------- */
.ab-show__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.ab-show__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: .5;
}

.ab-show__orb--a {
    inset-block-start: 8vh;
    inset-inline-start: -100px;
    width: 460px;
    height: 460px;
    background: radial-gradient(circle, rgba(0, 123, 255, .34), rgba(0, 123, 255, 0) 70%);
}

.ab-show__orb--b {
    inset-block-end: 6vh;
    inset-inline-end: -140px;
    width: 420px;
    height: 420px;
    background: radial-gradient(circle, rgba(94, 210, 236, .20), rgba(94, 210, 236, 0) 70%);
}

html:not(.dark) .ab-show__orb { opacity: .34; }

/* -----------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.ab-head {
    max-width: 720px;
    margin-inline: auto;
    margin-bottom: clamp(28px, 4vw, 52px);
    text-align: center;
}

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

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

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

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

.ab-head__title b {
    background: linear-gradient(96deg, var(--ab-primary-2) 0%, var(--ab-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 900;
}

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

/* -----------------------------------------------------------------------------
   The track
   -----------------------------------------------------------------------------
   Deliberately NOT `align-items: start`: the stage column has to stretch to the
   full height of the chapter list, because a sticky element can only travel
   inside its own grid area.
   -------------------------------------------------------------------------- */
.ab-track {
    display: grid;
    gap: clamp(28px, 5vw, 76px);
}

@media (min-width: 992px) {
    .ab-track {
        grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    }
}

/* -----------------------------------------------------------------------------
   The pinned stage
   -----------------------------------------------------------------------------
   The illustrations are transparent PNGs that already carry their own card,
   bevel and glow, so the stage draws NO frame around them — a second border
   would read as a card inside a card. What it draws is the light they sit in:
   a halo, an orbit ring, and the chapter number standing behind the glass.
   -------------------------------------------------------------------------- */
.ab-stage-col { position: relative; }

.ab-stage {
    position: sticky;
    inset-block-start: 0;
    /* svh, not vh: on a phone `vh` is the *large* viewport, so a stage sized in
       vh is taller than what is actually on screen while the URL bar is out. */
    height: 100svh;
    display: grid;
    grid-template-rows: auto auto;
    /* The deck and the meter are centred as ONE group. Spreading them across
       the full height leaves the meter stranded at the bottom of the screen,
       reading as a stray element rather than as this stage's ruler. */
    align-content: center;
    justify-items: center;
    gap: 22px;
    padding-block: 40px 32px;
}

/* --- the light ------------------------------------------------------------ */
.ab-deck {
    position: relative;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 100%;
    /* The PNGs carry a wide transparent glow margin — the card inside them is
       only ~62% of the file's width — so the box has to be generous before the
       render reads as big. This height is what actually sizes it: the frames
       are taller than they are wide, so they hit this cap before the width. */
    height: min(80svh, 700px);
}

.ab-deck__halo,
.ab-deck__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    pointer-events: none;
}

.ab-deck__halo {
    width: min(86%, 520px);
    aspect-ratio: 1;
    background: radial-gradient(circle, rgba(28, 138, 255, .30) 0%, rgba(28, 138, 255, .10) 45%, rgba(28, 138, 255, 0) 70%);
    filter: blur(8px);
    animation: ab-breathe 9s ease-in-out infinite alternate;
}

html:not(.dark) .ab-deck__halo {
    background: radial-gradient(circle, rgba(28, 138, 255, .18) 0%, rgba(28, 138, 255, .07) 45%, rgba(28, 138, 255, 0) 70%);
}

.ab-deck__ring {
    width: min(84%, 500px);
    aspect-ratio: 1;
    border: 1px dashed var(--ab-line-2);
    opacity: .65;
    animation: ab-spin 52s linear infinite;
}

.ab-deck__ring::after {
    content: "";
    position: absolute;
    inset: 12%;
    border-radius: 50%;
    border: 1px solid var(--ab-line);
}

/* --- the chapter number, standing behind the glass ------------------------ */
/* Anchored to the stage's start-top corner, not its middle: centred behind a
   500px render the number is simply covered by it. Out here it reads as the
   chapter's page number, and the render's glow still crosses it. */
.ab-deck__nums {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.ab-num {
    position: absolute;
    /* Kept clear of the top of the screen on purpose: the site header is stuck
       up there, and a number sliding under it reads as a clipping bug. */
    inset-block-start: 8%;
    inset-inline-start: 2%;
    font-size: clamp(80px, 9.5vw, 150px);
    font-weight: 900;
    line-height: .8;
    letter-spacing: -.04em;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--ab-line-2);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .5s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

html:not(.dark) .ab-num { -webkit-text-stroke-color: rgba(0, 72, 153, .20); }

.ab-num.is-active {
    opacity: 1;
    transform: none;
}

/* --- the illustrations ---------------------------------------------------- */
.ab-slides {
    position: relative;
    z-index: 1;
    /* 560px against a 404px-wide source is a 1.39x upscale — the ceiling before
       these soft-focus renders start to look resampled rather than just soft. */
    width: min(100%, 560px);
    aspect-ratio: 404 / 506;
    max-height: 100%;
}

/* The rest state is also the ENTER state: a frame waits below the stage and
   rises into it. `.is-out` is the frame that has just been replaced — it leaves
   upward, so a chapter change reads as travel in the scroll direction.
   `.ab-show.is-back` mirrors both, for scrolling back up. */
.ab-frame {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: translateY(54px) scale(.94);
    transition: opacity .45s ease, transform .65s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.ab-frame.is-out {
    transform: translateY(-38px) scale(.97);
}

.ab-show.is-back .ab-frame { transform: translateY(-54px) scale(.94); }
.ab-show.is-back .ab-frame.is-out { transform: translateY(38px) scale(.97); }

.ab-frame.is-active,
.ab-show.is-back .ab-frame.is-active {
    opacity: 1;
    transform: none;
}

.ab-frame img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* The PNG's own glow dies on a light background, so the drop-shadow has to
       carry the lift there; on dark it only deepens what the render has. */
    filter: drop-shadow(0 30px 50px rgba(0, 40, 92, .55));
}

html:not(.dark) .ab-frame img {
    filter: drop-shadow(0 26px 44px rgba(10, 40, 80, .26));
}

.ab-frame.is-active img {
    animation: ab-float 7s ease-in-out infinite alternate;
}

/* -----------------------------------------------------------------------------
   The meter
   -----------------------------------------------------------------------------
   Seven segments: where you are, and a way to jump. Each is a 44px-tall button
   with a 3px bar drawn inside it, so the tap target is honest without a fat
   ruler across the stage.
   -------------------------------------------------------------------------- */
.ab-meter {
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(100%, 500px);
}

.ab-meter__seg {
    flex: 1 1 0;
    display: grid;
    align-items: center;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.ab-meter__seg::before {
    content: "";
    display: block;
    height: 3px;
    border-radius: 3px;
    background: var(--ab-line);
    transition: background-color .35s ease, box-shadow .35s ease, height .25s ease;
}

.ab-meter__seg:hover::before { background: var(--ab-line-2); }

/* Everything before the current chapter counts as covered ground. */
.ab-meter__seg.is-done::before {
    background: color-mix(in srgb, var(--ab-primary) 55%, transparent);
}

.ab-meter__seg[aria-current="true"]::before {
    height: 5px;
    background: var(--ab-grad);
    box-shadow: var(--ab-glow);
}

.ab-meter__seg:focus-visible {
    outline: 2px solid var(--ab-primary-2);
    outline-offset: 2px;
    border-radius: 6px;
}

/* -----------------------------------------------------------------------------
   The chapters
   -------------------------------------------------------------------------- */
.ab-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Chapter 1 has to sit level with the render the moment the stage pins, or the
   section opens with the headline and the illustration on two different lines.
   Both spacers are the same distance: half a screen, less half a chapter. */
.ab-steps::before {
    content: "";
    display: block;
    height: clamp(0px, calc(50svh - 235px), 300px);
}

/* The stage can only stay pinned while its column is still under it. When the
   last chapter is centred, the column has to reach a full viewport past the pin
   or the illustration slides away exactly as the last advantage is being read.
   This tail is what buys that distance. */
.ab-steps::after {
    content: "";
    display: block;
    height: clamp(0px, calc(50svh - 210px), 300px);
}

.ab-step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Tall enough that only one chapter can own the middle of the screen at a
       time — that band is what about.js reads to pick the illustration. */
    min-height: clamp(340px, 54svh, 470px);
    padding-block: 20px;
}

.ab-step__num {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .12em;
    font-variant-numeric: tabular-nums;
    color: var(--ab-sky);
}

html:not(.dark) .ab-step__num { color: #0B62C4; }

/* The rule that trails the number, so a chapter has a visible start edge. */
.ab-step__num::after {
    content: "";
    width: 46px;
    height: 1px;
    background: var(--ab-line-2);
    transition: width .45s cubic-bezier(.22, .61, .36, 1), background-color .35s ease;
}

.ab-step.is-active .ab-step__num::after {
    width: 88px;
    background: var(--ab-grad);
}

.ab-step__title {
    margin: 0;
    font-size: clamp(21px, 2.5vw, 33px);
    font-weight: 900;
    line-height: 1.55;
    color: var(--ab-text);
}

.ab-step__title em {
    font-style: normal;
    background: linear-gradient(96deg, var(--ab-primary-2) 0%, var(--ab-cyan) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

html:not(.dark) .ab-step__title em {
    background: linear-gradient(96deg, #0B62C4 0%, var(--ab-primary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
}

.ab-step__desc {
    margin: 16px 0 0;
    max-width: 46ch;
    font-size: clamp(14.5px, 1.15vw, 16px);
    line-height: 2.1;
    color: var(--ab-muted);
}

/* The chapter that does not own the stage steps back, so the page never shows
   two competing headlines. Armed only when the script is alive. */
@media (min-width: 992px) {
    .ab-show.is-armed .ab-step {
        opacity: .34;
        transition: opacity .45s ease;
    }

    .ab-show.is-armed .ab-step.is-active { opacity: 1; }
}

/* --- the phone layout ----------------------------------------------------- */
/* No pinning below 992px: each chapter carries its own illustration and reads
   as a card. `.ab-step__media` is the only image set that loads here. */
.ab-step__media { display: none; }

@media (max-width: 991.98px) {
    .ab-stage-col { display: none; }

    .ab-steps::before,
    .ab-steps::after { display: none; }

    .ab-steps {
        display: grid;
        gap: 16px;
    }

    .ab-step {
        min-height: 0;
        padding: 22px 20px 26px;
        border: 1px solid var(--ab-line);
        border-radius: 20px;
        background: var(--ab-surface);
    }

    .ab-step__media {
        display: grid;
        place-items: center;
        position: relative;
        margin-bottom: 10px;
    }

    .ab-step__media::before {
        content: "";
        position: absolute;
        width: 280px;
        aspect-ratio: 1;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(28, 138, 255, .26), rgba(28, 138, 255, 0) 70%);
        filter: blur(6px);
    }

    html:not(.dark) .ab-step__media::before {
        background: radial-gradient(circle, rgba(28, 138, 255, .16), rgba(28, 138, 255, 0) 70%);
    }

    .ab-step__media img {
        position: relative;
        width: min(84vw, 320px);
        height: auto;
        filter: drop-shadow(0 22px 36px rgba(0, 40, 92, .5));
    }

    html:not(.dark) .ab-step__media img {
        filter: drop-shadow(0 20px 32px rgba(10, 40, 80, .22));
    }

    .ab-step__desc { max-width: none; }
}

/* -----------------------------------------------------------------------------
   Entrance
   -----------------------------------------------------------------------------
   Only the stage furniture animates in; the chapters must never start at
   `opacity: 0`, because on a section this tall a missed observer would leave a
   whole screen of nothing.
   -------------------------------------------------------------------------- */
.ab-show.is-armed .ab-deck__ring,
.ab-show.is-armed .ab-meter {
    opacity: 0;
    transition: opacity .6s ease;
}

.ab-show.is-armed.is-in .ab-deck__ring { opacity: .65; }
.ab-show.is-armed.is-in .ab-meter { opacity: 1; }

/* -----------------------------------------------------------------------------
   Keyframes
   -------------------------------------------------------------------------- */
@keyframes ab-float {
    from { transform: translateY(-7px); }
    to   { transform: translateY(9px); }
}

@keyframes ab-breathe {
    from { opacity: .75; scale: .96; }
    to   { opacity: 1; scale: 1.04; }
}

@keyframes ab-spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

/* -----------------------------------------------------------------------------
   Reduced motion
   -----------------------------------------------------------------------------
   The pinning stays — it is layout, not motion — but nothing loops, nothing
   travels, and the illustration cuts rather than flies between chapters.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ab-deck__halo,
    .ab-deck__ring,
    .ab-frame.is-active img {
        animation: none;
    }

    .ab-frame,
    .ab-show.is-back .ab-frame,
    .ab-frame.is-out,
    .ab-show.is-back .ab-frame.is-out,
    .ab-num {
        transform: none;
        transition-duration: .01ms;
    }

    .ab-step,
    .ab-step__num::after,
    .ab-meter,
    .ab-deck__ring {
        transition-duration: .01ms;
    }
}