/* Amici Orchestra Timeline Styles */

:root {
    --bg-color1: hsl(210, 25%, 8%); /* Dunkles Blau */
    --bg-color2: hsl(220, 22%, 13%); /* Dunkles Grau */
    --bg-color3: hsl(210, 29%, 24%); /* Dunkles Stahlblau */
    --fg-color: white;
    --bg-deg: 210deg; /* Gradient direction */
    --year-col: #ffe657; /* Helles Gelb für das Jahr */
    --year-col-shadow: hsla(51, 100%, 67%, 0.8); /* Helles Gelb mit Transparenz für den Schatten */
    --part-color: rgba(255, 255, 255, 0.6);
    --part-shadow-color: rgba(255, 255, 255, 0.4);



    /* --bg-container-color: rgba(0, 0, 0, 0.3); 
    --bg-color1: hsla(51, 100%, 67%, 1);
    --bg-color2: hsla(51, 100%, 67%, 1);
    --bg-color3: hsla(51, 100%, 67%, 1);
    --fg-color: white;
    --bg-deg: 210deg; 
    --year-col: #333;
    --year-col-shadow: hsla(51, 100%, 67%, 0.8); 
    --part-color: rgba(0, 0, 0, 0.6);
    --part-shadow-color: rgba(0, 0, 0, 0.4) */
    
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(var(--bg-deg), var(--bg-color1), var(--bg-color2), var(--bg-color3));
    overflow: hidden;
    height: 100vh;
    color: var(--fg-color);
}

.container {
    position: relative;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-container-color);
}

#claim {
    position: absolute;
    margin-top: -8.5rem;
    z-index: 100;
    font-size: 1.3rem;    
    font-weight: 300;    
    color: var(--fg-color);
}

.year-display {
    position: absolute;
    z-index: 100;
    font-size: 8rem;
    font-weight: bold;
    text-shadow: 0 0 50px var(--year-col-shadow);
    animation: pulse 2s ease-in-out infinite;
    color: var(--year-col);
    transition: all 0.5s ease;
}

.semester-display {
    position: absolute;
    z-index: 99;
    font-size: 2rem;
    margin-top: 160px;
    opacity: 0.8;
    font-weight: 300;
    /* Container für Slide-Animation */
    height: 60px;
    width: 300px;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.semester-text {
    position: absolute;
    width: 100%;
    text-align: center;
    will-change: transform, opacity;
}

.semester-text.active {
    transform: translateY(0);
    opacity: 0.8;
}

.logo-area {
    position: absolute;
    bottom: 30px;
    left: 30px;
    height: auto;
    z-index: 1;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    img {
        max-height: 2rem;
        width:  auto;
    }
}


.member-count {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 200;
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.progress-container {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 8px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    overflow: hidden;
    z-index: 200;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2f7c8d, #3fa8a1, #45b7d1);
    width: 0%;
    transition: width 0.5s ease;
    border-radius: 4px;
}

.controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 8px;
    z-index: 200;
}

.control-btn {
    background: #333333 !important;
    border: 1px solid #555555 !important;
    color: white !important;
    padding: 8px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.control-btn:hover {
    background: #555555 !important;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Specific button styles to override any existing colors */
#playPauseBtn, #resetBtn, #speedBtn, #prevBtn, #nextBtn {
    background: #333333 !important;
    border: 1px solid #555555 !important;
    color: white !important;
}

#playPauseBtn:hover, #resetBtn:hover, #speedBtn:hover, #prevBtn:hover, #nextBtn:hover {
    background: #555555 !important;
}

/* Manual navigation buttons specific styles */
.manual-nav-btn {
    transition: all 0.3s ease, opacity 0.3s ease !important;
}

.manual-nav-btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
}

.members-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.member {
    position: absolute;
    /* Width and height will be set dynamically by JavaScript */
    width: 160px;  /* Fixed default width */
    height: 50px;  /* Fixed default height */
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Links ausrichten statt center */
    justify-content: center;
    font-size: 0.9rem;
    font-weight: bold;
    text-align: left; /* Links ausrichten statt center */
    color: white;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4), 
                0 3px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    backdrop-filter: blur(5px);
    z-index: 50;
    overflow: hidden;
    padding: 8px 15px; /* Mehr links-padding für bessere Ausrichtung */
    cursor: default;
    line-height: 1.2;
    
    /* Transform origin for scaling */
    transform-origin: center center;
    
    /* Scaling is handled by JavaScript via transform: scale() */
    transform: scale(1);
}

