/*
    Společné styly šablon designu webu. Načítá je web i náhled v content manageru adminu
    ze serveru (/Public/Themes/_base/base.css), takže se nikam nekopírují.
    Platí pro všechny šablony - styly konkrétní šablony jsou v její složce (theme.css).
*/

/*
    animace při zobrazení - jen CSS, bez skriptu; prohlížeč bez animation-timeline obsah ukáže hned.
    Výplň jen "backwards": před vjezdem do okna je prvek schovaný, po animaci už na něm nic neběží.
    S výplní "both" by měl prvek trvale vlastní vrstvu (pozadí další sekce by zakrylo, co do ní
    přesahuje, třeba „+“ v náhledu adminu) a kvůli transform i vlastní rámec pro position:fixed.
*/
@keyframes cm-anim-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes cm-anim-fade{from{opacity:0}to{opacity:1}}

@supports (animation-timeline: view()){
    .cm-anim-rise{animation:cm-anim-rise linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}
    .cm-anim-fade{animation:cm-anim-fade linear backwards;animation-timeline:view();animation-range:entry 0% entry 55%}
}

/*
    dekorace sekce - vzhled každé dekorace dává šablona, tady jen umístění na připravené pozice.
    Vrstva 1 je nad videem na pozadí a pod obsahem (kontejner sekce má z-index 2). Ostatním dětem
    sekce se pozice ani vrstva nemění - video a prolnutí jsou absolutní a sekce nesmí mít vlastní
    vrstvu, jinak by v náhledu adminu zakryla „+“ přesahující do další sekce.
*/
.cm-has-decorations{overflow-x:clip}
.cm-decoration{position:absolute;z-index:1;pointer-events:none;color:var(--cm-decoration-color,currentColor)}
.cm-decoration-pos-top-left{left:0;top:0;transform:translate(-35%,-25%)}
.cm-decoration-pos-top-right{right:0;top:0;transform:translate(35%,-25%)}
.cm-decoration-pos-bottom-left{left:0;bottom:0;transform:translate(-35%,25%)}
.cm-decoration-pos-bottom-right{right:0;bottom:0;transform:translate(35%,25%)}
.cm-decoration-pos-center{left:50%;top:50%;transform:translate(-50%,-50%)}

/* na telefonu jsou dekorace menší a průhlednější, aby nepřekážely textu */
@media (max-width:767px){
    .cm-decoration{scale:.55;opacity:.6}
}

@media (prefers-reduced-motion: reduce){
    .cm-anim-rise,.cm-anim-fade{animation:none}
    .cm-decoration{animation:none !important}
}