/**
 * SHC Formacio - View Transitions
 *
 * Transicions suaus entre pagines amb la View Transitions API
 */

/* ==========================================================================
   Configuracio Global
   ========================================================================== */

@view-transition {
    navigation: auto;
}

/* Fade suau per defecte */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 250ms;
    animation-timing-function: ease-out;
}

/* ==========================================================================
   Exclusions - Elements que NO han de transicionar
   ========================================================================== */

#wpadminbar {
    view-transition-name: none;
}

.curs-sticky-nav {
    view-transition-name: none;
}

.archive-filters {
    view-transition-name: none;
}

/* ==========================================================================
   Header - Persistent durant la transicio
   ========================================================================== */

.site-header {
    view-transition-name: site-header;
}

/* El header sempre per sobre de tot durant la transicio */
::view-transition-group(site-header) {
    z-index: 9999;
}

::view-transition-old(site-header),
::view-transition-new(site-header) {
    animation: none;
}

/* ==========================================================================
   Transicio d'Imatge de Curs (Card -> Hero)
   ========================================================================== */

::view-transition-group(curs-image) {
    animation-duration: 450ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Per sota del header */
    z-index: 1;
}

::view-transition-old(curs-image),
::view-transition-new(curs-image) {
    animation: none;
    mix-blend-mode: normal;
}

::view-transition-image-pair(curs-image) {
    isolation: isolate;
}

/* ==========================================================================
   Transicio de Titol de Curs (Card Title -> Hero Title)
   ========================================================================== */

::view-transition-group(curs-title) {
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 2;
}

::view-transition-old(curs-title),
::view-transition-new(curs-title) {
    animation: none;
    mix-blend-mode: normal;
}

/* ==========================================================================
   Transicio de Subtitol/Excerpt (Card Excerpt -> Hero Subtitle)
   ========================================================================== */

::view-transition-group(curs-excerpt) {
    animation-duration: 400ms;
    animation-delay: 50ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 2;
}

::view-transition-old(curs-excerpt),
::view-transition-new(curs-excerpt) {
    animation: none;
    mix-blend-mode: normal;
}

/* ==========================================================================
   Transicio de Badges (Card Badges -> Hero Badges)
   ========================================================================== */

::view-transition-group(curs-badges) {
    animation-duration: 350ms;
    animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 3;
}

::view-transition-old(curs-badges),
::view-transition-new(curs-badges) {
    animation: none;
    mix-blend-mode: normal;
}

/* ==========================================================================
   Reduir Moviment
   ========================================================================== */

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