/* agent-trust.css
 *
 * Styles of the Trust product subpage (/de/referenzen). Loaded on top of agent-landing.css.
 * Only one thing lives here: the trust-signal scene of _TrustSignals. The cards themselves wear the
 * widget's own lw-trust-* classes (leadwin-nudge.css, bundled into app.css), so their look is the
 * widget's and is not repeated here. This file only adds what the loader does in script out there:
 * where the corner stands, the launcher under it, and which card is on the board when.
 * Deliberately outside the Tailwind pipeline, same as agent-team.css.
 */

/* The mock website. Tall enough for the tallest card, the recommendation seal (heading plus the 176px
 * shield), to stand above the launcher without reaching the browser bar. */
.la-tr-scene {
    height: 390px;
}

@media (min-width: 640px) {
    .la-tr-scene {
        height: 410px;
    }
}

/* The corner the loader pins: 18px from the side, 78px from the bottom (18px edge, 48px launcher, 12px
 * gap). Stretched to the scene's left edge only so the cards have a width to be capped against; the
 * cards themselves hang from its bottom right corner. */
.la-tr-corner {
    position: absolute;
    inset: 0 18px 78px 18px;
    pointer-events: none;
}

/* Out there the board is fixed and flows in the corner; here six boards share it, stacked. The widget
 * hides the board below 480px because the visitor's phone has no room for it; the scene does, and a
 * mock that shows nothing on a phone explains nothing. */
.la-tr-scene .lw-trust-cards {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    max-width: min(264px, 100%);
    cursor: default;
}

/* The review card names its platform with the platform's mark, before the name. */
.la-tr-scene .la-tr-logo {
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* The post author's face: a photo out there, the business's initial on its colour here. This rule and
 * the cover's carry .lw-trust-cards on purpose: the page embeds the real widget, whose leadwin-nudge.css
 * loads after this file and sets both backgrounds at two classes of specificity. */
.la-tr-scene .lw-trust-cards .la-tr-avatar {
    display: grid;
    place-items: center;
    background: #0000ff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* The case study's cover, drawn as a page rather than a photo: a header band and two lines of text.
 * Light in both looks, like a screenshot of a light website would be. */
.la-tr-scene .lw-trust-cards .la-tr-cover {
    position: relative;
    overflow: hidden;
    min-width: 176px;
    background: linear-gradient(135deg, #dbeafe, #ede9fe);
}

.la-tr-scene .la-tr-cover-bar {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 22%;
    background: #fff;
    opacity: .75;
}

.la-tr-scene .la-tr-cover-line {
    position: absolute;
    top: 42%;
    left: 12%;
    width: 58%;
    height: 9%;
    border-radius: 999px;
    background: #0000ff;
    opacity: .7;
}

.la-tr-scene .la-tr-cover-line-short {
    top: 60%;
    width: 38%;
    background: #fff;
    opacity: .9;
}

/* The closed launcher: the loader's 48px circle, 18px from the corner, the sparkles at 28px. Flat, no
 * shadow, like the real one. */
.la-tr-scene .la-tr-launcher {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #0000ff, #7c3aed);
    color: #fff;
}

/* ---------- the rotation: six cards, 4s each, a 24s loop ----------
 * Each board is on for a sixth of the loop (4s = 16.667%). It comes in the way the widget deals a card
 * (lwNudgeIn: 10px up from below, from 96% scale, in about a third of a second), holds, and is gone in
 * the moment the next one arrives, as when the loader swaps the card on its timer. */
.la-tr-scene .la-tr-deal {
    opacity: 0;
    animation: la-tr-deal 24s cubic-bezier(.16, 1, .3, 1) infinite both;
}

.la-tr-scene .la-tr-deal-2 { animation-delay: 4s; }
.la-tr-scene .la-tr-deal-3 { animation-delay: 8s; }
.la-tr-scene .la-tr-deal-4 { animation-delay: 12s; }
.la-tr-scene .la-tr-deal-5 { animation-delay: 16s; }
.la-tr-scene .la-tr-deal-6 { animation-delay: 20s; }

@keyframes la-tr-deal {
    0% { opacity: 0; transform: translateY(10px) scale(.96); }
    1.5%, 16.2% { opacity: 1; transform: none; }
    16.9%, 100% { opacity: 0; transform: none; }
}

/* ---------- reduced motion: no loop, the first card stays ---------- */

@media (prefers-reduced-motion: reduce) {
    .la-tr-scene .la-tr-deal {
        animation: none;
        opacity: 0;
        visibility: hidden;
    }

    .la-tr-scene .la-tr-deal-1 {
        opacity: 1;
        visibility: visible;
    }
}