/* gumball.css — the fact machine. Paired with _gumball.html and gumball.js.
   The machine is the gumball sticker; everything else here is the crank, the
   ball it drops, and the card the fact comes out on. Tokens are site.css's. */

.gb { display: grid; gap: var(--sp-6); align-items: center; margin-top: var(--sp-5); }
@container page (min-width: 44rem) { .gb { grid-template-columns: minmax(11rem, 20rem) minmax(0, 1fr); gap: var(--sp-7); } }

/* the machine: the photograph's own proportions, so the sticker fills it */
.gb-machine { position: relative; width: min(62%, 20rem); aspect-ratio: 771 / 1400;   /* stickers/gumball.webp */ margin-inline: auto; }
@container page (min-width: 44rem) { .gb-machine { width: 100%; } }

.gb-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.gb-btn {
    display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 3rem; padding: 0 var(--sp-5);
    border: 0; border-radius: var(--r-full); background: var(--pink-ink); color: #fff;
    font-weight: 750; font-size: var(--t-ui); cursor: pointer;
    box-shadow: 0 1px 1px rgba(35, 27, 43, .2), 0 10px 20px -10px rgba(174, 53, 128, .7);
    transition: transform .2s var(--spring), background .2s;
}
.gb-btn:hover { background: #8a0e4b; }
.gb-btn:active { transform: translateY(1px) scale(.98); }
.gb-btn-icon { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: rotate .5s var(--spring); }
.gb-btn:hover .gb-btn-icon { rotate: 120deg; }
.gb-count { font-size: var(--t-sm); font-weight: 600; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* the card a fact comes out on: a printed slip */
.gb-out { margin-top: var(--sp-5); min-height: 10rem; }
.gb-card { display: grid; gap: var(--sp-1); max-width: 26rem; padding: var(--sp-5); }
.gb-card.is-new { animation: gb-card-in .5s var(--ease) both; }
.gb-card-no { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--t-sm); font-weight: 700; color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.gb-card-label { font-size: var(--t-h2); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.gb-card-detail { font-size: var(--t-lede); line-height: 1.45; color: var(--ink-soft); }
.gb-card-detail > * { margin: 0; }
@keyframes gb-card-in { from { opacity: 0; translate: 0 14px; rotate: -5deg; } }

/* a gumball: the same six colours as the ones in the photograph */
.gb-ball {
    display: inline-block; flex: none; width: .95em; aspect-ratio: 1; border-radius: 50%;
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 30%),
        radial-gradient(circle at 50% 50%, var(--c) 52%, color-mix(in srgb, var(--c) 68%, #000) 100%);
    box-shadow: 0 1px 2px rgba(35, 27, 43, .3);
}
/* the one dropping out of the machine, under the globe */
.gb-drop { position: absolute; left: 50%; top: 58%; width: 10%; z-index: 2; transform: translate(-50%, -50%); }