/* Font styles for A방문3천사 */

/* 여기어때 잘난체 기본 적용 (제목용) */
body, h1, h2, h3, h4, h5, h6 {
  font-family: 'YeogiOttaeJalnan', sans-serif;
}

/* NanumSquareRound 폰트 적용 (본문용, Bold) */
.font-nanum {
  font-family: 'NanumSquareRound', sans-serif !important;
  font-weight: 700 !important;
}

/* Animation styles for A방문3천사 */

/* Fade in animation for hero section */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fadeIn 1s ease-out;
}

/* Scroll animation for sections */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-animate {
  opacity: 0;
}

/* Intersection Observer will add this class when element is visible */
.scroll-animate.is-visible {
  animation: slideInUp 1s ease-out forwards;
}

/* Card animations with staggered delays */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.card-animate {
  opacity: 0;
}

.card-animate.is-visible {
  animation: cardSlideIn 0.6s ease-out forwards;
}

.card-animate:nth-child(1).is-visible {
  animation-delay: 0.1s;
}

.card-animate:nth-child(2).is-visible {
  animation-delay: 0.2s;
}

.card-animate:nth-child(3).is-visible {
  animation-delay: 0.3s;
}

.card-animate:nth-child(4).is-visible {
  animation-delay: 0.4s;
}

.card-animate:nth-child(5).is-visible {
  animation-delay: 0.5s;
}

/* Stagger animation delay for multiple sections */
.scroll-animate:nth-child(2) {
  animation-delay: 0.1s;
}

.scroll-animate:nth-child(3) {
  animation-delay: 0.2s;
}

.scroll-animate:nth-child(4) {
  animation-delay: 0.3s;
}

.scroll-animate:nth-child(5) {
  animation-delay: 0.4s;
}

.scroll-animate:nth-child(6) {
  animation-delay: 0.5s;
}

/* Intersection Observer animation */
.scroll-animate-on-view {
  opacity: 0;
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-animate-on-view.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Card hover effects */
.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Neon border animation for team member cards */
@keyframes neonBorder {
  0% {
    box-shadow: 0 0 5px rgba(236, 72, 153, 0.5),
                0 0 10px rgba(236, 72, 153, 0.3),
                inset 0 0 10px rgba(236, 72, 153, 0.1);
  }
  50% {
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.8),
                0 0 25px rgba(236, 72, 153, 0.5),
                inset 0 0 15px rgba(236, 72, 153, 0.2);
  }
  100% {
    box-shadow: 0 0 5px rgba(236, 72, 153, 0.5),
                0 0 10px rgba(236, 72, 153, 0.3),
                inset 0 0 10px rgba(236, 72, 153, 0.1);
  }
}

/* Rotating gradient border effect */
@keyframes rotateBorder {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.neon-border {
  position: relative;
  animation: neonBorder 2s ease-in-out infinite;
}

/* Animated gradient border */
.neon-border::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 1rem;
  padding: 3px;
  background: linear-gradient(
    90deg,
    rgba(236, 72, 153, 0.8),
    rgba(219, 39, 119, 0.8),
    rgba(190, 24, 93, 0.8),
    rgba(236, 72, 153, 0.8)
  );
  background-size: 200% 200%;
  animation: rotateBorder 3s linear infinite;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index: -1;
  opacity: 0.8;
}

/* Blue variant for second card */
.neon-border-blue::before {
  background: linear-gradient(
    90deg,
    rgba(59, 130, 246, 0.8),
    rgba(37, 99, 235, 0.8),
    rgba(29, 78, 216, 0.8),
    rgba(59, 130, 246, 0.8)
  );
  background-size: 200% 200%;
  animation: rotateBorder 3s linear infinite;
}

/* Typewriter effect */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid rgba(253, 224, 71, 0.8);
  animation: blink 0.7s step-end infinite;
  min-width: 0;
}

/* Hide blinking cursor after typing is done */
.typewriter.typing-done {
  border-right: none;
  animation: none;
}

/* Scroll to top button pulse effect */
@keyframes pulse-shadow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(236, 72, 153, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(236, 72, 153, 0.6);
  }
}

#scroll-top-btn {
  animation: pulse-shadow 2s ease-in-out infinite;
}

#scroll-top-btn:hover {
  animation: none;
  box-shadow: 0 6px 25px rgba(236, 72, 153, 0.7);
}

/* Mobile bottom bar spacing */
@media (max-width: 768px) {
  body {
    padding-bottom: 52px; /* Reduced space for smaller fixed bottom bar (60% of 80px ≈ 52px) */
  }
}

/* CTA Button pulse animations */
@keyframes pulse-green {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(34, 197, 94, 0.7);
  }
}

@keyframes pulse-yellow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(250, 204, 21, 0.4);
  }
  50% {
    box-shadow: 0 4px 20px rgba(250, 204, 21, 0.7);
  }
}