/* ==========================================================
   Step 0020a
   Font Foundation
   ========================================================== */

@font-face{

    font-family:"Pulpo";
   src:url("../assets/rm01/fonts/pulpo-regular.woff2") format("woff2");

    font-style:normal;
    font-weight:400;
    font-display:swap;

}

@font-face{

    font-family:"Pulpo";
   src:url("../assets/rm01/fonts/pulpo-medium.woff2") format("woff2");
    font-style:normal;
    font-weight:500;
    font-display:swap;

}

@font-face{

    font-family:"Pulpo Rust";
    src:url("../assets/rm01/fonts/pulpo-rust-75-regular.woff2") format("woff2");

    font-style:normal;
    font-weight:400;
    font-display:swap;

}


/* ==========================================================
   RM-01 Design Variables
   ========================================================== */

.rm01-module{

    --rm01-font-display:"Pulpo Rust", sans-serif;
    --rm01-font-body:"Pulpo", sans-serif;
    --rm01-font-ui:"Pulpo", sans-serif;

}

/* ==========================================================
   RM-01 Mobile Boutique Player
   Asset Integration
   ========================================================== */

.rm01-module{

    position:relative;

    width:100%;

    display:flex;

    justify-content:center;

    align-items:flex-start;

}

.player{

    position:relative;

    width:393px;

}

.player-base{

    display:block;

    width:100%;

    height:auto;

}


/* ==========================================================
   Asset 0001
   Reel
   ========================================================== */

.reel{

    --asset-scale:66%;
    --asset-x:0px;
    --asset-y:-165px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform-origin:center center;

    pointer-events:none;

    animation: spin 8s linear infinite;
    animation-play-state: paused;
    will-change: transform;

}

@keyframes spin{

    from{

        transform:
            translate(-50%,-50%)
            translate(var(--asset-x),var(--asset-y))
            rotate(calc(var(--asset-rotation) + 0deg));

    }

    to{

        transform:
            translate(-50%,-50%)
            translate(var(--asset-x),var(--asset-y))
            rotate(calc(var(--asset-rotation) + 360deg));

    }

}
/* ==========================================================
   Asset 0002
   Volume Knob
   ========================================================== */

.volume-knob{

    --asset-scale:10%;
    --asset-x:0px;
    --asset-y:310px;
    --asset-rotation:-30deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

   transform:
    translate(-50%,-50%)
    translate(var(--asset-x),var(--asset-y))
    rotate(
        calc(
            var(--asset-rotation) +
            var(--volume-rotation, 0deg)
        )
    );

    transform-origin:center center; 

    pointer-events:auto;
cursor:grab;
touch-action:none;
user-select:none;
-webkit-user-drag:none;

transition:transform 80ms ease-out;
will-change:transform;

}
.volume-knob:active{

    cursor:grabbing;

}
/* ==========================================================
   Asset 0003
   Previous Button
   ========================================================== */

.button-prev{

    --asset-scale:12%;
    --asset-x:-120px;
    --asset-y:217px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

   pointer-events:auto;
   cursor:pointer;

}
/* ==========================================================
   Asset 0004
   Stop Button
   ========================================================== */

.button-stop{

    --asset-scale:12%;
    --asset-x:-60px;
    --asset-y:217px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:none;
    cursor: pointer;
    pointer-events: auto;

}

/* ==========================================================
   Asset 0005
   Play Button
   ========================================================== */

.button-play{

    --asset-scale:13%;
    --asset-x:0px;
    --asset-y:217px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);
    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:auto;
    cursor:pointer;

    transition:
        transform 80ms ease,
        filter 80ms ease;

    user-select:none;
    -webkit-user-drag:none;

}


/* ==========================================================
   Asset 0006
   Next Button
   ========================================================== */

.button-next{

    --asset-scale:12%;
    --asset-x:60px;
    --asset-y:217px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:auto;
cursor:pointer;

}
/* ==========================================================
   Asset 0007
   Fast Next Button
   ========================================================== */

