:root {
  --hlavni-barva: #ffffff; /* Hlavní modrá barva */
  --sekundarni-barva: #ffffff; /* Šedá barva pro doplňky */
  --barva-pozadi: #ff0000; /* Světlé pozadí */
  --intersection-dot-color: #0066ff; /* barva teček na průsečících gridu */
}



html, body {
  height: 100%;
  margin: 0 0; /* okraje stránky */
  
  
  font-family: "noka", sans-serif;
  
  
  background-size: cover;       /* obrázek vyplní celou plochu */
  background-repeat: no-repeat;
  background-color: var(--barva-pozadi)

  /* Skrytí scrollbaru */
  
  

}

/* Chrome, Safari, Edge */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}
.grid-wrapper {
  position: relative; /* referenční bod pro overlay */
  width: 100%;
  background-color: var(--barva-pozadi)
  
  
}
.grid-container {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /*  sloupce */
  grid-template-rows: repeat(12, 1fr);
  gap: 1px; /* mezery mezi buňkami */
  
 
  background-image: url('Imiges/grid.svg');
  z-index: 100;
  
  
  
}



/* ňastaveni gridu na telefon */
@media screen and (max-width: 600px) {
  .grid-container {
    grid-template-columns: repeat(6, 1fr); /*  sloupce pro mobil */
    grid-template-rows: repeat(12, 1fr);
  }
}




.cell {
  
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 0.965;/* rozměry buňky */
  z-index: 3; 
  

}

/* Prázdné buňky */


.grid-container2 {
   position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(12, 1fr);
  pointer-events: none;
  gap: 1px; /* match .grid-container gap so centers align */
  box-sizing: border-box;
  
  
  

}

@media screen and (max-width: 600px) {
  .grid-container2 {
    grid-template-columns: repeat(6, 1fr); /*  sloupce pro mobil */
    grid-template-rows: repeat(12, 1fr);
  }
}

.cell2 {
  
  min-width: 0;
  min-height: 0;
  aspect-ratio: 1 / 0.965;/* rozměry buňky */
  z-index: 3; 
  position: relative; /* allow centering inside */
  display: flex;
  align-items: center;
  justify-content: center;
}

.cell2.empty2 { background-color: #00ff7b00; 
outline: 0.001px solid #00000049;
z-index: 1;


}

/* small circle placed inside one .cell2 */
.dot {
  /* hidden by default; enable for debug by setting display:block */
  display: none;
  width: 8px;
  height: 8px;
  background: var(--intersection-dot-color);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ff000033;
}



.grid-overlay .intersection-dot {
  color:  var(--intersection-dot-color);
  opacity: 1;
  transition: fill 160ms ease, opacity 160ms ease;
  
  
  
  
}

.grid-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* neblokuje interakce */
  z-index: 3; /* nejvyšší, aby bylo nad gridem a model-viewery  je to na kruhy */

}





/* Obrázek přes buňky 14 až 26 */
.logo-cell-container {
  grid-column: 1 / 13;  /* sloupce */
  grid-row: 1 / 6;     /* řádky */
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
  scale: 1.11;
  
}
/* pro telefon */
@media screen and (max-width: 600px) {
  .logo-cell {
   grid-column: 1 / 5;  /* sloupce  */
  grid-row: 3 / 4;  
   background-position: 0px 40px; 
  } 
}
.logo-cell:hover {
  
    transform: scale(1.02);
    transition-delay: 0.2s;
}



/* HVĚZDA HVĚZDA HVĚZDA */

.item_hvezda-container-1 {
  grid-column: 12 /13;  /* sloupce  */
  grid-row: 6 / 7;     /* řádky  */
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
}
  .item_hvezda-container-1:hover {
    transform: scale(1.15);
    transition-delay: 0.15s;
  }

.item_hvezda-container-2 {
  grid-column: 7 / 8;  /* sloupce  */
  grid-row: 14 / 15;     /* řádky  */
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
}
  .item_hvezda-container-2:hover {
    transform: scale(1.15);
    transition-delay: 0.15s;
  }


/* SIPKA SIPKA SIPKA */

.item_sipka_dole_container-1 {
  grid-column: 1 / 2;  /* sloupce  */
  grid-row: 6 / 7;     /* řádky  */
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
}

.item_sipka_dole_container-1:hover {
    transform: scale(1.15);
    transition-delay: 0.1s;
}

.item_sipka_dole_container-2 {
  grid-column: 6 / 7;  /* sloupce  */
  grid-row: 8 / 9;     /* řádky  */
  transform: rotate(90deg);
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
}

.item_sipka_dole_container-2:hover {
    transform: rotate(180deg) scale(1.15);
    transition-delay: 0.1s;
}

.item_sipka_dole_container-3 {
  grid-column: 7 / 8;  /* sloupce  */
  grid-row: 9 / 10;     /* řádky  */
  transform: rotate(-90deg);
  padding: 0px;
  display: flex;
  justify-content: center; /* Vodorovné centrování */
  align-items: center;
  z-index: 3;
  transition: transform 0.3s ease;
}

.item_sipka_dole_container-3:hover {
    transform: scale(1.1);
    transition-delay: 0.1s;
}

/*  barva item */

.icon {
    width: 90%;
    height: 90%;
     background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, opacity 0.3s ease, rotation 0.5s ease;
  z-index: 3; 
}

.icon path {
    fill: var(--hlavni-barva);
    transition: fill 0.3s ease; /* Zajišťuje plynulý přechod barvy */
}

.icon  rect {
    fill: var(--hlavni-barva);
    transition: fill 0.3s ease; /* Zajišťuje plynulý přechod barvy */
}

