/* three.js-Animationen – siehe inc/threejs-animations.php */

/* Kachel mit Beitragsbild statt Preview Video: kein Lade-Spinner */
.animation:has(> .animation-poster)::before {
    display: none;
}

/* Lightbox: iframe in der Größe, die sonst das Video hat */
#lightbox-threejs {
    display: block;
    /* feste Breite, da das iframe keine eigene Größe hat (Flex-Container) */
    width: min(calc(90vw - 12rem), calc((90vh - 8rem) * 16 / 9));
    aspect-ratio: 16 / 9;
    max-height: calc(90vh - 8rem);
    border: 0;
    border-radius: var(--radius-sm);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    background: #fff;
}

@media (max-width: 480px) {
    #lightbox-threejs {
        width: calc(100vw - 1rem);
        aspect-ratio: 1 / 1;
        max-height: calc(80vh - 10rem);
    }
}

/* Option „Seitenverhältnis an Fenster anpassen“: gleicher Faktor für Breite
   und Höhe ergibt exakt das Fensterformat */
#lightbox-threejs.is-fit {
    width: 80vw;
    height: 80vh;
    aspect-ratio: auto;
    max-height: none;
}

/* Handy im Hochformat: fast bildschirmbreit mit schmalem Rand, nicht so
   schmal-hoch wie das Fenster (sonst wird die Animation zu hochformatig);
   unten bleibt Platz für die Vor/Zurück-Knöpfe */
@media (max-width: 480px) {
    #lightbox-threejs.is-fit {
        width: calc(100vw - 2rem);
        height: min(60vh, calc((100vw - 2rem) * 1.4));
    }
}

/* Einzelseite */
.threejs-frame {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    background: #fff;
}

/* Einzelseite, Fensterformat: volle Breite, Höhe des Fensters */
.threejs-frame--fit {
    aspect-ratio: auto;
    height: 100vh;
}

/* ==========================================================================
   Vollbild (Lightbox)
   Echtes Vollbild über die Fullscreen-API, auf dem iPhone (keine API für
   beliebige Elemente) ein Pseudo-Vollbild – beides über .is-fullscreen.
   ========================================================================== */

/* Button im Stil von Schließen/Vor/Zurück, unter dem X */
#lightbox-fullscreen {
    position: fixed;
    top: calc(3rem + 3rem + 0.75rem);
    right: 20px;
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: all 0.1s ease;
    z-index: 1001;
}

#lightbox-fullscreen[hidden] {
    display: none;
}

#lightbox-fullscreen:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#lightbox-fullscreen:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.fullscreen-icon {
    width: 1.5rem;
    height: 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.fullscreen-icon--exit,
.lightbox.is-fullscreen .fullscreen-icon--enter {
    display: none;
}

.lightbox.is-fullscreen .fullscreen-icon--exit {
    display: block;
}

@media (max-width: 480px) {
    #lightbox-fullscreen {
        top: calc(1.5rem + 3rem + 0.75rem);
        right: 1.5rem;
        touch-action: none;
        -webkit-user-select: none;
    }
}

/* ==========================================================================
   Kamera (Lightbox) – nur bei Animationen, die eine Kamera nutzen wollen;
   gleicher Stil wie der Vollbild-Button, darunter
   ========================================================================== */

#lightbox-camera {
    position: fixed;
    top: calc(3rem + 3rem + 0.75rem + 3rem + 0.75rem);
    right: 20px;
    width: 3rem;
    height: 3rem;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    border: 1.5px solid rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
    color: rgba(0, 0, 0, 0.7);
    cursor: pointer;
    transition: all 0.1s ease;
    z-index: 1001;
}

#lightbox-camera[hidden] {
    display: none;
}

#lightbox-camera:hover {
    background-color: rgba(255, 255, 255, 0.7);
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease;
}

#lightbox-camera:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#lightbox-camera:focus:not(:focus-visible) {
    outline: none;
}

