/* Decorative background pattern for festive identity. */
.festive-pattern {
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255, 193, 111, 0.16) 0, transparent 26%),
        radial-gradient(circle at 90% 30%, rgba(255, 102, 0, 0.14) 0, transparent 25%),
        radial-gradient(circle at 40% 80%, rgba(255, 240, 200, 0.10) 0, transparent 30%);
    animation: subtlePulse 8s ease-in-out infinite alternate;
}

.reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 600ms ease, transform 600ms ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* In-page hash links: heading is inside .reveal which starts hidden until IO runs — show immediately when that heading is the fragment target. */
.reveal:has(h2:target) {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile nav slide-down animation */
.mobile-nav {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease, padding 0.3s ease;
    padding-top: 0;
    padding-bottom: 0;
}

.mobile-nav.open {
    grid-template-rows: 1fr;
    padding-top: 0.75rem;
    padding-bottom: 0.25rem;
}

/* Active nav link highlight */
.mobile-nav-link.is-active,
.desktop-nav-link.is-active {
    border-color: #fbbf24;
    background-color: #fffbeb;
    color: #92400e;
    font-weight: 700;
}

/* Fragment targets align to headings; inset keeps them clear of the sticky header (logo + nav, can wrap on narrow widths). */
:root {
    --site-header-scroll-padding: 8rem;
}

@media (min-width: 768px) {
    :root {
        --site-header-scroll-padding: 14rem;
    }
}

html {
    scroll-padding-top: var(--site-header-scroll-padding);
}

@keyframes subtlePulse {
    from { opacity: 0.55; }
    to { opacity: 0.9; }
}