* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #050505;
    font-family:
        "Noto Sans TC",
        "Microsoft JhengHei",
        sans-serif;
}


/* =========================================================
   舞台
========================================================= */

.stage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow: hidden;

    background:
        radial-gradient(
            ellipse at center 65%,
            rgba(255, 184, 77, .12),
            transparent 55%
        ),
        linear-gradient(
            to bottom,
            #050505,
            #111 60%,
            #080808
        );
}


/* =========================================================
   背景
========================================================= */

.backdrop {
    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            ellipse at center 45%,
            rgba(255, 183, 77, .08),
            transparent 55%
        ),
        #080808;
}


/* =========================================================
   地板
========================================================= */

.floor {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 24%;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 2px,
            transparent 2px,
            transparent 90px
        ),
        linear-gradient(
            to bottom,
            #4b2b18,
            #24150d
        );

    border-top: 4px solid rgba(255,193,93,.25);

    transform:
        perspective(500px)
        rotateX(45deg);

    transform-origin: bottom;
}


/* =========================================================
   聚光燈
========================================================= */

.spotlights {
    position: absolute;
    inset: 0;

    pointer-events: none;
}

.light {
    position: absolute;

    top: -10%;

    width: 24%;
    height: 80%;

    opacity: 0;

    background:
        linear-gradient(
            to bottom,
            rgba(255,232,171,.65),
            rgba(255,193,88,.12),
            transparent
        );

    filter: blur(5px);

    clip-path:
        polygon(
            45% 0,
            55% 0,
            90% 100%,
            10% 100%
        );

    transform-origin: top;
}

.light:nth-child(1) {
    left: 6%;
}

.light:nth-child(2) {
    left: 38%;
}

.light:nth-child(3) {
    right: 6%;
}

.lights-on .light {
    animation:
        lightOn
        1.4s
        ease
        forwards;
}

.lights-on .light:nth-child(2) {
    animation-delay: .3s;
}

.lights-on .light:nth-child(3) {
    animation-delay: .6s;
}

@keyframes lightOn {

    from {
        opacity: 0;
    }

    to {
        opacity: .75;
    }

}


/* =========================================================
   燈具
========================================================= */

.lamps {
    position: absolute;

    top: 18px;
    left: 50%;

    width: 80%;

    transform: translateX(-50%);

    display: flex;
    justify-content: space-around;

    z-index: 5;
}

.lamp {
    width: 55px;
    height: 25px;

    background: #111;

    border-radius:
        50% 50%
        10px 10px;

    transition: .5s;
}

.lights-on .lamp {

    background: #f7d28b;

    box-shadow:
        0 0 15px #ffd36b,
        0 0 40px rgba(255,196,83,.7);
}


/* =========================
   年份資訊
========================= */

.year-wrapper {
    position: absolute;
    top: 5%;
    left: 50%;
    width: min(700px, 90vw);
    transform: translateX(-50%);
    text-align: center;
    z-index: 7;
    pointer-events: none;
}

