* {
    box-sizing: border-box;
}

video {
    inset: 0;
    width: 100vw;
    height: 100vh;
    position: fixed;
    object-fit: cover;
    opacity: 0;

}
video.fade {
    opacity: 1;
    transition: opacity 3s linear;
}
.layer.intro {
    display: none;
}
.layer.intro.start {
    display: block;
}
.layer.intro .cover {
    content: "";
    background: black;
    opacity: .95;
    width: 100vw;
    height: 100vh;
    position: fixed;
    inset: 0;
    transition: opacity ease-out 2s;
    display: none;
}
.layer.intro .cover.go {
    opacity: .7;
}
.merry {
    width: 100vw;
    height: 100vh;
    position: fixed;
    opacity: 1;
    display: flex;
    color: red;
    font-size: 12.5vh;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-weight: 600;
    letter-spacing: 10px;
    text-transform: uppercase;
    display: flex;
    flex-direction: column;
    position: relative;
    text-shadow:      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #fff,
      0 0 82px #fff;
    /*display: none;*/
}
.merry::before {
    position: absolute;
    inset: 0;
    background: url("/assets/xmas/img/bg.webp");
    background-size: cover;
    transition: opacity 3s linear;
}
.merry .krogh {
    position: relative;
    transition: text-shadow 3s linear, color 3s linear, opacity 3s linear, transform 3s linear, font-size 3s linear, top 3s linear;
    height: 20vh;
    display: flex;
    align-items: center;
    white-space: nowrap;
}
.merry .krogh .simu {
    transition: max-width 3s linear;
    max-width: 0;
    visibility: hidden;
}
.merry .krogh .measure {
    visibility: hidden;
    opacity: 0;
    position: absolute;
}
.merry .xmas {
    transform: translateY(-100%);
    position: absolute;
    transition: opacity 3s linear;
}
.merry.fade::before {
    opacity: 0;
}
.merry.fade .xmas {
    opacity: 0;
}
.merry.fade .krogh {
    text-shadow: none;
    color: #333333;
}
.merry.tippytop .krogh {
    transform: translateY(-50vh) translateY(50%);
}
.merry.light .krogh {
    color: white;
    text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 42px #f09, 0 0 82px #f09;
}
.merry .krogh span.go {
    transition: transform .1s cubic-bezier(.47,1.64,.41,.8);
    transform: scale(3);
    transform-origin: 50% 50%;
    display: inline-block;
}
.merry.lefty .krogh .simu {
    max-width: 100vw;
}
.merry.kdown .krogh {
    transform: translateY(-50vh) translateY(50%) translateY(30vh);
}
.neon.blink {
    visibility: visible !important;
}
.neon.goin {
    visibility: visible !important;
}
.merry.kdown .krogh .simu {
    visibility: visible !important;
}
.neon.pump {
    transition: transform .1s cubic-bezier(.47,1.64,.41,.8);
    transform: scale(1.5);
    transform-origin: 50% 50%;
}
.text {
    color: white;
    font-weight: 600;
    letter-spacing: 10px;
    text-shadow:
      0 0 7px #fff,
      0 0 10px #fff,
      0 0 21px #fff,
      0 0 42px #f09,
      0 0 82px #f09;
/*      0 0 92px #f09,
      0 0 102px #f09,
      0 0 151px #f09;*/
    font-size: 12.5vh;
    position: fixed;
    display: flex;
    text-transform: uppercase;
    flex-direction: column;
    text-align: center;
    width: 100vw;
    cursor: pointer;
    /*text-shadow: 3px 3px 20px red, -2px 1px 30px red;*/
    transition: opacity 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    user-select: none;
    opacity: 0;
}
.text.fade {
    opacity: 1;
    transition: opacity 3s linear;
}
.text span {
    text-align: center;
    transform-origin: top left;
    transition: transform .3s linear;
    display: inline-block;
}
.text span.go {
    transition: transform .1s cubic-bezier(.47,1.64,.41,.8);
    transform: scale(3);
}
.balloons > img {
    position: fixed;
    top: 100%;
    transition: top linear 3s, transform linear 3s;
    max-width: 10%;
}
.balloons > img.fly {
    top: 0;
    transform: translateY(-100%);
}

.text > * {
    height: 20vh;
    line-height: 20vh;
    background: rgba(0,0,0,.90);
    position: relative;
    z-index: 4;
    transition: height 3s linear, background-color 3s linear;
}
.text > .spacer {
    height: 60vh;
    opacity: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: transparent;
    z-index: 2;
    flex: 1 1 auto;
}
.text > .spacer::before,
.text > .spacer::after {
    content: "";
    background: rgba(0,0,0,.90);
    height: 100%;
    transition: transform 3s linear;
}
.text > .spacer::before {
    top: 0;
}
.text > .spacer:after {
    bottom: 0;
}
.text > .top span.h {
    visibility: hidden;
}
.text > .bottom span,
.text > .top span {
    visibility: hidden;
}
/*.text.go span {
    visibility: visible !important;
}*/
.text.open > .spacer {
    /*background: rgba(0,0,0,.40);*/
}
.text.open > .spacer::before {
    transform: translateY(-100%);
}
.text.close > .top,
.text.close > .bottom {
    height: 50vh;
    background: rgba(0,0,0,1);
}
.text.close > .spacer {
    height: 0;
}
.text.blacked > * {
    
}
.text.open > .spacer::after {
    transform: translateY(100%);
}
.text.hide span {
    visibility: hidden !important;
}
.text.hide > .top > span:not(.h) {
    visibility: visible !important;
}
.text > .top span:not(.h) {
    visibility: hidden !important;
}
.text.hide > .top span:not(.h) {
    visibility: hidden !important;
}

.text.close > * span {
    visibility: visible !important;
}