/* ==========================================================
   THE 80S VAULT
   Version 2.0
   Mid-1980s Broadcast Theme
========================================================== */

html,
body{

    margin:0;
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
	font-family:'Josefin Sans',sans-serif;

    position:relative;

}


/*==================================================
    Home Navigation
==================================================*/

#homeLink{

    position:fixed;

    top:20px;
    left:24px;

    z-index:99999;

    color:#ffffff;

    font-size:22.5px;

    font-weight:700;

    letter-spacing:2px;

    text-decoration:none;

    opacity:1;

    transition:
        opacity .5s ease,
        color .25s ease;

    text-shadow:
        2px 2px 6px rgba(0,0,0,.9);

}

#homeLink.hidden{

    opacity:0;

    pointer-events:none;

}

#homeLink:hover{

    color:#67d9ff;

}

/*==================================================
    Video
==================================================*/

.video{

    position:fixed;
    inset:0;

    width:100%;
    height:100%;

    object-fit:contain;

    background:black;

    opacity:0;

    transition:opacity .75s ease;

    z-index:1;
}

.video.active{

    opacity:1;
    z-index:2;
}

.video.inactive{

    opacity:0;
    z-index:1;
}

/*==================================================
    Logo
==================================================*/

#logo{

    position:fixed;

    right:20px;
    bottom:20px;

    width:200px;

    opacity:0;

    z-index:1000;

    transform: translateZ(0);
    will-change: transform, opacity;

    transition:opacity 1.5s ease;

    pointer-events:none;

}

#logo.visible{

    opacity:.85;

}

/*==================================================
    Song Info
==================================================*/

#songInfo{

    position:fixed;
	
	transform: translateZ(0);
	will-change: opacity;
	pointer-events: none;

    left:40px;
    bottom:90px;

    width:550px;
    max-width:75vw;

    color:white;

    opacity:0;

    transition:opacity 1.5s ease;

    z-index:1000;
}

#songInfo.visible{

    opacity:1;
}

.artist{

    font-size:37.8125px;

    font-weight:700;

    margin-bottom:2px;

    line-height:1;

    text-shadow:
        3px 3px 0 #000,
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,.8);

    overflow-wrap:anywhere;
}

.song{

    font-size:36.09375px;

    font-style:italic;

    font-weight:700;

    margin-bottom:2px;

    line-height:1;

    text-shadow:
        3px 3px 0 #000,
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,.8);

    overflow-wrap:anywhere;
}

.album{

    font-size:24.75px;

    line-height:1;

    text-shadow:
        3px 3px 0 #000,
        1px 1px 0 #000,
        0 0 4px rgba(0,0,0,.8);

    overflow-wrap:anywhere;
}

#startOverlay{

    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    align-items:center;

    background:black;

    z-index:500;

}

#startOverlay.hidden{

    opacity:0;
    pointer-events:none;
}

#startOverlay.starting{

    opacity:0;

    transition:opacity .75s ease;

    pointer-events:none;

}

/*==================================================
    Startup Screen Layout
==================================================*/

#startupTop{

    position:absolute;

    top:7%;

    left:50%;
    right:auto;

    transform:translateX(-50%);

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(36px,6vw,110px);

    padding:0;

    pointer-events:none;

}

/* BrowseHere's TV WebView is more reliable with a single media decoder. */
.browsehere-mode #videoB{

    display:none;

}

.browsehere-mode #startButton:focus{

    outline:5px solid #67d9ff;
    outline-offset:6px;

}

#startupLeft{

    width:clamp(300px,22vw,420px);

    position:relative;

}

#startupCenter{

    transform:translateY(10px);

}

#startupMTVLogo{

    width:min(25.5vw,390px);

    height:auto;

    display:block;

    user-select:none;

    pointer-events:none;

    animation:
        logoFloat 6s ease-in-out infinite,
        logoGlow 5s ease-in-out infinite;

    filter:
        drop-shadow(0 0 15px rgba(80,140,255,.35))
        drop-shadow(0 0 40px rgba(80,140,255,.25));

}

