/* RESET + ZÁKLAD */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Montserrat:wght@300;400&display=swap");


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

body{
font-family:'Montserrat', sans-serif;
overflow-x:hidden;
color: #ddd;
}

h1 {

cursor: pointer;

}

.bg-image {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
z-index: -1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
.bg-image {
background-attachment: scroll; /* Change from fixed to scroll on mobile for better performance */
}
}

/* Specific backgrounds for each creature */
.hejkal-bg {
background-image: url(backgrounds/bg_hejkal.png);
}
.lesij-bg {
background-image: url(backgrounds/bg_lešij.png);
}
.baba-jaga-bg {
background-image: url(backgrounds/babajaga_bg.png);
}
.vodnik-bg {
background-image: url(backgrounds/vodnicek.png);
}
.kostej-bg {
background-image: url(backgrounds/kostěj_bg.jpg);
background-image: linear-gradient(to bottom, rgba(11, 10, 8, 0.6), rgba(51, 30, 18, 0.341)),url(backgrounds/kostěj_bg.jpg);
background-blend-mode: multiply;
filter: hue-rotate(-20deg) brightness(1.05);

}
.vlkodlak-bg {
background-image: url(backgrounds/vlkodlak-bg.png);
}
.rusalka-bg {
background-image: url(backgrounds/rusalka_scene_bg.png);
}
.rusalka-effect-a {
background-image: linear-gradient(to bottom, rgba(102, 195, 255, 0.6), rgba(9, 37, 59, 0.85)), url(backgrounds/rusalka_bg.png);
background-blend-mode: overlay;
filter: hue-rotate(-20deg) brightness(1.05);
}
.rusalka-effect-b {
background-image: linear-gradient(to bottom, rgba(0, 0, 40, 0.7), rgba(0, 0, 0, 0.8)), url(backgrounds/rusalka_bg.png);
background-blend-mode: multiply;
filter: brightness(0.8) saturate(1.2);
}

.upir-bg {
background-image: url(malina_upir1.png);
}

.finale-bg {
background-image: url(backgrounds/upir-bg.png);
}
.klekanice-bg {
background-image: url(backgrounds/klekanice_bground.png);
}

/* BYTOST */


.hero-creature{

min-height: 100vh;
height: auto;
padding: 60px 20px;
position:relative;
display:flex;
align-items:center;
justify-content:center;
text-align: center;
}

.hero-overlay{
  pointer-events: none;
}

.hero-content{
position:relative;
z-index:2;
padding:20px;
}

.hero-content h1{
font-family:'Cinzel', serif;
font-size:clamp(2.5rem,5vw,4rem);
color:#e0aaff;
text-shadow:0 0 20px #c77dff;
margin-bottom:10px;
}


.hero-content p {

font-family: 'Cinzel', serif;
font-weight: 700;
font-size: 1.3rem;
line-height: 2rem;
margin-top: 25px;
text-shadow:0 0 20px #c77dff;



}

img {
  max-width: 100%;
  height: auto;
}

/* STATY */


.hint-section {
  padding: 10px;
  text-align: center;
}

.hint-container {
  max-width: 900px;
  margin: auto;
}

.hint-image {
  width: 100%;
  max-width: 700px;
  opacity: 0.95;

  filter: drop-shadow(0 0 20px rgba(199,125,255,0.25));
  transition: 0.5s ease;
}

.hint-image:hover {
  transform: scale(1.03);
  filter: drop-shadow(0 0 35px rgba(199,125,255,0.5));
}
/* STORY */

.story-section{
padding:80px 20px 30px 20px; 
max-width: 1100px;
margin: auto;

}

.story-container.reverse {
  flex-direction: row-reverse;
}

.story-container{
display:flex;
gap:60px;
align-items:center;
max-width:1100px;
margin:60px 0;
flex-wrap:wrap;
justify-content: space-between;
}

