/* ===== PAGE LOADER ===== */
#page-loader {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #061c27, #031018);
  background-size: 200% 200%;
  animation: bgDrift 14s ease-in-out infinite;
  z-index: 9999;
  transition: opacity .8s ease;
}

#page-loader.fade-out {
  opacity: 0;
  pointer-events: none;
}

body.loading {
  overflow: hidden;
}

/* ===== CENTER ===== */
.loader-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  margin-bottom: 80px;
}

/* ===== GLOW ===== */
.loader-glow {
  position: absolute;
  inset: -40%;
  background: radial-gradient(
    circle at center,
    rgba(25,195,192,.12),
    transparent 65%
  );
  animation: glowBreath 4s ease-in-out infinite;
  pointer-events: none;
}

/* ===== UNDERLINES ===== */
.nevera-lines {
  display: flex;
  gap: 22px;
  transition: opacity .6s ease, transform .6s ease;
}

.nevera-lines.hide {
  opacity: 0;
  transform: translateY(6px);
}

.nevera-lines .line {
  width: 50px;
  height: 3px;
  background: rgba(255,255,255,.35);
  transition: background-color .45s ease;
}

.nevera-lines .line.active {
  background: #fff;
}

/* ===== BRAND ===== */
.brand-name {
  display: flex;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2.6rem, 6vw, 3.6rem);
  letter-spacing: .4em;
  font-weight: 400;
  transform: skewX(-10deg);
  opacity: 0;
}

.brand-name.show {
  opacity: 1;
}

.brand-name span {
  display: inline-block;
  opacity: 0;
  transform: translateX(-12px);
  background-image: linear-gradient(
    120deg,
    rgba(255,255,255,.15) 30%,
    rgba(255,255,255,1) 45%,
    rgba(255,255,255,.15) 60%
  );
  background-size: 300% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand-name.show span {
  animation:
    letterIn .9s cubic-bezier(.22,1,.36,1) forwards,
    letterShine 1.4s cubic-bezier(.4,0,.2,1) forwards;
}

.brand-name.show span:nth-child(1){animation-delay:.05s,.45s}
.brand-name.show span:nth-child(2){animation-delay:.1s,.5s}
.brand-name.show span:nth-child(3){animation-delay:.15s,.55s}
.brand-name.show span:nth-child(4){animation-delay:.2s,.6s}
.brand-name.show span:nth-child(5){animation-delay:.25s,.65s}
.brand-name.show span:nth-child(6){animation-delay:.3s,.7s}

@keyframes letterIn {
  to { opacity:1; transform:translateX(0); }
}

@keyframes letterShine {
  from { background-position:120% 0; }
  to   { background-position:-120% 0; }
}

/* ===== BACKGROUND ===== */
@keyframes bgDrift {
  0% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

@keyframes glowBreath {
  0%,100% { opacity:.35; }
  50% { opacity:.6; }
}