/* CSS Text Animation for DUBAIFILMMAKER */

/* Ensure parent containers don't clip MAKER when it slides - but only during animation */
.bloc-intro:not(.lottie-ended) .intro-anim-surwrapper,
.bloc-intro:not(.lottie-ended) .intro-anim-wrapper,
.bloc-intro:not(.lottie-ended) .intro-anim {
  overflow: visible !important;
}

.intro-text-animation {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 0;
  font-family: 'Monument Extended Bold', sans-serif;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: auto;
  height: auto;
  overflow: visible; /* Allow MAKER to slide off-screen but stay visible */
  
  /* Match Lottie animation behavior: scale based on viewport */
  /* Balanced size for good visibility without overwhelming */
  /* SVG logo: 1115px x 69px (aspect ratio 16.16:1) */
  font-size: 5.5vw; /* Increased base size */
  max-width: none; /* Remove width constraint so MAKER can slide */
}

.intro-text-animation .letter {
  display: inline-block;
  opacity: 0; /* Hidden by default */
  animation: letterReveal 0.8s cubic-bezier(0.2, 0, 0.8, 1) forwards;
}

/* Hidden letters - completely removed from layout flow */
.intro-text-animation .letter:not(.letter-initial) {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Initial letters - visible from the start */
.intro-text-animation .letter-initial {
  opacity: 1; /* Visible initially */
  position: relative; /* Take up space in the flow */
  width: auto;
  height: auto;
  overflow: visible;
  animation: letterStayVisible 1.24s forwards;
}

@keyframes letterReveal {
  0% {
    opacity: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    transform: scale(0.76492); /* Match POSTERCO scale */
  }
  1% {
    position: relative; /* Switch to relative to take up space */
    width: auto;
    height: auto;
    overflow: visible;
  }
  100% {
    opacity: 1;
    position: relative;
    width: auto;
    height: auto;
    overflow: visible;
    transform: scale(1); /* Scale up to 100% */
  }
}

/* Initial letters stay visible */
.intro-text-animation .letter-initial {
  opacity: 1;
  animation: letterStayVisible 1.24s forwards;
}

@keyframes letterStayVisible {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

/* Animation delays are now applied dynamically via JavaScript */



/* Responsive sizing - matching Lottie animation behavior */

/* Tablet and below */
@media (max-width: 1024px) {
  .intro-text-animation {
    font-size: 6vw; /* Slightly larger on tablets */
  }
}

/* Mobile landscape and portrait */
@media (max-width: 768px) {
  .intro-text-animation {
    font-size: 5.5vw; /* Optimized for mobile */
    letter-spacing: 0.01em;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .intro-text-animation {
    font-size: 5.5vw; /* Fits well on small screens */
    letter-spacing: 0;
    max-width: 95vw;
  }
}

/* Large desktop - cap the size */
@media (min-width: 1920px) {
  .intro-text-animation {
    font-size: 115px; /* Larger max size */
  }
}

/* Extra large screens */
@media (min-width: 2560px) {
  .intro-text-animation {
    font-size: 154px; /* 6vw of 2560px */
  }
}