body { margin: 0; padding: 0; }
.container { width: 300px; height: 600px; overflow: hidden; position: relative; background-color: #622c80; box-sizing: border-box; cursor: pointer; }
.border{ position: absolute; top:0; bottom:0; left:0; right:0; border: 1px solid #471961; }
.bar, .caring, .whole, .of, .georgia, .tag, .tag-cta, .logo-cta { width: 300px; height: 600px; display: block; position: absolute; }
.state { width: 319px; height: 600px; display: block; position: absolute; }
.logo-cta { top: 48px; }
.bar { top: -50px; }
.fade { opacity: 0; }
.wipe { opacity: 1; clip-path: inset(0 100% 0 0); }
.state { left: -300px; }


/* Timing */

.state {
    -webkit-animation: move .75s linear 0s forwards;
    -moz-animation: move .75s linear 0s forwards;
    -ms-animation: move .75s linear 0s forwards;
    -o-animation: move .75s linear 0s forwards;
    animation: move .75s linear 0s forwards;
}

.caring {
    -webkit-animation: fade .35s linear .5s forwards;
    -moz-animation: fade .35s linear .5s forwards;
    -ms-animation: fade .35s linear .5s forwards;
    -o-animation: fade .35s linear .5s forwards;
    animation: fade .35s linear .5s forwards;
}

.whole {
    -webkit-animation: reveal .5s ease-in-out .75s forwards;
    -moz-animation: reveal .5s ease-in-out .75s forwards;
    -ms-animation: reveal .5s ease-in-out .75s forwards;
    -o-animation: reveal .5s ease-in-out .75s forwards;
    animation: reveal .5s ease-in-out .75s forwards;
}

.of {
    -webkit-animation: fade .35s linear 1.75s forwards;
    -moz-animation: fade .35s linear 1.75s forwards;
    -ms-animation: fade .35s linear 1.75s forwards;
    -o-animation: fade .35s linear 1.75s forwards;
    animation: fade .35s linear 1.75s forwards;
}

.georgia {
    -webkit-animation: reveal .5s ease-in-out 1.95s forwards;
    -moz-animation: reveal .5s ease-in-out 1.95s forwards;
    -ms-animation: reveal .5s ease-in-out 1.95s forwards;
    -o-animation: reveal .5s ease-in-out 1.95s forwards;
    animation: reveal .5s ease-in-out 1.95s forwards;
}

.tag-cta {
    -webkit-animation: fade .5s linear 2.95s forwards;
    -moz-animation: fade .5s linear 2.95s forwards;
    -ms-animation: fade .5s linear 2.95s forwards;
    -o-animation: fade .5s linear 2.95s forwards;
    animation: fade .5s linear 2.95s forwards;
}

.logo-cta {
    -webkit-animation: slideup .5s ease-in-out 4.25s forwards;
    -moz-animation: slideup .5s ease-in-out 4.25s forwards;
    -ms-animation: slideup .5s ease-in-out 4.25s forwards;
    -o-animation: slideup .5s ease-in-out 4.25s forwards;
    animation: slideup .5s ease-in-out 4.25s forwards;
}

.bar {
    -webkit-animation: slidedown .5s ease-in-out 4.25s forwards;
    -moz-animation: slidedown .5s ease-in-out 4.25s forwards;
    -ms-animation: slidedown .5s ease-in-out 4.25s forwards;
    -o-animation: slidedown .5s ease-in-out 4.25s forwards;
    animation: slidedown .5s ease-in-out 4.25s forwards;
}

/* Animation */

@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@-moz-keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@-webkit-keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@-ms-keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@-o-keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }

@keyframes fade { from { opacity: 0 } to {opacity: 1 } }
@-moz-keyframes fade { from { opacity: 0 } to {opacity: 1 } }
@-webkit-keyframes fade { from { opacity: 0 } to {opacity: 1 } }
@-ms-keyframes fade { from { opacity: 0 } to {opacity: 1 } }
@-o-keyframes fade { from { opacity: 0 } to {opacity: 1 } }

@keyframes move { from { left: -300px; } to { left: 0px; } }
@-moz-keyframes move { from { left: -300px; } to { left: 0px; } }
@-webkit-keyframes move { from { left: -300px; } to { left: 0px; } }
@-ms-keyframes move { from { left: -300px; } to { left: 0px; } }
@-o-keyframes move { from { left: -300px; } to { left: 0px; } }

@keyframes slideup { from { top: 48px; } to { top: 0px; } }
@-moz-keyframes slideup { from { top: 48px; } to { top: 0px; } }
@-webkit-keyframes slideup { from { top: 48px; } to { top: 0px; } }
@-ms-keyframes slideup { from { top: 48px; } to { top: 0px; } }
@-o-keyframes slideup { from { top: 48px; } to { top: 0px; } }

@keyframes slidedown { from { top: -50px; } to { top: 0px; } }
@-moz-keyframes slidedown { from { top: -50px; } to { top: 0px; } }
@-webkit-keyframes slidedown { from { top: -50px; } to { top: 0px; } }
@-ms-keyframes slidedown { from { top: -50px; } to { top: 0px; } }
@-o-keyframes slidedown { from { top: -50px; } to { top: 0px; } }