/*
Theme Name: Vaygren
Description: An Enfold Child Theme for Vaygren.
Version: 1.0
Author: Aebard
Author URI: 
Template: enfold
*/

.av-main-single-comipa_comic{
    display:flex;
    gap:20px;
    justify-content:stretch;
    .comipa-content{
        flex:1;
    }

    .post_delimiter {
        display: none !important;
    }

    header {
        text-transform: uppercase;
        padding:10px;
        margin-bottom:20px;
        /* h1,h2,h3,h4,h5,h6{
            font-family: 'Eva Heading';
        } */
        .post-title{
            font-size:4em !important;
            padding:0px !important;
            line-height: 1em;
        }
        .post-subtitle {
            font-size:2em !important;
            padding:0px 5px !important;
            text-align: center;
            margin:0;
        }
    }

}

/*Add your own styles here:*/

@media only screen and (max-width: 767px) {
  /* Add your Mobile Styles here */

  .comipa-page {
        &:not(.comipa-page-primary){
            display:none;
        }
        &.comipa-page-primary {
            display:block !important;
            a.comipa-page-link-next{display:block !important;}
            a.comipa-page-link-prev{display:none !important;}
        }
    }

    .comipa-display-toggle {
        display:none;
    }

    .comipa-spread-secondary {
        display:none !important;
    }

    #comipa-nav {
        .nav-single{
            display:inline-block;
        }
        .nav-spread{
            display:none;
        }
    }

    .admin-bar {
        a[name=comic] {
            top:0px !important;
        }
        .comipa-media-img {
            max-height: calc(100vh - 50px - 82px - 46px);
            &.zoom{max-height:1800px;}
        }
    }

    a[name=comic] {
        position:absolute !important;
        top:0px !important;
    }
    .comipa-media-img {
        max-height: calc(100vh - 50px - 82px);
        &.zoom{max-height:1800px;}
    }

}




/* MEMA */


.mema-taxonomy-wrapper{
    gap: 6%;
    position:relative;
    padding:30px 50px 50px 50px;

    .mema-taxonomy-content {
        position:relative;

    }
}

.comipa-latest-comic-wrap {
    clear:both;
}

.mema-gallery { 
    clear:both;
    .mema-gallery-item {
        /* min-width:100%; */
        &::after{
            content:attr(data-mema-post-type);
            display:none;
            position:absolute;
            /* display:block; */
            z-index:20;
            bottom:100%;
            left:0;
            width:100%;
            padding:15px 10px 10px 10px;
            color:#111;
            font-weight: bold;
            text-align: center;
            text-transform: uppercase;
            box-sizing: border-box;

            transform:translateY(10px);

            transition:transform 0.25s ease;
            
            font-family: 'Vaygren', 'Van Helsing', 'van-helsing-movie', Helvetica, sans-serif;
            font-size: 1.75em;
        }
        &:hover::after{
            transform:translateY(100%);
        }
    }

    .mema-attachment, .mema-mema_story, .mema-mema_animation, .mema-comipa_series_post {
        &::after{display:block;}
    }

    .mema-attachment::after{background-color:gold; }
    .mema-mema_story::after{background-color:rgb(0, 238, 255);}
    .mema-attachment.mime-video-mp4, .mema-mema_animation {
        &::after{background-color:crimson;}
    }
    .mema-comipa_series_post::after{background-color:rgb(0, 82, 205);}
    /* .mema-post::after, .mema-mema_project::after{display:none; content:none;} */
}

.mema-term-gallery {
    .mema-gallery-item{


        img {
            filter:brightness(0.2) !important;
        }
        .mema-term-name {
            position:absolute;
            display:block;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
            text-transform: uppercase;
            font-size:2em;
            line-height:normal;
            font-weight:bold; 
            text-align: center;
            /* margin:20px; */
            /* width:90%; */
            overflow-wrap:break-word

        }

    }

}