#startupVaultLogo{

    width:min(15vw,220px);

    height:auto;

    display:block;

    user-select:none;

    pointer-events:none;

}

#startupStatus{

    margin-bottom:18px;

    font-size:16.25px;

    font-weight:700;

    letter-spacing:5px;

    color:#ff59d6;

    text-transform:uppercase;

    text-shadow:
        0 0 10px rgba(255,0,220,.60);

}

#loadingDots{

    display:inline-block;

    width:35px;

    text-align:left;

}

.startupBar{

    position:absolute;

    left:-22px;

    top:8px;

    width:8px;

    height:170px;

    background:#bf33ff;

    box-shadow:0 0 15px #bf33ff;

}

#startButton{

    position:absolute;

    left:50%;

    top:auto;

    bottom:60px;

    transform:translateX(-50%);

    box-sizing:border-box;

    width:760px;

    max-width:80vw;

    padding:24px 40px;

    border-radius:22px;

    border:3px solid rgba(255,255,255,.85);

    background:
        linear-gradient(
            180deg,
            #3d3d3d 0%,
            #1b1b1b 45%,
            #090909 100%
        );

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:28px;

    color:white;

    cursor:pointer;

    user-select:none;

    overflow:hidden;

    z-index:600;

    animation:pulseGlow 2.8s infinite;

    transition:
        transform .30s ease,
        box-shadow .30s ease,
        opacity .40s ease;

}

#startButton::before{

    content:"";

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(255,255,255,.12),

            transparent

        );

    transform:translateX(-120%);

    animation:buttonSweep 4s linear infinite;

}

#startOverlay.starting #startButton{

    transform:translateX(-50%) scale(.85);

    opacity:0;

}

#startButton:hover{

    transform:
        translateX(-50%)
        scale(1.03);

}

.headline{

    font-size:44px;

    font-weight:700;

    font-style:italic;

    line-height:.92;

    letter-spacing:2px;

    text-transform:uppercase;

    color:#ff3db8;

    text-shadow:
        0 0 12px #ff00ff,
        0 0 28px rgba(255,0,255,.75);

}

.sub{

    margin-top:14px;

    font-size:17px;

    font-weight:700;

    letter-spacing:2px;

    color:white;

    text-transform:uppercase;

}

.bolt{

    font-size:50px;

    color:#ff33ff;

    text-shadow:
        0 0 18px #ff00ff,
        0 0 35px #ff00ff;

    flex-shrink:0;

}

.startTitle{

    font-size:62px;

    font-weight:700;

    color:#ff3db8;

    text-transform:uppercase;

    text-shadow:
        0 0 10px #ff00ff,
        0 0 25px #ff00ff;

}

.startTitle2{

    margin-top:10px;

    font-size:70px;

    font-weight:700;

    color:white;

    text-transform:uppercase;

    text-shadow:
        0 0 12px cyan,
        0 0 24px cyan;

}

.startSubtitle{

    margin-top:28px;

    font-size:24px;

    letter-spacing:3px;

    color:#d8d8d8;

}

#startupArtist{

    font-size:45px;

    font-weight:700;

    color:white;

    text-transform:uppercase;

    line-height:.9;

    letter-spacing:2px;

    text-shadow:
        4px 4px 0 #000,
        0 0 12px rgba(255,255,255,.20);

}

#startupTitle{

    margin-top:12px;

    font-size:37.5px;

    font-style:italic;

    font-weight:700;

    color:#ffd13a;

    text-shadow:
        3px 3px 0 #000,
        0 0 10px rgba(255,209,58,.35);

}

#startupAlbum{

    margin-top:18px;

    font-size:18px;

    font-weight:700;

    color:#cfcfcf;

    text-transform:uppercase;

    letter-spacing:2px;

    text-shadow:
        2px 2px 0 #000;

}

