/* Fall Break (Week 14) subtle, theme-aware animation */
.fall-break-row {
    position: relative;
    overflow: hidden;
    isolation: isolate; /* contain the leaves layer */
}

.fall-break-tag {
    position: relative;
    display: inline-block;
    padding-inline: 10px;
    border-radius: 8px;
    background: color-mix(in oklab, currentColor 12%, transparent);
    animation: fallTagPulse 3.2s ease-in-out infinite;
}

@keyframes fallTagPulse {
    0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 165, 0, 0)); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 165, 0, .25)); }
}

.fall-leaves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to right, transparent 0, black 10%, black 90%, transparent 100%);
}

.fall-leaf {
    position: absolute;
    top: -10px;
    font-size: 16px;
    opacity: .65;
    animation-name: leafDrift, leafSpin;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    text-shadow: 0 0 0 rgba(0,0,0,0);
}

@keyframes leafDrift {
    0% { transform: translate3d(var(--x, 0), -10px, 0); opacity: .0; }
    5% { opacity: .65; }
    100% { transform: translate3d(var(--xEnd, 0), calc(100% + 20px), 0); opacity: .0; }
}

@keyframes leafSpin {
    0% { rotate: 0deg; }
    100% { rotate: 360deg; }
}

/* Light/Dark tweaks */
@media (prefers-color-scheme: dark) {
    .fall-break-tag { background: color-mix(in oklab, currentColor 18%, transparent); }
    .fall-leaf { opacity: .8; filter: drop-shadow(0 0 6px rgba(255, 140, 0, .18)); }
}

/* If a JS theme toggle sets [data-theme="dark"] on html/body, respect it */
html[data-theme="dark"] .fall-break-tag,
body[data-theme="dark"] .fall-break-tag { background: color-mix(in oklab, currentColor 18%, transparent); }
html[data-theme="dark"] .fall-leaf,
body[data-theme="dark"] .fall-leaf { opacity: .8; filter: drop-shadow(0 0 6px rgba(255, 140, 0, .18)); }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .fall-break-tag { animation: none; }
    .fall-leaf { animation: none; }
}