.member .name {
    font-size: 0.85rem;
    font-weight: bold;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.member .instrument {
    font-size: 0.65rem;
    font-weight: 300;
    opacity: 0.9;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.member:hover {
    transform: scale(1.1);
    z-index: 100;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.member.entering {
    animation: memberEnter 1.0s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.member.leaving {
    animation: memberLeave 0.8s cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards;
}

/* Instrument-specific colors - einheitliche Farbe pro Subgruppe */

/* TOP BEREICH - STREICHINSTRUMENTE (verschiedene Brauntöne für bessere Unterscheidung) */
/* Violin group - Dunkler Rotbraun */
.member.violine { background: linear-gradient(45deg, #8B4513, #A0522D); color: #FFFFFF; }
.member.violino-piccolo { background: linear-gradient(45deg, #8B4513, #A0522D); color: #FFFFFF; }

/* Viola group - Dunkler Mahagoni */  
.member.viola { background: linear-gradient(45deg, #722F37, #8B4A47); color: #FFFFFF; }
.member.viola-damore { background: linear-gradient(45deg, #722F37, #8B4A47); color: #FFFFFF; }

/* Cello group - Dunkler Espresso */
.member.violoncello { background: linear-gradient(45deg, #3C2415, #4A2C2A); color: #FFFFFF; }
.member.barockcello { background: linear-gradient(45deg, #3C2415, #4A2C2A); color: #FFFFFF; }
.member.viola-da-gamba { background: linear-gradient(45deg, #3C2415, #4A2C2A); color: #FFFFFF; }
.member.violone { background: linear-gradient(45deg, #3C2415, #4A2C2A); color: #FFFFFF; }

/* Bass group - Dunkler Umber */
.member.kontrabass { background: linear-gradient(45deg, #2F1B14, #3D2317); color: #FFFFFF; }

/* BOTTOM BEREICH - BLASSINSTRUMENTE */
/* Oboe group - Dunkles Marineblau */
.member.oboe { background: linear-gradient(45deg, #1A237E, #283593); color: #FFFFFF; }
.member.barockoboe { background: linear-gradient(45deg, #1A237E, #283593); color: #FFFFFF; }

/* Bassoon group - Dunkles Teal */
.member.fagott { background: linear-gradient(45deg, #00695C, #00796B); color: #FFFFFF; }

/* Clarinet group - Dunkles Waldgrün */
.member.klarinette { background: linear-gradient(45deg, #2E7D32, #388E3C); color: #FFFFFF; }
.member.chalumeau { background: linear-gradient(45deg, #2E7D32, #388E3C); color: #FFFFFF; }

/* Flute group - Dunkles Stahlblau */
.member.piccolofloete { background: linear-gradient(45deg, #37474F, #455A64); color: #FFFFFF; }
.member.querflöte { background: linear-gradient(45deg, #37474F, #455A64); color: #FFFFFF; }

/* Recorder group - Dunkles Schieferblau (neue Subgruppe) */
.member.blockfloete { background: linear-gradient(45deg, #263238, #37474F); color: #FFFFFF; }
.member.traversfloete { background: linear-gradient(45deg, #263238, #37474F); color: #FFFFFF; }

/* LEFT BEREICH - DIRIGENT, GESANG, PERCUSSION */
/* Conductor group - Dunkles Gold */
.member.dirigent { background: linear-gradient(45deg, #B8860B, #DAA520); color: #FFFFFF; }

/* Vocals group - Dunkles Magenta */
.member.sopran { background: linear-gradient(45deg, #7B1FA2, #8E24AA); color: #FFFFFF; }
.member.alt { background: linear-gradient(45deg, #7B1FA2, #8E24AA); color: #FFFFFF; }
.member.tenor { background: linear-gradient(45deg, #7B1FA2, #8E24AA); color: #FFFFFF; }
.member.bass { background: linear-gradient(45deg, #7B1FA2, #8E24AA); color: #FFFFFF; }

/* Percussion group - Dunkles Orange */
.member.pauke { background: linear-gradient(45deg, #D84315, #E64A19); color: #FFFFFF; }
.member.tambourin { background: linear-gradient(45deg, #D84315, #E64A19); color: #FFFFFF; }
.member.schlagzeug { background: linear-gradient(45deg, #D84315, #E64A19); color: #FFFFFF; }

/* Brass group - Dunkles Bronze */
.member.horn { background: linear-gradient(45deg, #8D6E63, #A1887F); color: #FFFFFF; }
.member.trompete { background: linear-gradient(45deg, #8D6E63, #A1887F); color: #FFFFFF; }
.member.posaune { background: linear-gradient(45deg, #8D6E63, #A1887F); color: #FFFFFF; }

/* RIGHT BEREICH - TASTEN & ZUPFINSTRUMENTE */
/* Keyboards group - Dunkles Olivgrün */
.member.cembalo { background: linear-gradient(45deg, #406520, #364e1d); color: #FFFFFF; }
.member.orgel { background: linear-gradient(45deg, #406520, #364e1d); color: #FFFFFF; }
.member.klavier { background: linear-gradient(45deg, #406520, #364e1d); color: #FFFFFF; }

/* Plucked group - Dunkles Tannengrün */
.member.laute { background: linear-gradient(45deg, #388E3C, #43A047); color: #FFFFFF; }
.member.theorbe { background: linear-gradient(45deg, #388E3C, #43A047); color: #FFFFFF; }
.member.chitarrone { background: linear-gradient(45deg, #388E3C, #43A047); color: #FFFFFF; }
.member.gitarre { background: linear-gradient(45deg, #388E3C, #43A047); color: #FFFFFF; }
.member.mandoline { background: linear-gradient(45deg, #388E3C, #43A047); color: #FFFFFF; }

/* DEFAULT - Dunkle neutrale Farbe */
.member.default { background: linear-gradient(45deg, #546E7A, #607D8B); color: #FFFFFF; }

/* Musical notes particle system */
.particles {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
}

.particle {
    position: absolute;
    font-size: 2.2rem;
    color: var(--part-color);
    animation: float linear;
    font-family: 'Times New Roman', serif;
    text-shadow: 0 0 10px var(--part-shadow-color);
    opacity: 0.3;
}

.particle::before {
    content: "♪";
}

.particle.eighth::before {
    content: "♫";
}

.particle.sixteenth::before {
    content: "♬";
}

.particle.quarter::before {
    content: "♩";
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 0.8; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.05); }
}

@keyframes memberEnter {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes memberLeave {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}

@keyframes float {
    0% {
        transform: translateY(var(--particle-start, 100vh));
        opacity: 0;
    }
    10% {
        opacity: var(--po, 0.3);
    }
    90% {
        opacity: var(--po, 0.3);
    }
    100% {
        transform: translateY(-50px);
        opacity: 0;
    }
}

/* Semester text slide animations */
@keyframes slideOutUp {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes slideInDown {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive design - Only adjust fonts, not dimensions (handled by JavaScript) */
@media (max-width: 768px) {
    .year-display {
        font-size: 4rem;
    }
    
    .semester-display {
        font-size: 1.2rem;
        margin-top: 80px;
    }
    
    .member {
        /* Width and height are handled by JavaScript scaling - only adjust fonts */
        font-size: 0.75rem;
        padding: 5px 10px;
    }
    
    .member .name {
        font-size: 0.7rem;
        margin-bottom: 1px;
    }
    
    .member .instrument {
        font-size: 0.55rem;
    }
    
    .member-count {
        font-size: 1rem;
        padding: 10px 15px;
        top: 15px;
        right: 15px;
    }
    
    .controls {
        bottom: 15px;
        right: 15px;
        gap: 6px;
    }
    
    .control-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .year-display {
        font-size: 3rem;
    }
    
    .semester-display {
        font-size: 1rem;
        margin-top: 60px;
    }
    
    .member {
        /* Width and height are handled by JavaScript scaling - only adjust fonts */
        font-size: 0.65rem;
        padding: 4px 8px;
    }
    
    .member .name {
        font-size: 0.6rem;
    }
    
    .member .instrument {
        font-size: 0.5rem;
    }
    
    .control-btn {
        width: 32px;
        height: 32px;
        font-size: 0.9rem;
    }
}

/* Year Jump Input Styles */
.year-jump-container {
    position: absolute;
    bottom: 80px;
    right: 20px;
    display: flex;
    gap: 8px;
    align-items: center;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    z-index: 300;
}

.year-input {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    width: 120px;
    font-size: 0.9rem;
}

.year-input:focus {
    outline: none;
    border-color: #ffe55a;
    background: rgba(255, 255, 255, 0.15);
}

.year-input::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.jump-btn {
    background: #4CAF50;
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.3s ease;
}

.jump-btn:hover {
    background: #45a049;
}

.cancel-btn {
    background: #f44336;
    border: none;
    color: white;
    padding: 6px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.3s ease;
}

.cancel-btn:hover {
    background: #da190b;
}

/* Debug button specific styles */
.debug-btn {
    background: #007acc !important;
    border: 1px solid #005999 !important;
    opacity: 0.8;
}

.debug-btn:hover {
    background: #0099ff !important;
    opacity: 1;
    box-shadow: 0 4px 12px rgba(0, 122, 204, 0.4);
}

.debug-btn.active {
    background: #ff6b35 !important;
    border: 1px solid #e55a2b !important;
    box-shadow: 0 0 12px rgba(255, 107, 53, 0.6);
}