/**
 * posterrama.app - Main Stylesheet
 *
 * Author: Mark Frelink
 * Last Modified: 2025-07-26
 * License: GPL-3.0-or-later - This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 */

/* --- Global Styles & Fonts & Variables --- */

:root {
    --plex-orange: #e5a00d;
    --background-color: rgb(30, 30, 30);
    --text-color: #fff;
    --text-color-muted: rgba(255, 255, 255, 0.6);
    --text-color-semi-muted: rgba(255, 255, 255, 0.65);
    --text-color-strong: rgba(255, 255, 255, 0.85);
}

html, body {
    height: 100dvh;
    /* Use dynamic viewport height to correctly handle mobile browser UI */
    width: 100%;
    margin: 0;
    /* Apply safe-area padding to prevent UI elements from being obscured by notches or system UI. */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    overflow: hidden;
    /* Prevents unwanted scrollbars */
    background-color: var(--background-color);
    /* Fallback background color */
    color: var(--text-color);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    cursor: none;
}

/* --- Utility Classes --- */
.is-hidden {
    display: none !important;
}

/* --- Loader & Error Message --- */
#loader {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 100;
    transition: opacity 0.5s;
    transform: translate(-50%, -50%);
}

@keyframes spin {
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

#error-message {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(200, 0, 0, 0.85);
    color: #fff;
    padding: 20px 30px;
    border-radius: 8px;
    z-index: 101;
    text-align: center;
    max-width: 80%;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

/* --- Promo Box for /site page --- */
#promo-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.95); /* Start slightly smaller for animation */
    z-index: 50;
    background-color: rgba(20, 20, 20, 0.88);
    backdrop-filter: blur(15px);
    color: #fff;
    padding: 40px 50px;
    border-radius: 16px;
    text-align: center;
    max-width: 600px;
    width: 90%;
    box-shadow: 0 15px 40px rgba(0,0,0,0.6);
    border: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0; /* Start hidden for animation */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Smooth transition for when it appears */
}

/* When the is-hidden class is removed, these styles will apply */
#promo-box:not(.is-hidden) {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.promo-logo {
    margin: 0 auto 25px auto;
    width: 60px;
    height: 60px;
    color: rgba(255, 255, 255, 0.8);
}

#promo-box h1 {
    font-size: 2.2em; /* Larger font */
    font-weight: 800; /* Bolder */
    margin-top: 0;
    margin-bottom: 15px;
    text-shadow: 0 2px 5px rgba(0,0,0,0.4);
    line-height: 1.2;
}

#promo-box p {
    font-size: 1.1em;
    color: var(--text-color-muted);
    margin-bottom: 30px;
    max-width: 450px;
    margin-left: auto;
    margin-right: auto;
}

.promo-brand-name {
    font-weight: 700; /* Consistent with admin panel */
    /* Gradient text effect to match the admin panel for a more striking look */
    background: linear-gradient(90deg, #e0e0e0, #bb86fc, #53a8b6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.promo-cta a.button-promo {
    display: inline-block;
    background-color: var(--plex-orange);
    color: #111;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1em;
    padding: 14px 28px;
    border-radius: 50px; /* Pill shape */
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.promo-cta a.button-promo:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 20px rgba(229, 160, 13, 0.4);
    background-color: #ffb40f;
}

.promo-cta a.button-promo .fab {
    margin-right: 10px;
    font-size: 1.2em;
    vertical-align: middle;
}

/* --- Background Layers & Ken Burns Effect --- */
.screensaver-layer {
    position: fixed; /* A modern shorthand for top: 0; right: 0; bottom: 0; left: 0; */
    inset: 0;
    width: 100%;
    /* This layer now inherits its height from the body, which is set to 100dvh. */
    height: 100%;
    background-size: cover;
    background-position: center center;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    will-change: transform, opacity;
}

/* --- Ken Burns Effect Keyframes --- */
/* More subtle and varied animations for a smoother, more cinematic feel. */

/* Zoom Out Variations */
@keyframes kenburns-zoom-out-tl {
    0% { transform: scale(1.05) translate3d(-2.5%, -2.5%, 0); }
    100% { transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kenburns-zoom-out-br {
    0% { transform: scale(1.05) translate3d(2.5%, 2.5%, 0); }
    100% { transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kenburns-zoom-out-tr {
    0% { transform: scale(1.05) translate3d(2.5%, -2.5%, 0); }
    100% { transform: scale(1) translate3d(0, 0, 0); }
}
@keyframes kenburns-zoom-out-bl {
    0% { transform: scale(1.05) translate3d(-2.5%, 2.5%, 0); }
    100% { transform: scale(1) translate3d(0, 0, 0); }
}

/* Zoom In Variations */
@keyframes kenburns-zoom-in-tl {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(-2.5%, -2.5%, 0); }
}
@keyframes kenburns-zoom-in-br {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(2.5%, 2.5%, 0); }
}
@keyframes kenburns-zoom-in-tr {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(2.5%, -2.5%, 0); }
}
@keyframes kenburns-zoom-in-bl {
    0% { transform: scale(1) translate3d(0, 0, 0); }
    100% { transform: scale(1.05) translate3d(-2.5%, 2.5%, 0); }
}

/* --- Widgets (Clock & ClearLogo) --- */
#widget-container {
    position: fixed;
    top: 30px;
    left: 50px; /* Align with poster and controls margin */
    z-index: 10;
    display: none; /* Hide by default to prevent FOUC */
}

#time-widget {
    font-size: 2.2em;
    font-weight: 700;
    color: var(--text-color-muted); /* Increased opacity for clarity, but still transparent */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* A sharper, darker shadow to define the edges */
}

