@font-face {
        font-family: Comico;
        src: url(Comico-Regular.ttf);
    }
    @font-face {
        font-family: EASy;
        src: url(EASyText.ttf);
    }
@font-face {
        font-family: Pixel;
        src: url(Pixel12x10-v1.1.0.ttf);
    }
@font-face {
        font-family: smalle;
        src: url(smalle.ttf);
    }
@font-face {
        font-family: PixSans;
        src: url(PixeloidSans.ttf);
    }

body{
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}
  video {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;           /* plná šířka obrazovky */
  height: 100vh;
  object-fit: cover;      /* ořízne okraje, ale vždy vyplní celou plochu */
  object-position: center;
  z-index: -1;
}

#video-a { z-index: 2; }                    /* pořád běží dole */
#video-b { z-index: 3; opacity: 0; }        /* nahoře, ale skryté */

#intro {
  position: fixed;
  inset: 0;
  z-index: 11;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;    /* zarovná obsah nahoru */
  align-items: flex-start;        /* zarovná obsah doleva */
  padding-left: 7vw;              /* odstup od levého kraje – můžeš změnit na 5vw nebo 10vw */
  padding-top: 0.2vh;               /* odstup odshora – můžeš změnit */
  pointer-events: none;           /* celá vrstva je průhledná pro klikání */
  transition: opacity 1.2s ease-out;
  color: #12232E;
  font-size: 20vw;
  font-family: PixSans;
}
h1 {
  font-size: 16vw;
  margin-left: -9x;
  margin-top: 0.5px;
  margin-bottom: 2px;
  font-family: Comico;
  z-index: 5;
}
.hero-img{
  position: fixed;

  width: 22vw;
  max-width: 420px;
  min-width: 160px;

  left: 7.8vw;          /* 👈 stejné jako tlačítko */
  bottom: 2vw;        /* 👈 od spodku obrazovky */

  pointer-events: none;
  z-index: 10;
  opacity: 50%;
}


h3 {
  font-size: 2vw;
  margin-left: 16px;
  margin-top: 0.5px;
  margin-bottom: 9px;
  font-family: PixSans;
  z-index: 8;
}


#play-btn {
  position: fixed;        /* přilepené k oknu */
  left: 7vw;              /* vzdálenost od levého okraje */
  bottom: 8vh;            /* vzdálenost od spodního okraje */

  display: block;
  width: 18vw;
  min-width: 140px;
  max-width: 270px;
  height: auto;

  pointer-events: all;
  cursor: pointer;
  text-decoration: none;

  transition: transform 0.35s ease;

  transform-origin: left bottom;  /* 🔥 KLÍČ: škáluje se odspodu a zleva */
}


#play-btn img {
  width: 100%;
  height: auto;
  display: block;
}

/* TEXT – teď se zmenšuje/zvětšuje PŘESNĚ spolu s tlačítkem! */
#play-btn span {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #12232E;
  font-weight: bold;
  font-size: 1.9vw; 
  pointer-events: none;
  white-space: nowrap;
  font-family: PixSans;
}

/* Hover – celé tlačítko + text najednou */
#play-btn:hover,
#play-btn:active {
  transform: scale(1.07);
}




  .stars{
    position: fixed;
    top: 75vh;          /* odkud začíná tvoje voda – měň podle sebe */
    left: 0;
    width: 100vw;
    height: 100vh;       /* jak hluboko je voda – měň podle sebe */
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
  }
  .star{
    position: absolute;
    background: #fff;
    border-radius: 50%;
    opacity: 0;
    animation: float 15s infinite linear;
  }
  .star.size1 { width: 4px; height: 4px; animation-duration: 12s; }
  .star.size2 { width: 7px; height: 7px; animation-duration: 18s; }
  .star.size3 { width: 9px; height: 9px; animation-duration: 25s; }

  @keyframes float{
    0%   { transform: translateX(-100px); opacity: 0; }
    10%  { opacity: 0.2; }
    90%  { opacity: 0.2; }
    100% { transform: translateX(calc(100vw + 100px)); opacity: 0; }

  }




  .bubble-transition {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
}

.bubble {
  position: absolute;
  background: rgba(220, 245, 255, 0.4);   /* jemná modrobílá, poloprůhledná */
  border: none !important;                /* žádný okraj */
  border-radius: 0 !important;
  box-shadow: none !important;            /* žádný stín */
  border-radius: 50%;
  animation: bubbleUp linear forwards;
}

    @keyframes bubbleUp {
      0% {
        transform: translateY(100vh) scale(0);
        opacity: 0;
      }
      50% {
        opacity: 1;
      }
      100% {
        transform: translateY(-150px) scale(1.2);
        opacity: 0;
      }
    }