/* style.css */

/* Glassmorphism utility */
.glass {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Animations */

/* Koha Hop */
@keyframes kohaHop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    20% { transform: translateY(-10px) rotate(-5deg); }
    40% { transform: translateY(0) rotate(0deg); }
    60% { transform: translateY(-5px) rotate(5deg); }
    80% { transform: translateY(0) rotate(0deg); }
}
.animate-koha-hop {
    animation: kohaHop 3s infinite ease-in-out;
}

/* Swing */
@keyframes swingMove {
    0% { transform: rotate(15deg); }
    50% { transform: rotate(-15deg); }
    100% { transform: rotate(15deg); }
}
.animate-swing {
    animation: swingMove 4s infinite ease-in-out;
    transform-origin: top center;
}

/* RGB Text */
@keyframes rgbCycle {
    0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
    20% { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
    40% { color: #00ff00; text-shadow: 0 0 10px #00ff00; }
    60% { color: #00ffff; text-shadow: 0 0 10px #00ffff; }
    80% { color: #0000ff; text-shadow: 0 0 10px #0000ff; }
    100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
}
.rgb-text {
    animation: rgbCycle 5s infinite;
}

/* Green Blinking Button */
@keyframes blinkGreen {
    0% { opacity: 1; box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e; }
    50% { opacity: 0.8; box-shadow: 0 0 5px #22c55e, 0 0 10px #22c55e; }
    100% { opacity: 1; box-shadow: 0 0 10px #22c55e, 0 0 20px #22c55e; }
}
.animate-blink-green {
    animation: blinkGreen 1.5s infinite;
}

/* Red Blinking Background */
@keyframes blinkDanger {
    0%, 100% { opacity: 0.5; filter: brightness(1) drop-shadow(0 0 5px red); }
    50% { opacity: 0.8; filter: brightness(1.5) drop-shadow(0 0 15px red); }
}
.animate-blink-danger {
    animation: blinkDanger 1s infinite alternate;
}

/* Hard Shake Array */
@keyframes shakeHard {
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-2px, -3px) rotate(-5deg); }
    20% { transform: translate(-4px, 0px) rotate(5deg); }
    30% { transform: translate(4px, 3px) rotate(0deg); }
    40% { transform: translate(2px, -2px) rotate(5deg); }
    50% { transform: translate(-2px, 3px) rotate(-5deg); }
    60% { transform: translate(-4px, 2px) rotate(0deg); }
    70% { transform: translate(4px, 1px) rotate(-5deg); }
    80% { transform: translate(-2px, -2px) rotate(5deg); }
    90% { transform: translate(2px, 3px) rotate(0deg); }
    100% { transform: translate(1px, -3px) rotate(-5deg); }
}
.animate-shake-hard {
    animation: shakeHard 0.5s infinite;
}

.animate-shake {
    animation: shakeHard 1.5s infinite;
    animation-timing-function: ease-in-out;
}

/* Fade in for reviews */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fadeIn 0.4s ease-out forwards;
}

/* Text Glow utilities */
.text-glow {
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

/* Fixed background attachment for some views */
.fixed-bg {
    background-attachment: fixed;
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 8px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05); 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 215, 0, 0.5); 
    border-radius: 10px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 215, 0, 0.8); 
}

/* General View Transition Styles */
.view {
    transition: opacity 0.5s ease-in-out, visibility 0.5s;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}
.view.active {
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Prevent text selection on buttons/icons */
.no-select {
    user-select: none;
}

/* Pendulum for Team Avatar */
@keyframes pendulum {
    0%, 100% { transform: rotate(-15deg); }
    50% { transform: rotate(15deg); }
}
.animate-pendulum {
    animation: pendulum 3s infinite ease-in-out;
    transform-origin: top center;
}