/*
 * Motion added on top of the original design: eased hovers, photos that sharpen in from their
 * blurred preview, and a fade between pages. Layout, colors and type are untouched.
 */

/*
 * Sticky header. Bootstrap's 40px top margin becomes padding, and the negative `top` lets part of it
 * scroll away first: on desktop the logo row stays with 16px above it; where logo and menu
 * stack (≤991px) only the menu row stays. Unscrolled, the page looks exactly as before.
 */
.page-header {
    position: sticky;
    top: -24px;
    z-index: 20;
    margin-top: 0;
    padding-top: 40px;
    background-color: #f0f0f0;
    /* Paint the background edge to edge (the header itself is 90vw wide) without causing overflow. */
    box-shadow: 0 0 0 100vmax #f0f0f0;
    clip-path: inset(0 -100vmax);
    /* Its own view-transition layer, so fading page content never draws over it. */
    view-transition-name: site-header;
}

@media (max-width: 991px) {
    .page-header {
        top: -71px;
    }
}

@media only screen and (max-width: 768px) {
    .page-header {
        top: -65px;
    }
}

/* On the green 7seasonsgarden pages the background is an animated gradient: frost over it instead. */
.greenBackground .page-header {
    background-color: transparent;
    box-shadow: 0 0 0 100vmax transparent;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

@supports (animation-timeline: scroll()) {
    .greenBackground .page-header {
        animation: flosys-header-tint linear both;
        animation-timeline: scroll(root);
        animation-range: 0 120px;
    }
}

@keyframes flosys-header-tint {
    from {
        background-color: rgba(240, 240, 240, 0);
        box-shadow: 0 0 0 100vmax rgba(240, 240, 240, 0);
    }
    to {
        background-color: rgba(240, 240, 240, 0.55);
        box-shadow: 0 0 0 100vmax rgba(240, 240, 240, 0.55);
    }
}

/*
 * Every menu item reserves the active item's 2px border, so switching pages only recolors the box
 * instead of widening one item and shifting the right-aligned menu by 4px.
 */
#navBar a {
    border: 2px solid transparent;
}

/* Hover */

#navBar a,
#postList a,
.seasonstitle a,
footer a {
    transition: color 0.25s ease, opacity 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

#postList a:hover,
.seasonstitle a:hover {
    color: black;
    text-decoration: none;
}

#navBar a[href]:not(.active):hover,
footer a:hover {
    opacity: 0.55;
    text-decoration: none;
}

.gallery img {
    transition: opacity 0.35s ease;
}

.gallery:hover img {
    opacity: 0.85;
}

/* The question's underline fades out on hover instead of disappearing (which also shifted the text 2px). */
.accordion {
    transition: border-color 0.2s ease;
}

.accordion:hover {
    border-bottom: 2px solid transparent;
}

/* Photos: blurred preview (background) until loaded, then a short sharpen-in. */

img[data-loaded] {
    background-image: none !important;
}

img[data-loaded='fresh'] {
    clip-path: inset(0);
    animation: flosys-sharpen 0.6s ease-out;
}

@keyframes flosys-sharpen {
    from {
        filter: blur(14px);
    }
    to {
        filter: blur(0);
    }
}

/* Page transitions (components/PageTransition.tsx) */

::view-transition-old(.page-exit) {
    animation: 160ms ease-in both flosys-fade-out;
}

::view-transition-new(.page-enter) {
    animation: 260ms ease-out 60ms both flosys-fade-in;
}

@keyframes flosys-fade-out {
    to {
        opacity: 0;
    }
}

@keyframes flosys-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
        transition: none !important;
    }
}