.button-fast-next{

    --asset-scale:12%;
    --asset-x:120px;
    --asset-y:217px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:none;

}
/* ==========================================================
   Asset 0008
   Playlist Button
   ========================================================== */

.playlist-button{

    --asset-scale:3.5%;
    --asset-x:102px;
    --asset-y:308px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:none;

}
/* ==========================================================
   Asset 0010
   VU Plate
   ========================================================== */

.vu-plate{

    --asset-scale:38%;
    --asset-x:-76px;
    --asset-y:125px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:none;

}

/* ==========================================================
   Asset 0010a
   VU Frame
   ========================================================== */

.vu-frame{

    --asset-scale:38%;

    --asset-x:-76px;
    --asset-y:125px;

    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);
    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    pointer-events:none;

    z-index:30;

}

/* ==========================================================
   Asset 0009
   VU Needle
   ========================================================== */

.vu-needle{

    --asset-scale:8%;
    --asset-x:-87.5px;
    --asset-y:138px;
    --asset-rotation:-20deg;

    position:absolute;

    width:var(--asset-scale);

    height:auto;

    left:50%;
    top:50%;

   transform:
    translate(-50%,-50%)
    translate(var(--asset-x),var(--asset-y))
    rotate(
        calc(
            var(--asset-rotation) +
            var(--vu-rotation, 0deg)
        )
    );

transition:transform 70ms ease-out;
will-change:transform;

    transform-origin:120% 86%;

    pointer-events:none;

}
/* ==========================================================
   Asset 0012
   Tape Ready OFF
   ========================================================== */

.tape-ready-off{

    --asset-scale:2.37%;
    --asset-x:-146.1px;
    --asset-y:309px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);
    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

     z-index:19;

    pointer-events:none;
}
/* ==========================================================
   Asset 0011
   Tape Ready ON
   ========================================================== */

.tape-ready-on{

    --asset-scale:2.37%;
    --asset-x:-146.1px;
    --asset-y:309px;
    --asset-rotation:0deg;

    position:absolute;

    width:var(--asset-scale);
    height:auto;

    left:50%;
    top:50%;

    transform:
        translate(-50%,-50%)
        translate(var(--asset-x),var(--asset-y))
        rotate(var(--asset-rotation));

    transform-origin:center center;

    z-index:20;

    pointer-events:none;

    opacity:0;

}
/* ==========================================================
   Step 0021
   Information Panel
   ========================================================== */

.track-information{

    position:absolute;

    left:12.5%;
    top:47.5%;

    width:72%;

    color:#f1eee7;

    font-family:var(--rm01-font-body);

    pointer-events:none;

}

.track-label{

    display:block;

    margin-bottom:5px;

    color:#d9ae70;

    font-family:var(--rm01-font-ui);
    font-size:9px;
    font-weight:500;
    letter-spacing:0.08em;

}

.track-title{

    margin:0;

    color:#f2efe8;

    font-family:var(--rm01-font-display);
    font-size:24px;
    font-weight:400;
    line-height:1;

}

.track-artist{

    margin:7px 0 0;

    color:#ece8e1;

    font-size:12px;
    font-weight:400;
    line-height:1.2;

}

.track-album{

    margin:8px 0 0;

    color:#d9ae70;

    font-size:9px;
    font-weight:500;
    letter-spacing:0.06em;
    line-height:1.2;

}


/* ==========================================================
   Step 0021
   Progress Information
   ========================================================== */

.progress-information{

    position:absolute;

    left:54.3%;
    top:62.2%;

    width:33.2%;
    height:12%;

    color:#f1eee7;

    font-family:var(--rm01-font-ui);

}

.progress-label{

    display:block;

    color:#d9ae70;

    font-size:9px;
    font-weight:500;
    letter-spacing:0.04em;

}

.progress-times{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:8px;

    font-size:11px;
    font-weight:400;
    line-height:1;

}

.current-time,
.duration-time{

    color:#f1eee7;

    font-variant-numeric:tabular-nums;

}

