/* ===== CURTAIN.CSS ===== */
/* Curtain/Sipario Animation Styles */

#curtain {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: var(--color-accent);
  left: unset;
  right: 0;
  top: 0;
  z-index: 10000000;
  -webkit-transition: width 0s;
  -o-transition: width 0s;
  transition: width 0s;
}

#curtain.loaded {
  right: unset;
  left: 0;
  width: 100vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

#curtain.animIn {
  right: unset;
  left: 0;
  width: 0vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

#curtain.animOut {
  width: 100vw;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

#curtain.mid {
  right: unset;
  left: 0;
  width: 0vw;
  -webkit-transition: width 0s;
  -o-transition: width 0s;
  transition: width 0s;
}

#curtain {
	.curtain-content {
		position: relative;
		width: 100%;
		height: 100%;
		color: var(--color-black);
		transition: all 0.2s;

		.error-state {
		    position: relative;
		    width: 100%;
		    height: 100%;
		    display: none;
		    flex-direction: column;
		    align-content: center;
		    align-items: center;
		    justify-content: center;
		    cursor: default !important;

		    h3 {
                font-size: var(--font-size-bigger);
                word-break: break-word;
                font-weight: 900;
                max-width: 50vw;
                min-width: 360px;
                text-align: center;
                line-height: 0.8;
                padding: 1.5vw 0;
                background: var(--color-black);
                border-radius: var(--radius-md);
                color: var(--color-white);
		    }
		    p.error-message {
			    font-size: var(--font-size-smaller);
			    font-weight: 400;
			    line-height: 1;
			    margin: 0;
			    padding: 1vh 0;
			}
			.error-actions {
			    text-align: center;
    			margin-top: 20vw;

			    a.button-outline {
				    font-size: var(--font-size-medium);
				    font-weight: 800;
				    text-decoration: none;
				    padding: 0.35vw 1vw;
				    box-shadow: 0 0 0 2px var(--color-black);
				    color: var(--color-black);
				}

				p {
				    margin-top: 1vw;
				    font-weight: 500;
				    
				    a {
				    	color: var(--color-white);
    					text-decoration: none;
				    }
				}
			}
		}

		.loading-state {
		    position: absolute;
            width: 80%;
            left: 10%;
            height: fit-content;
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            align-items: flex-start;
            justify-content: flex-end;
            bottom: 10vh;

		    p.status-text {
			    font-size: var(--font-size-medium);
			    font-weight: 700;
			    line-height: 1;
			    margin: 0;
			    color: var(--color-black);
			}

			.progress-bar {
			    width: 100%;
			    height: max(5vh, 2.5vw);
			    box-shadow: 0 0 0 2px var(--color-black);
			    border-radius: var(--radius-md);
			    overflow: hidden;
			    margin-bottom: max(1vw, 1.5vh);

			    .progress-fill {
				    position: relative;
				    height: 100%;
				    background: var(--color-black);
			        transition: width 0.2s ease-out;
				}
			}
		}
		
		.site-tips {
            position: relative;
            display: flex;
            width: 100%;
            height: 100%;
            
            h5.tip-text {
                position: relative;
                display: flex;
                font-size: max(4vw, 5.5vh);
                line-height: 0.8;
                width: 80%;
                height: fit-content;
                left: 10%;
                top: 50%;
                transform: translateY(-60%);
                font-weight: 800;
                color: var(--color-black);
            }
        }
	}
}

#curtain.animIn {
	.curtain-content { opacity: 0; transition: all 0.2s }
}
#curtain.mid, #curtain.animOut {
	.curtain-content { opacity: 0; display: none; }
}