/*==========================================================
Storybook Voices
Assembly Composition

tracks.css

Ctrl+F

BODY
TRACK ROOM
HEADER
PROJECT
THEATER
TIME
TRANSPORT
TIMELINE
TRACKS
STATUS
GLASS BUTTONS
==========================================================*/

/*==========================================================
BODY
Ctrl+F BODY
==========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

/*==========================================================
BODY
==========================================================*/

body{

margin:0;

background:#17181d;

font-family:Arial,Helvetica,sans-serif;

color:white;

overflow-y:auto;

overflow-x:hidden;

}


/*==========================================================
TRACK ROOM
==========================================================*/

#trackRoom{

position:relative;

width:1800px;

height:1100px;

margin:auto;

}


/*==========================================================
HEADER
==========================================================*/

#headerBar{

position:absolute;

left:20px;

top:20px;

width:1760px;

height:70px;

background:rgba(255,255,255,.06);

backdrop-filter:blur(16px);

border:1px solid rgba(255,255,255,.18);

border-radius:22px;

}

#logo{

position:absolute;

left:25px;

top:18px;

font-size:30px;

font-weight:bold;

}

#roomTitle{

position:absolute;

left:650px;

top:18px;

font-size:30px;

font-weight:bold;

}


/*==========================================================
PROJECT
==========================================================*/

#projectBar{

position:absolute;

left:20px;

top:105px;

width:1760px;

height:55px;

background:rgba(255,255,255,.06);

backdrop-filter:blur(14px);

border-radius:20px;

border:1px solid rgba(255,255,255,.15);

}
#projectBar label{

    position:relative;

    top:4px;      /* was effectively too high */
    left:5px;
    top:5px;   /* move slightly right */

}

#projectBar input{

    position:relative;

    top:5px;      /* drop them 3–4 px */

    left:5px;     /* move a few hairs right */

    height:42px;

    font-size:22px;

    border-radius:14px;

    padding-left:12px;

    background:rgba(255,255,255,.10);

    border:1px solid rgba(255,255,255,.18);

    color:white;

}

/*==========================================================
THEATER
==========================================================*/

#theaterArea{

position:absolute;

left:320px;

top:190px;

width:1100px;

height:370px;

background:#0d0f13;

border-radius:34px;

border:2px solid rgba(255,255,255,.10);

overflow:hidden;

box-shadow:

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

inset 0 0 40px rgba(255,255,255,.03);

}

#previewVideo{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

object-fit:contain;

background:black;

}


/*==========================================================
TIME
==========================================================*/

#timeBar{

position:absolute;

left:20px;

top:585px;

width:320px;

height:60px;

}

#currentTime{

width:300px;

height: 40px;px;

font-size:32px;

text-align:center;

border-radius:18px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.20);

color:white;

}


/*==========================================================
TRANSPORT
==========================================================*/

#transportBar{

position:absolute;

left:380px;

top:585px;

width:760px;

height:35px;

}


/*==========================================================
TIMELINE
==========================================================*/

#timelineContainer{

position:absolute;

left:20px;

top:660px;

width:1760px;

height:50px;

background:rgba(255,255,255,.05);

backdrop-filter:blur(18px);

border-radius:22px;

border:1px solid rgba(255,255,255,.12);

overflow-x:auto;

overflow-y:hidden;

}

#timelineRuler{

position:relative;

height:75px;

min-width:9000px;

background:

repeating-linear-gradient(

to right,

transparent 0px,

transparent 48px,

rgba(255,255,255,.18) 49px,

rgba(255,255,255,.18) 50px

);

}


/*==========================================================
TRACKS
==========================================================*/

#tracksContainer{

position:absolute;

left:20px;

top:850px;

width:1760px;

height:220px;

background:#1d2025;

border-radius:24px;

border:1px solid rgba(255,255,255,.10);

overflow:auto;

}


/*==========================================================
STATUS
==========================================================*/

#statusBar{

position:absolute;

left:20px;

top:1085px;

width:1760px;

height:20px;

font-size:17px;

color:#bdbdbd;

}


/*==========================================================
GLASS BUTTONS
==========================================================*/

.glassButton{

height:30px;

padding-left:28px;

padding-right:28px;

margin-right:10px;

border:none;

border-radius:18px;

font-size:20px;

font-weight:bold;

color:white;

cursor:pointer;

background:

linear-gradient(

180deg,

rgba(255,255,255,.22),

rgba(255,255,255,.08)

);

border:1px solid rgba(255,255,255,.22);

backdrop-filter:blur(18px);

box-shadow:

0 6px 20px rgba(0,0,0,.30),

inset 0 1px 1px rgba(255,255,255,.30);

transition:.18s;

}

.glassButton:hover{

transform:translateY(-2px);

background:

linear-gradient(

180deg,

rgba(255,255,255,.30),

rgba(255,255,255,.12)

);

}

.glassButton:active{

transform:translateY(1px);

}


/*==========================================================
TRACK CLIPS
==========================================================*/

.trackClip{

height:42px;

border-radius:16px;

background:

linear-gradient(

90deg,

#58a6ff,

#6ec7ff

);

border:1px solid rgba(255,255,255,.35);

box-shadow:

0 3px 10px rgba(0,0,0,.35);

cursor:grab;

}

.trackClip:active{

cursor:grabbing;

}
.second{

position:absolute;

top:0;

width:100px;

height:75px;

}

.secondLabel{

position:absolute;

top:6px;

left:2px;

color:#ffe07c;

font-size:16px;

}

.majorTick{

position:absolute;

left:0;

bottom:10px;

width:2px;

height:28px;

background:white;

}

.minorTick{

position:absolute;

bottom:10px;

width:1px;

height:12px;

background:#888;

}

.assetRow{

display:flex;

align-items:center;

gap:18px;

height:58px;

padding:8px 18px;

border-bottom:1px solid rgba(255,255,255,.08);

color:white;

}

.assetName{

width:280px;

font-size:18px;

}
/*==========================================================
FRONT PAGE WORD LINK
==========================================================*/

#frontPageLink{

    position:absolute;

    right:28px;

    top:25px;

    font-size:20px;

    font-weight:700;

    color:#dfe7ff;

    text-decoration:none;

    letter-spacing:.5px;

}

#frontPageLink:hover{

    text-decoration:underline;

}