.progress-control{

    position:relative;

    width:100%;
    height:14px;

    margin-top:7px;

    cursor:pointer;

    pointer-events:auto;
    touch-action:none;
    user-select:none;

}

.progress-control::before{

    content:"";

    position:absolute;

    left:0;
    right:0;
    top:50%;

    height:4px;

    transform:translateY(-50%);

    background:#242424;

    border:1px solid #080808;
    border-radius:999px;

    box-shadow:
        inset 0 1px 2px rgba(0,0,0,0.9),
        0 1px 0 rgba(255,255,255,0.08);

}

.progress-fill{

    position:absolute;

    left:0;
    top:50%;

    width:var(--progress, 0%);
    height:4px;

    transform:translateY(-50%);

    background:linear-gradient(
        90deg,
        #b9894e,
        #deb16f
    );

    border-radius:999px;

    pointer-events:none;

}

.progress-thumb{

    position:absolute;

    left:var(--progress, 0%);
    top:50%;

    width:13px;
    height:13px;

    transform:translate(-50%,-50%);

    background:linear-gradient(
        135deg,
        #eccb91,
        #a8753e
    );

    border:1px solid #4b2e17;
    border-radius:50%;

    box-shadow:
        0 1px 3px rgba(0,0,0,0.85),
        inset 0 1px 1px rgba(255,255,255,0.45);

    pointer-events:none;

}

.audio-quality{

    display:block;

    margin-top:5px;

    color:#e8e4dc;

    font-size:8px;
    font-weight:500;
    letter-spacing:0.04em;

}

/* ==========================================================
   Step 0030
   Hardware Button Feedback
   ========================================================== */

.button-prev,
.button-stop,
.button-play,
.button-next,
.button-fast-next,
.playlist-button{

    pointer-events:auto;
    cursor:pointer;

    user-select:none;
    -webkit-user-select:none;
    -webkit-user-drag:none;

    transition:
        transform 80ms ease,
        filter 80ms ease;

}


/* ==========================================================
   Step 0030
   Hardware Button Press State
   ========================================================== */

.button-prev:active,
.button-stop:active,
.button-play:active,
.button-next:active,
.button-fast-next:active,
.playlist-button:active{

    transform:
        translate(-50%,-50%)
        translate(
            var(--asset-x),
            calc(var(--asset-y) + 2px)
        )
        rotate(var(--asset-rotation))
        scale(0.98);

    filter:brightness(0.82);

}

/* ==========================================================
   Step 0036
   Playlist Drawer Foundation
   ========================================================== */

.playlist-view{

    position:absolute;

    left:0;
    top:100%;

    width:100%;

    height:300px;

    box-sizing:border-box;

    padding:16px;

    background:
        linear-gradient(
            180deg,
            #242424,
            #141414
        );

    border-radius:
        0
        0
        18px
        18px;

    border:
        1px solid rgba(188,184,128,.25);

    border-top:none;

    box-shadow:

        inset
        0
        1px
        0
        rgba(255,255,255,.04),

        0
        20px
        40px
        rgba(0,0,0,.45);

    transform:translateY(-100%);

    opacity:0;

    overflow:hidden;

    pointer-events:none;

    z-index:-1;

}
/* ==========================================================
   Step 0050
   Mechanical Motion Engine
   ========================================================== */

.playlist-view{

    will-change:transform, opacity;

    transition:
        transform 1600ms cubic-bezier(.16,.72,.18,1),
        opacity 650ms ease;

}
.player.playlist-open .playlist-view{

    transform:translateY(0);

    opacity:1;

    pointer-events:auto;

    z-index:-1;

}

/* ==========================================================
   Step 0037
   Playlist Close Button Fix
   ========================================================== */

.playlist-header{

    display:flex;

    justify-content:flex-end;
    align-items:center;

    margin-bottom:10px;

}