/* 年份 */
.year {
    position: relative;
    top: auto;
    left: auto;
    transform: scale(.7);

    font-size: clamp(48px, 7vw, 105px);
    font-weight: 900;

    color: #ffd77b;

    text-shadow:
        0 0 10px rgba(255,197,83,.8),
        0 0 35px rgba(255,150,20,.4),
        0 5px 0 rgba(0,0,0,.4);

    opacity: 0;

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.year.show {
    opacity: 1;
    transform: scale(1);
}

/* =========================
   年份下方說明
========================= */

.year-description {
    margin-top: 5px;

    font-size: clamp(14px, 1.5vw, 22px);
    font-weight: 500;

    letter-spacing: 2px;

    color: rgba(255, 244, 214, .9);

    text-shadow:
        0 2px 5px rgba(0,0,0,.8),
        0 0 12px rgba(255,215,123,.25);

    opacity: 0;
    transform: translateY(-10px);

    transition:
        opacity .8s ease,
        transform .8s ease;
}

.year-description.show {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   NAS 共用容器
========================================================= */

.nas {

    position: absolute;

    left: 5px;
    top: 95px;

    width: 110px;
    height: 100px;

    z-index: 5;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .7s,
        transform .7s;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: visible;
}

.nas.show {
    opacity: 1;
}


/* =========================================================
   NAS 切換動畫
========================================================= */

.nas.nas-changing {
    transform:
        scale(0)
        rotate(-10deg);
}

.nas.nas-changing.reverse {
    transform:
        scale(0)
        rotate(10deg);
}


/* =========================================================
   告別訊息
========================================================= */

.message {

    position: absolute;

    top: 32%;
    left: 57%;

    width:
        min(
            620px,
            42vw
        );

    transform:
        translateY(40px);

    opacity: 0;

    z-index: 9;

    color: #fff;

    text-align: left;

    transition:
        opacity 1.2s,
        transform 1.2s;
}

.message.show {

    opacity: 1;

    transform:
        translateY(0);
}

.message-title {

    font-size:
        clamp(
            24px,
            2.5vw,
            40px
        );

    color: #ffd77b;

    font-weight: 900;

    margin-bottom: 22px;

    text-shadow:
        0 0 15px
        rgba(255,204,104,.5);
}

.message-text {

    font-size:
        clamp(
            15px,
            1.45vw,
            22px
        );

    line-height: 2;

    color: #f5f5f5;

    text-shadow:
        0 2px 4px #000;
}


/* =========================================================
   最終文字
========================================================= */

.final-title {

    position: absolute;

    top: 50%;
    left: 50%;

    width: 100%;

    transform:
        translate(-50%, -50%)
        scale(.8);

    opacity: 0;

    text-align: center;

    color: #fff4d6;

    font-size:
        clamp(
            40px,
            7vw,
            110px
        );

    font-weight: 900;

    line-height: 1.35;

    text-shadow:
        0 4px 8px rgba(0,0,0,.8),
        0 0 25px rgba(255,219,153,.25);

    z-index: 50;

    pointer-events: none;

    transition:
        opacity 1.5s,
        transform 1.5s;
}

.final-title.show {

    opacity: 1;

    transform:
        translate(-50%, -50%)
        scale(1);
}

/* =========================================================
   布幕
========================================================= */

.curtain {
    position: absolute;
    top: 0;

    width: 52%;
    height: 100%;

    z-index: 20;

    background:
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.15) 0,
            rgba(0,0,0,.15) 15px,
            rgba(255,255,255,.035) 20px,
            rgba(0,0,0,.12) 40px
        ),
        linear-gradient(
            to right,
            #250000,
            #8d0808 45%,
            #4b0000
        );

    box-shadow:
        inset 0 0 60px rgba(0,0,0,.7),
        0 0 40px rgba(0,0,0,.8);

    transition:
        transform 3s cubic-bezier(.65,0,.25,1);

    will-change: transform;
}

.curtain-left {
    left: 0;
    border-right: 8px solid #280000;
}

.curtain-right {
    right: 0;
    border-left: 8px solid #280000;
}

/* 打開 */

.curtains-open .curtain-left {
    transform: translateX(-100%);
}

.curtains-open .curtain-right {
    transform: translateX(100%);
}

/* 關閉 */

.stage:not(.curtains-open) .curtain-left {
    transform: translateX(0);
}

.stage:not(.curtains-open) .curtain-right {
    transform: translateX(0);
}


/* =========================================================
   黑幕
========================================================= */

.fade {

    position: absolute;

    inset: 0;

    background: #000;

    z-index: 100;

    pointer-events: none;

    opacity: 0;

    transition:
        opacity 2s;
}

.fade.show {
    opacity: 1;
}


/* =========================================================
   開始畫面
========================================================= */

.start-screen {

    position: absolute;

    inset: 0;

    z-index: 200;

    display: flex;

    align-items: center;
    justify-content: center;

    background: #050505;

    cursor: pointer;

    transition:
        opacity 1s;
}

.start-screen.hide {

    opacity: 0;

    pointer-events: none;
}

.start-content {

    text-align: center;

    color: white;
}

.start-content h1 {

    font-size:
        clamp(
            30px,
            5vw,
            70px
        );

    margin-bottom: 20px;

    color: #ffd77b;
}

.start-content p {

    color: #aaa;

    font-size: 18px;
}

.start-button {

    display: inline-block;

    margin-top: 30px;

    padding:
        14px 40px;

    border:
        1px solid #ffd77b;

    border-radius: 50px;

    color: #ffd77b;

    transition: .3s;
}

.start-button:hover {

    background: #ffd77b;

    color: #111;

    box-shadow:
        0 0 30px
        rgba(255,215,123,.5);
}


/* =========================================================
   RWD
========================================================= */

@media (max-width: 900px) {

    .message {

        top: 27%;
        left: 50%;

        width:
            min(
                90vw,
                650px
            );

        transform:
            translateX(-50%)
            translateY(40px);

        text-align: center;
    }

    .message.show {

        transform:
            translateX(-50%)
            translateY(0);
    }

}

@media (max-width: 600px) {

    .message {

        top: 25%;

        width: 92vw;
    }

    .message-title {
        font-size: 25px;
    }

    .message-text {

        font-size: 15px;

        line-height: 1.8;
    }

    .light {
        width: 35%;
    }

    .light:nth-child(1) {
        left: .5%;
    }

    .light:nth-child(2) {
        left: 32.5%;
    }

    .light:nth-child(3) {
        right: .5%;
    }
	
	.year-wrapper {
        top: 5%;
        width: 90vw;
    }

    .year-description {
        margin-top: 0;
        font-size: 14px;
        letter-spacing: 1px;
    }
}