@layer custom {

    /* ══════════════ Osnova strani ══════════════ */

    /* Stran se nikoli ne premika vodoravno (Safari drugače dovoli diagonalni scroll) */
    html,
    body {
        overflow-x: clip;
    }

    body {
        font-size: 16px;
    }

    #logo svg {
        height: 1rem;
        color: black;
    }

    h1,
    h2 {
        font-size: 3rem;
        line-height: 1.1;
        font-weight: 500;
    }

    .prose {
        max-width: 64ch;
    }

    .selected {
        font-weight: 700;
        color: oklch(68.036% 0.07139 46.204);
    }

    .container {
        width: 100%;
    }

    /* Od namizja naprej so odmiki večji */
    @media (width >=64rem) {
        :root {
            --space-5: 3rem;
        }
    }

    @media (width >=96rem) {
        html {
            font-size: 20px;
        }
    }


    /* ══════════════ Postavitev: .wrap ══════════════ */

    .wrap {
        padding: var(--space-5);
        gap: var(--space-4);
    }

    .wrap.full {
        padding: var(--space-5) 0;
    }

    /* Prvo sekcijo na vsaki podstrani pripelji bližje meniju … */
    main>section:first-child>.wrap {
        padding-top: 0;
    }

    /* … razen če se stran začne z barvnim ozadjem — tam padding-top ostane */
    main>section:first-child:is(.bg-elevated, .bg-secondary)>.wrap {
        padding-top: var(--space-5);
    }


    /* ══════════════ Slike ══════════════ */

    picture,
    img {
        min-width: 100%;
        aspect-ratio: 1 / 1.25;
    }

    @media (width >=48rem) {

        picture,
        img {
            min-height: 100%;
            aspect-ratio: unset;
        }
    }

    .imgRadius1 {
        border-radius: 1rem 6rem 6rem 6rem;
    }

    .imgRadius2 {
        border-radius: 1rem 6rem 1rem 1rem;
    }

    .imgRadius3 {
        border-radius: 50rem 50rem 1rem 1rem;
    }

    .imgRadius4 {
        border-radius: 6rem 1rem 6rem 1rem;
    }


    /* ══════════════ Hero ══════════════ */

    #hero {
        padding-top: 0;
        min-height: calc(100svh - 72px);
    }

    .mobileHeroImg {
        max-height: 30vh;
    }

    @media (width >=48rem) {
        .mobileHeroImg {
            max-height: none;
        }
    }

    @media (width >=64rem) {
        #hero {
            min-height: auto;
        }
    }


    /* ══════════════ Stran 404 ══════════════ */

    /* Vsebine je malo — brez najmanjše višine bi obvisela tik pod menijem,
       pod njo pa bi do noge zijala praznina. Sredinsko poravnavo prinese
       .wrap.col.justify-center iz HTML. */
    #notfound>.wrap {
        min-height: 70svh;
    }

    /* Drobna vrstica z drugim jezikom pod povezavami — povezava naj bo
       berljiva, a še vedno bolj tiha od glavnih gumbov. */
    #notfound .text-muted a {
        color: var(--text);
        text-decoration: underline;
        text-underline-offset: 3px;
    }


    /* ══════════════ Mreži grid1 in grid2 ══════════════ */

    .grid1 {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: min-content max-content;
        padding-bottom: 2rem;
    }

    .grid2 {
        display: grid;
        grid-template-columns: 70vw 70vw 70vw 70vw;
        grid-template-rows: 1fr;
        padding: 0 var(--space-5);
        overflow-x: auto;
        /* overflow-x: auto sicer izračuna overflow-y v "auto" — na iOS je zato
           karusel mogoče vleči tudi navpično. Z "hidden" ostane samo vodoravno. */
        overflow-y: hidden;
        /* Prst v karuselu premika samo po x; navpični swipe pripada strani. */
        touch-action: pan-x;
        scroll-snap-type: x mandatory;
        /* Vodoravni scroll karuselja se ne prenese na stran (Safari: swipe "nazaj") */
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .grid2::-webkit-scrollbar {
        display: none;
    }

    /* Snap točke na dejanskih elementih mreže (picture), ne na img —
       Safari sicer med navpičnim scrollom "lovi" vodoravne snap točke. */
    .grid2>picture {
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .grid2 img {
        aspect-ratio: 1 / 1.5;
    }

    @media (width >=48rem) {

        .grid1,
        .grid2 {
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 1fr auto;
        }

        /* Od tablice naprej grid2 ni več karusel — brez scroll containerja in snapa.
           overflow-y in touch-action moramo počistiti skupaj z overflow-x: če ena os
           ni "visible", brskalnik drugo izračuna v "auto" in mreža spet postane scroller. */
        .grid2 {
            overflow-x: visible;
            overflow-y: visible;
            touch-action: auto;
            scroll-snap-type: none;
        }

        /* Sekcija z eno samo sliko (npr. "O meni" na domači strani): slika
           zapolni prosti stolpec, da v mreži ne ostane luknja. */
        .grid1>picture:only-of-type {
            grid-column: span 2 / span 2;
        }
    }

    @media (width >=64rem) {

        .grid1,
        .grid2 {
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr;
        }

        .grid2 img {
            scroll-snap-align: center;
            aspect-ratio: 1 / 1.3;
        }

        /* Na namizju v portfeljskem karuselu vedno samo tri slike */
        .grid2> :nth-child(n+4) {
            display: none;
        }
    }

    @media (width >=80rem) {
        .grid2 {
            padding: 0 calc(((100vw - 1250px) / 2) + var(--space-5));
        }
    }

    @media (width >=96rem) {
        .grid2 {
            padding: 0 calc(((100vw - 1500px) / 2) + var(--space-5));
        }
    }

    /* Besedilni stolpec ob sliki — čez celo širino, na namizju v svoj stolpec.
       Na domači strani (#aboutText) je mreža na telefonu enostolpčna, zato tam
       razpon velja šele od tablice naprej; podstrani (.about-text) ga imajo takoj. */
    .about-text {
        grid-column: span 2 / span 2;
        grid-row-start: 2;
    }

    @media (width >=48rem) {
        #aboutText {
            grid-column: span 2 / span 2;
            grid-row-start: 2;
        }
    }

    @media (width >=64rem) {

        #aboutText,
        .about-text {
            grid-column: span 1 / span 1;
            grid-row-start: 1;
        }
    }

    /* Od 1280 px naprej je vsebina omejena na sredino zaslona.
       Pravilo mora stati za .grid1 — ker je enako specifično, na širokih
       zaslonih namenoma prepiše njegov padding-bottom (2rem → --space-5). */
    @media (width >=80rem) {
        .wrap {
            padding: var(--space-5) calc(((100vw - 1250px) / 2) + var(--space-5));
        }
    }

    @media (width >=96rem) {
        .wrap {
            padding: var(--space-5) calc(((100vw - 1500px) / 2) + var(--space-5));
        }
    }


    /* ══════════════ Gumbi ══════════════ */

    button,
    a.btn,
    a.btn-sec,
    a.btn-ter {
        font-size: 0.8rem;
        font-weight: 600;
        border-radius: 10rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        width: fit-content;
    }

    a.btn-ter {
        background-color: var(--background);
    }

    button.btn-clear {
        background-color: transparent;
        border: none;
        padding: 0;
    }

    /* Gumb samo z ikono (Instagram) */
    .btn.ig {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
        font-weight: 400;
    }


    /* ══════════════ Kartice ══════════════ */

    .cards-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-4);
        width: 100%;
    }

    @media (width >=48rem) {
        .cards-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (width >=64rem) {
        .cards-grid {
            grid-template-columns: 1fr 1fr 1fr;
        }
    }

    .card {
        background: var(--surface);
        border-radius: 1.5rem;
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }

    .card :is(picture, img) {
        min-width: unset;
        min-height: unset;
        aspect-ratio: 4 / 3;
    }

    .card img {
        border-radius: 0;
        object-fit: cover;
        width: 100%;
    }

    .card-body {
        padding: var(--space-4);
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        flex: 1;
    }

    .card-body h3 {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.2;
    }


    /* ══════════════ Informativni bloki ══════════════ */

    .info-blocks {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        width: 100%;
    }

    @media (width >=48rem) {
        .info-blocks {
            grid-template-columns: 1fr 1fr 1fr;
        }

        /* Štirje bloki (npr. kontaktni podatki z Instagramom): 2×2 na tablici … */
        .info-blocks.cols-4 {
            grid-template-columns: 1fr 1fr;
        }
    }

    /* … in v eni vrstici na namizju. */
    @media (width >=64rem) {
        .info-blocks.cols-4 {
            grid-template-columns: repeat(4, 1fr);
        }
    }

    .info-block {
        padding: var(--space-4);
        background: var(--background);
        border-radius: 1.5rem;
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        text-align: left;
    }

    .info-block h3 {
        font-size: 1.25rem;
        font-weight: 500;
        line-height: 1.2;
    }


    /* ══════════════ Tečaji — uredniška lista (ne kartice) ══════════════ */

    .course-list {
        width: 100%;
    }

    .course-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-3);
        padding: var(--space-4) 0;
        border-top: 1px solid var(--elevated);
    }

    .course-row:last-child {
        border-bottom: 1px solid var(--elevated);
    }

    .course-row h3 {
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    @media (width >=48rem) {
        .course-row {
            grid-template-columns: 180px 1fr auto;
            align-items: start;
            gap: var(--space-4);
        }
    }


    /* ══════════════ Galerija — CSS columns masonry ══════════════ */

    .gallery-masonry {
        columns: 1;
        column-gap: var(--space-3);
        padding: var(--space-5);
    }

    @media (width >=48rem) {
        .gallery-masonry {
            columns: 2;
        }
    }

    @media (width >=64rem) {
        .gallery-masonry {
            columns: 3;
        }
    }

    /* Enaka omejitev širine kot pri .wrap */
    @media (width >=80rem) {
        .gallery-masonry {
            padding: var(--space-5) calc(((100vw - 1250px) / 2) + var(--space-5));
        }
    }

    @media (width >=96rem) {
        .gallery-masonry {
            padding: var(--space-5) calc(((100vw - 1500px) / 2) + var(--space-5));
        }
    }

    .gallery-masonry :is(picture, img) {
        min-width: unset;
        min-height: unset;
        aspect-ratio: unset;
    }

    .gallery-masonry picture {
        display: block;
        break-inside: avoid;
        margin-bottom: var(--space-3);
    }

    .gallery-masonry img {
        /* border-radius nastavi gallery-anim.js z inline stylom (naključni imgRadius vzorci) */
        border-radius: 1rem;
        /* no-JS fallback */
        display: block;
        width: 100%;
        height: auto;
    }


    /* ══════════════ Kontaktni linki (enquire) ══════════════ */

    .contact-row {
        display: flex;
        flex-wrap: wrap;
        gap: 0.25rem 0.75rem;
        justify-content: center;
        align-items: center;
        color: var(--muted);
        font-size: 0.95rem;
    }

    .contact-row a {
        color: var(--text);
        text-decoration: underline;
        text-underline-offset: 3px;
    }


    /* ══════════════ Noga ══════════════ */

    /* Na ozkih zaslonih eno pod drugim, od 48rem naprej v vrsti: levo avtorske
       pravice, desno izdelovalec. Razred .wrap ostane, ker prinaša odmike od
       roba, usklajene s preostalo stranjo. */
    footer .footer-inner {
        flex-direction: column;
        align-items: center;
        gap: var(--space-2);
    }

    /* Desno: diskretna navedba izdelovalca — drobno besedilo nad logotipom */
    .footer-credit {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-1);
        color: var(--muted);
        font-size: 0.65rem;
        font-weight: var(--font-normal);
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    /* Prepiše splošni a:hover (--primary je presvetel za drobno besedilo) */
    .footer-credit:hover {
        color: var(--text);
    }

    /* Ko sta sklopa eno pod drugim, ju loči komaj vidna črtica.
       Ista barva kot logotip, da se noga bere kot ena celota. */
    .footer-credit::before {
        content: "";
        flex: none;
        width: 2rem;
        height: 1px;
        background-color: var(--elevated);
        margin-block: var(--space-1) var(--space-2);
    }

    /* Levo: avtorske pravice z drobnejšo opombo pod njimi */
    .footer-rights {
        display: flex;
        flex-direction: column;
        gap: var(--space-1);
        text-align: center;
    }

    .footer-copy {
        font-size: 0.9rem;
    }

    .footer-note {
        color: var(--muted);
        font-size: 0.65rem;
        letter-spacing: 0.02em;
        line-height: 1.2;
    }

    footer svg {
        fill: var(--elevated);
        transition: 0.25s;
    }

    /* Barva znamke Allurify — sproži se ob prehodu čez celo povezavo */
    .footer-credit:hover svg {
        fill: #5551FE;
    }

    @media (width >=48rem) {
        footer .footer-inner {
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: var(--space-2) var(--space-4);
        }

        .footer-rights {
            text-align: left;
        }

        /* Ob desnem robu poravnata besedilo in logotip drug na drugega */
        .footer-credit {
            align-items: flex-end;
        }

        /* V vrsti sta sklopa že ločena s praznim prostorom */
        .footer-credit::before {
            display: none;
        }
    }


    /* ══════════════ Mobilni meni — overlay ══════════════ */

    .mobile-menu {
        position: fixed;
        /* --header-h nastavi mobile-menu.js glede na dejansko višino headerja */
        top: var(--header-h, 72px);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--background);
        z-index: 500;
        display: flex;
        flex-direction: column;
        padding: var(--space-5);

        /* Če je menija več kot zaslona, se scrolla meni — ne stran pod njim */
        overflow-y: auto;
        overscroll-behavior: contain;

        opacity: 0;
        pointer-events: none;
        transition: opacity 280ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .mobile-menu.is-open {
        opacity: 1;
        pointer-events: auto;
    }

    /* Na namizju mobilni meni ni viden */
    @media (width >=64rem) {
        .mobile-menu {
            display: none !important;
        }
    }

    .mobile-menu-nav {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
    }

    .mobile-menu-nav a {
        display: block;
        font-family: 'Cormorant', Georgia, serif;
        font-size: clamp(2.25rem, 7vw, 3rem);
        font-weight: 400;
        line-height: 1.25;
        color: var(--text);
        text-decoration: none;
        padding: 0.45rem 0;
        border-bottom: 1px solid var(--elevated);

        opacity: 0;
        transform: translateY(14px);
        transition:
            opacity 350ms cubic-bezier(0.22, 1, 0.36, 1),
            transform 350ms cubic-bezier(0.22, 1, 0.36, 1),
            color 150ms ease;
    }

    .mobile-menu-nav a:last-child {
        border-bottom: none;
    }

    .mobile-menu-nav a:hover,
    .mobile-menu-nav a[aria-current="page"] {
        color: var(--muted);
    }

    /* Stagger: stran se odpre, linki pridejo zaporedoma */
    .mobile-menu.is-open .mobile-menu-nav a {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-menu.is-open .mobile-menu-nav a:nth-child(1) {
        transition-delay: 50ms;
    }

    .mobile-menu.is-open .mobile-menu-nav a:nth-child(2) {
        transition-delay: 90ms;
    }

    .mobile-menu.is-open .mobile-menu-nav a:nth-child(3) {
        transition-delay: 130ms;
    }

    .mobile-menu.is-open .mobile-menu-nav a:nth-child(4) {
        transition-delay: 170ms;
    }

    .mobile-menu.is-open .mobile-menu-nav a:nth-child(5) {
        transition-delay: 210ms;
    }

    /* Footer menija: Enquire + Instagram levo, jezikovni izbirnik skrajno desno */
    .mobile-menu-footer {
        padding-bottom: var(--space-3);
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 350ms ease 250ms, transform 350ms ease 250ms;
    }

    .mobile-menu.is-open .mobile-menu-footer {
        opacity: 1;
        transform: translateY(0);
    }

    .mobile-menu-actions {
        display: flex;
        align-items: center;
        gap: var(--space-3);
    }

    /* Hamburger ↔ ✕ */
    .show-tablet-down {
        position: relative;
    }

    .show-tablet-down .icon {
        display: inline-block;
        transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .show-tablet-down[aria-expanded="true"] .icon {
        opacity: 0;
        transform: rotate(90deg) scale(0.55);
    }

    .show-tablet-down[aria-expanded="true"]::after {
        content: '✕';
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: inherit;
        font-style: normal;
        font-size: 1.05em;
        color: var(--text);
        animation: xmark-in 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes xmark-in {
        from {
            opacity: 0;
            transform: rotate(-90deg) scale(0.55);
        }

        to {
            opacity: 1;
            transform: rotate(0deg) scale(1);
        }
    }

    /* Zaklep scrollanja strani, ko je meni odprt.
       Na <html> je overflow-x: clip, zato se overflow: hidden z <body> ne prenese
       na viewport — postaviti ga je treba na <html>. position: fixed je za iOS
       Safari, ki overflow: hidden ignorira; JS shrani in vrne odmik. */
    html.menu-open,
    body.menu-open {
        overflow: hidden;
        overscroll-behavior: none;
    }

    body.menu-open {
        position: fixed;
        left: 0;
        right: 0;
        width: 100%;
    }

    /* Ker je <body> fiksiran, header odplava z odmikom — pripnemo ga na vrh,
       da se ujame z zgornjim robom overlaya */
    body.menu-open>header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 600;
        background: var(--background);
    }


    /* ══════════════ Privolitev za piškotke ══════════════
       Panel je pripet na levi rob strani. Ob scrollu (ali po izbiri) zdrsne
       levo iz vidnega polja — na robu ostane samo jeziček, ki ga prikliče nazaj.
       Ker je pod mobilnim menijem (z-index 500), ga odprt meni pokrije. */

    .consent {
        --tab: 2.5rem;
        position: fixed;
        left: 0;
        bottom: var(--space-3);
        z-index: 400;
        display: flex;
        /* Panel in jeziček poravnana po spodnjem robu — oboje ostane v kotu */
        align-items: flex-end;
        transition: transform 520ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Odmik med panelom in jezičkom je del širine, zato zdrsne z njim vred:
       zamik za celotno širino minus jeziček pusti na robu točno jeziček. */
    .consent.is-tucked {
        transform: translateX(calc(var(--tab) - 100%));
    }

    .consent-panel {
        width: min(19rem, calc(100vw - var(--tab) - var(--space-3)));
        display: flex;
        flex-direction: column;
        gap: var(--space-2);
        padding: var(--space-3) var(--space-4);
        background: var(--background);
        border: 1px solid var(--elevated);
        border-left: none;
        border-radius: 0 1.25rem 1.25rem 0;
        box-shadow: 0 18px 40px -24px rgb(36 27 25 / 0.35);
        /* Pospravljen panel je nedosegljiv tudi s tipkovnico — skrijemo ga
           šele, ko se animacija izteče (ob odpiranju je viden takoj). */
        opacity: 1;
        visibility: visible;
        transition: opacity 300ms ease 120ms, visibility 0s;
    }

    /* Ob pospravljanju panel zbledi, preden zdrsne — manj vpliva na vsebino */
    .consent.is-tucked .consent-panel {
        opacity: 0;
        visibility: hidden;
        transition: opacity 220ms ease, visibility 0s 520ms;
    }

    .consent-title {
        font-family: var(--font-heading);
        font-size: 1.15rem;
        line-height: 1.2;
    }

    .consent-body {
        font-size: 0.75rem;
        line-height: 1.45;
        color: var(--muted);
    }

    .consent-actions {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2);
    }

    .consent-tab {
        flex: none;
        display: grid;
        place-items: center;
        width: var(--tab);
        height: var(--tab);
        margin-left: var(--space-2);
        padding: 0;
        color: var(--text);
        background: var(--background);
        border: 1px solid var(--elevated);
        border-left: none;
        border-radius: 0 10rem 10rem 0;
        box-shadow: 0 14px 30px -22px rgb(36 27 25 / 0.45);
        cursor: pointer;
    }

    .consent-tab:hover {
        background: var(--secondary);
    }

    /* Pospravljen jeziček ob prehodu z miško rahlo pokuka izza roba */
    .consent.is-tucked .consent-tab:hover {
        transform: translateX(3px);
    }

    /* Ko je izbira že narejena, jeziček počaka diskretno v ozadju */
    .consent.is-settled .consent-tab {
        opacity: 0.4;
    }

    .consent.is-settled .consent-tab:hover,
    .consent.is-settled .consent-tab:focus-visible {
        opacity: 1;
    }


    /* ══════════════ Animacije ob nalaganju in scrollu ══════════════
       Vse skrite začetne stopnje delijo isto pravilo; razlikujeta se le
       zamik (--hero-delay ali --reveal-delay, nastavi ju JS) in trajanje. */

    .js :is(.hero-item, .hero-img, .reveal-item, .reveal-img, .gallery-reveal) {
        opacity: 0;
        transform: translateY(var(--reveal-shift, 20px));
        transition:
            opacity var(--reveal-time, 700ms) cubic-bezier(0.22, 1, 0.36, 1),
            transform var(--reveal-time, 700ms) cubic-bezier(0.22, 1, 0.36, 1);
        transition-delay: var(--hero-delay, var(--reveal-delay, 0ms));
    }

    .js .hero-item {
        --reveal-time: 800ms;
    }

    /* Slike pridejo mehkeje in dlje */
    .js :is(.hero-img, .reveal-img) {
        --reveal-time: 900ms;
        --reveal-shift: 16px;
    }

    .js .gallery-reveal {
        --reveal-time: 750ms;
        --reveal-shift: 14px;
    }

    .js :is(.hero-loaded .hero-item, .hero-loaded .hero-img, .is-visible) {
        opacity: 1;
        transform: translateY(0);
    }

    @media (prefers-reduced-motion: reduce) {

        .js :is(.hero-item, .hero-img, .reveal-item, .reveal-img, .gallery-reveal) {
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
        }

        .consent {
            transition: none;
        }
    }


    /* ══════════════ View Transitions — oznaka glavne vsebine ══════════════ */

    main {
        view-transition-name: site-main;
    }

}


/* ══════════════ View Transitions: cross-page animacije ══════════════ */

@view-transition {
    navigation: auto;
}

/* Root (header, footer): kratek crossfade — preprečuje "snap" efekt */
::view-transition-old(root) {
    animation: 80ms ease both vt-fade-out;
}

::view-transition-new(root) {
    animation: 80ms ease both vt-fade-in;
}

/* Telefoni: ekspresivna animacija z rahlim premikanjem vsebine */
@media (width < 64rem) {
    ::view-transition-old(site-main) {
        animation: 200ms cubic-bezier(0.4, 0, 1, 1) both vt-out;
    }

    ::view-transition-new(site-main) {
        animation: 360ms cubic-bezier(0, 0, 0.2, 1) 120ms both vt-in;
    }
}

/* Namizje: čist crossfade brez gibanja */
@media (width >=64rem) {
    ::view-transition-old(site-main) {
        animation: 200ms ease both vt-fade-out;
    }

    ::view-transition-new(site-main) {
        animation: 260ms ease 80ms both vt-fade-in;
    }
}

@keyframes vt-out {
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes vt-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
}

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

@keyframes vt-fade-in {
    from {
        opacity: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}