/* ================================================================
 * TechLiberty — Beta Stage (TECH-2798)
 * FIFA Ultimate Team TOTW inspired arc + golden podium around the
 * existing BetaProjectCard component. Zero 3rd-party libs — pure
 * CSS custom properties + transforms, one component (BetaStage.razor)
 * drops the --slot-offset index and CSS does the rest.
 *
 * Scoped under .beta-stage so it cannot leak into other pages.
 * ================================================================ */

.beta-stage {
    /* Inherit the palette from beta-program.css / beta-cta-home (loaded
     * in the same <HeadContent> block). Re-declare --beta-accent here
     * so the stage works even when dropped into a section that doesn't
     * set it — value MUST match the existing accent (#d4af37). */
    --beta-accent: #d4af37;
    --beta-accent-warm: #e6c34a;
    --beta-stage-bg: transparent;

    position: relative;
    padding: 40px 0 180px;
    margin: 0 auto;
    max-width: 1280px;
    background: var(--beta-stage-bg);
    isolation: isolate;
}

/* Compact variant (home-page CTA teaser) — smaller arc, lighter dressing.
 * Slot geometry itself comes from Blazor (BetaStage.SlotGeometry uses
 * tighter radius/depth when Compact=true), so the CSS just relaxes the
 * outer padding to match the tighter layout. */
.beta-stage.compact {
    padding: 32px 0 150px;
}

/* =====================  Arc  ===================== */
.beta-stage-arc {
    position: relative;
    /* Transform-style preserve-3d + a generous perspective create the
     * semi-circular recession. transform-origin: bottom centre anchors
     * the rotation around the podium line below. */
    perspective: 1600px;
    perspective-origin: 50% 90%;
    transform-style: preserve-3d;
    min-height: 460px;
    padding: 0 24px;
    /* Arc container MUST NOT swallow pointer events. Flank slots sit at
     * translateZ(-80px) which pushes them behind the arc plane during
     * 3D hit-testing, so clicks at their screen-space centre land on
     * the arc itself and never reach the card. Drop pointer-events on
     * the arc and re-enable them on each slot so every card is
     * individually clickable. */
    pointer-events: none;
}

.beta-stage.compact .beta-stage-arc {
    min-height: 400px;
}

/* Slots are pinned to the arc's horizontal centre line and then shifted
 * by the inline transform. The previous flexbox layout fed a DOM-order
 * offset into every slot on top of translateX, so a card asked to sit
 * at translateX(0) actually landed at its flex column + 0 — producing
 * the three-cards-stacked bug the user reported. Absolute positioning
 * makes the centre line the single source of truth. */
.beta-stage-slot {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 300px;
    margin-left: -150px;
    transform-origin: bottom center;
    will-change: transform;
    /* Transform itself is set inline by BetaStage — Blazor pre-computes
     * translateX/Y/Z, rotateY and scale from each slot's signed angular
     * offset. We only own the transition here. Duration MUST stay in
     * lockstep with StepMilliseconds in BetaStage.razor (currently 850
     * ms) so the server-side ratchet finishes exactly when CSS does. */
    transition: transform .85s cubic-bezier(.22, 1, .36, 1),
                filter .65s ease,
                z-index 0s linear .425s;
    pointer-events: auto;
}

.beta-stage.compact .beta-stage-slot {
    width: 260px;
    margin-left: -130px;
    bottom: 32px;
}

/* Flank slots dim slightly so the center card wins the eye. */
.beta-stage-slot:not(.is-center) {
    filter: saturate(0.9) brightness(0.95);
}

.beta-stage-slot.is-center {
    filter: drop-shadow(0 18px 40px rgba(212, 175, 55, 0.22));
}

/* The "behind" slot (even counts only, ±180° from centre) sits directly
 * behind the hero. Fade and mute it so it reads as a silhouette peeking
 * over the centre card's shoulder rather than a competing card. */
.beta-stage-slot.is-behind {
    filter: saturate(0.55) brightness(0.6) blur(0.5px);
    opacity: 0.78;
}

/* The BetaProjectCard already ships its own hover transform. Inside the
 * stage we turn its hover elevation OFF so the card doesn't fight the
 * arc's own transform stack. */
.beta-stage .beta-card:hover {
    transform: none;
}

.beta-stage .beta-card {
    width: 100%;
    min-height: 380px;
}

/* =====================  Podium  ===================== */
.beta-stage-podium {
    position: absolute;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
    width: min(780px, 86%);
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    pointer-events: none;
}

