/* COLOURS */
:root {
    --tape-case-bg: #e8e7e4;
    --tape-case-yellow: #a28632;
    --tape-case-orange: #d5450c;
    --tape-case-red: #af1318;
    --tape-case-magenta: #bd1eb8;
    --tape-case-purple: #500e7c;
}

/*
 * SIZE CONTROLS
 * Change --tape-scale (or the base 300/570/76 px values below) to resize
 * the whole VHS case/tape model and its text/logos together - every
 * width, height, translateZ offset and font-size elsewhere in this file
 * is derived from these variables via calc(), so nothing else needs to
 * be hand-edited when the size changes.
 */
:root {
    --tape-scale: 1.6;

    /* base case dimensions at scale 1 */
    --case-w: calc(300px * var(--tape-scale));
    --case-h: calc(570px * var(--tape-scale));
    --case-depth: calc(76px * var(--tape-scale));
    /* gap between the outer case and the inner tape shell */
    --case-inset: calc(5px * var(--tape-scale));
    /* manually-tuned camera pull-back distance for the top/bottom rotation views */
    --case-rotate-pullback-topbottom: calc(100px * var(--tape-scale));

    /* derived case geometry (used for translateZ + face offsets) */
    --case-half-w: calc(var(--case-w) / 2);
    --case-half-h: calc(var(--case-h) / 2);
    --case-half-depth: calc(var(--case-depth) / 2);
    --case-side-offset: calc((var(--case-w) - var(--case-depth)) / 2);
    --case-topbottom-offset: calc((var(--case-h) - var(--case-depth)) / 2);

    /* inner tape shell dimensions, inset from the case on every side */
    --tape-w: calc(var(--case-w) - (var(--case-inset) * 2));
    --tape-h: calc(var(--case-h) - (var(--case-inset) * 2));
    --tape-depth: calc(var(--case-depth) - (var(--case-inset) * 2));

    /* derived tape geometry (used for translateZ + face offsets) */
    --tape-half-w: calc(var(--tape-w) / 2);
    --tape-half-h: calc(var(--tape-h) / 2);
    --tape-half-depth: calc(var(--tape-depth) / 2);
    --tape-side-offset: calc((var(--tape-w) - var(--tape-depth)) / 2);
    --tape-topbottom-offset: calc((var(--tape-h) - var(--tape-depth)) / 2);
}

/*
 * POSITION & CONTROLS
 * Reposition the case on the page via --vhs-margin-*, and resize/reposition
 * the front/back/label/spine/top/bottom radio controls underneath it via
 * --controls-*, without touching the .vhs or .radio-group rules below.
 */
:root {
    /* position of the case within the 1920x1080 stage (top/left, absolute) */
    --vhs-top: 100px;
    --vhs-left: 1220px;

    /* independent of --tape-scale so resizing the case never affects the controls */
    --controls-scale: 1.6;
    /* position of the controls within the 1920x1080 stage (top/left, centered horizontally) */
    --controls-top: 50%;
    --controls-left: 30%;
    --controls-gap: calc(8px * var(--controls-scale));
    --controls-font-size: calc(1rem * var(--controls-scale));
    /* sized independently of --controls-scale, so labels and the radio buttons can be resized separately */
    --controls-radio-scale: 1.8;
    --controls-radio-size: calc(1rem * var(--controls-radio-scale));

    /* position/size of the 5-tape thumbnail strip within the stage (kept clear of the case, on the right) */
    --slots-top: 69.6%;
    --slots-left: 3.6%;
    --slot-size: 10%;
    --slots-gap: .6%;

    /* position of the prev/next + play/download action bar, just above the radio controls */
    --actions-top: calc(var(--controls-top) - 8%);
    --actions-left: var(--controls-left);
}

/* Tape label / spine controls */
:root {
    --tape-label-width: 82%;
    --tape-label-height: 75%;
    --tape-label-font-size: 1.25rem;
    --tape-label-line-height: 1.1;
    --tape-label-color: #111;
    --tape-label-background: #fff;
}

/* FONTS */
@font-face {
    font-family: "Marker";
    src: url("https://assets.codepen.io/8841541/PermanentMarker-Regular.ttf");
    font-weight: normal;
}

@font-face {
    font-family: "Besley";
    src: url("https://assets.codepen.io/8841541/Besley-VariableFont_wght.ttf");
    font-weight: normal;
}

/* RESET */
* {
    box-sizing: border-box;
    margin: 0;
    font-family: sans-serif;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: rgb(107, 98, 98);
}

