.pennant-card {
            clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%);
        }
        @keyframes float {
            0% { transform: translateY(0px) rotate(0deg); }
            50% { transform: translateY(-10px) rotate(2deg); }
            100% { transform: translateY(0px) rotate(0deg); }
        }
        .leaf-animate {
            animation: float 6s ease-in-out infinite;
        }
        .hero-zoom {
            animation: heroZoom 18s ease-in-out infinite alternate;
        }
        @keyframes heroZoom {
            from { transform: scale(1); }
            to { transform: scale(1.08); }
        }
        .album-slide {
            opacity: 0;
            transition: opacity 900ms ease;
        }
        .album-slide.is-active {
            opacity: 1;
        }
        @keyframes starShimmer {
            0%, 100% { opacity: 0.55; transform: scale(1); }
            50% { opacity: 1; transform: scale(1.15); }
        }
        .star-anim {
            display: inline-block;
            animation: starShimmer 2.8s ease-in-out infinite;
        }
        @keyframes sunSpin {
            from { transform: rotate(0deg) scale(1); }
            50%  { transform: rotate(180deg) scale(1.08); }
            to   { transform: rotate(360deg) scale(1); }
        }
        @keyframes rainDrop {
            0%, 100% { transform: translateY(0); opacity: 1; }
            50% { transform: translateY(5px); opacity: 0.6; }
        }
        @keyframes cloudDrift {
            0%, 100% { transform: translateX(0); }
            50% { transform: translateX(5px); }
        }
        @keyframes rainFall {
            0%   { transform: translateY(-16px) skewX(-8deg); opacity: 0; }
            12%  { opacity: 0.72; }
            82%  { opacity: 0.72; }
            100% { transform: translateY(320px) skewX(-8deg); opacity: 0; }
        }
        .rdrop { position: absolute; width: 2.5px; border-radius: 999px; pointer-events: none; animation: rainFall linear infinite; }
        .sun-spin { display: inline-block; animation: sunSpin 6s ease-in-out infinite; }
        .rain-drop { animation: rainDrop 1.4s ease-in-out infinite; }
        .cloud-drift { animation: cloudDrift 4s ease-in-out infinite; }
/* CSS variables para tema dinâmico — sobrescreve as classes Tailwind de primary */
:root {
  --p: #4A6741; --pl: #6B8E61;
  /* tons "card" — tingidos com a cor do tema (atualizados via JS), fallback = sage padrão */
  --card-light-rgb: 233 238 217;
  --card-light2-rgb: 224 230 196;
  --card-dark-rgb: 44 51 43;
  --card-dark2-rgb: 53 61 49;
}
.bg-primary                    { background-color: var(--p)  !important; }
.text-primary                  { color:            var(--p)  !important; }
.border-primary                { border-color:     var(--p)  !important; }
.bg-primary-light              { background-color: var(--pl) !important; }
.text-primary-light            { color:            var(--pl) !important; }
.border-primary-light          { border-color:     var(--pl) !important; }
.hover\:bg-primary:hover       { background-color: var(--p)  !important; }
.hover\:text-primary:hover     { color:            var(--p)  !important; }
.hover\:bg-primary-light:hover { background-color: var(--pl) !important; }
.selection\:bg-primary::selection { background-color: var(--p) !important; }
.ring-primary                  { --tw-ring-color:  var(--p)  !important; }
.bg-primary\/5  { background-color: color-mix(in srgb, var(--p)  5%,  transparent) !important; }
.bg-primary\/10 { background-color: color-mix(in srgb, var(--p)  10%, transparent) !important; }
.bg-primary\/80 { background-color: color-mix(in srgb, var(--p)  80%, transparent) !important; }
.text-primary\/50 { color: color-mix(in srgb, var(--p) 50%, transparent) !important; }
.text-primary\/70 { color: color-mix(in srgb, var(--p) 70%, transparent) !important; }
.text-primary\/80 { color: color-mix(in srgb, var(--p) 80%, transparent) !important; }
.border-primary\/10 { border-color: color-mix(in srgb, var(--p) 10%, transparent) !important; }
.border-primary\/20 { border-color: color-mix(in srgb, var(--p) 20%, transparent) !important; }
.border-primary-light\/50 { border-color: color-mix(in srgb, var(--pl) 50%, transparent) !important; }
.hover\:shadow-\[0_12px_30px_-16px_rgba\(74\,103\,65\,0\.5\)\]:hover { box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--p) 50%, transparent) !important; }