@font-face {
    font-family: 'CalibriCustomBold';
    src: url('../_fonts/Calibri Bold.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'CalibriCustom';
    src: url('../_fonts/Calibri.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

.seo-nadpis {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.ball {
  position: absolute;
  border-radius: 100%;
  opacity: 0.7;
}

.intro-title {
    font-family: 'CalibriCustomBold', sans-serif; 
    font-weight: normal;
    /* letter-spacing: 1px; */
}

.navbar-title {
    font-family: 'CalibriCustom', sans-serif;
    font-weight: normal;
}

/* Barevná část .cz */
        .accent {
            color: #f0437e;
        }

/* ==========================================================================
   1. GLOBÁLNÍ STYLY
   ========================================================================== */
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #fff;
    color: #333;
}

/* velikost loga */
.navbar-brand img{
    height:16px;
}

/* opraví vertikální zarovnání */
.navbar-brand{
    margin-bottom:0;
}

/* přesný střed navbaru */
.navbar-center{
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    white-space:nowrap;
}

/* navbar musí být relativní kvůli absolutnímu středu */
.navbar .container-fluid{
    position:relative;
}

.navbar-toggler{
    border: none;
    padding: 0;
}

.navbar-toggler:focus,
.navbar-toggler:focus-visible{
    outline: none;
    box-shadow: none;
}

/* Výchozí stav (hamburger) - ten už definuje Bootstrap, 
   ale tímto zajistíme, že se nebude přebíjet při refreshy */
.navbar-toggler.collapsed .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* Stav při otevření (křížek) */
.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(0, 0, 0, 0.7)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M6 6l18 18M6 24L24 6'/%3E%3C/svg%3E") !important;
}

/* Jemná rotace pro efekt */
.navbar-toggler-icon {
    transition: transform 0.3s ease-in-out;
}

.navbar-toggler:not(.collapsed) .navbar-toggler-icon {
    transform: rotate(90deg);
}

/* Přidá odsazení položek v menu, ale jen když je menu sbalené (na mobilu) */
@media (max-width: 991.98px) {
    .navbar-nav .nav-item {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}
/* ==========================================================================
   3. KARTY (Grid & Efekty) index
   ========================================================================== */

/* Čtvercový poměr stran */
.aspect-ratio-square {
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

/* Základní karta */
.card { 
    border: none; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Plynulý pohyb a stín */
    cursor: pointer;
}

/* JEMNÝ HOVER EFEKT - posun o 1px nahoru */
.card:hover { 
    transform: translateY(-1px); 
    box-shadow: 0 15px 30px rgba(0,0,0,0.15) !important; /* Mírné zvýraznění stínu */
}

/* Obrázek na pozadí */
.card-bg-image {
    background-size: cover; /* Vyplní čtverec bez deformace */
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Černý překryv - zprvu průhledný */
.card-overlay {
    background: rgba(0, 0, 0, 0); 
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem;
    transition: background 0.8s ease;
    z-index: 2;
}

/* Ztmavení při najetí myší */
.card:hover .card-overlay {
    background: rgba(0, 0, 0, 0.8);
}


/* Text uvnitř karty - výchozí stav (neviditelný, posunutý nahoru) */
.card-overlay .card-body {
    opacity: 0;
    transform: translateY(-30px); 
    transition: opacity 1.8s ease, transform 2.0s ease; /* Tvůj oblíbený pomalý efekt */
}

/* Text při najetí myší - viditelný a na svém místě */
.card:hover .card-overlay .card-body {
    opacity: 1;
    transform: translateY(0);
}

/* Jemné doladění textu */
.card-body h4 {
    letter-spacing: 1px;
    margin-bottom: 1rem;
}

.opacity-90 {
    opacity: 0.9;
}


/* Styl pro mini karty v portfoliu */
.portfolio-card {
    transition: transform 5.3s ease;
}

.portfolio-thumb-container {
    position: relative;
    aspect-ratio: 4 / 3; /* Obdélníkový formát fotek (pro portfolio lepší než čtverec) */
    overflow: hidden;
    border-radius: 2px; /* Velmi jemné zaoblení */
}

.portfolio-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

/* Overlay efekt při najetí */
.portfolio-thumb-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255, 255, 255, 0.2); /* Jen velmi jemné zesvětlení */
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.portfolio-thumb-overlay span {
    background: #000;
    color: #fff;
    padding: 8px 15px;
    font-size: 0.7rem;
    letter-spacing: 1px;
}


/* Základní stav karty v portfoliu */
.portfolio-grid .card-bg-image {
    overflow: hidden; /* Důležité pro zoom efekt */
    transition: all 0.5s ease-in-out;
}

/* Nastavení pozadí - přidáme přechod pro zoom */
.portfolio-grid .card-bg-image {
    background-position: center;
    background-size: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Skrytí overlaye (textu) v základu */
.portfolio-grid .card-overlay {
    background: rgba(0, 0, 0, 0.6); /* Ztmavení */
    opacity: 0; /* Text není vidět */
    transition: opacity 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* Animace textu - jemný posun nahoru */
.portfolio-grid .card-body {
    transform: translateY(-
    20px);
    transition: transform 0.4s ease;
}

/* Třída pro obrázky v galerii */
.gallery-thumb {
    width: 100%;
    /* Nastaví pevný poměr stran (1/1 je čtverec, 4/3 je obdélník) */
    aspect-ratio: 1 / 1; 
    /* Klíčová vlastnost: fotka vyplní prostor a ořízne se, místo aby se smrskla */
    object-fit: cover;
    /* Vycentruje ořez na střed */
    object-position: center;
    /* Zajišťuje, že zoom efekt nebude přetékat ven z "rámečku" */
    display: block;
}


/* --- HOVER STAVY --- */

/* 1. Zoom obrázku */
.portfolio-grid .card-bg-image:hover {
    transform: scale(1.05); /* Jemné přiblížení */
    cursor: pointer;
}

/* 2. Zobrazení overlaye */
.portfolio-grid .card-bg-image:hover .card-overlay {
    opacity: 1;
}

/* 3. Vyjetí textu na střed */
.portfolio-grid .card-bg-image:hover .card-body {
    transform: translateY(0);
}


.tracking-in-expand{-webkit-animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both;animation:tracking-in-expand .7s cubic-bezier(.215,.61,.355,1.000) both}
@-webkit-keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}@keyframes tracking-in-expand{0%{letter-spacing:-.5em;opacity:0}40%{opacity:.6}100%{opacity:1}}

.fade-in-fwd{-webkit-animation:fade-in-fwd 2.0s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in-fwd 2.0s cubic-bezier(.39,.575,.565,1.000) both}
@-webkit-keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes fade-in-fwd{0%{-webkit-transform:translateZ(-80px);transform:translateZ(-80px);opacity:0}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.scale-in-hor-left{-webkit-animation:scale-in-hor-left .8s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-hor-left .8s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-hor-left{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}@keyframes scale-in-hor-left{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:0 0;transform-origin:0 0;opacity:1}}

.scale-in-hor-right{-webkit-animation:scale-in-hor-right .8s cubic-bezier(.25,.46,.45,.94) both;animation:scale-in-hor-right .8s cubic-bezier(.25,.46,.45,.94) both}
@-webkit-keyframes scale-in-hor-right{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}}@keyframes scale-in-hor-right{0%{-webkit-transform:scaleX(0);transform:scaleX(0);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-transform-origin:100% 100%;transform-origin:100% 100%;opacity:1}}

.tracking-in-contract-bck{-webkit-animation:tracking-in-contract-bck 2s cubic-bezier(.215,.61,.355,1.000) 1s both;animation:tracking-in-contract-bck 2s cubic-bezier(.215,.61,.355,1.000) 1s both}
@-webkit-keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes tracking-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(400px);transform:translateZ(400px);opacity:0}40%{opacity:.6}100%{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}

.vibrate-1{-webkit-animation:vibrate-1 2.41s linear 0.1s infinite both;animation:vibrate-1 2.41s linear 0.1s infinite both}
@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

.vibrate-2{-webkit-animation:vibrate-2 2.15s linear 0.1s infinite both;animation:vibrate-2 2.15s linear 0.1s infinite both}
@-webkit-keyframes vibrate-2{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-2{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

.vibrate-3{-webkit-animation:vibrate-3 2.28s linear 0.1s infinite both;animation:vibrate-3 2.28s linear 0.1s infinite both}
@-webkit-keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-3{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

.focus-in-contract-bck{-webkit-animation:focus-in-contract-bck 1.5s cubic-bezier(.25,.46,.45,.94) 0.3s both;animation:focus-in-contract-bck 1.5s cubic-bezier(.25,.46,.45,.94) 0.3s both}
@-webkit-keyframes focus-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(300px);transform:translateZ(300px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-transform:translateZ(12px);transform:translateZ(12px);-webkit-filter:blur(0);filter:blur(0);opacity:1}}@keyframes focus-in-contract-bck{0%{letter-spacing:1em;-webkit-transform:translateZ(300px);transform:translateZ(300px);-webkit-filter:blur(12px);filter:blur(12px);opacity:0}100%{-webkit-transform:translateZ(12px);transform:translateZ(12px);-webkit-filter:blur(0);filter:blur(0);opacity:1}}