*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

html {
    font-size: 16px;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #111;
}

body {
display: block;
}

#storefront {
    position: absolute;

    left: 50%;
    top: 0;

    width: 1365px;

    margin: 0;

    transform-origin: 50% 0%;

    transform: translateX(-50%) scale(var(--storefront-scale, 1));

    transition: none;
}

#storefront.entering {
    transform:
        translateX(-50%)
        translateY(-480px)
        scale(calc(var(--storefront-scale, 1) * 2.2));

    transition: transform 2.8s ease-in;
}

#background {
    width: 1365px;
    height: auto;
    display: block;
}

#movie-poster{

    position:absolute;

    left:220px;

    top:428px;

    width:92px;

    height:145px;

    transform: rotate(1.2deg);

}

/* =========================================
   Leuchttafel im Schaufenster
========================================= */

#marquee {
    position: absolute;

    left: 25.0%;
    top: 44.0%;

    display: flex;
    flex-direction: column;
    gap: 5px;

    transform: rotate(1.4deg);
}

#marquee img {
    width: auto;
    height: 16px;
    margin-right: -1px;
}
.letter-space {
    width: 8px;
    flex-shrink: 0;
}

.marquee-line {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 190px;
}

#marquee-episode .letter-space {
    width: 4px;
}

/* =========================================
   Eingangstür – Hotspot
========================================= */

#door-hotspot {
    position: absolute;

    left: 760px;
    top: 320px;

    width: 200px;
    height: 400px;

    z-index: 10;
    cursor: pointer;
}

/* =========================================
   Szenenübergang
========================================= */

#scene-transition {
    position: absolute;
    inset: 0;

    background: black;

    opacity: 0;
    pointer-events: none;

    transition: opacity 1.8s ease;

    z-index: 20;
}

#scene-transition.active {
    opacity: 1;
}

/* =========================================
   Geöffnete Eingangstür
========================================= */

/* =========================================
   Geöffnete Eingangstür
========================================= */

#door-open {
    position: absolute;

    left: 750px;
    top: 230px;

    width: 200px;
    height: 550px;

    object-fit: cover;

    z-index: 9;

    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}

#door-open.opening {
    opacity: 1;
}

/* =========================================
   Innenraum der Videothek
========================================= */

#videostore {
    position: absolute;
    left: 0;
    top: 0;

    width: 1365px;

    opacity: 0;
    visibility: hidden;

    z-index: 20;

    transform-origin: top left;
}

#videostore-background {
    width: 100%;
    height: auto;
    display: block;

    transform: translateY(-4%);
}

#videostore-scene {
    position: relative;

    width: 100%;
    height: 100%;
}

/* =========================================
   VHS-Regal – Test-Hotspot
========================================= */

#shelf-hotspot {
    position: absolute;

    left: 200px;
    top: 35px;

    width: 380px;
    height: 720px;

   clip-path: polygon(
    0% 0%,
    100% 19%,
    100% 79%,
    0% 100%
);

    z-index: 10;
}

/* =========================================
   VHS-Kassetten im Regal
========================================= */

#shelf-vhs-layer {
    position: absolute;

    left: 120px;
    top: 20px;


    width: 1365px;
    height: 768px;

    z-index: 11;

    pointer-events: auto;
}

.vhs-case {
    position: absolute;

    left: 10px;
    top: 17px;

    width: 14px;
    height: 75px;

    z-index: 11;

    cursor: pointer;

}

.shelf-vhs {

position: absolute;

left: 10px;
top: 17px;

width: 35px;
height: 75px;

z-index: 11;

cursor: pointer;

}

#vhs-014 .vhs-spine {
    position: absolute;

    left: 13px;
    top: 0;

    width: 14px;
    height: 75px;

    object-fit: fill;

    transform-origin: left center;

    transform:
        perspective(300px)
        rotateY(50deg);

    z-index: 2;
}



#vhs-014 .vhs-front {
    position: absolute;

    left: 14px;
    top: 0;

    height: 75px;
    width: auto;

    opacity: 0;
    pointer-events: none;

    z-index: 1;
}

