/* ===========================
   MUSIC PAGE STYLES
   =========================== */

/* Video Modal */
#video-modal {
    pointer-events: none;
}

#video-modal.active {
    opacity: 1;
    pointer-events: auto;
}

/* Play Button Hover Effect */
.video-trigger .absolute.inset-0 div {
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Typography Overrides for the huge aesthetic */
.hero-content h1 {
    line-height: 0.9;
}

/* Aspect Ratio Utility */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* Custom Selection Color for Music Page */
::selection {
    background: var(--accent);
    color: white;
}

/* --- Timeline Aesthetics --- */

/* Rotate text 90 degrees for the timeline year */
.vertical-date {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg); /* Flips it so it reads bottom-to-top like a spine */
    white-space: nowrap;
    will-change: transform, opacity;
    transition: none; /* GSAP handles transitions */
}

/* The vertical connecting line */
.timeline-line {
    width: 1px;
    background: linear-gradient(to bottom, #333 0%, rgba(255,255,255,0.1) 100%);
    flex-grow: 1;
    margin-top: 1rem;
    margin-bottom: 1rem;
    overflow: visible;
}

@media (max-width: 768px) {
    .project-section {
        padding-left: 100px;
    }
    .project-section::before {
        left: 60px;
    }
    .section-number {
        left: 10px;
        font-size: 3rem;
    }
    .section-date {
        left: 52px;
        top: 70px;
        font-size: 0.65rem;
    }
}