/* Loading Screen Styles */
.loading-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f8f5f0 0%, #e9e2d5 50%, #d8cdb3 100%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 1s ease-out, visibility 1s ease-out;
  overflow: hidden;
}

.loading-screen::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(213, 185, 106, 0.1) 0%, transparent 70%);
  animation: pulse 3s infinite alternate;
}

.loading-screen.hidden {
  opacity: 0;
  visibility: hidden;
}

.signature-container {
  position: relative;
  width: 80%;
  max-width: 800px;
  height: 300px;
  margin-bottom: 2rem;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* Name wrapper for sequential animation */
.name-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

/* Text container for Pawan Singh */
.text-container {
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}

/* Name text styling - common styles */
.name-text {
  font-family: 'Great Vibes', cursive;
  font-size: 7rem; /* Enlarged font size */
  color: #000000;
  margin: 0;
  opacity: 0;
  text-shadow: 0 0 15px rgba(213, 185, 106, 0.3);
  letter-spacing: 2px;
}

/* First name animation */
.first-name {
  transform: scale(0.9);
  opacity: 0;
  animation: fadeInScale 1.5s ease forwards;
}

/* Last name animation */
.last-name {
  transform: scale(0.9);
  opacity: 0;
  animation: fadeInScale 1.5s ease forwards;
}

.loading-message {
  color: #333333;
  font-family: 'Poppins', sans-serif;
  font-size: 1.2rem;
  letter-spacing: 3px;
  margin-top: 2rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeIn 1s ease 1.5s forwards;
  text-shadow: 0 0 10px rgba(213, 185, 106, 0.3);
  transition: all 1.5s ease;
}

.loading-progress {
  width: 200px;
  height: 3px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 2rem;
  position: relative;
  z-index: 2;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset;
}

.loading-bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #b79f71, #d5b96a);
  animation: progress 7s ease-in-out forwards;
  box-shadow: 0 0 15px rgba(213, 185, 106, 0.6);
  position: relative;
  overflow: hidden;
}

.loading-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
                             rgba(255, 255, 255, 0) 0%, 
                             rgba(255, 255, 255, 0.4) 50%, 
                             rgba(255, 255, 255, 0) 100%);
  animation: shimmer 2s infinite;
  transform: skewX(-20deg);
}

/* Pen effect for the signature */
.pen-effect {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #d5b96a;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  box-shadow: 0 0 15px rgba(213, 185, 106, 0.9), 0 0 5px rgba(213, 185, 106, 0.8);
  z-index: 3;
}

/* Particles for ink splatter effect */
.ink-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(213, 185, 106, 0.8);
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  z-index: 2;
  filter: blur(1px);
  box-shadow: 0 0 2px rgba(213, 185, 106, 0.5);
}

/* Background particles */
.bg-particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(183, 159, 113, 0.3);
  border-radius: 50%;
  animation: float 20s linear infinite;
}

/* Custom cursive line effect under signature */
.signature-container::after {
  display: none;
}

/* Flourish decoration */
.flourish {
  position: absolute;
  bottom: 20px;
  right: 50px;
  width: 100px;
  height: 50px;
  opacity: 0;
  animation: fadeIn 0.6s ease 3.8s forwards;
}

.flourish::before,
.flourish::after {
  content: '';
  position: absolute;
  width: 50px;
  height: 1px;
  background: rgba(183, 159, 113, 0.6);
  top: 25px;
  right: 0;
  transform-origin: right center;
  animation: flourishDraw 0.4s ease 4s forwards;
}

.flourish::after {
  top: auto;
  bottom: 10px;
  width: 30px;
  animation-delay: 4.2s;
}

/* Pen pressure effect - subtle paper texture */
.signature-container::before {
  display: none;
}

/* Animations */
@keyframes textFadeIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes progress {
  0% {
    width: 0;
  }
  5% {
    width: 8%;
  }
  10% {
    width: 12%;
  }
  15% {
    width: 18%;
  }
  20% {
    width: 22%;
  }
  25% {
    width: 28%;
  }
  30% {
    width: 34%;
  }
  35% {
    width: 38%;
  }
  40% {
    width: 42%;
  }
  45% {
    width: 48%;
  }
  50% {
    width: 56%;
  }
  55% {
    width: 62%;
  }
  60% {
    width: 68%;
  }
  65% {
    width: 72%;
  }
  70% {
    width: 78%;
  }
  75% {
    width: 82%;
  }
  80% {
    width: 88%;
  }
  85% {
    width: 92%;
  }
  90% {
    width: 96%;
  }
  95% {
    width: 98%;
  }
  100% {
    width: 100%;
  }
}

@keyframes penLight {
  0% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 0.6;
    transform: translate(-50%, -50%) scale(1.5);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes particleFloat {
  0% {
    transform: translate(0, 0);
    opacity: 0.8;
  }
  100% {
    transform: translate(var(--tx), var(--ty));
    opacity: 0;
  }
}

@keyframes float {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(calc(var(--tx) * 100px), calc(var(--ty) * 100px));
  }
}

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

@keyframes drawLine {
  to {
    width: 60%;
  }
}

@keyframes flourishDraw {
  0% {
    transform: scaleX(0) rotate(0deg);
  }
  100% {
    transform: scaleX(1) rotate(-5deg);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%) skewX(-20deg);
  }
  100% {
    transform: translateX(100%) skewX(-20deg);
  }
}

/* Common animation */
@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Media Queries */
@media screen and (max-width: 768px) {
  .signature-container {
    height: 200px;
  }
  .name-text {
    font-size: 5rem;
  }
  .name-wrapper {
    gap: 15px;
  }
  .loading-message {
    font-size: 1rem;
  }
}

@media screen and (max-width: 480px) {
  .signature-container {
    height: 150px;
  }
  .name-text {
    font-size: 3.5rem;
  }
  .name-wrapper {
    gap: 10px;
  }
  .loading-message {
    font-size: 0.9rem;
  }
}

/* Add more ink particle density */
.ink-particle-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}