/* ============================================
LOADER WRAPPER
=============================================== */
#loader-wrapper {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--background);
  overflow: hidden;
}

/* ============================================= 
LOADER CONTENT 
================================================ */
.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

/* ==============================================
INITIAL CONTAINER 
================================================= */
.initial-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 20px;
}

/* ================================================ 
LOADER NAME 
=================================================== */
.loader-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: darkgoldenrod;
  opacity: 0;
  margin-top: -20px;
}

/* ---- Reveal Name ---- */
@keyframes revealLoaderName {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- Animation Trigger ---- */
#loader-wrapper.show .loader-name {
  animation: revealLoaderName 0.8s ease 0.50s forwards;
}
  
/* ================================================
HIDE STATE 
=================================================== */
#loader-wrapper.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.8s ease, visibility 0.8s ease;
}

/* =====================================
LOADER MONOGRAM
======================================== */
/*---- Position ---- */
.loader-monogram {
  width: 90px;
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  margin-left: -30px;
  will-change: transform, opacity;
}

/* ---- Reveal Animation ---- */
@keyframes revealMonogram{
    0%{
        opacity:0;
        transform:
            translateY(18px)
            scale(0.92);
    }
    
    100%{
        opacity:1;
        transform:
            translateY(0)
            scale(1);
    }
}

/* ---- Heartbeat Animation ---- */
@keyframes monogramHeartbeat {
   0%, 100% {
     transform: scale(1); opacity: 0.6;
    }
   
   50% {
     transform: scale(1.05); opacity: 1;
   }
}

/* ---- Animation Trigger ---- */
#loader-wrapper.show .loader-monogram {
  animation:
    revealMonogram 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    monogramHeartbeat 3.5s ease-in-out 1.2s infinite;
}