body {
  margin: 0;
  background: #000000;
}
html.skip-loader .loader { display: none !important; }

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  opacity: 1;
  transition: opacity 0.6s ease-in-out, visibility 0s linear 0.6s;
  visibility: visible;
}

.loader.fade-out {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.ph-container {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  color: white;
  display: flex;
  gap: 2px;
  user-select: none;
  opacity: 1;
  transition: opacity 0.6s ease-in-out;
}

.letter-p, .letter-h {
  position: relative;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.1);
}

.flowing-letters-p, .flowing-letters-h {
  position: absolute;
  top: 100%;
  display: flex;
  flex-direction: column;
  color: white;
  font-size: 1.5rem;
  font-weight: 300;
  user-select: none;
}

.flowing-letters-p {
  left: 4px;
}

.flowing-letters-h {
  left: 34px;
}

.flowing-letters-p span, .flowing-letters-h span {
  opacity: 0;
  animation: flowIn 0.6s ease-out forwards, flowOut 0.6s ease-in 2s forwards;
  line-height: 0.9;
  filter: blur(0.3px);
}

.flowing-letters-p span:nth-child(1) { animation-delay: 0.2s, 2.2s; }
.flowing-letters-p span:nth-child(2) { animation-delay: 0.3s, 2.3s; }
.flowing-letters-p span:nth-child(3) { animation-delay: 0.4s, 2.4s; }
.flowing-letters-p span:nth-child(4) { animation-delay: 0.5s, 2.5s; }
.flowing-letters-h span:nth-child(1) { animation-delay: 0.2s, 2.2s; }
.flowing-letters-h span:nth-child(2) { animation-delay: 0.3s, 2.3s; }
.flowing-letters-h span:nth-child(3) { animation-delay: 0.4s, 2.4s; }
.flowing-letters-h span:nth-child(4) { animation-delay: 0.5s, 2.5s; }
.flowing-letters-h span:nth-child(5) { animation-delay: 0.6s, 2.6s; }
.flowing-letters-h span:nth-child(6) { animation-delay: 0.7s, 2.7s; }
.flowing-letters-h span:nth-child(7) { animation-delay: 0.8s, 2.8s; }
.flowing-letters-h span:nth-child(8) { animation-delay: 0.9s, 2.9s; }

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 1.8s ease-in-out infinite;
  z-index: -1;
}

.line-accent {
  position: absolute;
  width: 50px;
  height: 1px;
  background: white;
  opacity: 0;
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  animation: slideIn 0.8s ease-out 1.2s forwards, fluctuate 2s ease-in-out infinite 2s;
}

.faint-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: glowPulse 2.5s ease-in-out infinite;
  z-index: -2;
}

/* Keyframes */
@keyframes flowIn {
  0% { opacity: 0; transform: translateY(8px); filter: blur(1.5px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0.3px); }
}

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

@keyframes pulse {
  0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0; }
  50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
}

@keyframes slideIn {
  0% { opacity: 0; transform: translateX(-50%) scaleX(0); }
  100% { opacity: 1; transform: translateX(-50%) scaleX(1); }
}

@keyframes fluctuate {
  0% { transform: translateX(-50%) scaleX(1); }
  50% { transform: translateX(-50%) scaleX(0.5); } 
  100% { transform: translateX(-50%) scaleX(1); } 
}

@keyframes glowPulse {
  0% { opacity: 0.05; transform: translate(-50%, -50%) scale(0.95); }
  50% { opacity: 0.1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0.05; transform: translate(-50%, -50%) scale(0.95); }
}