@charset 'utf-8';

@keyframes ticket {
    0% {transform: rotate3d(0);}
    100% {transform: rotate3d(0,0,0,180);}
}

header, footer, #open-menu {display: none !important;}
section#content {background: none !important; transition: none !important;}

#intro {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: 1s .3s fadeIn ease forwards;
}

#ticket {
    position: relative;
    width: 870px;
    40: 331px;
    height: 400px;
    transform-style: preserve-3d;
    transform: perspective(2000px) translate3d(0, 0, 0);
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.3));
    transition: transform 0.5s cubic-bezier(0.215, 0.61, 0.355, 1), filter 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
    z-index: 1;
}

#ticket .front,
#ticket .back {position: relative;height: 100%;}
#ticket img {position: absolute;}

#ticket .front img:not(.cut) {right:0;}
#ticket .front img.cut {left: 0;transition: .3s ease;  transform-origin: right bottom;}

#ticket .back {transform: rotateY(180deg);backface-visibility: hidden;top: -100%;}
#ticket .back img.ticket {right: 0;}
#ticket .back img.cut {transform-origin: bottom right; transition: .3s ease;}

#ticket:hover {filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));}
#ticket:hover .front img.cut {transform: rotateZ(-5deg);}

#ticket .hover {
    position: relative;
    height: 100%;
    transform: scale(0.7);
    transform-style: preserve-3d;
    transition: .8s ease;
}
#ticket:hover .hover {transform: scale(.75);}

@keyframes blink {
    0% {opacity: 0;}
    50% {opacity: 1;}
    100% {opacity: 0;}
}

.cut-line {
    position: absolute;
    display: block;
    height: 120%;
    top: -10%;
    border-left: 2px dashed #fff;
    left: 216px;
    opacity: 0;
    animation: 2s 1s blink infinite;
}

.cut-line::before {
    content: '\f0c4';
    font-family: var(--ico-font-family);
    display: block;
    position: absolute;
    transform: scaleX(-1) rotate(60deg) translate(-18px, -15px);
}

#intro p {position: relative; top: 2em; text-align: center; font-size: var(--small-font-size); white-space: nowrap; transition: .3s ease;}

@media all and (max-width: 1024px) {
    #ticket .hover {
        transform: scale(.4);
        transform-style: preserve-3d;
        transition: .8s ease;
    }
    #ticket:hover .hover {transform: scale(.45);}
    #intro p {top: -4em;}
}