@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


*{
padding: 0%;
margin: 0%;
box-sizing: border-box;
font-family: 'Inter';
color: rgb(255, 255, 255);

}

body{
  background-color: rgb(0, 0, 0);
  width: 100%;
  height: 100%;
}


/*  */
/* Menu */

.topbar {
      position: fixed;
      top: 0; left: 0; right: 0;
      height: 10vh;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px;
      background: rgba(0, 0, 0, 1);
      backdrop-filter: blur(6px);
      box-shadow: 0 6px 18px rgba(134, 10, 216, 0.082);
      z-index: 1000;
    }

    .brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; }
    .brand img { height: 65px; width: auto; }
    .brand .brand-title { font-weight: 600; font-size: 18px; }

    nav ul { list-style: none; display: flex; gap: 18px; }
    nav a {
      text-decoration: none;
      padding: 8px 10px;
      border-radius: 8px;
      color: #ffffff;
      font-weight: 500;
      font-size: 15px;
      transition: all .16s ease;
    }
    nav a:hover { background: #860ad8f6;
    color: black;
    }



/* Kontejner tlačítek */
.uvodnibuttons{
  display: flex;               
  justify-content: center;     
  align-items: center;         
  gap: 4vh;                    
  margin-top: 65vh;
  z-index: 11;
  position: relative;
}

/* Tlačítka */
.buyticket,
.harmonogram {
  
  width: 15vh;
  height: 6vh;
  background-color: #000000;
  border: none;
  border-radius: 30px;
  color: #860ad8;
  font-size: 2vh;
  font-weight: 500;
  cursor: pointer;
  position: relative;          /* Pro pseudo-element */
  overflow: hidden;            /* Aby animace nevyčnívala */
  transition: all 0.3s ease;
}

/* Text uvnitř tlačítka */
.buyticket span,
.harmonogram span {
  position: relative;
  z-index: 2;
}

/* Holografická animace */
.buyticket::before,
.harmonogram::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg, 
    transparent, 
    transparent 30%, 
    #000000
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 1;
}

/* Hover efekt */
.buyticket:hover,
.harmonogram:hover {
  transform: scale(1.05);
  background-color: #860ad8f6;   /* Zůstane původní */
  color: #860ad8;

}

.buyticket:hover::before,
.harmonogram:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}



    

/* Timer */
.timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 14vh;
  z-index: 10;
  position: relative; /* potřebné pro ::before / ::after */
  cursor: default;    /* vizuální indikace, že se dá hoverovat */
  text-decoration: none;
}

/* Text */
.timertext {
  font-size: 3vh;
  font-weight: 500;
  margin-bottom: 7px;
}

/* Time layout */
.timebox {
  display: flex;
  gap: 4vh;
  font-size: 3vh;
}

.time {
  text-align: center;
  font-size: 1.5vh;
}

/* ==== Efekt přidaný přes celý timer ==== */
.timer::after,
.timer::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #860ad8, #860ad8);
  left: 0;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s ease-out;
  
  
}

.timer::after {
  bottom: 0;
}

.timer::before {
  top: 0;
  transform-origin: left;
}

.timer:hover::after,
.timer:hover::before {
  transform: scaleX(1);
}



/* Obsah */
.container{
    
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    padding-top: 100px; /* kvůli pevné horní liště */
    
}




/* Video */
.video {
  position: absolute;   
  top: 0;
  left: 0;
  width: 100%;        /* celá šířka okna */
  height: 95%;       /* celá výška okna */
  overflow: hidden;   /* ořízne přebytek */
  z-index: 1;        /* pošle video pod ostatní obsah */

}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;       /* celá šířka viewportu */
  height: 56.25vw;    /* poměr 16:9 */
  min-height: 100vh;  /* vyplní výšku */
  min-width: 177.78vh;/* pro zachování poměru */
  border: none;
   pointer-events: none;
}



.udalostiimages {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 1vh auto 0 auto;
  flex-wrap: wrap;
  gap: 0;
  background-color: #000000;
}

.image-box {
  flex: 1 1 33.333%;
  text-align: center;
  position: relative;
  overflow: hidden; /* ořízne obrázek při zvětšení */
}

.image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%; /* čtverec */
  overflow: hidden;
}

.image-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* 🌟 Hover efekt – zvětšení obrázku */
.image-box:hover img {
  transform: scale(1.05);
}

/* Popisek pod obrázkem */
.caption {
  margin-top: 2vh;
  font-size: 16px;
  color: #ffffff;
  text-align: left;
  padding-left: vh;
  position: relative; /* odstraněno absolute */
}



.allnews {
  background-color: rgb(0, 0, 0); /* pozadí přes celou šířku */
  width: 100%;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Tlačítko */
.novinky {
  position: relative;
  width: 180px;
  height: 60px;
  background-color: #181818;
  border: none;
  border-radius: 30px;
  color: #860ad8;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden; /* schová efekt uvnitř */
  transition: transform 0.3s ease;
}

/* Text uvnitř */
.novinky span {
  position: relative;
  z-index: 2;
}

/* --- Holografická animace (lesk) --- */
.novinky::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 1;
}

/* Hover efekt */
.novinky:hover {
  transform: scale(1.05);
  background-color: #860ad8; /* změna barvy při hoveru */
  color: #000000;
}

.novinky:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}


/* Ucebna sekce */

