/* Remove default margin and padding from the page */
body, html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden; /* Prevents scrollbars */
  font-family: sans-serif;
}

/* This container will hold the images */
.slideshow-container {
  position: relative;
  width: 100vw; /* 100% of viewport width */
  height: 100vh; /* 100% of viewport height */
  
  /* --- CHANGED --- */
  /* Remove the static black background */
  /* background-color: #000; */ 
  
  /* --- ADDED --- */
  /* Apply our new 30-second color-changing animation */
  animation: changeBackground 30s linear infinite;
}

/* Base style for all images in the slideshow */
.slideshow-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* This ensures the whole image fits, rather than being cut off */
  object-fit: contain; 

  /* Start invisible */
  opacity: 0;

  /* This is the starting size for the zoom effect */
  transform: scale(1);

  /* Define the fade AND zoom transitions */
  transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

/* This class will be added by JavaScript to fade an image in */
.slideshow-image.visible {
  opacity: 1;

  /* This is the slightly "bigger" size it will zoom to */
  transform: scale(1.05);
}


/* --- ADDED --- */
/* This is the new animation for the background color */
@keyframes changeBackground {
  0%   { background-color: #FFDAB9; } /* Peach */
  25%  { background-color: #E6E6FA; } /* Lavender */
  50%  { background-color: #D4F1F4; } /* Light Blue */
  75%  { background-color: #F0FFF0; } /* Mint */
  100% { background-color: #FFDAB9; } /* Back to Peach */
}

/* This container holds and centers the text */
.welcome-text-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10; /* Puts the text on top of the slideshow */
  text-align: center;
  pointer-events: none; /* Lets mouse clicks pass through */
}

/* Style for the main "Hyvää isänpäivää" text */
.welcome-text-container h1 {
  /* --- UPDATED FONT --- */
  font-family: "Brush Script MT", "Brush Script Std", "Apple Chancery", cursive;
  font-weight: 600;
  font-size: clamp(32px, 6vw, 70px); /* Responsive font size */
  color: white;
  /* --- UPDATED SHADOW/GLOW --- */
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.5), 0 0 16px rgba(0, 0, 0, 0.3);
  margin: 0;
  white-space: pre-wrap; /* Ensures spaces are respected */
}

/* Style for the "parhaalle iskälle" subtext */
.welcome-text-container p {
  /* --- UPDATED FONT --- */
  font-family: "Brush Script MT", "Brush Script Std", "Apple Chancery", cursive;
  font-weight: 300;
  font-size: clamp(20px, 3.5vw, 40px); /* Responsive font size */
  color: white;
  /* --- UPDATED SHADOW/GLOW --- */
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.5), 0 0 12px rgba(0, 0, 0, 0.3);
  margin: 10px 0 0 0;
  white-space: pre-wrap;
}

/* This is the starting state for each letter (invisible) */
.welcome-text-container span {
  opacity: 0;
  /* --- UPDATED ANIMATION --- */
  /* Start 10px lower */
  transform: translateY(10px);
  /* New transition for the slide */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  display: inline-block; /* Required for the transition */
}

/* This class is added by JS to fade each letter in */
.welcome-text-container span.fade-in {
  opacity: 1;
  /* --- UPDATED ANIMATION --- */
  /* End at the original position (0px) */
  transform: translateY(0);
}

/* This class is added by JS to fade the *entire* block out */
.welcome-text-container.fading-out {
  animation: fadeOut 2s 1s ease-in-out forwards;
}

/* The fade-out animation */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Base style for the heart emoji */
.click-heart {
  position: fixed; /* Position relative to the viewport */
  pointer-events: none; /* Don't let it interfere with clicks */
  font-size: 2rem; /* Size of the heart emoji */
  color: #ff6b6b; /* A nice red color */
  
  /* Apply the animation */
  animation: popHeart 0.6s linear forwards;
  
  /* Add a little shadow to stand out */
  text-shadow: 0 0 5px rgba(0,0,0,0.3);
}

/* The "pop" animation */
@keyframes popHeart {
  0% {
    opacity: 0.9;
    transform: scale(0.5);
  }
  100% {
    opacity: 0;
    transform: scale(1.5) translateY(-30px); /* Move up as it fades */
  }
}