#time-separator {
    /* Blinking animation removed for a calmer view */
}

#clearlogo-container {
    position: fixed;
    top: 30px;
    right: 40px;
    z-index: 10;
    max-width: 250px;
    max-height: 120px;
}

#clearlogo {
    max-width: 100%;
    max-height: 100%;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.8));
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#clearlogo.visible {
    opacity: 1;
}

/* --- Main Information Container --- */
#info-container {
    position: fixed; /* Back to a lower position */
    bottom: 0px; /* A bit more to the right for alignment */
    left: 50px;   /* Adjust width automatically */
    width: auto;  /* A bit less wide to make space */
    max-width: 1100px;
    display: flex;
    align-items: flex-end;
    gap: 40px; /* Adjusted for the new position, with space for the shadow */
    z-index: 5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
    padding-bottom: 50px; /* Aangepast voor de nieuwe positie, met ruimte voor de schaduw */
}

#info-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#poster-wrapper {
    flex-shrink: 0;
    position: relative;
}

#poster {
    width: 180px;  /* Poster made smaller */
    height: 270px; /* Poster made smaller */
    background-size: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    --mouse-x: 50%;
    --mouse-y: 50%;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.45); /* Shadow less high and a bit more subtle */
}

#rt-badge {
    position: absolute; /* Position icon slightly outside the poster */
    bottom: -5px; /* Position icon slightly outside the poster, to the right */
    right: -8px;  /* Background, blur, padding and border removed to only show the pure icon */
    /* Prevents extra space around the image */
    line-height: 0;     /* Ensures the badge is always on top of the poster and its effects */
    z-index: 10;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transition-delay: 0.2s;
}

#rt-badge.visible {
    opacity: 1;
    transform: translateY(0);
}

#rt-icon {
    width: 24px;  /* A bit larger for better visibility */
    height: 24px; /* A bit larger for better visibility */
}

#poster::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle 200px at var(--mouse-x) var(--mouse-y), rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transition: opacity 0.3s;
}

#poster-wrapper:hover #poster::before {
    opacity: 1;
}

#poster-wrapper:hover #poster {
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.5); /* Hover shadow also less high */
}

#text-wrapper {
    flex-grow: 1;
    padding-bottom: 0; /* Removed to align the bottom of the text with the poster */
}

#title {
    font-size: 3.2em; /* A bit smaller for a more subtle look */
    font-weight: 700;
    color: var(--text-color-strong); /* Original color */
    margin: 0; /* Margin removed to bring the tagline even closer */
    line-height: 1.1;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7); /* Subtle shadow for readability */
}

#tagline {
    font-size: 1.3em;
    font-style: italic;
    color: var(--text-color-muted);
    margin: 0 0 15px 0; /* Lighter font */
    font-weight: 400;
}

#meta-info {
    font-size: 1.1em; /* More transparent for subtlety */
    font-weight: 400;
    color: var(--text-color-semi-muted);
}