.ucebna {
  display: flex;
  height: 100vh;       /* celá výška obrazovky */
  width: 100%;
}

.ucebnaimg {
  flex: 1;             /* zabere polovinu šířky */
  overflow: hidden;
}

.ucebnaimg img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* obrázek vyplní prostor bez deformace */
}

.ucebnatext {
  flex: 1;             /* druhá polovina */
  background-color: #111; /* volitelné pozadí */
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center; /* text na střed vertikálně */
  padding: 5vw;            /* vnitřní odsazení */
}

.ucebnatext h2 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: #860ad8;
}

.ucebnatext p {
  font-size: 1.2rem;
  line-height: 1.6;
}

/* Tlačítko učebna - dědí vše z novinky */
.ucebnatlacitko {
  position: relative;
  width: 180px;
  height: 60px;
  background-color: #181818;
  border: none;
  border-radius: 30px;
  color: #860ad8;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.3s ease;
}

/* Text uvnitř tlačítka */
.ucebnatlacitko span {
  position: relative;
  z-index: 2;
}

/* Holografická animace (lesk) */
.ucebnatlacitko::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    rgba(0, 0, 0, 0.3)
  );
  transform: rotate(-45deg);
  transition: all 0.5s ease;
  opacity: 0;
  z-index: 1;
}

/* Hover efekt */
.ucebnatlacitko:hover {
  transform: scale(1.05);
  background-color: #860ad8;
  color: #000000;
}

.ucebnatlacitko:hover::before {
  opacity: 1;
  transform: rotate(-45deg) translateY(100%);
}

/* Vzdálenost od textu */
.ucebnatext .ucebnatlacitko {
  margin-top: 2rem;
}


/* Responsivní verze pro mobily */
@media (max-width: 768px) {
  .ucebna {
    flex-direction: column; /* obrázek nad textem */
    height: auto;
  }

  .ucebnaimg, .ucebnatext {
    flex: none;
    width: 100%;
  }

  .ucebnaimg img {
    height: 50vh; /* menší výška obrázku na mobilu */
  }
}



/* Kontakty */


/* Hlavní sekce kontakty */
.kontakty {
    min-height: 60vh; /* zvětšíme, aby se tam vešlo i pole */
    background-color: #181818;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: 40px 20px;
}

.kontakty h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #860ad8
}

.kontakty p {
    margin: 5px 0;
}

/* Sekce anonymních dotazů uvnitř kontakty */
.anonymni-dotazy {
    margin-top: 10vh;
    width: 100%;
    max-width: 500px;
    text-align: center;
}

.anonymni-dotazy h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.anonymni-dotazy textarea {
    width: 100%;
    height: 4vh; /* menší než předtím */
    padding: 8px;
    font-size: 0.9em;
    border: none;
    border-radius: 5px;
    resize: none;
    margin-bottom: 10px;
    background-color: black;

}

/* Holografický efekt přímo na tlačítku anonymních dotazů */
.anonymni-dotazy button {
    position: relative;
    overflow: hidden;
    padding: 8px 20px;
    font-size: 1em;
    background-color: #000000;
    color: #860ad8;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.anonymni-dotazy button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        0deg,
        transparent,
        transparent 30%,
        rgba(255, 255, 255, 0.3)
    );
    transform: rotate(-45deg);
    transition: all 0.5s ease;
    opacity: 0;
    z-index: 1;
}

.anonymni-dotazy button:hover {
    transform: scale(1.05);
    background-color: #860ad8;
    color: #000000;
}

.anonymni-dotazy button:hover::before {
    opacity: 1;
    transform: rotate(-45deg) translateY(100%);
}

/* Efekt odeslání */
#odeslano {
    display: none;
    margin-top: 10px;
    font-size: 1em;
    color: #860ad8;
    animation: fadeIn 1s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}





/* partners */
.partners {
  width: 100%;
  background-color: #ffffff; /* můžeš změnit dle vzhledu */
  color: white;
  text-align: center;
  padding: 8vh 0;
}

.partners h2 {
  font-size: 2rem;
  color: #300050;
  margin: 5vh 0 3vh 0;
  text-transform: uppercase;
  letter-spacing: 1px;
  border: #300050 1px solid;
}

.partners-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5vw;
  flex-wrap: wrap;
  margin-bottom: 4vh;
}

.partners-row img {
  width: 200px;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
  filter: brightness(0.9);
}

.partners-row img:hover {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.partners-row.single {
  justify-content: center;
}

@media (max-width: 768px) {
  .partners-row img {
    width: 150px;
  }
}



/* zahalvi */

.footer {
  background-color: #000000;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2vh 5vw;
  border-top: 1px solid rgba(134, 10, 216, 0.4);
  flex-wrap: wrap;
}

.footer-left p {
  font-size: 0.9rem;
  color: #aaa;
  margin: 0;
}

.footer-right a {
  color: #fff; /* barva všech ikon, včetně SVG s currentColor */
  text-decoration: none;
  font-size: 1.5rem;
  margin-left: 2vw;
  transition: color 0.3s ease, transform 0.2s ease;
}

.footer-right a:hover {
  color: #860ad8;
  transform: scale(1.2);
}

@media (max-width: 768px) {
  .footer {
    flex-direction: column;
    text-align: center;
    gap: 1.5vh;
  }

  .footer-right a {
    margin: 0 1vw;
  }
}