/**
 * Focal Point Styles and Masking for the Meetup Timeline.
 */

:root {
    --focal-green: 22, 163, 74;
    --focal-orange: 253, 186, 116;
}

/* Focal Point Styles */
.timeline-item {
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    transform-origin: right center;
    position: relative;
    padding: 1rem 2rem;
}

.timeline-item .month-label {
    color: rgba(255, 255, 255, 0.1);
    transition: all 0.5s ease;
    filter: blur(2px);
    position: relative;
    z-index: 2;
}

.timeline-item.active .month-label {
    color: rgba(255, 255, 255, 1);
    filter: blur(0);
    text-shadow: 0 0 20px rgba(var(--focal-dynamic, var(--focal-green)), 0.6);
    transform: scale(1.15);
}

/* 3D Cylindrical Effect */
.timeline-item {
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.timeline-item.adjacent {
    opacity: 0.4;
    filter: blur(1px);
    transform: perspective(1000px) rotateX(25deg) scale(0.85) translateX(-10px);
}

.timeline-item:not(.active):not(.adjacent) {
    transform: perspective(1000px) rotateX(45deg) scale(0.7) translateX(-20px);
    opacity: 0.05;
}

/* Active Highlight Pill */
.timeline-item.active::before {
    content: '';
    position: absolute;
    inset: 0.5rem -1rem;
    background: radial-gradient(circle at center, rgba(var(--focal-dynamic, var(--focal-green)), 0.25) 0%, transparent 80%);
    border-radius: 99px;
    z-index: 1;
    animation: pulse-glow 3s infinite ease-in-out;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 0.6; transform: scale(0.95); }
    50% { opacity: 1; transform: scale(1.1); }
}

/* Left Sidebar: Sticky Focal Timeline */
aside.timeline-sidebar {
    mask-image: linear-gradient(to bottom, transparent, black 25%, black 75%, transparent);
    background: radial-gradient(circle at 100% 35%, rgba(var(--focal-dynamic, var(--focal-green)), 0.08) 0%, transparent 60%);
}

/* Focal Frame Highlights (Replaces noisy text labels) */
.timeline-lens::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0;
    bottom: 0;
    border-left: 1px solid rgba(var(--focal-dynamic, var(--focal-green)), 0.1);
    border-right: 1px solid rgba(var(--focal-dynamic, var(--focal-green)), 0.1);
}

/* Glassmorphism Lens */
.timeline-lens {
    backdrop-filter: blur(12px);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.05),
        rgba(255, 255, 255, 0.02)
    );
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
}

.timeline-lens::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(var(--focal-dynamic, var(--focal-green)), 0.1) 50%,
        transparent
    );
    animation: scanline 4s linear infinite;
    pointer-events: none;
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

/* Parallax Ghost Text */
.ghost-month {
    position: absolute;
    top: 0;
    left: 10%;
    font-size: 15vw;
    font-weight: 900;
    color: white;
    opacity: 0.03;
    pointer-events: none;
    line-height: 1;
    white-space: nowrap;
    z-index: -1;
    text-transform: uppercase;
    will-change: transform;
}

/* Card Entrance Animations */
.meetup-card {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
    transition: all 0.8s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform, opacity;
}

.meetup-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Character Stagger */
.header-month .char {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}

.header-month.opacity-100 .char {
    transform: translateY(0);
    opacity: 1;
}

/* Right Content: Scrollable Meetup Container */
#meetup-scroll-container {
    mask-image: none;
}

/* Right Content: Scrollable Challenge Container */
#challenge-scroll-container {
    mask-image: none;
}

/* Right Content: Scrollable Editing Container */
#editing-scroll-container {
    mask-image: none;
}

/* Active Wire Gradient */
.active-wire {
    position: absolute;
    right: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
        rgba(var(--focal-dynamic, var(--focal-green)), 0.2),
        rgba(var(--focal-dynamic, var(--focal-green)), 1) 30%,
        rgba(var(--focal-dynamic, var(--focal-green)), 1) 70%,
        rgba(var(--focal-dynamic, var(--focal-green)), 0.2)
    );
    box-shadow: 0 0 15px rgba(var(--focal-dynamic, var(--focal-green)), 0.3);
}

/* Scrollbar customization */
#meetup-scroll-container::-webkit-scrollbar,
#challenge-scroll-container::-webkit-scrollbar,
#editing-scroll-container::-webkit-scrollbar {
    width: 4px;
}
#meetup-scroll-container::-webkit-scrollbar-track,
#challenge-scroll-container::-webkit-scrollbar-track,
#editing-scroll-container::-webkit-scrollbar-track {
    background: transparent;
}
#meetup-scroll-container::-webkit-scrollbar-thumb,
#challenge-scroll-container::-webkit-scrollbar-thumb,
#editing-scroll-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

/* Upcoming vs Past Event Distinction */
.upcoming-event {
    position: relative;
}

.upcoming-event:hover {
    border-left-color: rgb(var(--focal-orange));
    box-shadow: 0 0 30px rgba(var(--focal-green), 0.15);
}

.past-event {
    filter: brightness(0.8);
    transition: all 0.5s ease;
}

.past-event:hover {
    opacity: 1 !important;
    filter: none !important;
}