.camera-icon {
    width: 1.5rem;
    height: 1.5rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

/* aus: Kamera-Symbol (einschalten); an: durchgestrichen (ausschalten) */
.camera-icon--on,
#lightbox-camera.is-on .camera-icon--off {
    display: none;
}

#lightbox-camera.is-on .camera-icon--on {
    display: block;
}

/* Freigabe läuft noch */
#lightbox-camera.is-starting {
    animation: lightbox-camera-pulse 1s ease-in-out infinite alternate;
}

@keyframes lightbox-camera-pulse {
    to {
        opacity: 0.4;
    }
}

/* abgelehnt oder keine Kamera */
#lightbox-camera.is-error {
    border-color: rgba(180, 0, 0, 0.7);
    color: rgba(180, 0, 0, 0.8);
}

@media (max-width: 480px) {
    #lightbox-camera {
        top: calc(1.5rem + 3rem + 0.75rem + 3rem + 0.75rem);
        right: 1.5rem;
        touch-action: none;
        -webkit-user-select: none;
    }
}

/* Vollbild-Zustand: Medium füllt den Bildschirm, Titel weg */
.lightbox.is-fullscreen {
    background: var(--threejs-letterbox, #1a1a1a);
}

.lightbox.is-fullscreen .lightbox-caption {
    display: none;
}

.lightbox.is-fullscreen #lightbox-threejs,
.lightbox.is-fullscreen #lightbox-video,
.lightbox.is-fullscreen #lightbox-image {
    position: fixed;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    object-fit: contain;
}

/* Animation ohne „an Fenster anpassen“: 16:9, zentriert mit Balken */
.lightbox.is-fullscreen #lightbox-threejs:not(.is-fit) {
    width: min(100vw, 100dvh * 16 / 9);
    height: auto;
    aspect-ratio: 16 / 9;
}

/* Buttons über der Animation besser lesbar */
.lightbox.is-fullscreen #lightbox-close,
.lightbox.is-fullscreen #lightbox-prev,
.lightbox.is-fullscreen #lightbox-next,
.lightbox.is-fullscreen #lightbox-fullscreen,
.lightbox.is-fullscreen #lightbox-camera {
    background-color: rgba(255, 255, 255, 0.55);
    transition: opacity 0.4s ease, background-color 0.2s ease;
}

/* Nach kurzer Ruhe: Bedienelemente und Mauszeiger ausblenden */
.lightbox.is-fullscreen.controls-hidden {
    cursor: none;
}

.lightbox.is-fullscreen.controls-hidden #lightbox-close,
.lightbox.is-fullscreen.controls-hidden #lightbox-prev,
.lightbox.is-fullscreen.controls-hidden #lightbox-next,
.lightbox.is-fullscreen.controls-hidden #lightbox-fullscreen,
.lightbox.is-fullscreen.controls-hidden #lightbox-camera {
    opacity: 0;
    pointer-events: none;
}

/* Fokusrahmen nur bei Tastaturbedienung */
#lightbox-fullscreen:focus:not(:focus-visible) {
    outline: none;
}

/* Laden: Spinner (wie bei den Kacheln) statt weißer Fläche, dann einblenden */
#lightbox-media {
    position: relative;
}

#lightbox-threejs {
    transition: opacity 0.5s ease;
}

#lightbox-threejs.is-loading {
    opacity: 0;
}

#lightbox-media.is-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    margin: -15px 0 0 -15px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    animation: spin 1s linear infinite; /* @keyframes spin aus animations.css */
    pointer-events: none;
}

/* Im Vollbild mittig auf dem Bildschirm, hell auf dunklem Grund */
.lightbox.is-fullscreen #lightbox-media.is-loading::after {
    position: fixed;
    z-index: 1002;
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.6);
}

/* Einzelseite: optionaler Caption-Zusatz unter dem Titel (Feld „Caption-Zusatz“) */
.entry-caption-addition {
    margin-top: 0.25em;
    color: #666;
    text-align: center;
}

.entry-caption-addition a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}