.heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0.8rem 1rem 0.8rem;
  font-size: var(--fs-heading);
}

.story-wrapper {
  width: 100%;
  height: 98%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
}

.story-slide {
  display: none;
  height: 100%;
  flex-direction: column;
  align-items: center;
}

.story-slide.active {
  display: flex;
}

.image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.image-wrapper img {
  width: 100%;
  display: block;
  border-radius: 20px;
  height: 100%;
  object-fit: cover;
}

.image-wrapper::before,
.image-wrapper::after {
content: "";
position: absolute;
left: 0;
right: 0;
height: 100px;
z-index: 1;
pointer-events: none;
}

.image-wrapper::before {
top: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 1), transparent);
}

.image-wrapper::after {
bottom: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 1), transparent);
}


.overlay-title {
  position: absolute;
  top: 10px;
  left: 20px;
  color: var(--secondary-text-color);
  /* font-size: 2.2rem; */
  font-size: 8.1vw;
  font-weight: 400;
  text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
  z-index: 2;
  margin: 25px 0;
}

.sommeliers{
  height: 100%;
}

.story-info {
  position: absolute;
  bottom: 20px;
  left: 20px;
  width: 100%;
  color: var(--secondary-text-color);
  z-index: 1;
}

.story-info a {
  text-decoration: none;
}

.story-info h3 {
  color: #ffd700;
  font-size: 2.2rem;
  font-weight: 400;
}

.story-info p {
  /* margin: 5px 0; */
  font-style: italic;
  /* font-size: 1.4rem; */
  color: var(--secondary-text-color);
  visibility: hidden;     /* For now  */
}

.progress-container {
  display: flex;
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  gap: 5px;
  z-index: 10;
}

.progress-bar {
  flex: 1;
  height: 5px;
  background: rgba(255,255,255,0.2);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  width: 0%;
  height: 100%;
  background: #ffd700;
  animation: none;
}









/* header & modal */
.heading {
  position: relative;
  display: inline-block;
}

.start-button {
  background-color: var(--main-color);
  /* background-color: var(--nav-color); */
  color: var(--secondary-text-color);
  padding: 0.8rem;
  border-radius: 50px;
  border: none;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 0.2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.start-button:hover {
  background-color: #e658b2;
}

.start-button-toggle{
display: none;
}

.start-button svg{
  height: 20px;
  width: auto;
  animation: swirl 6s ease-in-out infinite;
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

.start-button:hover svg{
  animation: swirl 6s ease-in-out infinite;
  transform-origin: center bottom;
  transform-style: preserve-3d;
}


@keyframes swirl {
  0%, 100% { transform: rotate(0deg); }
  18% { transform: rotate(6deg); }
  36% { transform: rotate(-6deg); }
  54% { transform: rotate(6deg); }
  72% { transform: rotate(-6deg); }
  90% { transform: rotate(6deg); }
  100% { transform: rotate(-0deg); }
}

.wine-liquid {
  transform-origin: center;
  animation: wave 2.5s infinite ease-in-out;
  animation: wineRipple 2.5s ease-in-out infinite;
  transform-box: fill-box;
}

@keyframes wave {
  0%   { transform: translateY(0) scaleX(1); }
  50%  { transform: translateY(-0.3px) scaleX(1.03); }
  100% { transform: translateY(0) scaleX(1); }
}

@keyframes wineRipple {
  0% {
    transform: scaleX(1) translateY(0) skewX(0deg);
  }
  20% {
    transform: scaleX(1.03) translateY(-0.3px) skewX(4deg);
  }
  50% {
    transform: scaleX(1.05) translateY(0.5px) skewX(-5deg);
  }
  80% {
    transform: scaleX(1.03) translateY(-0.3px) skewX(3deg);
  }
  100% {
    transform: scaleX(1) translateY(0) skewX(0deg);
  }
}







  /* Media query to center and simulate mobile on larger screens */
  @media (min-width: 768px) {
    .overlay-title {   
      font-size: 2rem;

    }
  }