@tailwind base;
@tailwind components;
@tailwind utilities;

/* --- Custom Animations --- */

/* Spin Animation for Vinyl */
@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-spin-slow {
    animation: spin-slow 10s linear infinite;
}

.paused {
    animation-play-state: paused;
}

/* Entrance Fade Up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 1s ease-out forwards;
}

/* Scroll Reveal */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Heart Animation --- */
.heart {
    position: absolute;
    width: 20px;
    height: 20px;
    --heart-color: #ff6b6b; /* Default fallback */
    background-color: var(--heart-color);
    transform: rotate(45deg);
    animation: floatUp 4s ease-in-out forwards;
    pointer-events: none;
    z-index: 9999;
}

.heart::before,
.heart::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background-color: var(--heart-color);
    border-radius: 50%;
}

.heart::before {
    top: -10px;
    left: 0;
}

.heart::after {
    left: -10px;
    top: 0;
}

@keyframes floatUp {
    0% {
        transform: translateY(0) rotate(45deg) scale(0.5);
        opacity: 1;
    }
    100% {
        transform: translateY(-100px) rotate(45deg) scale(1);
        opacity: 0;
    }
}

/* --- Scrollbar Customization --- */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #F9F7F2; 
}

::-webkit-scrollbar-thumb {
    background: #D4AF37; 
    border-radius: 3px;
    opacity: 0.5;
}

::-webkit-scrollbar-thumb:hover {
    background: #b5952f; 
}

/* Custom Scrollbar for Modal content */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 2px;
}

/* --- View Transitions --- */
/* Hide inactive views completely from pointer events and layout flow if needed, 
   but for cross-fade we use absolute positioning or display logic */
.view-section {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.view-section.hidden {
    pointer-events: none;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

.view-section.active {
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

/* --- Interactive Elements --- */
#bgm-player:hover #vinyl {
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.5);
}

#map-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

#map-modal.visible #map-modal-content {
    transform: scale(100%);
}

/* Navbar Indicator Animation */
.nav-item:hover .nav-indicator {
    /* Only show hover effect if not active, or let JS handle it? 
       Actually, JS handles the active state transform. 
       We just need hover to show it if not active. */
    transform: scaleX(1);
}

.nav-item.active .nav-indicator {
    transform: scaleX(1); /* 100% */
}

.nav-item:not(.active) .nav-indicator {
     transform: scaleX(0);
}

/* Override hover if we want JS to strictly control it, but CSS hover is nice. 
   Issue was likely JS not clearing the other one, or HTML having initial state wrong.
   Let's rely on CSS for hover, JS for active state persistence.
*/


.nav-item.active {
    color: #4A4A4A;
    font-weight: bold;
}

.nav-item:not(.active) {
    color: #9CA3AF;
}

/* Music Particles Animations */
@keyframes ping-slow {
    75%, 100% {
        transform: scale(1.5);
        opacity: 0;
    }
}
.animate-ping-slow {
    animation: ping-slow 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping-slower {
    75%, 100% {
        transform: translate(-50%, -50%) scale(1.8);
        opacity: 0;
    }
}
.animate-ping-slower {
    animation: ping-slower 3s cubic-bezier(0, 0, 0.2, 1) infinite;
    animation-delay: 0.5s;
}

@keyframes float-note-1 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(15px, -30px) rotate(20deg); opacity: 0; }
}
.animate-float-note-1 {
    animation: float-note-1 2s ease-out infinite;
}

@keyframes float-note-2 {
    0% { transform: translate(0, 0) rotate(0deg); opacity: 0; }
    50% { opacity: 1; }
    100% { transform: translate(-15px, -25px) rotate(-20deg); opacity: 0; }
}
.animate-float-note-2 {
    animation: float-note-2 2.5s ease-out infinite;
    animation-delay: 1s;
}