/* === SingAlong - Karaoke Party WebApp === */

:root {
    --color-highlight: #FFD700;
    --color-text: rgba(255, 255, 255, 0.95);
    --color-inactive: #404040;
    --color-dim: #737373;
    --font-main: 'Montserrat', sans-serif;
    --lyrics-size: 4.5vw;
    --lyrics-size-active: 5vw;
}

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

body {
    overflow: hidden;
    background: #000;
    font-family: var(--font-main);
    color: var(--color-text);
    cursor: none;
    width: 100vw;
    height: 100vh;
}

/* === SLIDESHOW / KEN BURNS === */

#slideshow {
    position: fixed;
    inset: 0;
    z-index: 0;
}

.slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    will-change: opacity, transform, filter;
}

/* Hochkant-Bilder: nicht voll ausfuellen, damit Koepfe nicht abgeschnitten werden */
.slide.portrait {
    background-size: auto 70%;
    background-position: center center;
    background-repeat: no-repeat;
}

/* === Slideshow-Uebergangs-Effekte === */

/* Crossfade (Standard) */
#slideshow.transition-crossfade .slide {
    transition: opacity 3s ease-in-out;
}

/* Slide von rechts */
#slideshow.transition-slideRight .slide {
    transform: translateX(100%);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}
#slideshow.transition-slideRight .slide.active {
    transform: translateX(0);
}
#slideshow.transition-slideRight .slide.slide-out {
    transform: translateX(-100%);
}

/* Slide von links */
#slideshow.transition-slideLeft .slide {
    transform: translateX(-100%);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}
#slideshow.transition-slideLeft .slide.active {
    transform: translateX(0);
}
#slideshow.transition-slideLeft .slide.slide-out {
    transform: translateX(100%);
}

/* Zoom-Ueberblendung */
#slideshow.transition-zoom .slide {
    transform: scale(1.3);
    transition: opacity 2.5s ease-in-out, transform 2.5s ease-in-out;
}
#slideshow.transition-zoom .slide.active {
    transform: scale(1);
}

/* Blur-Ueberblendung */
#slideshow.transition-blur .slide {
    filter: blur(30px);
    transition: opacity 2s ease-in-out, filter 2s ease-in-out;
}
#slideshow.transition-blur .slide.active {
    filter: blur(0);
}

/* Wipe von links */
#slideshow.transition-wipe .slide {
    clip-path: inset(0 100% 0 0);
    transition: opacity 0.1s, clip-path 2s ease-in-out;
}
#slideshow.transition-wipe .slide.active {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Zoom + Blur kombiniert */
#slideshow.transition-zoomBlur .slide {
    transform: scale(0.8);
    filter: blur(20px);
    transition: opacity 2s ease-in-out, transform 2s ease-in-out, filter 2s ease-in-out;
}
#slideshow.transition-zoomBlur .slide.active {
    transform: scale(1);
    filter: blur(0);
}

/* Fade to Black */
#slideshow.transition-fadeBlack .slide {
    transition: opacity 1.5s ease-in-out;
}

/* Allen Transition-Typen: active-Slide sichtbar */
.slide.active {
    opacity: 1;
}

/* === Ken Burns Animationen === */

/* Zoom */
@keyframes kb-zoom-in {
    from { transform: scale(1.0) translate(0, 0); }
    to   { transform: scale(1.18) translate(-1%, -1%); }
}
@keyframes kb-zoom-out {
    from { transform: scale(1.18) translate(-1%, -1%); }
    to   { transform: scale(1.0) translate(0, 0); }
}
@keyframes kb-zoom-slow {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}

/* Pan */
@keyframes kb-pan-right {
    from { transform: scale(1.12) translate(-3%, 0); }
    to   { transform: scale(1.12) translate(1%, 0); }
}
@keyframes kb-pan-left {
    from { transform: scale(1.12) translate(1%, -1%); }
    to   { transform: scale(1.12) translate(-3%, 1%); }
}
@keyframes kb-pan-up {
    from { transform: scale(1.12) translate(0, 2%); }
    to   { transform: scale(1.12) translate(0, -2%); }
}
@keyframes kb-pan-down {
    from { transform: scale(1.12) translate(0, -2%); }
    to   { transform: scale(1.12) translate(0, 2%); }
}