@keyframes pulseGlow {

    0%{
        box-shadow:
            0 0 18px #ff00cc,
            inset 0 0 18px rgba(255,255,255,.15);
    }

    50%{
        box-shadow:
            0 0 45px #ff00cc,
            0 0 80px cyan,
            inset 0 0 22px rgba(255,255,255,.25);
    }

    100%{
        box-shadow:
            0 0 18px #ff00cc,
            inset 0 0 18px rgba(255,255,255,.15);
    }

}

@keyframes buttonSweep{

    from{

        transform:translateX(-120%);

    }

    to{

        transform:translateX(120%);

    }

}

@keyframes logoFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-6px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes logoGlow{

    0%{

        filter:

            drop-shadow(0 0 10px rgba(80,140,255,.20))

            drop-shadow(0 0 25px rgba(80,140,255,.18));

    }

    50%{

        filter:

            drop-shadow(0 0 24px rgba(80,140,255,.55))

            drop-shadow(0 0 60px rgba(80,140,255,.30));

    }

    100%{

        filter:

            drop-shadow(0 0 10px rgba(80,140,255,.20))

            drop-shadow(0 0 25px rgba(80,140,255,.18));

    }

}

@media (max-width:900px){

    /*---------------------------------------
      Overall startup layout
    ---------------------------------------*/

    #startupTop{

        position:absolute;

        top:50px;
        left:20px;
        right:20px;
        transform:none;

        display:grid;

        grid-template-columns:1fr 1fr;

        grid-template-areas:
            "left left"
            "center right";

        align-items:end;

		column-gap:10px;
		justify-self:center;
		justify-self:center;

        row-gap:26px;

        padding:0;

    }

    #startupLeft{

        grid-area:left;

        width:100%;

        text-align:center;

        justify-self:center;

    }

    .startupBar{

        display:none;

    }

	#startupCenter{

		grid-area:center;

		justify-self:center;

		align-self:center;

		transform:none;

	}

	#startupRight{

		grid-area:right;

		justify-self:center;

		align-self:center;

	}

    /*---------------------------------------
      Logos
    ---------------------------------------*/

	#startupMTVLogo{

		width:min(36vw,210px);

	}

	#startupVaultLogo{

		width:min(19vw,98px);

		margin-top:12px;

	}

	#logo{

		position:fixed;

		right:3vw;

		bottom:calc(9vh + env(safe-area-inset-bottom));

		width:clamp(70px,16vw,120px);

		height:auto;

		z-index:1000;

	}
	
	/*---------------------------------------
	  Home Navigation
	---------------------------------------*/

	#homeLink{

		top:14px;

		left:16px;

		font-size:13px;

		letter-spacing:1px;

		opacity:.85;

	}	

    /*---------------------------------------
      Song information
    ---------------------------------------*/
	#songInfo{

		left:24px;

		bottom:calc(8vh + env(safe-area-inset-bottom));

		width:52vw;

	}

	.artist{

		font-size:22px;

	}

	.song{

		font-size:21px;

	}

    #startupStatus{

        margin-bottom:18px;

        font-size:15px;

        letter-spacing:4px;

    }

    #startupArtist{

        font-size:30px;

        line-height:.95;

    }

    #startupTitle{

        margin-top:10px;

        font-size:22px;

    }

    #startupAlbum{

        margin-top:12px;

        font-size:14px;

    }

    /*---------------------------------------
      Launch button
    ---------------------------------------*/

	#startButton{

		position:absolute;

		left:50%;
		top:auto;
		bottom:60px;

		transform:translateX(-50%);

		width:92vw;
		max-width:520px;

		padding:18px 20px;

		display:flex;

		align-items:center;

		justify-content:center;

		gap:0;

	}
	
	#startButton > div{

		flex:1;

		text-align:center;

	}	

    #startButton:hover{

        transform:translateX(-50%) scale(1.03);

    }

	.headline{

		font-size:28px;

		line-height:.95;

	}

    .sub{

        margin-top:10px;

        font-size:15px;

    }

	.bolt{

		flex:0 0 52px;

		display:flex;

		justify-content:center;

		align-items:center;

		font-size:34px;

		transform:none;

	}

}

/* ==========================================================
   End of stylesheet
========================================================== */