/*   === Google Fonts === EB Garamond | Instrument Sans ===
        --------------   -------------------------------

// <weight>: Použite hodnotu od 400 do 800
// <uniquifier>: Použite jedinečný a výstižný názov triedy

.eb-garamond-<uniquifier> {
  font-family: "EB Garamond", serif;   !! Pozor !! serif
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

// <weight>: Použite hodnotu od 400 do 700
// <uniquifier>: Použite jedinečný a výstižný názov triedy

.instrument-sans-<uniquifier> {
  font-family: "Instrument Sans", sans-serif;   !! Pozor !! serif
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
 */

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap&family=Noto+Serif+JP:wght@700&display=swap');

/*   === FARBY ===
        -------
 */
:root {
    /*   hsla(var(--clr-...) / 1.00);   */

    --clr-0: 20 10% 94%; /* #F2F0EF, Mliečny Off-White odtieň */

    --clr-1: 28 57% 82%; /* #ebcfb7 */

    /* farba plne čierna, neon black, HEX #0a0a08, RGB 10,10,8, --clr-black: 60 11% 4%;
       hsla(var(--clr-black) / 1.00);  */
    --clr-black: 210 25% 20%; /* #263340 */

    /* farba plne biela, neon white, HEX #fbffff, RGB 251,255,255, 
       hsla(var(--clr-white) / 1.00); */
    --clr-white: 180 100% 100%; /* #ffffff, #faffff = 180 100% 99% */
}
.clr-1 {
    color: hsla(var(--clr-1) / 1);
}

.font-jp-katakana {
    font-family: 'Noto Serif JP', serif; 
    font-weight: 500; 
    font-size: 1.5rem; 
    line-height: 2rem;
    letter-spacing: 4px;
    opacity: 0.25;
}


* {
    padding: 0; 
    margin: 0;
    box-sizing: border-box;
    outline: none;

    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-size: 1rem;
    color: hsl(var(--clr-black) / 0.90);
}



html {
    scroll-behavior: smooth; /* patrí k scrollbar lište */
}



/*   === BODY === 
        ------      */
body {
    background: hsla(var(--clr-0) / 1);
    min-height: 100vh;
    opacity: 1;
    transition: opacity 1.2s ease-in-out;
}
body.fade-out-active { /* patrí k stmievaniu pri presmerovaní */
    opacity: 0 !important;
    background: hsla(var(--clr-black) / 0.74);
}

a, a:hover {
    color: hsl(var(--clr-black) / 1.00);
    text-decoration: none;
}

/*   === MOBIL STOP === 
        ------------      */
.smartphone-active {
    display: none;
}

.container {
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
    background: hsla(var(--clr-0) / 1);
}

@media (max-width:40rem) {
    .container { display: none; }
    .smartphone-active {
        width: 100%;
        min-height: 100vh;
        font-family: "Instrument Sans", sans-serif; 
        font-weight: 400;
        font-size: 1.25rem;
        line-height: 2rem;
        color: hsl(var(--clr-black) / 0.74);
        text-align: center;
        text-transform: uppercase;

        display: flex; /* Flexbox */
        flex-direction: column; /* Smer toku, prvky pod sebou */
        justify-content: center; /* Vycentrovanie pozdĺž hlavnej osi (vertikálne) */
        align-items: center; /* Vycentrovanie pozdĺž priečnej osi (horizontálne) */

        background-color: hsla(var(--clr-0) / 1);
    }
}


.m-b_050 {margin-bottom: 0.5rem;}
.m-b_100 {margin-bottom: 1rem;}
.m-b_150 {margin-bottom: 1.5rem;}
.m-b_200 {margin-bottom: 2rem;}
.m-b_250 {margin-bottom: 2.5rem;}
.m-b_300 {margin-bottom: 3rem;}

.m-h_75 {
    min-height: 75vh;
}



/*   === FLEX BOX === 
        ----------     */