/* Diagonal */
@keyframes kb-drift-br {
    from { transform: scale(1.15) translate(-2%, -2%); }
    to   { transform: scale(1.15) translate(2%, 2%); }
}
@keyframes kb-drift-tl {
    from { transform: scale(1.15) translate(2%, 2%); }
    to   { transform: scale(1.15) translate(-2%, -2%); }
}

/* Rotate */
@keyframes kb-rotate-cw {
    from { transform: scale(1.2) rotate(-1deg); }
    to   { transform: scale(1.2) rotate(1deg); }
}
@keyframes kb-rotate-ccw {
    from { transform: scale(1.2) rotate(1deg); }
    to   { transform: scale(1.2) rotate(-1deg); }
}

.slide.kb-zoom-in     { animation: kb-zoom-in 15s ease-in-out forwards; }
.slide.kb-zoom-out    { animation: kb-zoom-out 15s ease-in-out forwards; }
.slide.kb-zoom-slow   { animation: kb-zoom-slow 15s ease-in-out forwards; }
.slide.kb-pan-right   { animation: kb-pan-right 15s ease-in-out forwards; }
.slide.kb-pan-left    { animation: kb-pan-left 15s ease-in-out forwards; }
.slide.kb-pan-up      { animation: kb-pan-up 15s ease-in-out forwards; }
.slide.kb-pan-down    { animation: kb-pan-down 15s ease-in-out forwards; }
.slide.kb-drift-br    { animation: kb-drift-br 15s ease-in-out forwards; }
.slide.kb-drift-tl    { animation: kb-drift-tl 15s ease-in-out forwards; }
.slide.kb-rotate-cw   { animation: kb-rotate-cw 15s ease-in-out forwards; }
.slide.kb-rotate-ccw  { animation: kb-rotate-ccw 15s ease-in-out forwards; }

/* === OVERLAY === */

#overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1;
}

/* === TRACK INFO === */

#track-info {
    position: fixed;
    top: 3vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

#track-info.visible {
    opacity: 1;
}

#track-name {
    font-size: 2.5vw;
    font-weight: 900;
    text-shadow: 0 2px 12px rgba(0,0,0, var(--track-text-shadow, 0.8));
    letter-spacing: 0.02em;
}

#track-artist {
    font-size: 1.6vw;
    font-weight: 400;
    color: var(--color-dim);
    text-shadow: 0 2px 8px rgba(0,0,0, var(--track-text-shadow, 0.8));
    margin-top: 0.3vh;
}

/* === TRACK INFO MARQUEE === */

#track-info.marquee {
    width: 100vw;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    overflow: hidden;
    white-space: nowrap;
}

#track-info.marquee .marquee-inner {
    display: inline-block;
    animation: marquee-scroll 20s linear infinite;
    padding-left: 100%;
}

#track-info.marquee #track-name,
#track-info.marquee #track-artist {
    display: inline;
}

#track-info.marquee #track-artist::before {
    content: ' \2014 ';
    color: var(--color-dim);
}

@keyframes marquee-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* === VIDEO SLIDE === */

.slide video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* === LYRICS === */

#lyrics-container {
    position: fixed;
    z-index: 2;
    bottom: 1vh;
    left: 50%;
    transform: translateX(-50%);
    width: 85vw;
    text-align: center;
    max-height: 35vh;
    overflow: hidden;
}

#lyrics-scroll {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s ease-out;
}

#lyrics-scroll.flow-reversed {
    flex-direction: column-reverse;
}

.lyric-line {
    position: relative;
    display: inline-block;
    font-size: var(--lyrics-size);
    font-weight: var(--lyrics-font-weight, 700);
    color: var(--color-inactive);
    text-shadow: 0 3px 15px rgba(0,0,0, var(--lyrics-text-shadow, 0.8));
    margin: var(--lyrics-line-spacing, 0.6vh) 0;
    transition: color 0.3s ease, transform 0.3s ease, opacity 0.3s ease;
    line-height: 1.3;
    white-space: normal;
    max-width: 100%;
    letter-spacing: var(--lyrics-letter-spacing, 0);
}

.lyric-line.previous {
    color: var(--color-dim);
    transform: scale(var(--lyrics-scale-previous, 0.85));
    opacity: var(--lyrics-opacity-previous, 0.5);
}

.lyric-line.active {
    color: var(--color-text);
    font-size: var(--lyrics-size-active);
    transform: scale(1.0);
}

