/* /assets/css/maple-leaf.css
 * Maple brand floating leaf — drops onto every product page as a passive
 * hero-area accent. Lifted from products/maplevoice.php so all product
 * marketing pages share the same visual identity.
 */
.maple-hero-leaf {
    position: absolute;
    top: -2rem;
    right: -5rem;
    font-size: 20rem;
    line-height: 1;
    opacity: 0.10;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    animation: mapleLeafFloat 6s ease-in-out infinite;
}
@keyframes mapleLeafFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-20px); }
}
@media (prefers-reduced-motion: reduce) {
    .maple-hero-leaf { animation: none; }
}

/* Dashboard variant — fixed to viewport so it stays in view as user scrolls.
 * Larger + more faded than the hero version. Lives behind all content.
 */
.maple-dashboard-leaf {
    position: fixed;
    top: -2rem;
    right: -4rem;
    font-size: 24rem;
    line-height: 1;
    opacity: 0.12;
    pointer-events: none;
    user-select: none;
    z-index: 0;
    animation: mapleLeafFloat 8s ease-in-out infinite;
}
@media (max-width: 768px) {
    .maple-dashboard-leaf { font-size: 16rem; top: -2rem; right: -4rem; opacity: 0.10; }
}