<div id="language-flash">
  <div class="flash-word" data-lang="russian">Сладкий</div>
  <div class="flash-word" data-lang="romanian">Dulce</div>
  <div class="flash-word" data-lang="greek">Γλυκός</div>
  <div class="flash-word" data-lang="french">Doux</div>
  <div class="flash-word" data-lang="spanish">Dulce</div>
  <div class="flash-word" data-lang="swedish">Söt</div>
  <div class="flash-word" data-lang="portuguese">Doce</div>
  <div class="flash-word" data-lang="italian">Dolce</div>
  <div class="final-reveal">The Brand Cottage</div>
</div>

<style>
#language-flash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #F5F2E8;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: hideFlash 8s forwards;
}

.flash-word, .final-reveal {
  position: absolute;
  font-family: 'Crimson Text', serif;
  font-size: 4rem;
  color: #464C49;
  opacity: 0;
  text-align: center;
}

.flash-word[data-lang="russian"] { animation: flash 0.8s ease 0.5s forwards; }
.flash-word[data-lang="romanian"] { animation: flash 0.8s ease 1.3s forwards; }
.flash-word[data-lang="greek"] { animation: flash 0.8s ease 2.1s forwards; }
.flash-word[data-lang="french"] { animation: flash 0.8s ease 2.9s forwards; }
.flash-word[data-lang="spanish"] { animation: flash 0.8s ease 3.7s forwards; }
.flash-word[data-lang="swedish"] { animation: flash 0.8s ease 4.5s forwards; }
.flash-word[data-lang="portuguese"] { animation: flash 0.8s ease 5.3s forwards; }
.flash-word[data-lang="italian"] { animation: flash 1.2s ease 6.1s forwards; }

.final-reveal {
  animation: finalShow 2s ease 7.5s forwards;
}

@keyframes flash {
  0% { opacity: 0; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.1); }
}

@keyframes finalShow {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes hideFlash {
  0%, 90% { opacity: 1; }
  100% { opacity: 0; visibility: hidden; }
}
</style>