.logo {
    width: 90%;
    height: 90%;
     background-repeat: no-repeat;
  background-position: center;
  transition: transform 0.3s ease, opacity 0.3s ease, rotation 0.5s ease;
  z-index: 3; 
}

.logo path {
    fill: var(--sekundarni-barva);
    transition: fill 0.3s ease; /* Zajišťuje plynulý přechod barvy */
}

.logo rect {
    fill: var(--sekundarni-barva);
    transition: fill 0.3s ease; /* Zajišťuje plynulý přechod barvy */
}




/* MODEL MODEL MODEL MODEL */

.model  {
  grid-column: 1 / 6;  /* sloupce  */
  grid-row: 7 / 12; 
  scale: 1.20;
   transition: transform 0.5s ease, opacity 0.3s ease;
   padding: 0px;

}
.model:hover  {
  transform: scale(1.04);

}
.model2  {
  grid-column: 8 / 13;  /* sloupce  */
  grid-row: 7 / 12; 
  scale: 1.20;
  transition: transform 0.5s ease, opacity 0.3s ease;

}
.model2:hover  {
  transform: scale(1.04);
}
model-viewer {
  width: 100%;
  height: 100%;
  z-index: 50;
 
  
}


/* TEXTY TEXTY */

.text1 {
  grid-column: 9 / 12;  /* sloupce  */
  grid-row: 6 / 7;     /* řádky  */
  color:var(--sekundarni-barva);
 
  font-size: 1.44vw;
  line-height: 1.1;
  scale: 0.95;
      /* centering text */
  display: flex;
  justify-content: center; /* vodorovně */
  align-items: center;     /* svisle */
   text-align: right;    /* pro více řádků textu */
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 1; 
}
  .text1:hover {
   transform: scale(1.04);
    transition-delay: 0.15s;
  }

/* Page transition helpers */
html, body {
  transition: opacity 420ms ease;
}

/* Add this class before navigating away to fade the page out */
html.fade-out, body.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* Use this class on a freshly loaded page to start hidden, then JS will remove it to fade in */
html.page-hidden, body.page-hidden {
  opacity: 0;
}

/* clickable overlay for model-viewer to create a link area */
.model-link {
  position: relative;
  display: block;
}

.model-link .link-overlay {
  position: absolute;
  inset: 0; /* top:0; right:0; bottom:0; left:0 */
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  z-index: 60; /* above model-viewer */
}


.text2 {
  grid-column: 2 / 3;  /* sloupce  */
  grid-row: 6 / 7;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 1.44vw;
  line-height: 1.1;
  scale: 0.95;
    /* centering text */
  display: flex;
  justify-content: center; /* vodorovně */
  align-items: center;     /* svisle */
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 2; 
}
  .text1:hover {
   transform: scale(1.04);
    transition-delay: 0.15s;
  }

.text3 {
  grid-column: 2 / 6;  /* sloupce  */
  grid-row: 8 / 9;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 4vw;
  line-height: 1.1;
  scale: 1;
    /* centering text */
  display: flex;
  ; /* vodorovně */
  align-items: center ;     /* svisle */
  text-align: center; 
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}
.text3:hover:hover {
   transform: scale(1.05);
    
  }

.text4 {
  grid-column: 8 / 11;  /* sloupce  */
  grid-row: 9 / 10;     /* řádky  */
  color:var(--sekundarni-barva);
  
  
  font-size: 4vw;
  line-height: 1.1;
  scale: 1;
    display: flex;
  justify-content: flex-end; /* zarovnání doprava */
  align-items: center;  
    text-align: center;  
    align-items: center ;
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}
.text4:hover {
   transform: scale(1.05);
    
  }


.text5 {
  grid-column: 6 / 8;  /* sloupce  */
  grid-row: 7 / 8;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 1.44vw;
  line-height: 1.1;
  scale: 1;
    display: flex;
  justify-content: flex-end; /* zarovnání doprava */
  align-items: center;  
    text-align: left;  
    align-items: center ;
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}

.text6 {
  grid-column: 6 / 8;  /* sloupce  */
  grid-row: 10 / 11;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 1.44vw;
  line-height: 1.1;
  scale: 1;
    display: flex;
  justify-content: flex-end; /* zarovnání doprava */
  align-items: center;  
    text-align: right;  
    align-items: center ;
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}

.text7 {
  /* O NÁS  */
  
  grid-column: 5 / 6;  /* sloupce  */
  grid-row: 12 / 13;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 1.44vw;
  line-height: 1.1;
  scale: 1;
    
  
display: flex;
  justify-content: center; /* vodorovně */
  align-items: center;     /* svisle */
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}



.JSME {
  
  
  grid-column: 8 / 12;  /* sloupce  */
  grid-row: 12 / 14;     /* řádky  */
  color:var(--sekundarni-barva);
  
  font-size: 13.5vw;
  line-height: 1.1;
  scale: 1;
    
  
display: flex;
  justify-content: center; /* vodorovně */
  align-items: center;     /* svisle */
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}

.text8 {
  
  grid-column: 8 / 12;  /* sloupce  */
  grid-row: 14 / 16;     /* řádky  */
  color: var(--sekundarni-barva);
  
  font-size: 1.44vw;
  line-height: 1.1;
  
    
  
display: flex;
  justify-content: center; /* vodorovně */
  align-items: center;     /* svisle */
  
  
  
  
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 100; 
}

.Obr    {
  grid-column: 1 / 8;  /* sloupce  */
  grid-row: 11 / 19;     /* řádky  */
  
  background-image: url('Imiges/pohyb2.svg');
  padding: 0px;
  background-repeat: no-repeat;
  background-position: center;
}