@import url(https://fonts.googleapis.com/css?family=Lato:300italic);
html,
body {
    width: 100%;
    height: 100%;
    overflow-y: hidden;
    overflow-x: hidden;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    /*background: #ee9ca7;*/
    background: -webkit-radial-gradient(rgba(57,60,76,1), rgba(36,36,46,1) 80%);
}

.swiper {
    width: 100%;
    height: 100%;
}

#next_page_button {
    z-index: 100;
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translate(-50%,0);
    animation: float 1.5s infinite;
}

@keyframes float {
    12.5% {bottom: 7.5px;}
    25% {bottom: 5px}
    37.5% {bottom: 7.5px;}
    50% {bottom: 10px;}
    62.5% {bottom: 12.5px;}
    75% {bottom: 15px;}
    87.5% {bottom: 12.5px;}
    100% {bottom: 10px;}
}


/*.swiper-button-next {*/
/*    background: url("../static/more_down.svg") !important;*/
/*    position: absolute !important;*/
/*    bottom: 10px !important;*/
/*    left: 50% !important;*/
/*    transform: translate(-50%,0) !important;*/
/*}*/


#musicButton {
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#musicButton img{
    display:block;
    width: calc(50vw);
    height: calc(50vw);
}


#cake {
    display: block;
    /*position: relative;*/
    margin: -120px auto 0 auto;
}


/* ============================================== Candle
*/
.velas {
    /*确保在蛋糕后面*/
    z-index: -1;
    background: #ffffff;
    border-radius: 10px;
    position: absolute;
    top: 275px;
    /*防止初始时候在最上方露出来*/
    margin-top: -10px;
    width: 5px;
    height: 35px;
    transform: translateY(-300px);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-animation: in 500ms 6s ease-out forwards;
    animation: in 500ms 6s ease-out forwards;
}

#candle1 {
    left: calc(50% - 20px);
}

#candle2 {
    left: calc(50% + 20px);
}

.velas:after,
.velas:before {
    background: rgba(255, 0, 0, 0.4);
    content: "";
    position: absolute;
    width: 100%;
    height: 2.22222222px;
}

.velas:after {
    top: 25%;
    left: 0;
}

.velas:before {
    top: 45%;
    left: 0;
}

/* ============================================== Fire
*/
.fuego {
    border-radius: 100%;
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -2.6px;
    width: 6.66666667px;
    height: 18px;
}

.fuego:nth-child(1) {
    -webkit-animation: fuego 2s 6.5s infinite;
    animation: fuego 2s 6.5s infinite;
}

.fuego:nth-child(2) {
    -webkit-animation: fuego 1.5s 6.5s infinite;
    animation: fuego 1.5s 6.5s infinite;
}

.fuego:nth-child(3) {
    -webkit-animation: fuego 1s 6.5s infinite;
    animation: fuego 1s 6.5s infinite;
}

.fuego:nth-child(4) {
    -webkit-animation: fuego 0.5s 6.5s infinite;
    animation: fuego 0.5s 6.5s infinite;
}

.fuego:nth-child(5) {
    -webkit-animation: fuego 0.2s 6.5s infinite;
    animation: fuego 0.2s 6.5s infinite;
}

/* ============================================== Animation Fire
*/
@-webkit-keyframes fuego {
    0%, 100% {
        background: rgba(254, 248, 97, 0.5);
        box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
        transform: translateY(0) scale(1);
    }
    50% {
        background: rgba(255, 50, 0, 0.1);
        box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
        transform: translateY(-20px) scale(0);
    }
}
@keyframes fuego {
    0%, 100% {
        background: rgba(254, 248, 97, 0.5);
        box-shadow: 0 0 40px 10px rgba(248, 233, 209, 0.2);
        transform: translateY(0) scale(1);
    }
    50% {
        background: rgba(255, 50, 0, 0.1);
        box-shadow: 0 0 40px 20px rgba(248, 233, 209, 0.2);
        transform: translateY(-20px) scale(0);
    }
}
@-webkit-keyframes in {
    to {
        transform: translateY(0);
    }
}
@keyframes in {
    to {
        transform: translateY(0);
    }
}

.text {
    color: #8b6a60;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
    text-align: center;
    visibility: hidden;   /* 初始状态不可见 */
    opacity: 0;           /* 初始透明度为 0 */
    transition: opacity 2s ease;  /* 仅对透明度做渐变 */
}
.text.show {
    visibility: visible;  /* 使元素可见 */
    opacity: 1;            /* 透明度逐渐变为 1 */
}
.text h1 {
    font-size: 1.4em;
}


#bulb-container {
    position: absolute;
    top: 35px;
    right: 20px;
}

.wrap {

}

.wrap .bulb {
    /*灯泡在页面最最上方*/
    z-index: 10;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}


.wrap #s-bulb {
    /*stroke: #262832;*/
    /*fill: #262832;*/
    stroke: rgba(255, 255, 255, 0.64);
    fill: rgba(255, 255, 255, 0.68);
    stroke-width: 0;
    transition: 1500ms;
}

.wrap #s-bulb.active{
    fill: #c4d8d9;
    stroke: #c4d8d9;
    stroke-width: 2;
    transition: 100ms;
}


.wrap #www-filament {
    stroke: rgba(255, 255, 255, 0.64);
    fill: rgba(255, 255, 255, 0.68);
    stroke-width: 0;
    stroke-width: 0;
    transition: 1500ms;
}


.wrap #www-filament.active {
    stroke: #ffdf43;
    stroke-width: 3;
    fill: #ffdf43;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.wrap .light {
    width: 60px;
    height: 60px;
    margin-top: -20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}

.wrap .light .glow {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    opacity: 0;
    background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap .light .glow.active {
    width: calc(200vw);
    height: calc(200vh);
    opacity: 0.2;
    background: -webkit-radial-gradient(rgba(255,223,67,1), rgba(255,223,67,0) 70%);
    transition: all 800ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrap .light .flare {
    width: 0px;
    height: 0px;
    border-radius: 50%;
    opacity: 0;
    background: rgba(255,223,67,0);
    position: absolute;
    display: block;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 1000ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}


.wrap .light .flare.active {
    width: 35px;
    height: 35px;
    opacity: 0.3;
    background: rgba(255,223,67,1);
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.gift {
    z-index: 2;
    width: 65%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.popImage {
    /*z-index: -1;*/
    z-index: 1;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.popImage .blur {
    /*display: none;*/
    z-index: -1;
    position: absolute;
    width: calc(65vw);
    height: calc(65vw);
    filter: blur(20px);
    background: white;
    mask-image: radial-gradient(transparent, transparent 10%, white 40%);
    transform: rotateX(90deg);
}

.popImage .blur.active{
    transform: rotateX(0deg);
    transition: transform 2s;
}

.popImage img{
    /*display: none;*/
    width: calc(60vw);
}