/* =============================================================================
   SHARED PRESENTATION / FULLSCREEN STYLES
   Used by: index.html (legacy), control.html (new), display.html
   Renderer: PresentationRenderer (presentation-renderer.js)
   ============================================================================= */

/* ---------------------------------------------------------------------------
   Song-themed animated backdrop — reusable across all presentation surfaces
   Usage: Add this markup inside any container with --song-hue / --song-sat:
     <div class="song-backdrop" aria-hidden="true">
       <div class="song-blob song-blob-1"></div>
       <div class="song-blob song-blob-2"></div>
       <div class="song-blob song-blob-3"></div>
     </div>
   --------------------------------------------------------------------------- */

.song-backdrop {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.song-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(45px);
    will-change: transform;
}

/* Blob 1 — top-left, warm, largest */
.song-blob-1 {
    width: 70%;
    height: 65%;
    top: -15%;
    left: -15%;
    opacity: 0.45;
    background: radial-gradient(
        circle,
        hsla(var(--song-hue, 220), var(--song-sat, 50%), 32%, 1),
        transparent 70%
    );
    animation: song-drift-1 10s ease-in-out infinite alternate;
}

/* Blob 2 — bottom-right, cooler hue offset */
.song-blob-2 {
    width: 65%;
    height: 60%;
    bottom: -10%;
    right: -15%;
    opacity: 0.4;
    background: radial-gradient(
        circle,
        hsla(calc(var(--song-hue, 220) + 70), var(--song-sat, 50%), 28%, 1),
        transparent 70%
    );
    animation: song-drift-2 12s ease-in-out infinite alternate;
}

/* Blob 3 — center, brighter accent, gentle pulse */
.song-blob-3 {
    width: 50%;
    height: 50%;
    top: 30%;
    left: 25%;
    opacity: 0.3;
    background: radial-gradient(
        circle,
        hsla(calc(var(--song-hue, 220) + 35), calc(var(--song-sat, 50%) + 10%), 40%, 1),
        transparent 65%
    );
    animation: song-drift-3 8s ease-in-out infinite alternate;
}

@keyframes song-drift-1 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6%, 8%) scale(1.08); }
    100% { transform: translate(-4%, 4%) scale(0.95); }
}

@keyframes song-drift-2 {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(-8%, -6%) scale(1.1); }
    100% { transform: translate(4%, -4%) scale(0.92); }
}

@keyframes song-drift-3 {
    0%   { transform: translate(0, 0) scale(0.9); }
    50%  { transform: translate(3%, -5%) scale(1.05); }
    100% { transform: translate(-3%, 3%) scale(0.95); }
}

/* ---------------------------------------------------------------------------
   Presentation container
   --------------------------------------------------------------------------- */

.lyrics-container {
    --font-scale: 1;
    width: 80%;
    height: 100%;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    touch-action: pan-y;
}

/* Visual tap zone hints (subtle gradient on long press) */
.lyrics-container::before,
.lyrics-container::after {
    content: '';
    position: fixed;
    top: 0;
    bottom: 0;
    width: 50%;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.lyrics-container::before {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.03), transparent);
}
.lyrics-container::after {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.03), transparent);
}

.lyrics-container:fullscreen,
.lyrics-container:-webkit-full-screen,
.lyrics-container:-moz-full-screen {
    background-color: #000;
}

/* ---------------------------------------------------------------------------
   Lyrics chunks (slides)
   --------------------------------------------------------------------------- */

.lyrics-chunk {
    font-family: 'Lora', serif;
    font-size: calc(2rem * var(--font-scale, 1));
    line-height: 1.4;
    color: #fff;
    opacity: 0.2;
    transition: opacity 0.4s ease, transform 0.5s ease, top 0.5s ease;
    position: absolute;
    width: 100%;
    text-align: center;
    padding: 0 20px;
    box-sizing: border-box;
}

.lyrics-chunk.active {
    opacity: 1;
    transform: translateY(-50%);
    font-weight: bold;
}

.lyrics-chunk.previous {
    opacity: 0.2;
    filter: blur(1.5px);
    transform: translateY(-50%);
}

.lyrics-chunk.next {
    opacity: 0.3;
    filter: blur(0.5px);
    transform: translateY(-50%);
}

/* Translation chunks */
.lyrics-chunk.translation-chunk {
    font-style: italic;
    color: #8ab4f8;
    font-weight: normal;
}

/* Response/chorus chunks (call-and-response) */
.lyrics-chunk.response-chunk {
    font-style: italic;
    text-align: right;
    padding-right: 8%;
}

/* Uppercase mode */
.lyrics-container.lyrics-uppercase .lyrics-chunk {
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Verse reference indicator
   --------------------------------------------------------------------------- */

.verse-ref-indicator {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.2rem;
    font-weight: bold;
    z-index: 9999;
    pointer-events: none;
}

/* Exit button hidden — exit via Escape or swipe down */
.presentation-exit-btn {
    display: none;
}

/* ---------------------------------------------------------------------------
   Responsive breakpoints
   --------------------------------------------------------------------------- */

@media screen and (max-width: 768px) {
    .lyrics-container {
        width: 100%;
    }
    .lyrics-chunk {
        font-size: calc(1.5rem * var(--font-scale, 1));
        padding: 0 15px;
    }
    .lyrics-chunk.active {
        font-size: calc(2rem * var(--font-scale, 1));
    }
    .verse-ref-indicator {
        font-size: 1.1rem;
        top: 12px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    .lyrics-container {
        width: 90%;
    }
    .lyrics-chunk {
        font-size: calc(2.5rem * var(--font-scale, 1));
    }
    .lyrics-chunk.active {
        font-size: calc(3rem * var(--font-scale, 1));
    }
    .verse-ref-indicator {
        font-size: 1.8rem;
    }
}

/* ---------------------------------------------------------------------------
   Projector mode — larger text for projection screens
   --------------------------------------------------------------------------- */

body.projector-mode .lyrics-chunk {
    font-size: calc(4rem * var(--font-scale, 1));
}

body.projector-mode .lyrics-chunk.active {
    font-size: calc(5rem * var(--font-scale, 1));
}

body.projector-mode .lyrics-container {
    width: 90%;
}

body.projector-mode .verse-ref-indicator {
    font-size: 3rem;
    top: 30px;
}

/* ---------------------------------------------------------------------------
   Slide mode — fade transition, no vertical scrolling
   --------------------------------------------------------------------------- */

.lyrics-container.slide-mode .lyrics-chunk {
    transition: opacity 0.3s ease;
}