/* Fills the window and centers the fixed-size stage, letterboxing as needed */
.stage-viewport {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/*
 * Authored at a fixed 1920x1080 design size and uniformly scaled to fit the
 * window (see js/video-rental.js) - the background and the case share this
 * one coordinate system, so they stay aligned at any window/popup size.
 */
.stage {
    position: relative;
    width: 1920px;
    height: 1080px;
    flex-shrink: 0;
    transform: scale(var(--stage-scale, 1));
    transform-origin: center center;
}

.stage-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    pointer-events: none;
}

.vhs {
    position: absolute;
    top: var(--vhs-top);
    left: var(--vhs-left);
    width: var(--case-w);
    height: var(--case-h);
    perspective: 1000px;
    z-index: 1;
}

.tape-cover {
    width: var(--case-w);
    height: var(--case-h);
    position: relative;
    transform-style: preserve-3d;
    transform: translateZ(calc(var(--case-half-depth) * -1));
    transition: transform 1s;
}

.tape-cover.show-front {
    transform: translateZ(calc(var(--case-half-depth) * -1)) rotateY(0deg);
}

.tape-cover.show-back {
    transform: translateZ(calc(var(--case-half-depth) * -1)) rotateY(180deg);
}

.tape-cover.show-right {
    transform: translateZ(calc(var(--case-half-w) * -1)) rotateY(-90deg);
}

.tape-cover.show-left {
    transform: translateZ(calc(var(--case-half-w) * -1)) rotateY(90deg);
}

.tape-cover.show-top {
    transform: translateZ(calc(var(--case-rotate-pullback-topbottom) * -1)) rotateX(-90deg);
}

.tape-cover.show-bottom {
    transform: translateZ(calc(var(--case-rotate-pullback-topbottom) * -1)) rotateX(90deg);
}
.tape-cover__face {
    position: absolute;
    border: 0.5px dotted gray;
    background-color: var(--tape-case-bg);
}

.tape-cover__face--front {
    width: var(--case-w);
    height: var(--case-h);
    background-image: url('../../files/assets/videovault/img/videorental/covers/front_4-robbers.webp');
    background-size: cover;
}

.tape-cover__face--back {
    width: var(--case-w);
    height: var(--case-h);
    background-image: url('../../files/assets/videovault/img/videorental/covers/back_4-robbers.webp');
    background-size: cover;
}

.tape-cover__face--left {
    width: var(--case-depth);
    height: var(--case-h);
    left: var(--case-side-offset);
    background-image: url('../../files/assets/videovault/img/videorental/covers/side_4-robbers.webp');
    background-size: cover;
}

.tape-cover__face--right {
    width: var(--case-depth);
    height: var(--case-h);
    left: var(--case-side-offset);
}

.tape-cover__face--top,
.tape-cover__face--bottom {
    width: var(--case-w);
    height: var(--case-depth);
    top: var(--case-topbottom-offset);
}

.tape-cover__face--top {
    transform: rotateX(90deg) translateZ(var(--case-half-h));
}

.tape-cover__face--bottom {
    transform: rotateX(-90deg) translateZ(var(--case-half-h));
}

.tape-cover__face--front {
    /* VHS Video Notch */
    /* clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 72%, 85% 65%, 85% 54%, 100% 49%, 100% 0); */
    transform: rotateY(0deg) translateZ(var(--case-half-depth));
}

.tape-cover__face--back {
    /* VHS Video Notch */
    /* clip-path: polygon(0 0, 0 49%, 15% 54%, 15% 65%, 0 72%, 0 100%, 100% 100%, 100% 0); */
    transform: rotateY(180deg) translateZ(var(--case-half-depth));
}

.tape-cover__face--left {
    transform: rotateY(-90deg) translateZ(var(--case-half-w));
}

.tape-cover__face--right {
    transform: rotateY(90deg) translateZ(var(--case-half-w));
}



/* ----------------- THE TOP SECTION OF THE TAPE COVER */
.tape-cover__topsection {
    width: 100%;
    height: 45%;
    display: flex;
    flex-direction: column;
}

.tape-cover__topsection--alignlow {
    justify-content: flex-end;
}

/* FRONT */
.frontbrand {
    width: 100%;
    height: 50%;
    padding: 10% 0 0 5%;
}

.frontbrand__text {
    font-family: Besley;
    text-transform: uppercase;
    font-weight: bold;
    font-size: calc(2rem * var(--tape-scale));
}

