/* Supporting styles for the GSAP animations in js/animations.js */

/*
 * Cross-document view transitions: the browser keeps the old page on
 * screen and crossfades into the new one, so there is never a blank
 * frame between navigations. Unsupported browsers (e.g. Firefox) fall
 * back to a normal instant navigation.
 */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.3s;
}
/* The header is identical on every page — give it its own snapshot and
   skip the blend so it stays rock solid while the page crossfades. */
.main-header {
    view-transition-name: site-header;
}
::view-transition-group(site-header) {
    z-index: 10;
}
::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Masked hero-title reveal (SplitText wraps lines/words) */
.split-line {
    overflow: hidden;
}
.hero-image .split-line {
    padding-bottom: 0.1em;
    margin-bottom: -0.1em;
}
img.hero-image__background {
    will-change: transform;
}

/*
 * Initial states for scroll reveals — only applied when JS is active
 * (html.js, set in head.html and removed again if GSAP fails to load)
 * and the user has no reduced-motion preference.
 * Keep this selector list in sync with js/animations.js.
 */
@media (prefers-reduced-motion: no-preference) {
    /* Header intro plays only once per session — keep it static on
       subsequent navigations so it doesn't flicker between pages. */
    html.js.first-visit .main-header__wrapper {
        opacity: 0;
    }
    /* The hero image stays visible across navigations (hiding it would
       flash the dark container background between pages) — it starts
       slightly zoomed and GSAP settles it to scale 1. The opacity fade
       only plays on the first page view of a session. */
    html.js img.hero-image__background {
        transform: scale(1.08);
    }
    html.js.first-visit img.hero-image__background {
        opacity: 0;
    }
    html.js .hero-image__inner {
        opacity: 0;
    }
    html.js .collection-teaser > header,
    html.js .collection-teaser__image,
    html.js .article-gallery-item,
    html.js .article-single > header,
    html.js .article-content,
    html.js .about-section .__image,
    html.js .about-section .__content,
    html.js .single-photo,
    html.js .download-box,
    html.js .posts-list {
        opacity: 0;
        transform: translateY(28px);
    }
}