@media (max-width: 768px) {
  .story-container {
    flex-direction: column;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .story-container,
  .story-full {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.story-text{
flex:1;
font-size:1.15rem;
line-height:2;
color:#f5c6ff;
max-width: 520px;
}

.story-image{
flex:1;
text-align:center;
display: flex;
justify-content: center;
}

.story-image img{
  width:100%;
  max-width:520px;
  height:auto;
  transform:none;
}

/*  velký obrázek (ale NE přes celou obrazovku) */
.story-full {
  width: 100%;
  max-width: 900px;      /*  důležité – zmenší ho */
  margin: 60px auto;     /*  vycentruje */
  text-align: center;
  justify-content: center;
}

.story-full img {
  width: 100%;
  height: auto;
  max-width: 800px;
  border-radius: 10px;
 
}

.story-full-text p {
  text-align: justify;
}

.story-container,
.story-full {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeInUp 1s forwards;
}

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

/*  text pod velkým obrázkem */
.story-full-text {
  max-width: 700px;
  margin: 20px auto 20px auto; 
  text-align: left;
  font-size: 1.15rem;
  line-height: 2;
  color:#f5c6ff;
}
/*GLOWING TITLE efekt*/

.glow-title{
font-family:'Cinzel', serif;
color:#e0aaff;
font-size: 2.5rem;

animation: glowPulse 2.5s infinite ease-in-out,
            flicker 4s infinite;

text-shadow:
0 0 10px rgba(199,125,255,0.6),
0 0 20px rgba(199,125,255,0.4);
}

@keyframes flicker{
0%, 100%{opacity:1;}
48%{opacity:0.8;}
50%{opacity:0.4;}
52%{opacity:1;}
}

@keyframes glowPulse{

0%{
opacity:0.7;
text-shadow:
0 0 5px rgba(199,125,255,0.3),
0 0 10px rgba(199,125,255,0.2);
}

50%{
opacity:1;
text-shadow:
0 0 15px rgba(199,125,255,0.8),
0 0 35px rgba(199,125,255,0.6),
0 0 60px rgba(199,125,255,0.4);
}

100%{
opacity:0.7;
text-shadow:
0 0 5px rgba(199,125,255,0.3),
0 0 10px rgba(199,125,255,0.2);
}

}

/*MAGIC CARD zmizení efekt*/

.card-wrapper{
margin-top:50px;
display:flex;
justify-content:center;
}

.magic-card{
width:220px;
transition: opacity 1.5s ease, transform 1.5s ease;
}

.magic-card{
animation: floatCard 4s ease-in-out infinite;
}

@keyframes floatCard{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0);}
}

/* efekt zmizení */

.magic-card.disappear{
opacity:0;
transform: scale(0.8) translateY(20px);
}

/* DROP CAP */

.dropcap p{
float:left;
font-family:'Cinzel', serif;
font-size:4rem;
line-height: 0.9;
margin-top: 6px;
margin-right:12px;
color:#e0aaff;

}

/* CHOICES */

.choices-section{
text-align:center;
padding:70px 20px;
display: flex;
flex-direction: column;
align-items: center;
opacity: 1;
transform: none;
}

.choices button{
transition: all 0.5s ease;
}

.choices-section.fade-out button{
transform: scale(0.9);
opacity: 0;
}

.choices-section.fade-out {
opacity:0;
transform:translateY(30px);
transition: 1s ease;
pointer-events:none;

}

.choices{
display:flex;
gap:20px;
justify-content:center;
flex-wrap:wrap;
margin-top:40px;
}

.choices button{
padding:15px 25px;
background:transparent;
border:2px solid #c77dff;
color:white;
cursor:pointer;
transition:0.3s;
}

.choices button:hover{
background:#c77dff;
box-shadow:0 0 20px #c77dff;
transform:scale(1.05);
}

/* CONTINUE */

.continue-section{
padding:40px 20px 60px 20px;
margin-top: -40px;
text-align:center;
opacity:0;
display: flex;
flex-direction: column;
align-items: center;
transform:translateY(50px);
transition:1s;
}

.continue-section p{
max-width:600px;
margin:0 auto 20px auto;   /* vycentruje blok */
text-align:left;           /* text doleva */
line-height:2;
font-size:1.15rem;
color:#f5c6ff;
}

.continue-section.active{
opacity:1;
transform:translateY(0);
}

.continue-section img{
width:600px;
max-width:100%;
margin-bottom:30px;
}

.continue-btn{
display:inline-block;
margin-top:10px;
padding:15px 30px;
border:2px solid #c77dff;
color:white;
text-decoration:none;
transition:0.3s;
}

.continue-btn:hover{
background:#c77dff;
box-shadow:0 0 20px #c77dff;
}

/* HEJKAL BACKGROUND */


/* jemné „halucinace“ */

.story-creature{
animation: none;
}

.fade-out {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  pointer-events: none; /* zabrání kliknutí během animace */
}

.disappear {
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

@keyframes subtleMove{
0%{transform:scale(1);}
100%{transform:scale(1.05);}
}

/* kurzor stopa */
.cursor-trail {
  position: absolute;
  pointer-events: none;
  width: 20px;
  height: 20px;
  background: radial-gradient(circle, #c77dff 0%, transparent 70%);
  border-radius: 50%;
  opacity: 0.7;
  mix-blend-mode: lighten;
  animation: fadeOut 0.5s forwards;
}

@keyframes fadeOut {
  to { opacity: 0; transform: scale(0.5); }
}

.interactive-map{

padding:80px 0;
display:flex;
justify-content:center;

}

.map-container{

position:relative;
width:100%;
max-width:1100px;


}

.map-image{

width:100%;
border-radius:20px;
filter:brightness(0.7);

}

/* MARKER */

.map-marker{

position:absolute;
width:26px;
height:26px;
text-decoration: none;

background:#8b5cf6;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

cursor:pointer;

box-shadow:
0 0 10px #a855f7,
0 0 25px #9333ea,
0 0 45px #7c3aed;

transition:0.3s;

}

.map-marker.unlocked{
background:#8b5cf6;

box-shadow:
0 0 10px #a855f7,
0 0 25px #9333ea,
0 0 45px #7c3aed;

cursor:pointer;
}

.map-marker.locked{
background:#522668;

box-shadow:
0 0 10px #7c3aed,
0 0 20px #9333ea;

cursor:not-allowed;
opacity:0.7;
}

.map-marker.locked::before{
content:"🔒";
}

.map-marker.unlocked::before{
content:"☠";
}


.map-marker.locked{
pointer-events:none;
}

.map-marker.unlocked{
animation: unlockPulse 2s infinite;
}

@keyframes unlockPulse{
0%,100%{box-shadow:0 0 10px #a855f7;}
50%{box-shadow:0 0 30px #c77dff;}
}


.map-marker:hover{

transform:scale(1.3);

}

/* lebka */

.map-marker::before{

content:"☠";
font-size:12px;
color:white;

}

/* TOOLTIP */

.marker-tooltip{

position:absolute;

bottom:35px;
left:50%;

transform:translateX(-50%) scale(0.8);

background:#0f0b14;
padding:12px 16px;

border-radius:8px;

opacity:0;
pointer-events:none;

white-space:nowrap;

box-shadow:0 0 20px rgba(139,92,246,0.4);

transition:0.3s;

}

.marker-tooltip h4{

margin:0;
font-size:14px;
color:#c084fc;

}

.marker-tooltip p{

margin:2px 0 0 0;
font-size:12px;
color:#ddd;

}

.map-marker:hover .marker-tooltip{

opacity:1;
transform:translateX(-50%) scale(1);

}

.map-marker.final-boss {
  background: #ff0000;
  box-shadow: 
    0 0 10px #ff4d4d,
    0 0 25px #ff1a1a,
    0 0 45px #b30000;
}

.map-marker.final-boss h4 {

color: #b30000;

}

/* Additional responsive styles */
@media (max-width: 768px) {
.hero-content h1 {
font-size: clamp(2rem, 8vw, 3rem);
}
.hero-content p {
font-size: 0.9rem;
}
.creature-stats {
padding: 60px 20px;
}
.stats-box {
padding: 20px;
}
.story-section {
padding: 60px 20px;
}
.story-container {
gap: 30px;
}
.story-text {
font-size: 1rem;
}
.dropcap {
font-size: 2.5rem;
}
.choices-section {
padding: 60px 20px;
}
.choices {
gap: 10px;
}
.choices button {
padding: 12px 20px;
font-size: 0.9rem;
}
.continue-section {
padding: 80px 20px;
}
.continue-section img {
width: 300px;
}
.interactive-map {
padding: 80px 0;
}
.map-container {
max-width: 95%;
}
}

@media (max-width: 768px){

.story-container{
flex-direction: column;
gap:20px;
}

.story-text{
max-width:100%;
font-size:0.95rem;
line-height:1.7;
}

.story-image img{
max-width:100%;
}

.story-full img{
max-width:100%;
}

.continue-section{
padding:40px 15px;
}

.continue-btn{
width:100%;
text-align:center;
}

}


.choices.fade-out{
opacity:0;
transform:translateY(20px);
transition:1s ease;
pointer-events:none;
}

.story-center {
  width:100%;
  display:flex;
  justify-content:center;
  margin:100px 0 40px 0;
}

.story-center-text .continue-btn {
  display:block;
  margin:40px auto 0 auto;
  width:max-content;
}

.story-center img {
  width:100%;
  max-width:500px;
  border-radius:12px;
}

.story-center-text {
  max-width:600px;
  margin:0 auto 80px auto;
  text-align:left;
  line-height: 1.9;
  font-size: 1.2rem;
 
}

.story-center-text p {
  margin-bottom:40px;
}

.story-section{
  max-width:1000px;
  margin:auto;
}

/* DESTINY OF HEART SECTION */
.destiny-section {
  padding: 100px 20px;
  text-align: center;
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  background: linear-gradient(135deg, rgba(0,0,0,0.8) 0%, rgba(40,0,60,0.6) 100%);
  border-top: 1px solid rgba(199, 125, 255, 0.3);
  border-bottom: 1px solid rgba(199, 125, 255, 0.3);
}

.destiny-section.active {
  opacity: 1;
  transform: translateY(0);
}

.destiny-container {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

.destiny-image img {
  width: 200px;
  height: 200px;
  object-fit: contain;
  filter: drop-shadow(0 0 20px rgba(199, 125, 255, 0.5));
  animation: gentleGlow 3s ease-in-out infinite alternate;
}

@keyframes gentleGlow {
  0% { filter: drop-shadow(0 0 20px rgba(199, 125, 255, 0.3)); }
  100% { filter: drop-shadow(0 0 30px rgba(199, 125, 255, 0.8)); }
}

.destiny-poem {
  color: #f5c6ff;
  font-family: 'Cinzel', serif;
  line-height: 1.8;
}

.poem-question {
  font-size: 1.4rem;
  margin-bottom: 30px;
  text-shadow: 0 0 10px rgba(199, 125, 255, 0.5);
}

.poem-line {
  display: block;
  margin-bottom: 8px;
  font-style: italic;
  animation: fadeInUp 2s ease-out forwards;
  opacity: 0;
}

.poem-line:nth-child(1) { animation-delay: 0.5s; }
.poem-line:nth-child(2) { animation-delay: 1s; }
.poem-line:nth-child(3) { animation-delay: 1.5s; }
.poem-line:nth-child(4) { animation-delay: 2s; }

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.destiny-input-wrapper {
  display: flex;
  gap: 15px;
  align-items: center;
  margin: 30px 0;
  flex-wrap: wrap;
  justify-content: center;
}

#destinyInput {
  padding: 12px 20px;
  border: 2px solid rgba(199, 125, 255, 0.5);
  background: rgba(0, 0, 0, 0.7);
  color: #f5c6ff;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  border-radius: 8px;
  text-align: center;
  min-width: 250px;
  transition: all 0.3s ease;
  text-transform: uppercase;
}

#destinyInput:focus {
  outline: none;
  border-color: #c77dff;
  box-shadow: 0 0 20px rgba(199, 125, 255, 0.6);
  background: rgba(40, 0, 60, 0.8);
}

.destiny-btn {
  padding: 12px 25px;
  border: 2px solid #c77dff;
  background: rgba(199, 125, 255, 0.1);
  color: #f5c6ff;
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.destiny-btn:hover {
  background: #c77dff;
  box-shadow: 0 0 20px rgba(199, 125, 255, 0.7);
  transform: translateY(-2px);
}

.destiny-hint {
  font-size: 0.9rem;
  color: rgba(245, 198, 255, 0.7);
  font-style: italic;
  margin-top: 15px;
}

/* Responsive adjustments for destiny section */
@media (max-width: 768px) {
  .destiny-container {
    gap: 30px;
  }

  .destiny-image img {
    width: 150px;
    height: 150px;
  }

  .poem-question {
    font-size: 1.2rem;
  }

  .destiny-input-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  #destinyInput {
    min-width: 200px;
  }
}

.quess-btn {

font-family: "Cinzel";
font-size: 1.3rem;
padding: 20px;
color:rgba(255, 225, 243, 0.801);
font-weight: 800;
background-color: rgba(194, 95, 164, 0.205);
text-shadow: 0 0 10px rgba(199, 125, 255, 0.7),
0 0 20px rgba(199, 125, 255, 0.4);
border-color: #c77dff;
 box-shadow: 0 0 20px rgba(199, 125, 255, 0.6);
cursor: pointer;
    

}

.quess-btn:hover {

font-family: "Cinzel";
font-size: 1.5rem;
padding: 20px;
color:rgba(253, 0, 17, 0.801);
font-weight: 800;
background-color: rgba(36, 2, 26, 0.54);
text-shadow: 0 0 10px rgba(199, 125, 255, 0.7),
0 0 20px rgba(199, 125, 255, 0.4);
border-color: #c77dff;
 box-shadow: 0 0 20px rgba(199, 125, 255, 0.6);
cursor: pointer;
transition: 1s ease;



}

#destinySection {
  opacity: 0;
  transform: translateY(40px);
  pointer-events: none;
}

#destinySection.active {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1.2s ease, transform 1.2s ease;
  pointer-events: auto;
}