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

/* Custom Scrollbar for Webkit */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Modal Transitions */
#view-event-modal,
#add-event-modal {
    transition: opacity 0.3s ease-out;
}

#view-event-modal.hidden,
#add-event-modal.hidden {
    opacity: 0;
    pointer-events: none;
}

#view-event-modal:not(.hidden),
#add-event-modal:not(.hidden) {
    opacity: 1;
    pointer-events: auto;
}

/* View Modal Specifics */
#view-event-content::-webkit-scrollbar {
    width: 6px;
}

#view-event-content::-webkit-scrollbar-track {
    background: transparent;
}

#view-event-content::-webkit-scrollbar-thumb {
    background-color: rgba(15, 23, 42, 0.2);
    border-radius: 3px;
}

/* Response Video Embeds (YouTube) in Prose */
.prose iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: 0.5rem;
    /* rounded-lg */
}



/* Animations */
@keyframes orbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.connector-dot {
    position: relative;
    z-index: 10;
}

.connector-dot::after {
    content: '';
    position: absolute;
    /* Center meticulously */
    top: 50%;
    left: 50%;
    width: 200%;
    /* Relative to the 16px dot => 32px */
    height: 200%;
    transform: translate(-50%, -50%);
    /* Start centered */
    border-radius: 50%;

    /* Ring shape created by border */
    background: transparent;
    border: 2px solid currentColor;

    /* Irregular Dashes created by Mask */
    -webkit-mask: conic-gradient(from 0deg,
            black 0deg 15deg, transparent 15deg 25deg,
            black 25deg 50deg, transparent 50deg 55deg,
            black 55deg 90deg, transparent 90deg 100deg,
            black 100deg 120deg, transparent 120deg 140deg,
            black 140deg 190deg, transparent 190deg 200deg,
            black 200deg 230deg, transparent 230deg 240deg,
            black 240deg 280deg, transparent 280deg 300deg,
            black 300deg 330deg, transparent 330deg 340deg,
            black 340deg 360deg);
    mask: conic-gradient(from 0deg,
            black 0deg 15deg, transparent 15deg 25deg,
            black 25deg 50deg, transparent 50deg 55deg,
            black 55deg 90deg, transparent 90deg 100deg,
            black 100deg 120deg, transparent 120deg 140deg,
            black 140deg 190deg, transparent 190deg 200deg,
            black 200deg 230deg, transparent 230deg 240deg,
            black 240deg 280deg, transparent 280deg 300deg,
            black 300deg 330deg, transparent 330deg 340deg,
            black 340deg 360deg);

    opacity: 0;
    transition: opacity 0.3s ease-out;
    pointer-events: none;

    /* Animate rotation while keeping centered */
    animation: orbit-centered 10s linear infinite;
}

@keyframes orbit-centered {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Trigger orbit when hovering the content specifically */
.event-item:has(.event-content:hover) .connector-dot::after {
    opacity: 0.6;
}

.date-bubble {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    z-index: 20;
}

/* Trigger scale when hovering the content */
.event-content:hover .date-bubble {
    transform: scale(1.15);
}

/* Push Title Effect */
/* Left Side Items (Standard Flex Row) */
.flex-row:not(.flex-row-reverse):has(.date-bubble) h3 {
    /* Base style, hover controlled by parent */
    transition: transform 0.3s ease-out;
}

.event-content:hover .flex-row:not(.flex-row-reverse) h3 {
    transform: translateX(-8px);
}

/* Right Side Items (Reverse Flex Row) */
.flex-row-reverse:has(.date-bubble) h3 {
    transition: transform 0.3s ease-out;
}

.event-content:hover .flex-row-reverse h3 {
    transform: translateX(8px);
}

h3 {
    transition: transform 0.3s ease-out;
}

/* Mobile Timeline Alignment Fix */
@media (max-width: 425px) {
    .timeline-line {
        left: 3rem !important;
        /* 48px */
        transform: translateX(-50%) !important;
    }

    .timeline-connector-wrapper {
        left: 3rem !important;
        /* 48px */
    }
}