/*================================*/
/*    INDEX.JS                    */
/*    KGARMIRE, 2025-11-27        */
/*================================*/

:root{

    --gray-1: #f1f1f1;
    --gray-2: #e5e5e5;
    --gray-3: #cbcbcb;
    --gray-4: #a3a3a3;

    --shadow: rgba(0,0,0,0.1);
    --shadow-light: rgba(255,255,255,0.1);

    --blood : #e80000;
    --blood-hover : #ca0000;
    --blood-ghost: rgba(232,0,0,0.2);
    --blood-dark: #760000;

    --glow : drop-shadow(0px 0px 12px rgba(232,0,0,0.8));

    --secondary : #cc8e8e;

}

@font-face{
    font-family : King Arthur Legend;
    src : url('./King Arthur Legend.ttf');
}


html, body{
    padding:0;
    margin:0;
    width:100%;
    height:100%;
}

body{
    display: flex;
    justify-content:center;

    background-color:#222;
    background-image: url('../graphics/background.jpg');
    background-position-y:top;
    background-position-x:center;
    background-size:cover;

    font-family: "Crimson Text", serif;
}

/*================================*/
/*    COMMON STYLES               */
/*================================*/

.blood-glow{
    filter: drop-shadow(0px 0px 12px rgba(232,0,0,0.8)); 
}

@keyframes blood-pulse{
    from{filter: drop-shadow(0px 0px 12px rgba(232,0,0,0.1)); } 
    to{filter: drop-shadow(0px 0px 12px rgba(232,0,0,0.8)); } 
}

.blood-glow.pulse{
    animation-name:blood-pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

hr{
    margin: 4px 12px;
    border: none;
    border-bottom: 1px solid var(--blood-dark);
}

/*--- BUTTONS --------------------*/
button{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 32px;
    width: 100%;
    padding: 0;

    font-family: 'Grenze Gotisch', serif;
    font-size: 1.5rem;
    line-height: 1.5rem;

    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button.primary{
    color: white;
    background: var(--blood);
}

button.secondary{
    color: var(--blood);
    background: #121212;
    border:1px solid var(--blood);
}


button.header-toggle{
    display: none;
    background: transparent;
    border:none;
    width:48px;
    height:48px;
    transition:300ms;
}

button.header-toggle.active{
    filter: drop-shadow(0px 0px 1px var(--blood)); 
    background: var(--blood-ghost);
}

button.header-toggle svg{
    fill: none; 
    stroke: #757575; 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}

button.header-toggle.active svg{
    stroke: var(--blood-hover); 
}

/*--- INPUTS ---------------------*/
input, textarea{
    font-family: "Crimson Text", serif;
    background: #121212;
    color: white;
    border: 1px solid var(--blood);
}

input:focus, textarea:focus{
    filter:var(--glow);
}

/*--- LISTS ----------------------*/
.list{
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 60px 8px 8px 8px;
    overflow: auto;
}

.list.secondary{ padding-top:0; }

.button-list{
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap:16px;
}

/*--- CARDS ----------------------*/
.card{
    background: #121212;
    border-radius: 8px;
    border:1px solid black;
    /*box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14), 0 3px 1px -2px rgba(0,0,0,0.12), 0 1px 5px 0 rgba(0,0,0,0.20);*/

    padding: 8px;
    color:#f1f1f1;
}

.poster.card,
.score.card {
    display: grid;
    grid-template-columns: auto 1fr;
    gap:8px;
}
.score.poster.card{ grid-template-columns: auto auto 1fr; }

.flex.card {
    display: flex;
    flex-direction: column;
    gap:4px;
}

/*... CARD CONTENTS ..............*/
.card img.poster{
    width:64px;
    height:auto;
    border-radius: 8px;
}

.card h2{
    color:var(--secondary);
    font-family: "Grenze Gotisch", serif;
    font-weight: normal;
    margin:0;
    font-size: 2rem;
    line-height: 2rem;
}

.card p{
    margin:0;
    padding-left:4px;
}

.card .desc{
    font-size: 0.9rem;
    color:#757575;
}


/*... SCORE CARD .................*/
.score-grid{
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px;
    place-items: center start;
    color:#757575;
    font-size: 0.9rem;
}

.score-banner{
    display: flex;
    justify-content: center;

    margin:-8px 0;

    background-image: url('../graphics/rank-banner.png');
    background-position-y:top;
    background-position-x:center;
    background-size:cover;
}

.score-banner h3{
    color:#f1f1f1;
    margin-top:8px;

    font-family: "Grenze Gotisch", serif;
    font-weight: normal;
    margin:0;
    font-size: 3rem;
    line-height: 3rem;
}


/*... RANK BARS ..................*/
.rank-bar{
    position: relative;
    width: 100%;
    height: 8px;
    background: #222;
    border-radius: 99px;
}

.rank-bar .blood{
    position: absolute;
    top:0;
    left:0;

    height:8px;
    border-radius: 99px;

    background-color: var(--blood);
    background-size:cover;
    background-blend-mode: multiply;
}

.rank-bar .blood.rank-0{ width : 8px }
.rank-bar .blood.rank-5{ width : 5% }
.rank-bar .blood.rank-10{ width : 15% }
.rank-bar .blood.rank-15{ width : 25% }
.rank-bar .blood.rank-20{ width : 35% }
.rank-bar .blood.rank-25{ width : 45% }
.rank-bar .blood.rank-30{ width : 55% }
.rank-bar .blood.rank-35{ width : 65% }
.rank-bar .blood.rank-40{ width : 75% }
.rank-bar .blood.rank-45{ width : 85% }
.rank-bar .blood.rank-50{ width : 100%}

.rank-bar.vamp .blood{ background-image: url('../graphics/rank-v-spatter.png');}
.rank-bar.spook .blood{ background-image: url('../graphics/rank-s-spatter.png');}
.rank-bar.cool .blood{ background-image: url('../graphics/rank-c-spatter.png');}
.rank-bar.good .blood{ background-image: url('../graphics/rank-g-spatter.png');}


/*... USER-RATING CARD ...........*/

.user-rating.card .username {
    font-size: 1.6rem;
    line-height: 1.6rem;
    font-family: 'Grenze Gotisch', serif;
}

/* User Colors */
.user-rating.elcatt{color:steelblue}
.user-rating.elcatt svg{stroke:steelblue}
.user-rating.elcatt .rank-bar .blood{background-color:steelblue}

.user-rating.wormsign{color:darkseagreen}
.user-rating.wormsign svg{stroke:darkseagreen}
.user-rating.wormsign .rank-bar .blood{background-color:darkseagreen}


/*================================*/
/*    ARCHITECTURE                */
/*================================*/

main{
    position: relative;
    width:100%;
    height:100%;
    max-width: 800px;
    /*border:1px dotted #f1f1f1;*/
    overflow: hidden;
}

/*--- HEADER ---------------------*/
header{
    position: relative;
    background:#121212;
    height: 64px;
    padding:0 16px;
}

header h1{
    color:var(--blood);
    font-family: "Grenze Gotisch", serif;
    font-weight: normal;
    margin:0;
    font-size: 3rem;
    line-height: 3rem;
}

header img{
    height:36px;
    width:36px;
}

#header-border{
    position: absolute;
    height:72px;
    width:100%;
    background-image: url("../graphics/header-border.png");
    background-position-x: center;
    z-index: 2;
}

/*--- SECTION --------------------*/
section{
    display: none;
    height:calc(100% - 64px);
    width:100%;
}



/*================================*/
/*    SECTION: LOADING            */
/*================================*/
#loading{
    display:block
}

#loading img{
    width:128px;
    height:auto;
}


