/* loader.css - Loading screen styles */

/* Preload */
link[rel="preload"] {
  display: none;
}

/* Loader control buttons spacing (add to existing CSS) */
#loaderControls .btn {
  padding: .45rem .9rem;
  font-size: .95rem;
}
#loaderControls .btn-secondary {
  padding: .45rem .9rem;
}

/* decorative emoji background */
#emojiBg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  mix-blend-mode: normal;
}

.emoji-bg-item {
  position: absolute;
  will-change: transform, opacity;
  user-select: none;
  pointer-events: none;
  opacity: 0;
  transform-origin: center;
  text-shadow: 0 6px 18px rgba(0,0,0,0.12);
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.9,.3,1);
  font-size: 28px;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,0.08));
}

.emoji-bg-item.show {
  animation: floatUp var(--dur, 7s) linear infinite;
  opacity: 1;
}

@keyframes floatUp {
  0%   { transform: translateY(6vh) rotate(-6deg) scale(0.92); opacity: 0; }
  10%  { opacity: 1; }
  50%  { transform: translateY(-8vh) rotate(6deg) scale(1); }
  100% { transform: translateY(-20vh) rotate(12deg) scale(1.02); opacity: 0; }
}

/* ensure main content stays above emoji BG */
.container, .progress-container, footer, header, .modal, .popup, .step-content {
  position: relative;
  z-index: 1;
}

/* LOADER overlay & animations + language facts */
#loaderOverlay {
  position:fixed;
  top:0;
  left:0;
  width:100vw;
  height:100vh;
  background:linear-gradient(180deg,#ffffff 0%, #fff8e1 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  z-index:10000;
  transition:opacity .45s ease, visibility .45s ease;
  overflow:hidden;
}

#loaderOverlay.hidden {
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

body.loader-active, html.loader-active {
  overflow:hidden;
  touch-action:none;
  -webkit-overflow-scrolling:none;
}

#loaderBox {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:20px;
}

/* loader logo */
#loaderLogo {
  width:200px;
  height:200px;
  border-radius:14px;
  object-fit:contain;
  box-shadow:0 14px 36px rgba(0,0,0,.12);
  padding:8px;
}

.loaderBrand {
  font-family:'Fredoka One',cursive;
  font-size:1.6rem;
  color:var(--primary);
  margin-top:6px;
}

.emoji-cluster {
  position:relative;
  width:260px;
  height:120px;
  margin-top:12px;
  pointer-events:none;
}

.emoji {
  position:absolute;
  font-size:28px;
  will-change:transform,opacity;
  animation:float 2000ms ease-in-out infinite;
  transform-origin:center;
  filter:drop-shadow(0 6px 8px rgba(0,0,0,.12));
}

.emoji.e1{left:6%; top:48%; animation-delay:0ms}
.emoji.e2{left:22%; top:8%; animation-delay:120ms}
.emoji.e3{left:46%; top:30%; animation-delay:240ms}
.emoji.e4{left:68%; top:10%; animation-delay:360ms}
.emoji.e5{left:84%; top:52%; animation-delay:480ms}
.emoji.e6{left:52%; top:74%; animation-delay:600ms}

.loaderFact {
  margin-top:10px;
  padding:12px;
  border-radius:10px;
  max-width:520px;
  text-align:center;
  background:white;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}

.loaderFact .factEmoji {
  font-size:1.35rem;
  margin-right:.45rem;
}

.loaderFact .factText {
  font-weight:600;
  color:#333;
}

@keyframes float{
  0%{transform:translateY(0) scale(1); opacity:1}
  50%{transform:translateY(-12px) scale(1.06); opacity:0.95}
  100%{transform:translateY(0) scale(1); opacity:1}
}

.emoji.e2 {
  animation-name:float,rotate;
  animation-iteration-count:infinite,1;
}

@keyframes rotate{
  0%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-10px) rotate(8deg)}
  100%{transform:translateY(0) rotate(0)}
}

@media (max-width:420px){
  .emoji{font-size:22px}
  .emoji-cluster{width:220px;height:90px}
  #loaderLogo{width:200px;height:200px}
  header img.logo{width:160px;height:160px}
  .loaderFact{padding:10px;font-size:.95rem}
}