/* Animations and transitions for Offshore.CAT */

/* Page transition effect */
body {
    opacity: 0;
    transition: opacity 0.4s ease-in;
}

body.loaded {
    opacity: 1;
}

/* Button hover animations */
.main-nav a, 
.secondary-nav a,
button,
.widget-box-title,
.back-link {
    position: relative;
    transition: all 0.3s ease;
}

/* Underline animation for navigation links */
.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -2px;
    left: 50%;
    background-color: #dc3545;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.main-nav a:hover::after {
    width: 100%;
}

/* Scale effect for buttons */
button:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5);
}

/* Glow effect for important elements */
.widget-box-title:hover {
    text-shadow: 0 0 8px rgba(220, 53, 69, 0.7);
}

/* Pulse animation for call-to-action elements */
@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.back-link:hover {
    animation: pulse 1.5s infinite;
}

/* Table row hover effect */
#example tbody tr {
    transition: background-color 0.3s ease;
}

#example tbody tr:hover {
    background-color: rgba(220, 53, 69, 0.1) !important;
}

/* Search input focus animation */
.dataTables_filter input {
    transition: all 0.3s ease;
    border: 1px solid #333;
}

.dataTables_filter input:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.25);
    width: 250px;
}

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

.sidebar-content > * {
    animation: fadeIn 0.5s ease-out forwards;
}

.sidebar-content > *:nth-child(1) { animation-delay: 0.1s; }
.sidebar-content > *:nth-child(2) { animation-delay: 0.2s; }
.sidebar-content > *:nth-child(3) { animation-delay: 0.3s; }
.sidebar-content > *:nth-child(4) { animation-delay: 0.4s; }