/* D-037 sale banner, shared by the Blazor pages and the landing page. Self-contained: the
   landing page doesn't load app.css, so the palette is the board's, spelled out here. It reads
   as a strip of scoreboard — dark board, brass trim, the price hung as tin plates — lit by a
   low summer sun. */
.promo {
    --promo-board: #141210;
    --promo-plate: #F2E7C9;
    --promo-dim: #B3AA94;
    --promo-brass: #C9A227;
    --promo-sun: #F2A93B;
    --promo-ball: #B3261E;

    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
    margin: 0 0 24px;
    padding: 20px 28px 20px 92px;
    border-radius: 14px;
    color: var(--promo-plate);
    background:
        radial-gradient(ellipse 60% 140% at 100% 0%, rgba(242, 169, 59, .38), transparent 70%),
        radial-gradient(ellipse 40% 90% at 0% 100%, rgba(201, 162, 39, .16), transparent 70%),
        var(--promo-board);
    box-shadow: inset 0 0 0 1px rgba(201, 162, 39, .55), inset 0 0 0 5px var(--promo-board),
        inset 0 0 0 6px rgba(201, 162, 39, .25), 0 14px 36px rgba(20, 18, 16, .22);
    font-family: "Inter", system-ui, sans-serif;
    line-height: 1.35;
}

/* A new ball, seam and all, rolling in from the left. */
.promo-ball {
    position: absolute;
    left: 24px;
    top: 50%;
    width: 46px;
    height: 46px;
    margin-top: -23px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #E25A4E 0%, var(--promo-ball) 45%, #6E140F 100%);
    box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
    animation: promo-roll 9s linear infinite;
}

/* The seam is the near half of a great circle: it runs pole to pole, meeting the ball's edge
   at both ends, so it reads as wrapping round the ball rather than sitting on it. Two rows of
   stitches flank a darker groove; ::after shades the limb so they fall away into the curve. */
.promo-ball::before,
.promo-ball::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.promo-ball::before {
    background: center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' transform='rotate(-28 50 50)'%3E%3Cpath d='M50-10A14 60 0 0 1 50 110' stroke='%23D9584A' stroke-opacity='.4' stroke-width='33'/%3E%3Cpath d='M50-10A14 60 0 0 1 50 110' stroke='%235A0F0B' stroke-width='1.6'/%3E%3Cpath d='M36-10A14 60 0 0 1 36 110M40.5-10A14 60 0 0 1 40.5 110M45-10A14 60 0 0 1 45 110M55-10A14 60 0 0 1 55 110M59.5-10A14 60 0 0 1 59.5 110M64-10A14 60 0 0 1 64 110' stroke='%23FFF4E4' stroke-opacity='.92' stroke-width='2.2' stroke-dasharray='1.1 1.8'/%3E%3C/g%3E%3C/svg%3E");
}

.promo-ball::after {
    background: radial-gradient(circle at 40% 38%, transparent 45%, rgba(60, 8, 5, .55) 100%);
}

@keyframes promo-roll {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .promo-ball { animation: none; }
}

.promo-copy {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.promo-kicker {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--promo-sun);
}

.promo-pitch {
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 24px;
    font-weight: 500;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.promo-fine {
    font-size: 13px;
    color: var(--promo-dim);
}

.promo-ticket {
    display: inline-block;
    margin: 0 2px;
    padding: 1px 9px;
    border: 1.5px dashed var(--promo-brass);
    border-radius: 6px;
    background: rgba(201, 162, 39, .12);
    color: var(--promo-plate);
    font-family: "Oswald", "Arial Narrow", sans-serif;
    font-size: 14px;
    letter-spacing: .18em;
    white-space: nowrap;
}

.promo-price {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    font-family: "Oswald", "Arial Narrow", sans-serif;
}

.promo-was {
    align-self: center;
    margin-right: 10px;
    font-size: 18px;
    color: var(--promo-dim);
    text-decoration-color: var(--promo-sun);
    text-decoration-thickness: 2px;
}

.promo-cur {
    font-size: 22px;
    font-weight: 600;
    color: var(--promo-brass);
    margin: 0 2px 6px 0;
}

/* Tin numerals: cream plates, dark figures, a nail at the top of each. */
.promo-plate {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    height: 62px;
    padding: 0 6px;
    border-radius: 4px;
    background: linear-gradient(#FBF4E1, var(--promo-plate) 55%, #DCCFAE);
    color: var(--promo-board);
    font-size: 48px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 3px 0 rgba(0, 0, 0, .35), inset 0 -2px 0 rgba(0, 0, 0, .12);
    transform: rotate(-2deg);
}

.promo-plate:nth-child(even) { transform: rotate(1.5deg); }

.promo-plate::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: #7A6F57;
}

.promo-dot {
    font-size: 40px;
    color: var(--promo-plate);
    margin-bottom: 2px;
}

.promo-act {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.promo-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 22px;
    border-radius: 8px;
    background: linear-gradient(#E0B840, var(--promo-brass));
    color: var(--promo-board);
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 3px 0 #8C6F12;
}

.promo-cta:hover { filter: brightness(1.06); }
.promo-cta:active { transform: translateY(2px); box-shadow: 0 1px 0 #8C6F12; }
.promo-cta:focus-visible { outline: 3px solid var(--promo-sun); outline-offset: 3px; }

.promo-ends {
    font-size: 11px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--promo-dim);
}

@media (max-width: 560px) {
    .promo { padding: 18px 18px 18px 18px; gap: 14px; }
    .promo-ball { top: 18px; right: 18px; left: auto; margin-top: 0; width: 36px; height: 36px; }
    .promo-copy { padding-right: 44px; }
    .promo-pitch { font-size: 20px; }
    .promo-act { flex-direction: row; flex: 1 1 100%; justify-content: space-between; }
}