.flex-col-flexstart {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-col-flexstart-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
}
.flex-col-flexstart-flexstart {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-row-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
}
.flex-row-center-sb {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
.flex-row-spacebetween-flexstart {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
}


/*   === LOGO KORGO v kruhu === 
        --------------------      */
/* --- Kruhový dizajn --- */
.logo-div {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 8rem;
    height: 8rem;
    background-color: hsla(var(--clr-black) / 0.90);
    border-radius: 50%;
    z-index: 200;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 6px 10px hsla(var(--clr-black) / 0.15);
    transition: transform 0.4s ease-in-out;
}
/* Jemný efekt pri prejdení myšou (zväčšenie) */
.logo-div:hover {
    transform: scale(1.06);
}
/* --- Logo vo vnútri --- */
.logo-img {
    width: 70%;
    height: auto;
    object-fit: contain;
    z-index: 201;
}



/*   === TOP K === 
        -------      */
/* --- Návrat na začiatok stránky --- */
.top-k {
    position: fixed;
    top: 14px;
    right: 60px;
    z-index: 99;
    border: 1px solid transparent;
    transition: transform 0.2s ease-in-out; /* Plynulá reakcia na hover */
}
.top-k img {
    width: 40px;
    height: 40px;
}
.top-k:hover {
    transform: translateY(-12px); /* Jemný posun nahor pri prejdení myšou */
}



/*  === MAIN ===
       ------     */

/* Hlavný obsah musí mať spodný okraj rovný výške <footer> */
.tg-main {
    min-width: 40rem;
    max-width: 96rem;
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 6; /* Musí byť nad footer, kde footer je 1-5 */
    background: hsla(var(--clr-0) / 1); /* !! Dôležité pre efekt !! */
    box-shadow: 0 1px 3px hsla(var(--clr-black) / 0.05);
    min-height: 100vh; /* Zabezpečí skrolovanie */
    margin-bottom: 20rem; /* !! = HODNOTA !! ako VÝŠKA FOOTER nutné pre efekt ? */
    border-bottom-left-radius: 9rem 3rem;
    border-bottom-right-radius: 18rem 6rem;
    padding-bottom: 6rem;
    /* border: 1px solid red;   /* D E L E T E */
}




/*  === BOXING ===
       --------     */
/* 40-96 Plná šírka stránky */
.box40-96s,
.box40-96 { /*z-index=6*/
    min-width: 40rem;   /* 40 absolútne minimum */
    max-width: 96rem;   /* 96 maximum */
    width: 100%;
    padding-top: 10.5rem; /* Odsadenie kvôli logu */
    overflow: hidden;
    background:
        radial-gradient(
            ellipse at 20% 20%, 
            hsla(var(--clr-white) / 0.1), 
            hsla(var(--clr-0) / 1));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid rgb(0, 255, 157);   /* D E L E T E */
    position: relative;
}

.num_w {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
}
.num_w img {
    position: absolute;
    width: 210px;
    height: 198px;
    top: -168px;
    left: 2rem;
    opacity: 0.5;
    z-index: 7;
    transform: skew(-20deg);
    filter: blur(2px);
}

.tg-hr {
    border: 0;
    width: 100%;
    height: 1px;
    background: hsla(var(--clr-black) / 0.10);
}

/* Hlava stránky | Jednostĺpcová stránka */
.box40-57 {
    min-width: 40rem;   /* 40 absolútne minimum */
    max-width: 57rem;   /* maximum  */
    width: 100%;
    padding: 0 1rem;
    /* border: 1px solid #0051ff; /*  D E L E T E  */
}
/* Textová ĽAVÁ STRANA */
.box47-57 {
    min-width: 41rem;   /* 41 + 39 = 80 breakpoint */
    max-width: 57rem;   /* 57 + 39 = 96rem */
    width: 100%;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* border: 1px solid #48ff00; /*  D E L E T E  */
}
/* Blok TEXTový */
.box41-47 {
    min-width: 41rem;
    max-width: 47rem;
    width: 100%;
    padding: 0 1rem;
    min-height: 12rem;
    /* border: 1px solid #00ffc8; /*  D E L E T E  */
}
/* Blok animované obrázky */
.box39 {
    width: 39rem;
    min-height: 6rem;
    padding: 0 0.5rem 0 0.5rem;
    /* border: 1px solid #9dff00; /*  D E L E T E  */
}

/* Špeciálna medzera na hranici BreakPoint */
.bp_media-max80rem-text {
    display: block;
    width: 100%;
    height: 1rem;
    /* border: 1px solid fuchsia;  /*  D E L E T E  */
}
.bp_media-max80rem-anim-pic {
    display: block;
    width: 100%;
    height: 6rem;
    /* border: 1px solid fuchsia;  /*  D E L E T E  */
}


/* Breakpoint 80rem = 1280px */
@media (min-width:80rem) {
    .box40-96 {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .box39 {   /* animované obrázky */
        padding: 0 1rem 0 0;
    }
    .box47-57 {   /* textová časť */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .bp_media-max80rem-text {
        height: 6rem;
    }
    .bp_media-max80rem-anim-pic {
        height: 0;
    }
}



/*  === BOX S OBRÁZKOM A EFEKTOM "glow" ===
       ---------------------------------     */
.box19-28 {
    min-width: 19rem;
    max-width: 28rem;
    width: 100%;
    min-height: 6rem;
    padding: 0 0.5rem 0 0.5rem;
    /* border: 1px solid #9c0c7d; /*  D E L E T E  */
}
.box18 {
    /* position: relative; */
    min-width: 18rem;
    max-width: 26rem;
    width: 100%;
    min-height: 6rem;
    /* border: 1px solid #0066ff; /*  D E L E T E  */
}

.box18-img {
    background: hsla(var(--clr-white) / 0.4);
    border-radius: 0.5rem;
    padding: 0.5rem;
    width: 100%;
    height: 8rem;
    display: flex;
    flex-direction: row;
}
.box18-img img {
    max-width: 90%;
    max-height: 7.5rem;
    margin: 0 auto;
}




/*   === TAG tg === 
        --------      */
.tg-h1 {
    font-size: 3.25rem;
    line-height: 4.25rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: hsla(var(--clr-black) / 0.9);
    /*border: 1px solid red; /* D E L E T E */
}

.tg-h1-svg-k {
    height: 4rem;
    /*border: 1px solid blue; /* D E L E T E */
    transform: translate(1.5rem, 0.75rem);
}

.tg-h1-svg-s {
    height: 4rem;
    /*border: 1px solid blue; /* D E L E T E */
    transform: translate(0.5rem, 0.75rem);
}

.tg-h2 {
    font-size: 1.75rem;
    line-height: 2.75rem;
    font-weight: 400;
    letter-spacing: 0px;
    color: hsla(var(--clr-black) / 0.9);
    /* border: 1px solid red; /* D E L E T E */
}

.tg-h2-svg {
    height: 2rem;
    /*border: 1px solid blue; /* D E L E T E */
    transform: translate(0.75rem, 0.5rem);
}



.tg-span {
    width: 100%;
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    line-height: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: hsla(var(--clr-black) / 0.5);
    /* border: 1px solid red; /* D E L E T E */
}

.tg-span-clr-1 {
    width: 100%;
    font-family: "Instrument Sans", sans-serif;
    font-size: 0.8rem;
    letter-spacing: 1px;
    line-height: 1.1rem;
    font-weight: 500;
    text-transform: uppercase;
    color: hsla(var(--clr-1) / 1);
    /* border: 1px solid red; /* D E L E T E */
}



.tg-p {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 400;
    color: hsla(var(--clr-black) / 0.8);
    /* border: 1px solid red; /* D E L E T E */
}


/* Predvolený stav - text je skrytý a posunutý */
p.otvorenie {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Optimalizácia pre prehliadač */
}

/* Stav po zobrazení na obrazovke */
p.otvorenie.viditelny {
  opacity: 1;
  transform: translateY(0);
}




/* kbd je podčiarknutie kľúčových slov v texte */
kbd {
    font-size: 1.25rem;
    line-height: 1.75rem;
    font-weight: 500;
    position: relative;
    color: hsla(var(--clr-black) / 0.9);
    text-decoration: none;
}
kbd:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: hsla(var(--clr-black) / 0.25);
}
kbd:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    bottom: 0;
    left: 0;
    background-color: hsla(var(--clr-black) / 0.9);
    visibility: hidden;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}
kbd:hover:after {
    visibility: visible;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}



/* var sú úvodzovky „ “ */
var {
    font-style: inherit;
    font-family: inherit;
    font-weight: inherit;
    font-size: inherit;
    color: inherit;
}
var::after {content: "“";}
var::before {content: "„";}



/* odsadenie pri odstavcoch */
.odsadenie {text-indent: 2.25rem;}



/* text editácia */
.text-right {text-align: right;}
.text-center {text-align: center;}
.text-normal {text-transform: none;}
.text-bold {
    font-weight: 600;
    color: hsla(var(--clr-black) / 0.9);
}
.text-kod {
    font-family: "Instrument Sans", sans-serif;
    font-size: 1.25rem;
    line-height: 3rem;
    color: hsla(var(--clr-1) / 1);
    font-weight: 400;
}
.text-kod img {
    height: 2rem;
    transform: translate(0.2rem, 0.6rem);
}



.poznamka {
    font-size: 1.1rem;
    line-height: 1.25rem;
    font-weight: 400;
    color: hsla(var(--clr-black) / 0.6);
}



/*   === ANIMATION GRADIENT pre H1 ===
        ---------------------------      */
@property --pos {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
    }
.anim-gradient {
    color: hsla(var(--clr-black) / 1.0); 
  
    @supports (-webkit-background-clip: text) or (background-clip: text) {
        /* Pravítko: RED na (--pos + 20%), BLUE na (--pos + 80%), atď. */
        background: linear-gradient(90deg, 
            hsla(var(--clr-black) / 0.95) calc(var(--pos) + 20%), 
            hsla(var(--clr-black) / 0.55) calc(var(--pos) + 80%), 
            hsla(var(--clr-black) / 0.95) calc(var(--pos) + 140%), 
            hsla(var(--clr-black) / 0.55) calc(var(--pos) + 200%)
            );
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-fill-color: transparent;

        animation: posunPravitka 10s linear infinite;
    }
}
@keyframes posunPravitka {
    0% { --pos: 0%; }
    50% { --pos: -60%; }
    100% { --pos: -120%; }
}