.mema-gallery {
    margin-top:20px;
    display:block;
    margin-bottom:50px;
    
    .mema-container{
        flex-wrap: wrap;
        justify-content: center;
        gap:20px;
        display:flex;
        &>a{
            display:flex;
            filter:brightness(0.8);
			border-radius:10px;
			overflow:hidden;
			transition: scale 0.25s ease, rotate 0.25s ease;
			rotate:0deg;
			scale:1.0;
			aspect-ratio: 9 / 16;
            /* height:18.5vw; */
            /* height:40vh; */
            /* max-height:350px; */
            max-width: calc(50vw - 10% - 20px);
            width:200px;
            position:relative;
            box-shadow: 5px 5px 2px #00000060;
/* 
            &::after{
                content:"wat";
                display:block;
                z-index:20;
                top:0;
                left:0;
                width:100%;
                padding:10px;
                background-color:red;
                color:#FFF;
                font-weight: bold;
            } */
            
            /* border: 10px solid ; */

			&:nth-child(even):hover{rotate:-3deg;}
            &:hover{
				rotate:3deg;
				scale:1.1;
				z-index:5;
                filter:brightness(1.0);
            }
            img {
                aspect-ratio: 9/16;
                height:inherit;
                max-height:inherit;
                width:auto;
                object-fit: cover;
    
            }
            &.locked{
                img {
                    filter:brightness(0.5);
                }
            }



            &:hover .mema-details {
                opacity:1;
                height:100%;
            }

            .mema-details:first-child {
                opacity:1;
                height:100%;
            }

            .mema-details {
                position:absolute;
                display:flex;
                flex-direction: column;
                justify-content: flex-end;
                height:150%;
                width:100%;
                background-color:#000000C0;
                font-size: 1em;
                box-sizing:border-box;

                padding:20px;

                transition: opacity 0.25s linear, height 0.25s ease;
                opacity:0;
                
                .mema-post-type {
                    flex:1;
                    display:none;
                }

                .mema-post-title{
                    font-size:1.25em;
                    font-weight:bold;
                    text-transform:uppercase;
                    display:block;
                    overflow-wrap:break-word;
                }
                .mema-post-desc {
                    display:block;
                    font-size:0.8em;
                    font-style: italic;
                    color:#CCC !important;
                    line-height:1.2;
                }
            }
    
        }
    }
}

.mema-gallery2 .mema-container a {
    position:relative;
	&::after{
		content:"";
		position:absolute;
		display:block;
		pointer-events:none;
		top:0;
		left:0;
		bottom:0;
		right:0;
		
		border-image-source: url("assets/frame_vaygren.png");
		border-style: solid;
		border-image-slice: 80;
		border-image-width: 80px;
		border-image-outset: 00px;
		z-index:10;
        border-image-width:30px;
	}
}

.mema-tag-list {
    display:flex;
    flex-wrap: wrap;
    gap:5px;
    .mema-tag {
        font-size:0.9em;
        padding:8px 15px;
        line-height:normal;
        border-radius:2px;
        background-color: var(--enfold-main-color-primary);
        display:inline-block;
        text-transform: uppercase;
        color:var(--enfold-main-color-button-font);
        position:relative;

        &:hover:before{
            content:"";
            display:block;
            position:absolute;
            opacity:0.1;
            background-color: #FFF;
            top:0;
            left:0;
            right:0;
            bottom:0;   
        }

    }
}

/* MEMA STYLES */