#vhs-014 .vhs-back {
    position: absolute;

    right: 0px;
    top: 0;

    height: 75px;
    width: auto;

    object-fit: contain;

    z-index: 1;
}




/* =========================================
   Regal – vordere Schrankseite
========================================= */

#shelf-side-overlay {
    position: absolute;
    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    transform: translateY(-4%);

    pointer-events: none;
    z-index: 12;
}

#shelf-shelf1-overlay {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: auto;

    display: block;

    transform: translateY(-4%);

    pointer-events: none;

    z-index: 12;
}
/* =========================================
   VHS-Großansicht
========================================= */

#vhs-viewer {
    position: absolute;
    inset: 0;

    width: 1365px;
    height: 768px;

    display: none;

    z-index: 100;
}

/* Abdunklung der Videothek */

#vhs-viewer-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.72);

    z-index: 1;
}


/* =========================================
   VHS-Hülle in der Großansicht
========================================= */

#vhs-viewer-case {
    position: absolute;

    left: 50%;
    top: 38%;

    height: 520px;

    z-index: 2;

    cursor: pointer;

    transform:
        translate(-50%, -50%)
        perspective(1200px)
        rotateY(0deg);

    transform-origin: center center;
    transform-style: preserve-3d;

    transition:
        left 0.8s ease,
        top 0.8s ease,
        height 0.8s ease,
        transform 0.8s ease;
}

/* =========================================
   Vorderseite
========================================= */

#vhs-viewer-front {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: auto;

    object-fit: contain;

    transform: translateZ(10px);

    backface-visibility: hidden;

    z-index: 3;

    filter: drop-shadow(
        0 18px 25px rgba(0, 0, 0, 0.8)
    );
}


/* =========================================
   Rückseite
========================================= */

#vhs-viewer-back {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: auto;

    object-fit: contain;

    transform:
        rotateY(180deg)
        translateZ(10px);

    backface-visibility: hidden;

    z-index: 1;
}


/* =========================================
   Rücken / schmale Seite
========================================= */

#vhs-viewer-spine {
    position: absolute;

    left: 0;
    top: 0;

    height: 100%;
    width: 20px;

    object-fit: fill;

    transform-origin: left center;

    transform:
        rotateY(-90deg)
        translateX(-10px);

    backface-visibility: hidden;

    z-index: 2;
}

/* =========================================
   Shelf VHS (neue Engine)
========================================= */

.shelf-vhs {

    position: absolute;

    left: 10px;
    top: 17px;

    width: 14px;
    height: 75px;

    z-index: 11;

    cursor: pointer;

}
/* ==========================================
   Test-Regalfach
========================================== */

#test-compartment {

    position: absolute;

    left: 0;
    top: 0;

    width: 1365px;
    height: 768px;

    z-index: 9999;

    pointer-events: none;

}

.corner {

    position: absolute;

    width: 5px;
    height: 5px;

    background: red;

    border-radius: 50%;

}

.compartment-test-area {

    position: absolute;

    z-index: 999;

}

/* =========================================
   Drag VHS
========================================= */

.drag-vhs {

    position: absolute;

    width: 240px;
    height: 150px;

    perspective: 1200px;

    z-index: 100;

    pointer-events: none;

}


.drag-vhs-body {

    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;

    transform:
        rotateY(-62deg);

}


/* Alle drei Flächen */

.drag-vhs-body img {

    position: absolute;

    top: 0;
    left: 0;

    height: 100%;

    backface-visibility: hidden;
}

.drag-vhs-front {

    transform:
        translateZ(14px);

    z-index: 3;

}


.drag-vhs-back {

    transform:
        rotateY(180deg)
        translateZ(14px);

    z-index: 1;

}


.drag-vhs-spine {

    width: 28px;

    transform-origin: left center;

    transform:
        rotateY(-90deg)
        translateX(-14px);

    z-index: 2;

}


/* =========================================
   Three.js VHS Ebene
========================================= */

#three-vhs-container {

    position: absolute;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    z-index: 50;

    pointer-events: none;

}