.playlist-close{

    width:20px;
    height:20px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:none;

    background:transparent;

    color:#bcb880;

    font-family:var(--rm01-font-ui);
    font-size:18px;

    cursor:pointer;

    transition:opacity .2s ease;

}

.playlist-close:hover{

    opacity:.65;

}

/* ==========================================================
   Step 0038
   Playlist Track Items
   ========================================================== */

.playlist-list{

    display:flex;
    flex-direction:column;

    gap:6px;

    margin-top:14px;

    overflow-y:auto;

}

.playlist-item{

    display:grid;

    grid-template-columns:34px 1fr;

    align-items:center;

    width:100%;

    padding:10px 12px;

    border:1px solid rgba(188,184,128,0.18);
    border-radius:6px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.035),
            rgba(0,0,0,0.12)
        );

    color:#f1eee7;

    font-family:var(--rm01-font-ui);

    text-align:left;

    cursor:pointer;

}

.playlist-item-index{

    color:#d9ae70;

    font-size:9px;
    font-weight:500;
    letter-spacing:0.08em;

}

.playlist-item-content{

    display:flex;
    flex-direction:column;

    gap:2px;

}

.playlist-item-title{

    font-family:var(--rm01-font-display);

    font-size:15px;
    line-height:1;

}

.playlist-item-artist{

    color:#c9c4bb;

    font-size:8px;
    line-height:1.2;

}

/* ==========================================================
   Step 0040
   Active Playlist Track
   ========================================================== */

.playlist-item{

    transition:
        background 160ms ease,
        border-color 160ms ease,
        box-shadow 160ms ease;

}

.playlist-item:hover{

    border-color:rgba(217,174,112,0.42);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.055),
            rgba(0,0,0,0.10)
        );

}

.playlist-item.is-active{

    border-color:rgba(217,174,112,0.72);

    background:
        linear-gradient(
            180deg,
            rgba(217,174,112,0.10),
            rgba(0,0,0,0.14)
        );

    box-shadow:
        inset 3px 0 0 #d9ae70;

}

/* ==========================================================
   Step 0042
   Playlist Hover & Active Animation
   ========================================================== */

.playlist-item{

    position:relative;

    overflow:hidden;

    transition:
        transform 160ms ease,
        background 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease;

}

.playlist-item::after{

    content:"";

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,255,255,0.035) 45%,
            transparent 70%
        );

    transform:translateX(-120%);

    transition:transform 360ms ease;

    pointer-events:none;

}

.playlist-item:hover{

    transform:translateX(2px);

    border-color:rgba(217,174,112,0.48);

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.06),
            rgba(0,0,0,0.10)
        );

}

.playlist-item:hover::after{

    transform:translateX(120%);

}

.playlist-item:active{

    transform:translateX(2px) scale(0.995);

    filter:brightness(0.92);

}

.playlist-item.is-active{

    border-color:rgba(217,174,112,0.76);

    background:
        linear-gradient(
            180deg,
            rgba(217,174,112,0.11),
            rgba(0,0,0,0.14)
        );

    box-shadow:
        inset 3px 0 0 #d9ae70,
        inset 0 1px 0 rgba(255,255,255,0.04);

}

.playlist-item.is-active:hover{

    transform:translateX(2px);

}

/* ==========================================================
   Step 0045
   Touch Optimisation
   ========================================================== */

.button-prev,
.button-stop,
.button-play,
.button-next,
.button-fast-next,
.playlist-button,
.volume-knob,
.progress-control,
.playlist-item,
.playlist-close{

    -webkit-tap-highlight-color:transparent;

}

.rm01-module img{

    -webkit-user-drag:none;

}

/* ==========================================================
   Step 0046
   Responsive Player Foundation
   ========================================================== */

.rm01-module{

    box-sizing:border-box;

    padding:24px 12px;

    overflow:visible;

}

.player-stage{

    position:relative;

    flex:0 0 auto;

}

.player{

    width:393px;

    transform:
        scale(var(--rm01-scale, 1));

    transform-origin:top left;

}