/**
 * Trial form block.
 *
 * Values mirror the Tilda original (bebestschool.kz, record rec799963523): a
 * #ffd72e band, the heading at 580 px on the 1200 px grid in 34 px, a 21 px
 * line under it, and a 360 px form — whose own look is in inc/cf7.css. The
 * line drawings are the original's pieces at its places, with its looping
 * animations; they give way below 960 px, where the text and the form centre.
 */

.bbs-trial {
    --bbs-trial-font: 'ApercuPro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
    --bbs-trial-container: 1200px;
    --bbs-trial-gutter: 20px;
    --bbs-trial-yellow: #ffd72e;
    /* Where the text starts, as a share of the grid: 580 of 1200. */
    --bbs-trial-offset: 48.333%;

    position: relative;
    overflow: hidden;
    padding: 50px 0 80px;
    background: var(--bbs-trial-yellow);
    color: #000000;
    font-family: var(--bbs-trial-font);
}

.bbs-trial *,
.bbs-trial *::before,
.bbs-trial *::after {
    box-sizing: border-box;
}

/* ── Drawings ── */
.bbs-trial__decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/*
 * Each piece sits where the original has it: --x and --y from the left and
 * top of the grid, --w its width. The grid is 1200 px here and 960 px below
 * 1200 px, where the original moves them about.
 */
.bbs-trial__piece {
    --bbs-trial-grid: 1200px;

    position: absolute;
    top: var(--y);
    left: calc(50% - var(--bbs-trial-grid) / 2 + var(--x));
    display: block;
    width: var(--w);
    max-width: none;
    height: auto;
    will-change: transform, opacity;
}

.bbs-trial__piece--bigben     { --x: -80px; --y: 73px;  --w: 337px; opacity: 0.9; }
.bbs-trial__piece--cloud-a    { --x: -10px; --y: -20px; --w: 117px; animation: bbs-trial-cloud-a 25.9s linear infinite; }
.bbs-trial__piece--cloud-b    { --x: 350px; --y: -10px; --w: 152px; animation: bbs-trial-cloud-b 4s linear infinite; }
.bbs-trial__piece--cloud-far  { --x: 1098px; --y: 0px;  --w: 160px; animation: bbs-trial-cloud-far 11.2s linear infinite; }
.bbs-trial__piece--envelope-1 { --x: 150px; --y: 10px;  --w: 175px; animation: bbs-trial-envelope-1 2.5s linear infinite; }
.bbs-trial__piece--envelope-2 { --x: -69px; --y: 263px; --w: 107px; animation: bbs-trial-envelope-2 1.5s linear infinite; }
.bbs-trial__piece--envelope-3 { --x: 360px; --y: 420px; --w: 107px; animation: bbs-trial-envelope-3 3.2s linear infinite; }
.bbs-trial__piece--envelope-4 { --x: 230px; --y: 265px; --w: 146px; animation: bbs-trial-envelope-4 2.9s linear infinite; }

/*
 * The original's loops, step for step. An envelope flies in from 170 px to
 * the left, small and clear, settles, and flies off 270 px to the right; the
 * clouds drift and breathe.
 */
@keyframes bbs-trial-envelope-1 {
    0%   { transform: translateX(-170px) scale(0.8); opacity: 0; }
    80%  { transform: none; opacity: 1; }
    100% { transform: translateX(270px); opacity: 0; }
}

@keyframes bbs-trial-envelope-2 {
    0%   { transform: translateX(-170px) scale(0.8); opacity: 0; }
    80%  { transform: none; opacity: 1; }
    100% { transform: translateX(270px); opacity: 0; }
}

@keyframes bbs-trial-envelope-3 {
    0%, 6.25% { transform: translateX(-170px) scale(0.8); opacity: 0; }
    84.375%   { transform: none; opacity: 1; }
    100%      { transform: translateX(270px); opacity: 0; }
}

@keyframes bbs-trial-envelope-4 {
    0%, 20.69% { transform: translateX(-170px) scale(0.8); opacity: 0; }
    75.86%     { transform: none; opacity: 1; }
    100%       { transform: translateX(270px); opacity: 0; }
}

@keyframes bbs-trial-cloud-b {
    0%, 100% { transform: none; opacity: 1; }
    25%      { transform: translate(5px, -5px) scale(1.05); opacity: 0.85; }
    50%      { transform: translate(10px, -10px); opacity: 0.75; }
    75%      { transform: scale(0.95); opacity: 0.9; }
}

@keyframes bbs-trial-cloud-far {
    0%, 100% { transform: none; opacity: 1; }
    20.54%   { transform: translate(5px, -5px) scale(1.05); opacity: 0.85; }
    41.96%   { transform: translate(10px, -10px); opacity: 0.75; }
    67.86%   { transform: scale(0.95); opacity: 0.9; }
}