#meta-info #rating::before {
    content: '★';
    color: var(--plex-orange);
    margin: 0 10px 0 15px;
}

/* --- Controls --- */
#controls-container {
    position: fixed; /* A bit lower for better visual alignment with the poster's shadow */
    bottom: 35px; /* Same distance from the edge as the left side */
    right: 50px;
    display: flex;
    gap: 15px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 8px 15px;
    border-radius: 50px; /* Adjusted to new 'bottom' value */
    backdrop-filter: blur(5px);
    opacity: 0;
    transform: translateY(calc(100% + 35px)); /* Aangepast aan nieuwe 'bottom' waarde */
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    z-index: 20;
}

#controls-container.visible {
    opacity: 1;
    transform: translateY(0);
}

#controls-container button {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s, color 0.2s;
}

#controls-container button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

#controls-container button svg {
    width: 24px;
    height: 24px;
}

#pause-button .icon-play { display: none; }
#pause-button.is-paused .icon-pause { display: none; }
#pause-button.is-paused .icon-play { display: block; }

/* --- Branding --- */
#branding-container {
    position: fixed; /* A bit lower for a better balance */
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

#branding-container a {
    color: rgba(255, 255, 255, 0.4);
    transition: color 0.2s;
}

#branding-container a:hover {
    color: rgba(255, 255, 255, 0.8);
}

#branding-container svg {
    width: 24px;
    height: 24px;
}
/* --- Media Queries for Mobile Devices --- */
@media (max-width: 768px) {
    /* Adjust promo box for smaller screens */
    .promo-logo {
        width: 40px;
        height: 40px;
        margin-bottom: 15px;
    }
    #promo-box {
        padding: 20px 15px;
        width: 90%;
    }
    #promo-box h1 {
        font-size: 1.4em;
    }
    #promo-box p {
        font-size: 0.85em;
        margin-bottom: 20px;
    }
    .promo-cta a.button-promo {
        font-size: 0.8em;
        padding: 8px 16px;
    }

    /* Hide the sidebar and logo on small screens */
    #branding-container {
        display: none !important;
    }

    /* Adjust the main information container */
    #info-container {
        flex-direction: row; /* Poster and text next to each other */
        align-items: flex-end; /* Align at the bottom */ /* Test: move the poster and metadata all the way down */
        text-align: left;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        padding: 0 15px 25px 15px; /* More bottom padding for the dropshadow */
        gap: 20px;
        box-sizing: border-box;
    }

    #poster-wrapper {
        filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4));
    }

    #poster {
        /* Use viewport units for a scalable poster */
        width: 28vw; /* Poster significantly smaller */
        height: 42vw;
        max-width: 100px;
        max-height: 150px;
    }

    /* Disable poster hover effects on touch devices */
    #poster-wrapper:hover #poster::before { opacity: 0; }
    #poster-wrapper:hover { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.4)); }
    #poster-wrapper:hover #poster { transform: none; }
    #poster-wrapper #poster { transform: none !important; } /* Force no transformation */


    /* Adjust text sizes with clamp() for flexibility */
    #title {
        /* min, ideal, max */
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        line-height: 1.1;
    }

    #tagline {
        font-size: clamp(0.8rem, 3vw, 1rem);
    }

    #meta-info {
        font-size: clamp(0.7rem, 2.5vw, 0.9rem);
    }

    /* Position the clock and clearlogo differently */
    #widget-container {
        left: 15px;
        top: 15px;
        padding-left: 0; /* Reset desktop alignment */
    }
    #time-widget {
        font-size: clamp(1.2rem, 4.5vw, 1.5rem); /* Clock made smaller */
    }

    #clearlogo-container {
        right: 15px;
        top: 15px;
        display: flex; /* Helps with vertical alignment */
        align-items: center; /* Centers the logo vertically in the container */
        /* Scalable with a maximum */
        max-width: clamp(100px, 35vw, 150px);
    }

    /* Ensure controls container is above everything */
    #controls-container {
        bottom: 20px;
        right: 15px;
        padding: 5px 10px;
        gap: 6px;
    }
    #controls-container button {
        padding: 4px;
    }
    #controls-container button svg {
        width: 20px;
        height: 20px;
    }
}