.beta-stage-podium-ring {
    /* Elliptical golden halo — radial gradient fake for a flat ellipse ring
     * that reads as "stage light hitting the floor". No box-shadow on large
     * radii so the paint cost stays modest (Lighthouse-friendly). */
    width: 100%;
    height: 80px;
    border-radius: 50%;
    background:
        radial-gradient(ellipse at center,
            rgba(212, 175, 55, 0.55) 0%,
            rgba(212, 175, 55, 0.28) 30%,
            rgba(212, 175, 55, 0.10) 55%,
            rgba(212, 175, 55, 0.0) 78%);
    filter: blur(2px);
}

.beta-stage-podium-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-top: -18px;
}

.beta-stage-podium-label {
    font-family: "Russo One", "Jost", sans-serif;
    font-size: clamp(13px, 1.5vw, 16px);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    /* Gold gradient text, falls back to solid --beta-accent when the
     * browser doesn't support background-clip: text. */
    background: linear-gradient(90deg, #b8892a 0%, var(--beta-accent) 35%, var(--beta-accent-warm) 55%, var(--beta-accent) 75%, #b8892a 100%);
    color: var(--beta-accent);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* =====================  Spotlight  ===================== */
.beta-stage-spotlight {
    /* Soft conic / radial glow behind the center card — pure background,
     * no filters, so it rasterises cheap and doesn't stall the main thread. */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    height: 320px;
    pointer-events: none;
    z-index: -1;
    background:
        radial-gradient(ellipse at 50% 35%,
            rgba(212, 175, 55, 0.18) 0%,
            rgba(212, 175, 55, 0.08) 30%,
            rgba(212, 175, 55, 0.0) 60%);
}

/* =====================  Responsive  =====================
 * Slot transforms come from Blazor, so the CSS breakpoints just shrink
 * the card footprint. The arc naturally tightens as slots overlap more
 * — acceptable because the hero card stays legible and the flanks are
 * decorative fill.
 */
@media (max-width: 1199px) {
    .beta-stage-slot {
        width: 270px;
        margin-left: -135px;
    }
}

@media (max-width: 991px) {
    .beta-stage-slot {
        width: 250px;
        margin-left: -125px;
    }
    .beta-stage-arc {
        min-height: 420px;
    }
}

/* Mobile fallback — arc OFF. Cards line up horizontally with scroll-snap
 * so every project is still reachable, but the 3D stack is retired to
 * keep touch scrolling buttery. Podium shrinks to a compact ribbon.
 *
 * Trying to keep the polar arc on a 390 px viewport looks cramped even
 * at aggressive scales (flank faces end up under 100 px wide, radial
 * progress and logos illegible). Swipe-through carousel reads better
 * on touch; selection is driven by the card's own Seç button. */
@media (max-width: 767px) {
    .beta-stage,
    .beta-stage.compact {
        padding: 24px 0 120px;
        max-width: 100%;
    }

    .beta-stage-arc,
    .beta-stage.compact .beta-stage-arc {
        perspective: none;
        transform-style: flat;
        min-height: auto;
        padding: 8px 16px 20px;
        display: flex;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        justify-content: flex-start;
        gap: 16px;
        scrollbar-width: thin;
        /* Re-enable pointer events on the wrapper — the desktop
         * 3D-hit-test workaround isn't needed in a flat carousel. */
        pointer-events: auto;
    }

    /* One override block for BOTH compact and full variants. The mobile
     * layout must win over `.beta-stage.compact .beta-stage-slot` which
     * otherwise re-asserts the absolute centring rules and stacks every
     * card at the same coordinates — visible as the "home cards piled on
     * each other" report. Using the same `.compact` specificity on the
     * mobile override (plus !important on the absolute props) keeps the
     * carousel geometry in force everywhere a phone viewport rules. */
    .beta-stage-slot,
    .beta-stage.compact .beta-stage-slot {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        margin-left: 0 !important;
        flex: 0 0 82vw;
        width: auto !important;
        max-width: 340px;
        transform: none !important;
        scroll-snap-align: center;
        filter: none !important;
    }

    .beta-stage.interactive .beta-stage-slot:hover {
        transform: none !important;
    }

    .beta-stage-spotlight {
        height: 180px;
        width: 100%;
    }

    .beta-stage-podium {
        bottom: 14px;
        width: min(92%, 520px);
    }

    .beta-stage-podium-ring {
        height: 46px;
    }

    .beta-stage-podium-text {
        margin-top: -12px;
    }
}

/* =====================  Reduced motion  ===================== */
@media (prefers-reduced-motion: reduce) {
    .beta-stage-slot {
        /* Under reduced-motion we swap absolute centring for a wrapped
         * flex row — otherwise every card would collapse onto the stage
         * centre with transforms stripped. */
        position: relative;
        left: auto;
        bottom: auto;
        margin-left: 0;
        transition: none !important;
        transform: none !important;
        filter: none !important;
    }
    .beta-stage-arc {
        perspective: none;
        transform-style: flat;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
    }
    .beta-stage-podium-ring {
        filter: none;
    }
}