@keyframes bbs-trial-cloud-a {
    0%, 100% { transform: none; opacity: 1; }
    11.58%   { transform: translate(50px, 10px) scale(1.1); opacity: 0.55; }
    23.17%   { transform: translate(100px, 10px) scale(1.2); opacity: 0.5; }
    35.91%   { transform: translateX(70px) scale(1.15); opacity: 0.7; }
    46.72%   { transform: translateX(20px) scale(1.05); opacity: 0.75; }
    57.14%   { transform: none; opacity: 1; }
    67.57%   { transform: translateX(-20px) scale(1.1); opacity: 0.85; }
    78.76%   { transform: translateX(-40px) scale(1.15); opacity: 0.65; }
    89.19%   { transform: translateX(-10px) scale(1.05); opacity: 0.8; }
}

/* Still drawings, at their resting places, for visitors who ask for less motion. */
@media (prefers-reduced-motion: reduce) {
    .bbs-trial__piece {
        animation: none;
    }
}

/* ── Text and form ── */
.bbs-trial__inner {
    position: relative;
    max-width: var(--bbs-trial-container);
    margin: 0 auto;
    padding: 0 var(--bbs-trial-gutter);
}

.bbs-trial--decor .bbs-trial__content {
    margin-left: var(--bbs-trial-offset);
}

.bbs-trial__content {
    max-width: 560px;
}

/* Without the drawings the text and the form take the middle of the band. */
.bbs-trial:not(.bbs-trial--decor) .bbs-trial__content {
    margin: 0 auto;
    text-align: center;
}

.bbs-trial:not(.bbs-trial--decor) .bbs-trial__form {
    margin-left: auto;
    margin-right: auto;
}

.bbs-trial__title {
    margin: 0;
    font-size: 34px;
    line-height: 1.2;
    font-weight: 700;
}

.bbs-trial__subtitle {
    margin: 9px 0 0;
    font-size: 21px;
    line-height: 1.55;
    font-weight: 400;
}

.bbs-trial__form {
    max-width: 360px;
    margin-top: 13px;
}

.bbs-trial__notice {
    max-width: 360px;
    margin: 20px 0 0;
    padding: 16px 20px;
    border: 1px dashed #000000;
    font-size: 15px;
    line-height: 1.4;
}

/* ── 1199 and below: the 960 px grid ── */
@media (max-width: 1199px) {
    .bbs-trial {
        /* 432 of 960. */
        --bbs-trial-offset: 45%;
    }

    /* The original's places on its 960 px grid. */
    .bbs-trial__piece             { --bbs-trial-grid: 960px; }
    .bbs-trial__piece--bigben     { --x: -80px; --y: 20px; }
    .bbs-trial__piece--cloud-a    { --x: -20px; --y: -60px; --w: 126px; }
    .bbs-trial__piece--cloud-b    { --x: 233px; --y: 80px; }
    .bbs-trial__piece--envelope-1 { --x: 199px; --y: -50px; }
    .bbs-trial__piece--envelope-2 { --x: 220px; --y: 205px; }
    .bbs-trial__piece--envelope-4 { --x: 265px; --y: 313px; }

    /* These two sit off the right of the 960 px grid there. */
    .bbs-trial__piece--cloud-far,
    .bbs-trial__piece--envelope-3 {
        display: none;
    }

    .bbs-trial__title {
        font-size: 31px;
    }
}

/* ── 959 and below: no drawings, everything centred ── */
@media (max-width: 959px) {
    .bbs-trial {
        padding: 37px 0 60px;
    }

    .bbs-trial__decor {
        display: none;
    }

    .bbs-trial--decor .bbs-trial__content,
    .bbs-trial__content {
        max-width: 489px;
        margin: 0 auto;
        text-align: center;
    }

    .bbs-trial__form {
        margin-left: auto;
        margin-right: auto;
    }

    .bbs-trial__title {
        font-size: 30px;
    }

    .bbs-trial__subtitle {
        margin-top: 6px;
        font-size: 19px;
    }
}

/* ── 479 and below: a tighter form, the width of the screen ── */
@media (max-width: 479px) {
    .bbs-trial {
        --bbs-trial-gutter: 16px;

        padding: 36px 0 44px;
    }

    .bbs-trial__title {
        font-size: 25px;
    }

    .bbs-trial__subtitle {
        font-size: 16px;
    }

    .bbs-trial__form {
        max-width: none;
        margin-top: 16px;
    }

    .bbs-trial .bbs-cf7 {
        --bbs-cf7-height: 44px;
        --bbs-cf7-gap: 12px;
    }
}