.frontdetails {
    width: 100%;
    height: 50%;
    padding: 0 0 0 5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.frontdetails__text {
    text-transform: capitalize;
}

.frontdetails__text--line {
    font-size: calc(1.5rem * var(--tape-scale));
    line-height: calc(1.5rem * var(--tape-scale));
    font-style: italic;
}

.frontdetails__text--type {
    font-size: calc(4rem * var(--tape-scale));
    line-height: calc(4rem * var(--tape-scale));
    font-weight: bold;
}

/* SPINE */
.spinebrand {
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: center;
    margin: 1rem 0 0 0;
}

.spinebrand__text {
    font-family: Besley;
    text-transform: uppercase;
    font-weight: bold;
    font-size: calc(1.25rem * var(--tape-scale));
}

.spinedetails {
    height: var(--case-depth);
    width: 100%;
    margin: 1rem 0 0 0;
    transform: rotate(90deg);
}

.spinedetails__text {
    width: calc(150px * var(--tape-scale));
    display: flex;
}

.spinedetails__text--left {
    height: 35%;
    align-items: flex-end;
}

.spinedetails__text--right {
    height: 65%;
    align-items: flex-start;
}

.spinedetails__line {
    text-transform: capitalize;
    font-size: calc(0.94rem * var(--tape-scale));
    font-style: italic;
}

.spinedetails__type {
    text-transform: capitalize;
    font-size: calc(2.5rem * var(--tape-scale));
    line-height: calc(2.5rem * var(--tape-scale));
    font-weight: bold;
}

/* BACK */
.backbrand {
    width: 100%;
}

.backbrand__rectable {
    width: 100%;
    padding: 5% 5% 0 5%;
}

.backbrand__rectablerow {
    width: 100%;
    height: 2rem;
    display: flex;
    flex-wrap: nowrap;
}

.backbrand__rectablecell {
    width: 25%;
    height: 2rem;
    border: 0.5px dotted black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.backdetails {
    width: 100%;
    padding: 2.5% 5% 5%;
    display: flex;
    align-items: flex-start;
}

.backdetails__logo {
    height: calc(3rem * var(--tape-scale));
    position: absolute;
    top: 43.86%;
    left: 3.33%;
}

.backdetails__textbox {
    padding: 0 0 0 2.5%;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.backdetails__text {
    font-size: calc(.5rem * var(--tape-scale));
}

.backdetails__logointext {
    height: calc(.5rem * var(--tape-scale));
}

/* ----------------- THE MIDDLE SECTION OF THE TAPE COVER */
/* STRIPES */
.tape-cover__middlesection {
    width: 100%;
    height: 30%;
}

/* ----------------- THE BOTTOM SECTION OF THE TAPE COVER */
.tape-cover__bottomsection {
    width: 100%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* FRONT BOTTOM DETAILS */
.frontbottomdetails {
    width: 100%;
    height: 33%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.frontbottomdetails--logo {
    position: absolute;
    top: 89%;
    left: 78%;
    width: 20%;
    height: 8%;
}

.frontbottomdetails--textbox {
    text-transform: uppercase;
    font-weight: bold;
    height: 80%;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0 2.5%;
}

.frontbottomdetails--text {
    font-size: calc(0.4rem * var(--tape-scale));
}

.frontbottomdetails--texttop {
    font-size: calc(0.8rem * var(--tape-scale));
}

.video-link {
    font-size: calc(0.45rem * var(--tape-scale));
    color: inherit;
    text-decoration: underline;
}

.video-link[hidden] {
    display: none;
}

/* SPINE */
.spine-bottom-logo {
    width: calc(60px * var(--tape-scale));
    margin: 0 auto 1rem auto;
    position: absolute;
    top: 86%;
    left: 8%;
    opacity: 0.8;
}

/* BACK BOTTOM DETAILS */
.backbottomdetails {
    font-size: calc(0.5rem * var(--tape-scale));
    text-transform: capitalize;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 5% 5% 5%;
}

.backbottomdetails__righttext {
    text-align: right;
}

/* TOP AND BOTTOM OF THE CASE */
.top-bottom {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Background image layer that can be rotated independently */
.top-bottom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    z-index: -1;
}

/* Counter-rotate background for top face */
.tape-cover__face--top .top-bottom::before {
    background-image: var(--cover-top-url, url('../../files/assets/videovault/img/videorental/covers/top_4-robbers.webp'));
    /* transform: rotateX(-90deg); */
}

/* Counter-rotate background for bottom face */  
.tape-cover__face--bottom .top-bottom::before {
    background-image: var(--cover-top-url, url('../../files/assets/videovault/img/videorental/covers/top_4-robbers.webp'));
    /* transform: rotateX(90deg); */
}

.top-bottom__top {
    width: 100%;
    height: 35%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    padding: 0 0 0 5%;
}

.top-bottom__brand {
    font-size: calc(0.94rem * var(--tape-scale));
    font-family: Besley;
    text-transform: uppercase;
    font-weight: bold;
}

.top-bottom__bottom {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.top-bottom__type {
    font-size: calc(2.5rem * var(--tape-scale));
    text-transform: uppercase;
    font-weight: bold;
}

.top-bottom__logo {
    height: calc(2rem * var(--tape-scale));
}

.vhs-tape {
    width: var(--tape-w);
    height: var(--tape-h);
    position: absolute;
    top: var(--case-inset);
    left: var(--case-inset);
    transform-style: preserve-3d;
}

/* Exposed VHS Tape */
.vhs-tape__face {
    position: absolute;
    border: 1px solid black;
    background: var(--tape-color, #222222);
    border-radius: 10px;
}

.vhs-tape__face--front,
.vhs-tape__face--back {
    width: var(--tape-w);
    height: var(--tape-h);
    line-height: var(--tape-h);
}

.vhs-tape__face--right,
.vhs-tape__face--left {
    width: var(--tape-depth);
    height: var(--tape-h);
    left: var(--tape-side-offset);
    line-height: var(--tape-h);
}

.vhs-tape__face--top,
.vhs-tape__face--bottom {
    width: var(--tape-w);
    height: var(--tape-depth);
    top: var(--tape-topbottom-offset);
    line-height: var(--tape-depth);
}

.vhs-tape__face--front {
    transform: rotateY(0deg) translateZ(var(--tape-half-depth));
}

.vhs-tape__face--back {
    transform: rotateY(180deg) translateZ(var(--tape-half-depth));
}

.vhs-tape__face--left {
    transform: rotateY(-90deg) translateZ(var(--tape-half-w));
}

.vhs-tape__face--right {
    transform: rotateY(90deg) translateZ(var(--tape-half-w));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

/* Sticker on the case's label-side (right) face */
.sticker-right {
    width: calc(50px * var(--tape-scale));
    position: absolute;
    top: 40%;
    left: 25%;
    opacity: 0.9;
}

.sticker-right[hidden] {
    display: none;
}

.vhs-tape__face--top {
    transform: rotateX(90deg) translateZ(var(--tape-half-h));
}

.vhs-tape__face--bottom {
    transform: rotateX(-90deg) translateZ(var(--tape-half-h));
}

.vhs-tape__labelbuffer--top {
    height: 20%;
}

.vhs-tape__labelbuffer--bottom {
    height: 5%;
}

.vhs-tape__label {
    background: var(--tape-label-background);
    width: var(--tape-label-width);
    height: var(--tape-label-height);
    border-radius: calc(5px * var(--tape-scale));
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--tape-label-height);
    overflow: hidden;
}

.vhs-tape__labeltext {
    color: var(--tape-label-color);
    font-family: var(--tape-font, Marker);
    font-size: calc(var(--tape-label-font-size) * var(--tape-scale));
    line-height: var(--tape-label-line-height);
    text-align: center;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    white-space: nowrap;
}

/* STRIPES */
.stripes {
    width: 100%;
    height: 20%;
}

.stripes--yellow {
    background-color: var(--tape-case-yellow);
}

.stripes--orange {
    background-color: var(--tape-case-orange);
}

.stripes--red {
    background-color: var(--tape-case-red);
}

.stripes--magenta {
    background-color: var(--tape-case-magenta);
}

.stripes--purple {
    background-color: var(--tape-case-purple);
}

/* Controls */
.radio-group {
    position: absolute;
    top: var(--controls-top);
    left: var(--controls-left);
    transform: translateX(-50%);
    width: max-content;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    font-size: var(--controls-font-size);
    z-index: 2;
}

.radio-group label {
    margin-right: var(--controls-gap);
    text-transform: capitalize;
}

.radio-group input[type="radio"] {
    width: var(--controls-radio-size);
    height: var(--controls-radio-size);
    margin-right: calc(0.4rem * var(--controls-radio-scale));
}

/*
 * Clickable strip of the 5 active tapes, overlaid on the poster row baked
 * into the background art. Nudge --slots-* to line up with that artwork.
 */
.tape-slots {
    position: absolute;
    top: var(--slots-top);
    left: var(--slots-left);
    display: flex;
    align-items: center;
    gap: var(--slots-gap);
    z-index: 2;
}

.tape-slot {
    width: var(--slot-size);
    /* aspect-ratio: 3 / 4; */
    padding: 0;
    border: 2px solid transparent;
    background: #000;
    cursor: pointer;
    overflow: hidden;
}

.tape-slot.active {
    border-color: #fff;
}

.tape-slot img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tape-slot-nav {
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #fff;
    color: #fff;
    font-size: var(--controls-font-size);
    cursor: pointer;
    padding: 0.25em 0.6em;
}

/* Prev/next + play/download, grouped together just above the front/back/label/spine/top/bottom controls */
.tape-actions {
    position: absolute;
    top: var(--actions-top);
    left: var(--actions-left);
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    font-size: var(--controls-font-size);
    z-index: 2;
}

.tape-action-btn {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.85);
    border: 1px solid #fff;
    color: #fff;
    padding: 0.25em 0.75em;
    text-transform: capitalize;
}

.tape-action-btn[hidden] {
    display: none;
}