* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    height: 100%;
    overflow: auto;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

.animate-on-scroll {
    opacity: 0 !important;
}

h2 {
  text-align: center;
}

.animate-now {
    opacity: 1 !important;
    animation-play-state: running !important;
}

.background-overlay {
    height: 100vh;
    width: 100%;
    background-image: url(lidice-pozadi.png);
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
    color: white;
    font-size: 7rem;
    text-shadow: 2px 2px 10px rgba(0,0,0,0.8);
    animation: slideIn 2s ease-out forwards;
    animation-play-state: paused;
}

.subtitle {
    font-size: 2rem;
    color: #fff;
    opacity: 0.7;
    animation: blink 2s infinite;
}

@keyframes slideIn {
    from { transform: translateX(-100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

@keyframes blink {
    0%{opacity:0} 50%{opacity:1} 100%{opacity:0}
}

.next-section {
    height: 100vh;
    background-image: url(lidice-pozadi2.png);
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    padding: 5%;
}

.text-left, .text-right {
    width: 60%;
    background: rgba(255,255,255,0.6);
    padding: 20px;
    border-radius: 10px;
    font-size: 1.6rem;
    font-family: 'Times New Roman', serif;
    animation-play-state: paused;
}

.text-left {
    animation: fadeLeft 2s forwards;
}

.text-right {
    animation: fadeRight 2s forwards;
}

@keyframes fadeLeft {
    from { opacity: 0; transform: translateX(-100%); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
    from { opacity: 0; transform: translateX(100%); }
    to { opacity: 1; transform: translateX(0); }
}

.second-section {
    position: relative;
    height: 100vh;
    background: #222;
    background-image: url(lidice-pozadi2.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    padding: 60px 20px;
}

.fade-box {
    position: absolute;
    max-width: 300px;
    padding: 20px;
    background-color: rgba(255,255,255,0.6);
    color: #000;
    border-radius: 10px;
    animation: fadeInUp 2s forwards;
    animation-play-state: paused;
}

.box1 { top: 20%; left: 10%; }
.box2 { top: 20%; right: 15%; }
.box3 { top: 70%; left: 20%; }
.box4 { top: 70%; right: 20%; }

@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to { opacity: 1; transform: translateY(0); }
}

.third-section {
    position: relative;
    min-height: 100vh;
    background-image: url(lidice-pozadi4.jpeg);
    background-size: cover;
    padding: 80px 10%;
}
.third-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.6);
  z-index: 0;
}
.title-animate {
    color: white;
    font-size: 4rem;
    animation: slideDown 2s forwards;
    animation-play-state: paused;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-80px); }
    to { opacity: 1; transform: translateY(0); }
}

.story-box {
    background: rgba(255,255,255,0.65);
    padding: 20px;
    border-radius: 10px;
    font-family: 'Times New Roman', serif;
    font-size: 1.5rem;
    margin: 20px 0;
    animation: fadeInSide 2s forwards;
    animation-play-state: paused;
}

.left { transform: translateX(-100px); }
.right { transform: translateX(100px); }

@keyframes fadeInSide {
    from { opacity: 0; transform: translateX(100px); }
    to { opacity: 1; transform: translateX(0); }
}

.next-chapter {
    min-height: 100vh;
    background-image: url(lidice-pozadi5.png);
    background-size: cover;
    padding: 60px 5%;
}

.title-animate2 {
    font-size: 4rem;
    color: white;
    animation: slideDown 2s forwards;
    animation-play-state: paused;
}

.left2 { animation: fadeLeft 2s forwards; animation-play-state: paused; }
.right2 { animation: fadeRight 2s forwards; animation-play-state: paused; }

@media (max-width: 992px) {
  .title, .title-animate, .title-animate2 {
    font-size: 2.2rem;
    text-align: center;
  }

  .text-left, .text-right, .story-box {
    width: 90% !important;
    font-size: 0.95rem;
    padding: 20px;
    margin: 10px auto;
    transform: translateX(0) !important;
    text-align: center;
  }

  .fade-box {
    position: static;
    max-width: 90%;
    margin: 20px auto;
    transform: none;
    animation-delay: 0s !important;
  }

  .background-overlay, .next-section, .scattered-section, .third-section, .next-chapter {
    padding: 40px 5%;
    flex-direction: column !important;
    align-items: center;
  }
}