/* Emoji rain effect. Emojis are plain text (🤣 🍀), no image files. */
.emoji-rain-container { z-index: 150; pointer-events: none; -webkit-user-select: none; user-select: none; position: fixed; inset: 0%; overflow: hidden; }
.single-rain-emoji { will-change: transform; width: max(200px, 15vw); position: absolute; container-type: inline-size; }
.single-rain-emoji.hidden { opacity: 0; }
[class^="single-rain-emoji-image-"] { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 70cqw; line-height: 1; }

/* the script creates each drop from its class only, so the emoji comes from CSS (add new ones the same way) */
.single-rain-emoji-image-laugh::before { content: "🤣"; }
.single-rain-emoji-image-clover::before { content: "🍀"; }

.btn-wrap { gap: 1.5em; flex-flow: column; align-items: center; display: flex; }
.emoji-rain-btn { cursor: pointer; background-color: var(--bk-accent); color: var(--bk-on-accent); border: 0; border-radius: var(--bk-radius-pill); padding: var(--bk-space-3) var(--bk-space-7); font-family: var(--bk-font-display); font-size: var(--bk-text-xl); box-shadow: var(--bk-shadow-glow); transition: transform .3s cubic-bezier(.45, .422, .269, 1.702), background-color .2s, box-shadow .2s; transform: scale(1) rotate(.001deg); }
.emoji-rain-btn:hover, .emoji-rain-btn:focus-visible { transform: scale(1.05) rotate(.001deg); background-color: var(--bk-green); box-shadow: 0 0 60px 10px color-mix(in srgb, var(--bk-green) 45%, transparent); }   /* turns green on hover (the same green as the hero info pills) */
.emoji-rain-btn:focus-visible { outline: 3px solid var(--bk-orange-200); outline-offset: 3px; }

/* Phones: smaller button, otherwise it is wider than the screen */
@media (max-width: 600px) { .emoji-rain-btn { font-size: var(--bk-text-lg); padding: var(--bk-space-3) var(--bk-space-6); } }