@keyframes progress {
    0% { width: 100%; }

    100% { width: 0%; }
}

.lagoon-surface {
    background: linear-gradient(rgba(20, 20, 21, 0.68), rgba(24, 14, 6, 0.58));
    box-shadow: rgba(255, 176, 48, 0.08) 0px 0px 30px, rgba(255, 255, 255, 0.04) 0px 1px 0px inset;
    border-color: rgba(255, 176, 48, 0.22) !important;
}

.event-thumbnail {
    transition: transform 0.7s, border-color 0.35s, filter 0.35s;
}

.event-intro {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    filter: blur(10px);
    animation-duration: 900ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: heroIntroReveal;
    animation-timeline: auto;
    animation-range: normal;
    animation-delay: var(--intro-delay, 0ms);
}

.event-list-entry {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
    animation-duration: 720ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-fill-mode: forwards;
    animation-play-state: running;
    animation-name: heroIntroReveal;
    animation-timeline: auto;
    animation-range: normal;
    animation-delay: var(--intro-delay, 120ms);
}

@keyframes heroIntroReveal {
    0% { opacity: 0; transform: translateY(24px) scale(0.97); filter: blur(10px); }

    100% { opacity: 1; transform: translateY(0px) scale(1); filter: blur(0px); }
}

.lagoon-action {
    transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s, background 0.28s;
}

.lagoon-action:hover {
    transform: translateY(-2px);
    box-shadow: rgba(255, 176, 48, 0.12) 0px 0px 24px;
    border-color: rgba(255, 176, 48, 0.45) !important;
}

.event-divider {
    background: linear-gradient(to right, transparent, rgba(255, 176, 48, 0.18), transparent);
}

.comment-surface {
    background: rgba(24, 14, 6, 0.58);
    border: 1px solid rgba(255, 176, 48, 0.16);
}

@media (prefers-reduced-motion: reduce) {
    .event-intro,
    .event-list-entry {
        animation: auto ease 0s 1 normal none running none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}