.mema-taxonomy-banner {
    height:80px;
    img {
        height:200px;
        width:100%;
        object-fit:cover;
        pointer-events: none;
        /* position:fixed; */
        mask-image:linear-gradient(#161616,#16161600);
        mask-size: cover;
        mask-repeat: repeat-x;
        -webkit-mask-image:linear-gradient(#161616,#16161600);
        -webkit-mask-size: cover;
        -webkit-mask-repeat: repeat-x;
       
    }

    /* &::after{
        content:"";
        background:linear-gradient(#16161600,#161616);
        height:225px;
        display:block;
        width:100%;
        position:absolute;
        top:0;
    } */
}

/* .tax-mema_creator .main_color {
    background-image:none !important;

} */

.mema-taxonomy-wrapper{
    gap: 6%;
    position:relative;
    padding:30px 50px 50px 50px;

    .mema-taxonomy-content {
        position:relative;

    }
}

/*Mema Creator*/

.mema-tag-list .mema-taxonomy-mema_creator {
    display:none;
}

.mema-creator-wrapper {
    /* display:flex;
    flex-wrap: wrap;
    margin:0 auto;
    padding:20px; */
    gap: 6%;
    position:relative;
    padding:30px 50px 50px 50px;

    
    .mema-creator-sidebar {
        flex:1 1 20%;
        min-width:350px;

        .mema-creator-image {
            display:flex;
            /* max-width:100%;
            height:auto; */
            text-align:center;
            box-sizing: border-box;

            justify-content: center;

            /* border:6px solid #f7931e;
            border-radius:12px;
            padding:6px; */

            padding:20px;
            padding-bottom:0px;

            margin-bottom:20px;
            background-color: #161616;

            img {
                /* margin:6px; */
                /* border:2px solid #f7931e; */
                
            }
        }

        .mema-creator-links {
            ul {
                display:flex;
                flex-direction: column;
                gap:15px;
                margin:0;
                li {
                    text-transform: uppercase;
                    font-weight:bold;
                    font-size:18px;
                    height:50px;
                    a {
                        
                        padding-left:10px;
                        /* border-width:10px; */
                        height:50px;
                        line-height:50px;
                        display: flex;
                        align-items: center;
                        color:#75c26e;;
                        background-color:transparent;
                        /* color:#75c26e; */
                        cursor:pointer;
                        
                        &:hover {
                            color:#111;
                            /* border-image-source: url("eva-batt-hover.svg"); */
                            background-color:#75c26e;
                            &:before {
                                background-color: #111;
                            }
                        }

                        &:after {
                            position:absolute; width:0; height:0; overflow:hidden; z-index:-1; 
                            content:url("eva-batt.svg") url("eva-batt-hover.svg"); 
                            }


                        &:before {
                            vertical-align: middle;
                            /* content:"\f103"; */
                            content:"";
                            
                            mask-image:url('data:image/svg+xml;utf8,<svg id="a" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 576 448.2"><path d="m419.5,64c-16.6,0-32.7,4.5-46.8,12.7-15.8-16-34.2-29.4-54.5-39.5C346.4,13.2,382.3,0,419.5,0c86.4,0,156.5,70,156.5,156.5,0,41.5-16.5,81.3-45.8,110.6l-71.1,71.1c-29.3,29.3-69.1,45.8-110.6,45.8-86.4,0-156.5-70-156.5-156.5,0-1.5,0-3,.1-4.5.5-17.7,15.2-31.6,32.9-31.1s31.6,15.2,31.1,32.9v2.6c0,51.1,41.4,92.5,92.5,92.5,24.5,0,48-9.7,65.4-27.1l71.1-71.1c17.3-17.3,27.1-40.9,27.1-65.4,0-51.1-41.4-92.5-92.5-92.5l-.2.2Zm-144.3,77.3c-1.9-.8-3.8-1.9-5.5-3.1-12.6-6.5-27-10.2-42.1-10.2-24.5,0-48,9.7-65.4,27.1l-71.1,71.1c-17.3,17.3-27.1,40.9-27.1,65.4,0,51.1,41.4,92.5,92.5,92.5,16.5,0,32.6-4.4,46.7-12.6,15.8,16,34.2,29.4,54.6,39.5-28.2,23.9-64,37.2-101.3,37.2C70.1,448.2,0,378.2,0,291.7c0-41.5,16.5-81.3,45.8-110.6l71.1-71.1c29.3-29.3,69.1-45.8,110.6-45.8,86.6,0,156.5,70.6,156.5,156.9v3.9c-.4,17.7-15.1,31.6-32.8,31.2s-31.6-15.1-31.2-32.8v-2.3c0-33.7-18-63.3-44.8-79.6v-.2Z" stroke-width="0"/></svg>');
                            mask-repeat: no-repeat;
                            mask-size: contain;
                            mask-position: center;

                            background-color: #75c26e;
                            
                            margin-right:8px;
                            display:inline-block;
                            text-align:center;
                            font-size:24px;
                            line-height:24px;
                            /* border-radius:50%; */
                            height:30px;
                            width:30px;
                            font-family:dashicons;
                            /* background-color:#333; */
                            font-weight: normal;
                        }
                    }
                    
                    &.twitter a:before{
                        mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M459.4 151.7c.3 4.5 .3 9.1 .3 13.6 0 138.7-105.6 298.6-298.6 298.6-59.5 0-114.7-17.2-161.1-47.1 8.4 1 16.6 1.3 25.3 1.3 49.1 0 94.2-16.6 130.3-44.8-46.1-1-84.8-31.2-98.1-72.8 6.5 1 13 1.6 19.8 1.6 9.4 0 18.8-1.3 27.6-3.6-48.1-9.7-84.1-52-84.1-103l0-1.3c14 7.8 30.2 12.7 47.4 13.3-28.3-18.8-46.8-51-46.8-87.4 0-19.5 5.2-37.4 14.3-53 51.7 63.7 129.3 105.3 216.4 109.8-1.6-7.8-2.6-15.9-2.6-24 0-57.8 46.8-104.9 104.9-104.9 30.2 0 57.5 12.7 76.7 33.1 23.7-4.5 46.5-13.3 66.6-25.3-7.8 24.4-24.4 44.8-46.1 57.8 21.1-2.3 41.6-8.1 60.4-16.2-14.3 20.8-32.2 39.3-52.6 54.3z"/></svg>');
                    }
                    &.patreon a:before{
                        mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M490 153.8c-.1-65.4-51-119-110.7-138.3-74.2-24-172-20.5-242.9 12.9-85.8 40.5-112.8 129.3-113.8 217.8-.8 72.8 6.4 264.4 114.6 265.8 80.3 1 92.3-102.5 129.5-152.3 26.4-35.5 60.5-45.5 102.4-55.9 72-17.8 121.1-74.7 121-150l-.1 0z"/></svg>');
                    }
                    &.bluesky a:before{
                        mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3 61.6-9.4 37.5-1.7 21.6 5.5 3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7 3.3-.5 6.6-.9 10-1.4-3.3 .5-6.6 1-10 1.4-93.9 14-177.3 48.2-67.9 169.9 120.3 124.6 164.8-26.7 187.7-103.4 22.9 76.7 49.2 222.5 185.6 103.4 102.4-103.4 28.1-156-65.8-169.9-3.3-.4-6.7-.8-10-1.3 3.4 .4 6.7 .9 10 1.3 64.1 7.1 133.6-15.1 153.2-80.7 5.9-19.9 15-138.9 15-155.5s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8-66.1 46.6-137.1 141.1-163.2 191.8z"/></svg>');
                    }
                    &.pixiv a:before{
                        mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M96 32C43 32 0 75 0 128L0 384c0 53 43 96 96 96l256 0c53 0 96-43 96-96l0-256c0-53-43-96-96-96L96 32zm77.7 217.3a60.1 60.1 0 1 0 120.3 0 60.1 60.1 0 1 0 -120.3 0zM119.1 387.8c-.3-.8-.5-1.7-.5-2.6l0-244.3c0-1.8 .7-3.6 2-4.9s3-2 4.9-2l16.9 0c1.2 0 2.3 .3 3.3 .8s1.9 1.3 2.5 2.3l14 21.8c19.7-15.6 44.5-25 71.6-25 63.6 0 115.2 51.6 115.2 115.2S297.5 364.5 233.8 364.5c-22 0-42.6-6.2-60.1-16.9l0 37.6c0 .9-.2 1.8-.5 2.6s-.9 1.6-1.5 2.2-1.4 1.1-2.2 1.5-1.7 .5-2.6 .5l-41.3 0c-.9 0-1.8-.2-2.6-.5s-1.6-.9-2.2-1.5-1.1-1.4-1.5-2.2z"/></svg>');
                    }
                    &.subscribestar a:before{
                        mask-image:url('https://ss-staging-assets.s3-us-west-1.amazonaws.com/brand/ss_logomark_mono_di.png');
                    }
                    &.commission a:before{
                        mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M136 24c0-13.3 10.7-24 24-24s24 10.7 24 24l0 40 56 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-114.9 0c-24.9 0-45.1 20.2-45.1 45.1 0 22.5 16.5 41.5 38.7 44.7l91.6 13.1c53.8 7.7 93.7 53.7 93.7 108 0 60.3-48.9 109.1-109.1 109.1l-10.9 0 0 40c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-40-72 0c-17.7 0-32-14.3-32-32s14.3-32 32-32l130.9 0c24.9 0 45.1-20.2 45.1-45.1 0-22.5-16.5-41.5-38.7-44.7l-91.6-13.1C55.9 273.5 16 227.4 16 173.1 16 112.9 64.9 64 125.1 64l10.9 0 0-40z"/></svg>');
                    }
                }
            }
        }

    }

    .mema-creator-content{
        /* margin-left:6%;/
        min-width:300px; */
        flex: 2 1 60%;
        position:relative;


        .mema-creator-tagline{
            font-weight:bold;
            font-style: italic;
            color: var(--enfold-main-color-primary);
        }



       
    }

    
}



/* COMIPA SERIES */

.comipa-series-banner {
    width:100%;
    height:100px;
    position:relative;
    /* background-size: cover; */
    img {
        height:200px;
        width:100%;
        object-fit:cover;
        pointer-events: none;
    }

}

.comipa-series-wrapper {
    display:flex;
    flex-wrap: wrap;
    gap: 20px;
    /* max-width: 1600px;*/
    margin:0 auto;
    /* padding:20px; */

    

    .comipa-series-sidebar {
        flex:1 1 30%;
        min-width:250px;

        .comipa-series-image {
            display:flex;
            /* max-width:100%;
            height:auto; */
            text-align:center;
            box-sizing: border-box;

            /* border:6px solid #f7931e;
            border-radius:12px;
            padding:6px; */

            padding:20px;

            margin-bottom:20px;
            background-color: #161616;

            img {
                max-width:100%;
                height:auto;
                
            }
        }

    }

    .comipa-series-content{
        flex: 2 1 65%;
        min-width:300px;
    }

    .comipa-series-name {
        margin-top:20px;
        line-height:0.9;
        small {
            display:block;
            font-size:0.5em;
            line-height: 1;
        }
    }
}

.comipa-artist-profile {
    display:flex;
    padding:20px;
    margin-bottom:10px;
    background-color: #161616;
    gap:10px;

    .comipa-artist-name {
        line-height:1;
        small {
            font-weight:normal;
            font-size:0.5em;
            text-transform:uppercase;
            display:block;
            /* line-height:1.1; */
            margin-top:5px;
        }
        margin-bottom:5px;
    }

     .comipa-artist-image {
            width:75px;
            height:75px;
            aspect-ratio:1;
            background-color: #262626;
            position:relative;   
            padding:5px;     

            img {
                width:100%;
                height:100%;
                aspect-ratio: 1;
                object-fit: cover;
                /* object-fit: contain; */
            }
        }

    &.profile-large {
        .comipa-artist-image {
            width:150px;
            height:150px;
            background-color: #262626;
        }
        .large-only {display:block !important;}

    }
    .comipa-artist-details {
        display:flex;
        flex-direction: column;
        .large-only {display:none;}
    
    }

    &.profile-list {
        flex-wrap: wrap;
        /* display: grid; */
        /* grid-template-columns: repeat(auto-fit, minmax(75px~q1, 1fr)); */
        
        .comipa-artist-image {
            padding:10px;
            width:75px;
            height:75px;
            aspect-ratio:1;
            background-color: #262626;
            position:relative;

            .comipa-artist-name {
                padding:10px;
                display:None;
                position:absolute;
                top:0;
                left:0;
                width:100%;
                height:100%;
                background-color: RGBA(0,0,0,0.5);
                color:var(--enfold-main-color-primary) !important;

            }

            &:hover .comipa-artist-name {
                display:block;

            }

        }
    }
}

.after-line {
    font-family:'Vaygren';
    font-weight:normal;
    line-height:1.0;
    overflow:hidden;
    position:relative;
    text-transform:none;
    padding-bottom:0.1em;
    &:after{
        content:'';
        position:absolute;
        display:inline-block;
        bottom:0.60em;
        height:2px;
        background:#FFFFFF40;
        width:100%;
        vertical-align:middle;
        margin-left:10px;
        clip-path: inset(0 -100vw 0 0);
    }
}

.mema-heading {
    margin-top:20px;
    color:#FFF;
    font-size:6em;
    /* text-transform:uppercase; */
    position:relative;
    z-index:1;
    display:block;

    font-family: 'Vaygren', 'Van Helsing', 'van-helsing-movie', Helvetica, sans-serif;

    /* font-size: 5em; */
    margin-bottom: -10px !important;
    font-weight: normal;

    line-height:0.9;
    letter-spacing: -2px;
 
    small {
        display:block;
        font-size:0.5em;
        line-height: 0.9;
    }

    &:after{
        content: "";
        display:block;
        height:4px;
        /* background: linear-gradient(90deg, #f7931e, #f7931e, #ed1c24, #ed1c2400); */
        /* background: linear-gradient(90deg, #ffee38, #f7931e, #ed1c24, #ed1c2400); */
        background: linear-gradient(90deg, #ffee38, #ffee38, #ed1c2480, #ed1c2400);
        position:relative;
        top:-0.15em;
        z-index:-1;
        width:100%;
    }
}
.raise-row {z-index:100;}

.frame-vaygren {
	position:relative;
	&::after{
		content:"";
		position:absolute;
		display:block;
		pointer-events:none;
		top:0;
		left:0;
		bottom:0;
		right:0;
		
		border-image-source: url("assets/frame_vaygren.png");
		border-style: solid;
		border-image-slice: 80;
		border-image-width: 80px;
		border-image-outset: 00px;
		z-index:10;
        border-image-width:50px;
        
        visibility:visible !important;
        width:initial;
        height:initial;
	}

}

.frame-small-vaygren {
	position:relative;
    background-color:#43171d;
    /* background-image: linear-gradient(0deg,#930e1f,##930e1f80 75%,#2c0d1d); */
    background-image: linear-gradient(0deg,#43171d80,#2b0c1b80 75%,#2c0d1d80);
    padding: 30px 10px 20px 10px;
    
	&::after{
        content:"";
		position:absolute;
		display:block;
		pointer-events:none;
		top:0;
		left:0;
		bottom:0;
		right:0;
        visibility:visible !important;
        width:initial;
        height:initial;
		
		border-image-source: url("assets/frame_small_vaygren.png");
		border-style: solid;
		border-image-slice: 60;
		border-image-width: 60px;
		border-image-outset: 0px;
		z-index:10;
        border-image-width:60px;
	}

}


.select2-selection__clear {
    position:absolute !important;
    right:0 !important;
}

.main_color {
	background-size:cover;
}

.html-admin-preview .mema-gallery-item img {
    opacity:inherit;
}

.mema-gallery-item {
    background-color: #111111;
    &:before { 
        content:"";
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-image: url("assets/vaygren_sigil.png");
        background-repeat: no-repeat;
        background-position: center center;
        background-size:contain;
        scale:0.8;
        opacity:0.5;

    }

    /* transition:opacity 0.5s ease-in-out; */
    /* &.loading {
        opacity:0;
    }
    &.loaded {
        opacity:1;
    } */


    img {
        opacity:0;
        /* transition:opacity 0.5s ease-in-out; */
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
        &.loading {
            opacity:0;
            transform: translateY(20px); /* Start slightly lower */
        }
        &.loaded {
            opacity:1;
            transform: translateY(0);
        }
    

    }
}

.attachment-thumb{
    background-color: #222222;
    background-image: url("assets/vaygren_sigil.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size:contain;

    transition:filter 0.25s ease-in-out;

    box-shadow: 5px 5px 5px RGBA(0,0,0,0.5);
    &.loading {
        filter:brightness(0.25) !important;
        /* opacity:0.5; */
        img {
            opacity:0;
            scale:1.2;
        }
    }
    &.loaded {
        filter:brightness(0.9);
        /* opacity:1; */
        img {
            transition:opacity 0.5s ease-in-out, scale 0.5s ease-in-out;
            opacity:1;
            scale:1.0;
        }
    }

}



.vaygren-animation-banner{
    position:absolute;
    height:100vh;
    min-height:600px;
    width:100%;
    pointer-events: none;
    user-select: none;
    left:0;
    z-index:-1;
    /* mask-image: linear-gradient(-60deg,#161616,#161616,#16161600);
    mask-size: cover;
    mask-repeat: repeat-x;
    -webkit-mask-image:linear-gradient(-60deg,#161616,#161616,#16161600);
    -webkit-mask-size: cover;
    -webkit-mask-repeat: repeat-x; */
    img {
        height:100%;
        /* height:100vh; */
        width:100%;
        object-fit:cover;
        object-position: top;;
        pointer-events: none;
        user-select: none;
        /* position:fixed; */
        /* mask-image:url('http://localhost:8881/wp-content/uploads/2026/02/afterthebattlename.png'); */
        mask-image: linear-gradient(#161616,#161616,#16161600);
        mask-size: cover;
        mask-repeat: repeat-x;
        -webkit-mask-image:linear-gradient(#161616,#161616,#16161600);
        -webkit-mask-size: cover;
        -webkit-mask-repeat: repeat-x;
    }

}

.vaygren-animation-wrapper {
    h1,h2,h3,h4,h5,h6 {
        display:block;
        font-family: 'Vaygren', 'Times New Roman', Times, serif;
        font-weight:normal;
    }
    h1 {font-size: 5em;}

    .vaygren-animation-details {
        display:flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width:33%;
        height:70vh;
        min-height:700px;
        /* .vaygren-animation-title{ */
            /* .vaygren-aniamtion-profile-img{width:100%;} */
        /* } */
        .vaygren-animation-description {
            font-size:2em;
            line-height:1.65em;
        }

      

    }

    .vaygren-trailer-section{
        flex:1;
        min-width:450px;
    }

    .vaygren-animation-video-img {
        display:block;
    }
    .vaygren-bts-section{
        flex:2;

        .vaygren-bts{
            display:grid;
            grid-template-columns:repeat(5, minmax(100px,1fr));
            gap:5px;
            a {
                aspect-ratio: 1;
                /* padding:5px; */
                border:1px solid #666;
                display:block;
                overflow:hidden;
                img {
                    width:100%;
                    height:100%;
                    object-fit:cover;
                    display:block;
                    transition: opacity 0.5s ease-out, scale 0.5s ease-out;
                    &.loading{
                        scale:1.25;
                        opacity:0;
                    }
                    &.loaded{
                        scale:1;
                        opacity:1;
                    }
                }
            }
        }
    }

    .vaygren-row {
        display:flex;
        gap:4%;
    }

    .comment-entry {
        max-width:1200px;
        margin:0 auto;
    }

    .vaygren-trailer-section{
        display:flex;
        flex-direction: column;
        /* gap:5px; */

        .watch-btn {
            font-size:4em;
            text-align:center;
            display:block;
            margin-top:10px;
            padding:25px;
            font-weight:bold;
            line-height:1;
            /* font-style:italic; */
            /* text-transform:uppercase; */
            font-family: 'Vaygren','Times New Roman', Times, serif;
        }

    }

    .vaygren-trailer{
        padding:0;
        .attachment-video{margin:0;}
        img,video {
            display:block;
            width:100%;
        }
    }

    
    .vaygren-animation-other {
        margin-top:50px;
    }

    &.vaygren-animation-header{
        background:#222222;
        border-bottom:1px solid #666;
        padding-bottom:40px;
        z-index:0;
        position:relative;
    }



    .vaygren-watch-details-wrapper {
        max-width:1800px;
        margin:20px auto;
        /* color:#FFF; */
        display:flex;
        gap:50px;

        .vaygren-watch-details {
            flex:3;
            /* width:50%; */
        }

        .vaygren-bts-section {
            margin-top:40px;
        }

        .vaygren-details-aside {
            flex:1;
            padding-top:20px;
            /* width:50%; */


            .mema-container {
                display:grid;
                grid-template-columns: repeat(3,minmax(100px, 1fr));
                /* grid-template-columns: repeat(auto-fit,minmax(1fr,100px,)); */

                .mema-gallery-item {
                    width:auto;
                    height:auto;
                    &:after{
                        border-image-width: 40px;
                    }
                }

            }

        }

        h1 {
            margin:0;
        }

        .vaygren-watch-description {
            font-size:1.25em;
            line-height: 1.61em;
        }

        .vaygren-watch-actions {
            display:flex;
            gap:10px;
            /* margin-top:-10px; */
            margin-bottom:20px;
        }
        
        /* background:#222222; */
        /* border-bottom:1px solid #666; */
        /* padding-bottom:40px; */
        /* z-index:0; */
        /* position:relative; */



    }

}

.vaygren-animation-comments{
    padding-top:40px;
}

.vaygren-theater-wrapper {
    .vaygren-watch-video {
        width:100vw;
        max-height:calc(80vh - 60px);
        min-height:360px;
        min-width:640px;
        video {
            width:100%;
            height:100%;
            max-width:100vw;
            max-height:calc(80vh - 60px);
            min-height:360px;
            min-width:640px;
            display:block;
        }
    }



}

@media (max-width:768px) {
    .vaygren-watch-details-wrapper {
        padding-top:30px;
    }

  
}

@media (max-width:1080px) {
    .vaygren-animation-wrapper{
        &.vaygren-animation-header {
            >.container{
                /* margin:0; */
                /* width:100%; */
                /* max-width:100%; */
            }
            .vaygren-animation-details {
                width:100%;
            }
        }
    }

    .vaygren-animation-wrapper {
        .vaygren-row {
            flex-direction: column;
            gap:20px;
        }
    }


    .vaygren-watch-details-wrapper {
        flex-direction: column;
    }

    .vaygren-theater-wrapper {
        .vaygren-watch-video {
            width:100vw;
            height:auto;
        }
    }

    .admin-bar {
        .vaygren-theater-wrapper {
            .vaygren-watch-video {
                height:auto;
                video {
                    max-height:calc(80vh - 60px - 32px);
                }
            }
        }
    }

}



.admin-bar {
    .vaygren-theater-wrapper {
        .vaygren-watch-video {
            max-height:calc(80vh - 60px - 32px);
            video {
                max-height:calc(80vh - 60px - 32px);
            }
        }
    }
}




.like-button {
    text-align:center;
    background-color:#FFF !important;
    .count {display:none;}
    &:hover{
        background-color:#b72633 !important;
    }
    display:inline-block;

    &.liked {
        &:before{content: "Liked";}
    }

    &:before{content: "Like";}
    &:after{
        content:" (" attr(data-likes) ")";
    }

}

.download-btn {
    text-align:center;
    display:inline-block;
}

.character-gallery {
    margin-top:20px;
    display:block;
    margin-bottom:50px;
    
    .mema-container {
        flex-wrap: wrap;
        justify-content: center;
        gap:20px;
        display:flex;
    }

    .mema-gallery-item {

        display:flex;
        filter:brightness(0.8);
        border-radius:10px;
        overflow:hidden;
        transition: scale 0.25s ease, rotate 0.25s ease;
        rotate:0deg;
        scale:1.0;

        max-width: calc(50vw - 10% - 20px);
        width:200px;
        position:relative;
        box-shadow: 5px 5px 2px #00000060;
    
        /* filter:brightness(1.2); */
        aspect-ratio:1;
        border:1;
        padding:0;
        border-radius:0;

        /* &::after{
            border-image-width: 50px;
        } */

        /* filter:none; */

        &.loaded:before{ opacity:0; }

        .glow {
            opacity:0;
            position:absolute;
            display:block;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background-image: linear-gradient(180deg, #930e1f,#930e1f00);
            transition:opacity 0.5s  cubic-bezier(0.33, 1, 0.68, 1);
        }

        &:hover{
            filter:brightness(1.0);
           .glow {
                opacity:1;
           }
        }

        &:before {
            opacity:1.0;
            transition: opacity 0.25s ease-out;
        }

        img {
            aspect-ratio:1;
            object-fit:cover;
            transition: opacity 0.6s ease-out, transform 0.6s ease-out, scale 0.5s cubic-bezier(0.33, 1, 0.68, 1), rotate 0.5s cubic-bezier(0.33, 1, 0.68, 1); 
            background-image:none;
            background-position-y: 100%;

            &.loading {
                opacity:0;
                scale: 1.5;
                transform:none;
                rotate: 25deg;
            }
            &.loaded {
                opacity:1;
                scale:1.0;
                transform:none;
                rotate: 0;
            }
            &:before{
                content:'';
                position:absolute;
                height:100%;
                width:100%;
                display:block;
                background-color:red;
            }
        }

        &:nth-child(odd) img.loading {
            rotate: -25deg;
        }

        &:hover{
            img {
                scale: 1.1;
            }
        }
    }
}






@font-face {
    font-family: 'Vaygren';
    src: url('assets/VaygrenRegular.woff2') format('woff2'),
        url('assets/VaygrenRegular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}