/*--- FEEDBACKER -----------------*/
#feedbacker{
    display: none;
    height: 88px;
    width: auto;

    position: absolute;
    bottom: 24px;
    width: 100%;
    /*border:1px solid var(--blood);*/
}

#fb-banner{
    position: absolute;
    width:100%;
    max-width: 450px;
    height:auto;
    margin:auto;
}

#fb-icon{}

#feedbacker h4{
    margin:0 auto;
    font-family: "Grenze Gotisch", serif;
    font-weight: normal;
    font-size: 2rem;
    line-height: 2rem;
    color:var(--blood);
    filter: var(--glow); 
}


/*================================*/
/*    SECTION: HOME               */
/*================================*/
/* EMPTY  */

/*================================*/
/*    SECTION: WATCHLIST          */
/*================================*/

.unwatched.movie.card h2{ color:#757575; }
.unwatched.movie.card img{ filter: grayscale(100%); }


/*================================*/
/*    SECTION: SEARCH             */
/*================================*/
#search-form{
    padding: 60px 8px 16px 8px;

    display: grid;
    grid-template-columns: 1fr 64px;
    gap:8px;
}

#search-form input:focus+button {
    filter:var(--glow);
}

#search .list{
    height: calc(100% - 104px);
}

/*================================*/
/*    SECTION: ACTION             */
/*================================*/
#action .list{
    /*height:auto;*/
}


/*================================*/
/*    SECTION: RATE               */
/*================================*/

#rate .bats{
    /*padding:0px 24px 0 24px;*/
}

#rate svg.bat{
    fill: none; 
    stroke: var(--blood-ghost); 
    stroke-linecap: round; 
    stroke-linejoin: round; 
    stroke-width: 2px;
}

#rate svg.bat.active{
    fill: var(--blood);
    stroke: var(--blood);
}

#rate .flex.card h2{ color: white; }

#rate h3{
    color: var(--secondary);
    font-family: "Grenze Gotisch", serif;
    font-weight: normal;
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    line-height: 1.5rem;
    text-decoration: underline;
}