/* Custom styles that Tailwind can't easily handle */
body {
    font-family: 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
}

.parallax-bg {
    background-image: url('../images/hero-bg.webp');
}

.transparent-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    z-index: -1;
    opacity: 0.9;
}

.highlight-title {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    animation: titlePulse 2s infinite alternate, titleGlow 3s infinite;
}

@keyframes titlePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}

@keyframes titleGlow {
    0% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
    50% { text-shadow: 0 0 20px rgba(255, 204, 0, 0.8), 0 0 30px rgba(255, 204, 0, 0.5); }
    100% { text-shadow: 0 0 5px rgba(255, 204, 0, 0.5); }
}