img:hover {
    transform: scale(1.05);
    transition: transform 0.3s ease;
    cursor: pointer;
}

.zoomable {
    transition: transform 0.3s ease;
}

.zoomable:hover {
    transform: scale(1.05);
    cursor: pointer;
}

.scrollbar-hide {
    scrollbar-width: none; /* Firefox */
}
.scrollbar-hide::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}
.pf {
    transition: box-shadow 0.3s ease;
}

.pf:hover {
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.4);
}
.reveal-card {
    opacity: 0;
    transform: translateY(30px);
    transition:
        opacity 1s ease,
        transform 1s ease,
        box-shadow 0.3s ease !important;
}

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

#hero {
    position: relative; /* Tailwind: add 'relative' to the div */
}

/*
 *╭─────────────────────────────────────╮
 *│              Markdown               │
 *╰─────────────────────────────────────╯
*/