/* VN - stored globally due to enough usage in multiple places */
#vn {
    display: flex;
    position: fixed;
    align-items: flex-end;
    top: 0;
    width: 80%; /* can be 100% */
    justify-content: center;
    transition: opacity 1s ease-in-out;
    --effectiveChars: max(var(--activeChars), 1);
    pointer-events: none;
    z-index: 10;
    height: 100%;
}

.swapcam .vn-party {
    display: none;
    pointer-events: none;
}

#vn.fade {
    opacity: 0;
}

#vn::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/img/textures/fadeinlong.gif), linear-gradient(0deg, rgba(255, 0, 255, 0.63) 0%, rgb(0, 0, 0) 100%);
    background-size: 100% auto;
    transform: rotate(180deg);
    transition: opacity 2s ease-in-out;
    pointer-events: none;
    opacity: 0;
    z-index: -5;
}

#vn.bg::after {
    opacity: 1;
}  

#vn.fade-chars .vn-wrapper {
    opacity: 0 !important;
}

.cull-stage.in-combat #vn {
    display: none;
}

.vn-wrapper {
    display: flex;
    justify-content: center;
    transition: opacity 1.5s ease-in-out, max-width 1.5s ease-in-out;
    width: 100%;
    pointer-events: none;
    flex-grow: 1;
    flex-shrink: 1;
    height: 100%;
    align-items: flex-end;
}

.vn-wrapper, .vn-wrapper.vn-wait {
    opacity: 0;
    max-width: 0vw;
}

.vn-wrapper.hiding {
    max-width: 0vw !important;
}

.vn-wrapper.active {
    pointer-events: initial;
    opacity: 1;
    max-width: calc(70vw / var(--effectiveChars));
}

/* debug helpers: toggle body.debug-vn to see VN wrapper boxes and char areas */
body.debug-vn .vn-wrapper { outline: 2px dashed lime; }
body.debug-vn .vn-char > div { outline: 2px dashed cyan; background-color: rgba(0,255,255,0.06); }

.vn-wrapper.party {
    max-width: 0vw !important;
}

.vn-wrapper.vn-absolute, .vn-wrapper[pos*="absolute"] {
    position: absolute;
    z-index: -2;
    top: 0;
}

.vn-char {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    height: 100vmin;
    z-index: 5;
    --charTransform: translateX(0); /* set at character level */
    --baseTransform: translateX(0); /* set by [pos] */
    transform: var(--charTransform) var(--baseTransform);
    transform-origin: bottom;
    transition: transform 1s ease-in-out;
}

.vn-wrapper.phasing .vn-char {
    transition: unset !important;
}

.vn-char > div, .vn-char > div:before {
    height: 100%;
    width: 100vmin;
    pointer-events: none;
    position: absolute;
    background-position: top center;
    background-repeat: no-repeat;
    background-size: contain;
    --baseTransform: translateX(0);
    transform: var(--baseTransform);
    top: 0;
    left: 0;
}

.vn-wrapper:not(.vn-party) .vn-char > div:first-child {
    position: relative;
}

.vn-wrapper:not(.vn-party) .vn-char > div ~ div {
    left: unset; 
}

.vn-char .target {
    width: 45vmin;
    height: 100vh;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(10%);
}  

.vn-qou {
    top: 0;
    height: 200vmin;
}

.vn-qou div, 
.vn-qou div::after {
    background-size: auto 100%;
}

.vn-qou .target {
    background-size: 100% 100%;
}

/* VN - positional styling - this is mostly based on the qou characters so it might look weird for other stuff */
.vn-wrapper[pos*="far"], .vn-wrapper[pos*="downleft"], .vn-wrapper[pos*="downright"] { 
    max-width: calc(50vw / var(--effectiveChars)); 
    z-index: -1;
}

.vn-wrapper[pos*="far"] .vn-char {
    --baseTransform: scale(0.35) translateY(-150%);
}

.vn-wrapper[pos*="far"] .vn-mindcore.vn-char {
    --baseTransform: scale(0.35) translateY(-20%);
}

.vn-wrapper[pos*="downleft"] .vn-char {
    --baseTransform: scale(0.66) translateY(-30%) translateX(-30%)
}

.vn-wrapper[pos*="downright"] .vn-char {
    --baseTransform: scale(0.66) translateY(-30%) translateX(30%)    
}

.vn-wrapper[pos*="shiftright"] .vn-char {
    --baseTransform: translateX(50%)
}

.vn-wrapper[pos*="shiftleft"] .vn-char {
    --baseTransform: translateX(-50%)
}

.vn-wrapper[pos*="shifttinyright"] .vn-char {
    --baseTransform: translateX(25%)
}

.vn-wrapper[pos*="shifttinyleft"] .vn-char {
    --baseTransform: translateX(-25%)
}

.vn-wrapper.active[pos*="nonvis"] {
    opacity: 0;
}

.vn-wrapper[pos*="fardown"] .vn-char {
    --baseTransform: scale(0.3) translateY(-150%);
}