/* Klapkové (split-flap) logo - animovaná náhrada loga v menu.
   Velikosti podle skutečných stropů v navigation.css: desktop hlavička
   má 94px výšky (logo dnes využívá jen 58 z nich), od 1240px dolů
   (tablet i mobil shodně - web tam dál nerozlišuje) web sám zmenší
   prostor na logo na max. 42px. */

.site-logo--flip {
    --flip-flap-w: 20px;
    --flip-cell-gap: 3px;
    --flip-row-gap: 4px;
    --flip-tile-bg: #1a1c22;
    --flip-tile-fg: #f2e9d4;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

@media (max-width: 1240px) {
    .site-logo--flip {
        --flip-flap-w: 15px;
        --flip-cell-gap: 2px;
        --flip-row-gap: 2px;
    }
}

.flip-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--flip-row-gap);
}

.flip-logo__row {
    display: flex;
    gap: var(--flip-cell-gap);
}

.flip-flap {
    position: relative;
    width: var(--flip-flap-w);
    height: calc(var(--flip-flap-w) * 1.3);
    perspective: 200px;
    border-radius: 2px;
    box-shadow: 0 1px 2px rgba(0,0,0,.3);
}

/* Čtyři vrstvy na klapku: dva statické panely (vždy zobrazují aktuálně
   "usazené" písmeno) a dvě listující vrstvy, co dělají samotný pohyb -
   horní se odklápí a odkrývá nové horní písmeno, dolní dopadá a
   zakrývá nové dolní písmeno. V klidu (mezi překlopeními) jsou vidět
   JEN statické panely - viz opacity v .flip-flap__leaf a její řízení
   v JS. Důvod: panel s CSS transformací (byť nulovou) prohlížeč
   vykresluje na vlastní kompozitní vrstvě, což může text vykreslit o
   zlomek pixelu jinak než normální vrstvu - když by takhle
   "přetransformovaná" vrstva zůstávala v klidu viditelná, jedna
   polovina písmene by mohla vypadat mírně posunutá oproti druhé. */
.flip-flap__panel,
.flip-flap__leaf {
    position: absolute;
    inset: 0;
    background: var(--flip-tile-bg);
}
.flip-flap__panel--top,    .flip-flap__leaf--top    { clip-path: inset(0 0 50% 0); border-radius: 2px 2px 0 0; }
.flip-flap__panel--bottom, .flip-flap__leaf--bottom { clip-path: inset(50% 0 0 0); border-radius: 0 0 2px 2px; }

.flip-flap__leaf {
    z-index: 2;
    backface-visibility: hidden;
    will-change: transform;
    transform-origin: center;
    opacity: 0;
}
.flip-flap__leaf--top {
    transform: rotateX(0deg);
    transition: transform .275s cubic-bezier(.4,0,1,1);
}
.flip-flap__leaf--bottom {
    transform: rotateX(90deg);
    transition: transform .275s cubic-bezier(0,0,.2,1);
}

.flip-flap__glyph {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flip-flap::after {
    content: "";
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: rgba(0,0,0,.5);
    z-index: 3;
    pointer-events: none;
}

.flip-flap__char {
    /* Stejný systémový řez a váha, co dnes používá textová varianta
       loga (.site-logo v navigation.css) - žádný nový font navíc. */
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--flip-tile-fg);
    font-size: calc(var(--flip-flap-w) * 0.64);
    line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
    .flip-flap__leaf { transition: none !important; }
}