/* ================================================================
   seasonal.css — styles for seasonal.js (falling leaves, snow, etc.)
   ================================================================
   Every class here starts with .seasonal- so nothing can collide
   with the design system in styles.css. Purely decorative: the layer
   sits BEHIND the section's text and buttons and ignores clicks.
   ================================================================ */

/* The section that receives decorations. isolation keeps the layer's
   z-index:-1 inside this section (behind its content, above its own
   background) instead of slipping behind the whole page. */
.seasonal-host {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

.seasonal-layer {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Particles fade out over the bottom ~12% so they melt into the next
   section instead of being cut off at the edge. */
.seasonal-sky {
    position: absolute;
    inset: 0;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 98%);
            mask-image: linear-gradient(to bottom, #000 0%, #000 86%, transparent 98%);
}

.seasonal-p {
    position: absolute;
    top: 0;
    display: block;
    will-change: transform;
}

.seasonal-inner {
    display: block;
    width: 100%;
}

.seasonal-inner svg {
    display: block;
    width: 100%;
    height: auto;
}

/* --- Falling (leaves, snow, petals, acorns) --- */
.seasonal-fall {
    top: -60px;
    animation: seasonal-drop linear infinite;
}
.seasonal-fall .seasonal-inner {
    animation: seasonal-sway ease-in-out infinite alternate;
}

@keyframes seasonal-drop {
    to { transform: translateY(var(--seasonal-drop, 900px)); }
}
@keyframes seasonal-sway {
    from { transform: translateX(-18px) rotate(-35deg); }
    to   { transform: translateX(18px)  rotate(35deg); }
}

/* --- Floating (fireflies, bats) --- */
.seasonal-float {
    animation: seasonal-wander ease-in-out infinite alternate;
}
.seasonal-float .seasonal-inner {
    animation: seasonal-pulse 2.6s ease-in-out infinite alternate;
}
.seasonal-noglow .seasonal-inner {
    animation: seasonal-flap 0.5s ease-in-out infinite alternate;
}

@keyframes seasonal-wander {
    from { transform: translate(0, 0); }
    to   { transform: translate(var(--dx, 40px), var(--dy, -30px)); }
}
@keyframes seasonal-pulse {
    from { opacity: 0.15; }
    to   { opacity: 1; }
}
@keyframes seasonal-flap {
    from { transform: scaleY(1); }
    to   { transform: scaleY(0.6); }
}

/* Firefly: a warm glowing dot */
.seasonal-glow {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #F2C14E;
    box-shadow: 0 0 6px 3px rgba(242, 193, 78, 0.75), 0 0 16px 6px rgba(242, 193, 78, 0.35);
}

/* --- Twinkling (stars) --- */
.seasonal-twinkle {
    animation: seasonal-twinkle ease-in-out infinite alternate;
}
@keyframes seasonal-twinkle {
    from { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
    to   { opacity: 0.85; transform: scale(1) rotate(20deg); }
}

/* --- Fireworks --- */
.seasonal-burst {
    animation: seasonal-burst ease-out infinite;
    opacity: 0;
}
@keyframes seasonal-burst {
    0%   { opacity: 0;   transform: scale(0.2); }
    12%  { opacity: 0.9; }
    40%  { opacity: 0;   transform: scale(1); }
    100% { opacity: 0;   transform: scale(1); }
}

/* --- Still decorations in the bottom corners (pumpkins, eggs) --- */
.seasonal-ground {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    display: flex;
    justify-content: space-between;
    padding: 0 1.2rem;
    opacity: 0.9;
}
.seasonal-cluster {
    display: flex;
    align-items: flex-end;
    gap: 0.2rem;
}
.seasonal-cluster svg {
    display: block;
    height: auto;
}

/* Belt and braces: never animate for reduced-motion visitors
   (seasonal.js already skips building the particles for them). */
@media (prefers-reduced-motion: reduce) {
    .seasonal-sky { display: none; }
}

/* Never print the decorations. */
@media print {
    .seasonal-layer { display: none; }
}