/* ===========================================================================
   BadgeBox landing — the «prezzi» (pricing) page.

   It loads ONLY on that page: lp_render() looks for css/page-<slug>.css and
   adds it if it exists. Whoever reads the home does not pay for a sheet it does not use.

   The values come from tokens.css, like the rest of the landing: no colour
   is born here.

   ── THE SCENE ────────────────────────────────────────────────────────────
   The dots are the licenses and they multiply; the bundles (15, 25, 40, 70)
   light up when the dots reach them; the price in the middle does not
   move. It is the price list told as a drawing: one price per license, fifteen
   or seventy makes no difference.

   The timings are not written by hand one by one — every dot carries its
   index (--i) and every bundle its fraction (--q = n/max), set by the PHP
   from the numbers in the list. Change the numbers and the drawing changes.

   The scene rests in its FINAL STATE. js/scene.js switches the motion on
   by adding `.is-on` when it enters the screen: without JavaScript, or with
   «reduce motion», the page stays whole and tells the same story.
   =========================================================================== */

/* ── opening ───────────────────────────────────────────────────────────── */

.prh { padding-block: clamp(52px, 6.5vw, 92px); }

.prh__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}

.prh__h1 {
    font-size: clamp(34px, 5.2vw, 62px);
    line-height: 1.02;
    letter-spacing: -.03em;
    font-weight: 800;
    margin: 14px 0 16px;
}

.prh__lede {
    font-size: clamp(17px, 1.5vw, 20px);
    line-height: 1.55;
    color: rgba(255, 255, 255, .76);
    max-width: 34em;
}

.prh__cta { display: flex; flex-wrap: wrap; gap: var(--lp-3); margin-top: clamp(24px, 3vw, 34px); }

.prh__below { margin-top: var(--lp-3); font-size: 14px; color: rgba(255, 255, 255, .6); }

/* ── the scene: the licenses that multiply ─────────────────────────────── */

.prs {
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--lp-radius-card);
    padding: clamp(18px, 2.2vw, 26px);
    box-shadow: var(--bbx-shadow-lg);
}

.prs__label {
    font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: rgba(255, 255, 255, .5);
    margin-bottom: 14px;
}

/* The dots: a grid that fills up. Ten per row, so the seventy bundle is
   seven rows tall and the fifteen one a row and a half — the difference
   shows without counting. */
/* Ten columns of REAL dots (14px), spread across the whole card: with
   elastic columns the dot grew as wide as its cell — a fifty-pixel
   bubble, which is not a dot and cannot be counted. */
.prs__dots {
    display: grid;
    grid-template-columns: repeat(10, 14px);
    justify-content: center;
    column-gap: clamp(12px, 1.6vw, 20px);
    row-gap: clamp(9px, 1.1vw, 13px);
    margin-bottom: 20px;
}

.prs__dot {
    display: block;
    width: 14px; height: 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .9);
}

.prs__packs {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, .12);
}

.prs__pack {
    font-size: 14px; font-weight: 700;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(0, 128, 246, .55);
    color: #fff;
}

/* The line at the bottom is the point of the scene: the dots grow, it does
   not change. With no figure to look at, it is what closes the argument, and
   it has the size of a sentence to read, not of a caption. */
.prs__note {
    margin-top: 18px;
    font-size: 16px; line-height: 1.5;
    color: rgba(255, 255, 255, .82);
}

/* ── the motion ────────────────────────────────────────────────────────── */

/* The dots light up in a row, one every 22 milliseconds: a hundred take
   just over two seconds, fifteen take half a second. */
.js .prh__scene .prs__dot { opacity: .12; transform: scale(.45); }

.js .prh__scene.is-on .prs__dot {
    animation: prs-dot .34s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--i) * .022s + .25s);
}

@keyframes prs-dot { to { opacity: 1; transform: none; } }

/* Each bundle arrives when the dots reach it: its fraction times the
   duration of the dots, plus the delay they start with. */
.js .prh__scene .prs__pack { opacity: 0; transform: translateY(6px); }

.js .prh__scene.is-on .prs__pack {
    animation: prs-pack .3s cubic-bezier(.22, .61, .36, 1) forwards;
    animation-delay: calc(var(--q) * 2.2s + .25s);
}

@keyframes prs-pack { to { opacity: 1; transform: none; } }

/* The line arrives at the end, when the dots have finished growing: it is
   the conclusion of what was just seen. */
.js .prh__scene .prs__note { opacity: 0; }
.js .prh__scene.is-on .prs__note { animation: prs-in .4s ease forwards; animation-delay: 2.5s; }

@keyframes prs-in { to { opacity: 1; } }

/* ── below 960: the scene goes under the text ──────────────────────────── */

@media (max-width: 960px) {
    .prh__inner { grid-template-columns: minmax(0, 1fr); }
    .prs { max-width: 460px; }
}

/* ── whoever asked for less motion does not get it ─────────────────────── */

@media (prefers-reduced-motion: reduce) {

    .js .prh__scene .prs__dot,
    .js .prh__scene .prs__pack,
    .js .prh__scene .prs__note { opacity: 1; transform: none; animation: none; }
}