.lyric-line.upcoming {
    color: var(--color-inactive);
    transform: scale(var(--lyrics-scale-upcoming, 0.9));
    opacity: var(--lyrics-opacity-upcoming, 1);
}

.lyric-line.far {
    opacity: 0;
    transform: scale(0.8);
}

/* Karaoke Fill-Effekt */
.lyric-line .lyric-base {
    display: inline;
}

.lyric-line .lyric-fill {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    color: var(--color-highlight);
    text-shadow: 0 0 20px rgba(255, 215, 0, 0.5), 0 3px 15px rgba(0,0,0,0.9);
    overflow: hidden;
    white-space: inherit;
    clip-path: inset(0 100% 0 0);
    pointer-events: none;
}

.lyric-fill.animating {
    transition: none;
}

/* Effekt: Glow – pulsierendes Leuchten */
.lyric-line.active.effect-glow {
    color: var(--color-highlight);
    animation: glow-pulse 1.5s ease-in-out infinite;
}

.lyric-line.active.effect-glow .lyric-fill {
    clip-path: none;
    opacity: 0;
}

@keyframes glow-pulse {
    0%, 100% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.5), 0 0 30px rgba(255, 215, 0, 0.2), 0 3px 15px rgba(0,0,0,0.8); }
    50%      { text-shadow: 0 0 25px rgba(255, 215, 0, 0.9), 0 0 50px rgba(255, 215, 0, 0.4), 0 3px 15px rgba(0,0,0,0.8); }
}

/* Effekt: Bounce – Einspringen */
.lyric-line.active.effect-bounce {
    animation: line-bounce 0.4s ease-out;
}

@keyframes line-bounce {
    0%   { transform: scale(0.85); }
    60%  { transform: scale(1.06); }
    100% { transform: scale(1.0); }
}

/* Effekt: Color Shift – Farbwechsel */
.lyric-line.active.effect-colorShift {
    animation: color-shift 2s ease-in-out infinite;
}

.lyric-line.active.effect-colorShift .lyric-fill {
    clip-path: none;
    opacity: 0;
}

@keyframes color-shift {
    0%   { color: var(--color-highlight); }
    33%  { color: #FF6B6B; }
    66%  { color: #48DBFB; }
    100% { color: var(--color-highlight); }
}

/* Effekt: None – kein Spezialeffekt */
.lyric-line.active.effect-none .lyric-fill {
    clip-path: none;
    opacity: 0;
}

/* === STATUS === */

#status {
    position: fixed;
    bottom: 2vh;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    font-size: 1.2vw;
    color: var(--color-dim);
    text-shadow: 0 1px 6px rgba(0,0,0,0.8);
    opacity: 0;
    transition: opacity 0.5s ease;
}

#status.visible {
    opacity: 1;
}

/* === AUTH SCREEN === */

#auth-screen {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.auth-content {
    text-align: center;
}

.auth-content h1 {
    font-size: 6vw;
    font-weight: 900;
    color: var(--color-highlight);
    margin-bottom: 2vh;
    text-shadow: 0 4px 20px rgba(255, 215, 0, 0.3);
}

.auth-content p {
    font-size: 2vw;
    color: var(--color-dim);
    margin-bottom: 4vh;
}

.auth-btn {
    display: inline-block;
    padding: 1.5vh 4vw;
    background: #1DB954;
    color: white;
    font-family: var(--font-main);
    font-size: 1.8vw;
    font-weight: 700;
    text-decoration: none;
    border-radius: 50px;
    transition: transform 0.2s, box-shadow 0.2s;
}

.auth-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(29, 185, 84, 0.4);
}

/* === NO LYRICS FALLBACK === */

.no-lyrics-message {
    font-size: 3vw;
    color: var(--color-dim);
    font-weight: 400;
    font-style: italic;
}

/* === PLAIN LYRICS (unsynced) === */

.plain-lyrics {
    font-size: 3vw;
    color: var(--color-dim);
    line-height: 1.6;
    white-space: pre-line;
    max-height: 60vh;
    overflow: hidden;
}

/* === WAITING STATE === */

.waiting-message {
    font-size: 3.5vw;
    font-weight: 700;
    color: var(--color-highlight);
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* === FALLBACK HINTERGRUND (keine Bilder) === */

.fallback-bg {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 30%, #0a1a2e 60%, #0a0a1a 100%);
    background-size: 400% 400%;
    animation: gradient-shift 20s ease infinite;
    z-index: 0;
}

@keyframes gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}