/* =========================================================
   Anniversary 5th ROC : The Rise of Awake Novice
   ANIMATION  —  entrance sequence + idle floating (heavenly theme)
   ใช้คู่กับ styles.css  โดยต้องโหลดไฟล์นี้ "หลัง" styles.css
   ========================================================= */

/* =========================================================
   HEAVENLY MOTION  —  entrance sequence + idle floating
   ปรับจังหวะรวมได้ที่ --anniv5th-in (ความไวของการโผล่)
   ========================================================= */
.anniv5thMainLayout {
    --anniv5th-in: 1.1s;
    overflow: hidden;
    isolation: isolate;
}

/* ---- แสงสวรรค์นวล ๆ กลางฉาก ---- */
.anniv5thMainLayout::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(55% 40% at 50% 32%, rgba(255, 255, 255, .45), rgba(255, 255, 255, 0) 70%),
        radial-gradient(70% 60% at 50% 95%, rgba(255, 243, 210, .28), rgba(255, 255, 255, 0) 70%);
    opacity: 0;
    animation: anniv5thSkyWake 2.4s .1s ease-out forwards, anniv5thGlowBreath 9s 2.4s ease-in-out infinite;
}

/* ---- ลำแสงเฉียง (god rays) เคลื่อนช้า ๆ ---- */
.anniv5thMainLayout::after {
    content: "";
    position: absolute;
    inset: -25% -15%;
    z-index: 0;
    pointer-events: none;
    mix-blend-mode: screen;
    filter: blur(8px);
    opacity: 0;
    background: repeating-linear-gradient(104deg,
            rgba(255, 255, 255, 0) 0 70px,
            rgba(255, 255, 255, .10) 70px 104px,
            rgba(255, 255, 255, 0) 104px 190px);
    animation: anniv5thRayIn 3s .4s ease-out forwards, anniv5thRayDrift 22s 3.4s ease-in-out infinite alternate;
}

@keyframes anniv5thSkyWake {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes anniv5thRayIn {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: .55;
        transform: translateX(0);
    }
}

@keyframes anniv5thRayDrift {
    from {
        transform: translateX(0) skewX(0deg);
        opacity: .4;
    }

    to {
        transform: translateX(70px) skewX(-2deg);
        opacity: .7;
    }
}

@keyframes anniv5thGlowBreath {

    0%,
    100% {
        opacity: .75;
    }

    50% {
        opacity: 1;
    }
}

/* =========================
   LOGO : ลอยลงมาจากฟ้า แล้วลอยหายใจอยู่กับที่
========================= */
.anniv5thLogo {
    animation: anniv5thLogoIn 1.3s .35s cubic-bezier(.16, 1, .3, 1) both;
}

.anniv5thLogo img {
    animation:
        anniv5thFloatLogo 7s 2s ease-in-out infinite,
        anniv5thHalo 5.5s 2s ease-in-out infinite;
}

@keyframes anniv5thLogoIn {
    0% {
        opacity: 0;
        transform: translateY(-70px) scale(.82);
        filter: blur(14px);
    }

    55% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes anniv5thFloatLogo {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-16px) scale(1.012);
    }
}

@keyframes anniv5thHalo {

    0%,
    100% {
        filter: drop-shadow(0 0 14px rgba(252, 197, 0, 0.35));
    }

    50% {
        filter: drop-shadow(0 0 30px rgba(240, 209, 97, 0.75));
    }
}

/* =========================
   PORING : ลอยเข้ามาจากขอบจอ แล้วลอยวนอยู่กับที่
   (คนละคาบเวลา เพื่อไม่ให้ขยับพร้อมกันจนดูเป็นจังหวะเครื่องจักร)
========================= */
.anniv5thporing_1,
.anniv5thporing_2,
.anniv5thporing_3,
.anniv5thporing_4 {
    will-change: transform, opacity;
}

.anniv5thporing_1 {
    animation: anniv5thDriftInTop var(--anniv5th-in) 1.55s cubic-bezier(.16, 1, .3, 1) both;
}

.anniv5thporing_2 {
    animation: anniv5thDriftInRight var(--anniv5th-in) 1.80s cubic-bezier(.16, 1, .3, 1) both;
}

.anniv5thporing_3 {
    animation: anniv5thDriftInLeft var(--anniv5th-in) 2.05s cubic-bezier(.16, 1, .3, 1) both;
}

.anniv5thporing_4 {
    animation: anniv5thDriftInDown var(--anniv5th-in) 2.30s cubic-bezier(.16, 1, .3, 1) both;
}

.anniv5thporing_1 img {
    animation: anniv5thBobA 6.5s 2.7s ease-in-out infinite;
}

.anniv5thporing_2 img {
    animation: anniv5thBobB 8s 3.0s ease-in-out infinite;
}

.anniv5thporing_3 img {
    animation: anniv5thBobC 7.2s 3.3s ease-in-out infinite;
}

.anniv5thporing_4 img {
    animation: anniv5thBobD 9s 3.6s ease-in-out infinite;
}

@keyframes anniv5thDriftInTop {
    0% {
        opacity: 0;
        transform: translate(-30px, -60px) scale(.7) rotate(-8deg);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes anniv5thDriftInRight {
    0% {
        opacity: 0;
        transform: translate(90px, -30px) scale(.75) rotate(10deg);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes anniv5thDriftInLeft {
    0% {
        opacity: 0;
        transform: translate(-90px, 20px) scale(.75) rotate(-10deg);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

@keyframes anniv5thDriftInDown {
    0% {
        opacity: 0;
        transform: translate(-40px, 70px) scale(.8) rotate(6deg);
        filter: blur(6px);
    }

    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1) rotate(0deg);
        filter: blur(0);
    }
}

/* ลอยขึ้นลง + ส่ายเล็กน้อย */
@keyframes anniv5thBobA {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    33% {
        transform: translate(6px, -14px) rotate(2.5deg);
    }

    66% {
        transform: translate(-5px, -6px) rotate(-2deg);
    }
}

@keyframes anniv5thBobB {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    50% {
        transform: translate(-10px, -20px) rotate(-3deg);
    }
}

@keyframes anniv5thBobC {

    0%,
    100% {
        transform: translate(0, 0) rotate(-1deg) scale(1);
    }

    40% {
        transform: translate(8px, -12px) rotate(2deg) scale(1.015);
    }

    75% {
        transform: translate(-4px, -18px) rotate(-1.5deg) scale(.995);
    }
}

@keyframes anniv5thBobD {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    45% {
        transform: translate(12px, -16px) rotate(2deg);
    }

    80% {
        transform: translate(4px, -4px) rotate(.8deg);
    }
}

/* =========================
   BUTTON : โผล่ทีละปุ่มเป็นลำดับสุดท้าย แล้วลอยเบา ๆ
   (ใส่ที่ <a> ครอบปุ่ม จึงไม่ชนกับ transform ตอน hover ของปุ่ม)
========================= */
.anniv5thButtonMainLayout>div>a {
    display: inline-block;
    animation:
        anniv5thRiseIn .9s var(--d, 2.2s) cubic-bezier(.16, 1, .3, 1) both,
        anniv5thButtonFloat 5s var(--fd, 3.2s) ease-in-out infinite;
}

.anniv5thButtonMainLayout>div>a:nth-child(1) {
    --d: 1.00s;
    --fd: 2.0s;
}

.anniv5thButtonMainLayout>div>a:nth-child(2) {
    --d: 1.15s;
    --fd: 2.2s;
}

.anniv5thButtonMainLayout>div>a:nth-child(3) {
    --d: 1.30s;
    --fd: 2.4s;
}

@keyframes anniv5thRiseIn {
    0% {
        opacity: 0;
        transform: translateY(34px) scale(.9);
        filter: blur(5px);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes anniv5thButtonFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* =========================
   AMBIENT : ละอองแสง + ขนนก (สร้างด้วย JS)
========================= */
.anniv5thAmbient {
    position: absolute;
    inset: 0;
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
}

.anniv5thMote {
    position: absolute;
    bottom: -6%;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, rgba(255, 246, 214, .75) 45%, rgba(255, 246, 214, 0) 72%);
    opacity: 0;
    animation-name: anniv5thMoteRise;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes anniv5thMoteRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) scale(.6);
    }

    12% {
        opacity: var(--peak, .85);
    }

    50% {
        transform: translate3d(var(--sway, 30px), -55vh, 0) scale(1);
    }

    85% {
        opacity: var(--peak, .85);
    }

    100% {
        opacity: 0;
        transform: translate3d(calc(var(--sway, 30px) * -.6), -110vh, 0) scale(.5);
    }
}

.anniv5thFeather {
    position: absolute;
    top: -12%;
    width: 26px;
    height: 26px;
    opacity: 0;
    background: no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M54 8C33 10 18 22 13 40c-2 7-3 11-7 16 7-2 11-4 17-7 18-8 29-23 31-41z' fill='white' opacity='.92'/><path d='M50 13C36 22 25 34 17 51' stroke='rgba(190,215,255,.9)' stroke-width='2.5' fill='none' stroke-linecap='round'/></svg>");
    filter: drop-shadow(0 0 6px rgba(255, 255, 255, .6));
    animation-name: anniv5thFeatherFall;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes anniv5thFeatherFall {
    0% {
        opacity: 0;
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    10% {
        opacity: .85;
    }

    35% {
        transform: translate3d(var(--sway, 60px), 40vh, 0) rotate(28deg);
    }

    65% {
        transform: translate3d(calc(var(--sway, 60px) * -.8), 75vh, 0) rotate(-22deg);
    }

    90% {
        opacity: .7;
    }

    100% {
        opacity: 0;
        transform: translate3d(var(--sway, 60px), 125vh, 0) rotate(20deg);
    }
}

/* หมายเหตุ: ตั้งใจไม่ปิดอนิเมชั่นตาม prefers-reduced-motion เพราะหน้านี้เป็นหน้าโปรโมท
   ต้องการให้เอฟเฟกต์แสดงผลเสมอ ไม่ว่าเครื่องผู้ใช้จะตั้งค่า "ลดการเคลื่อนไหว" ไว้หรือไม่ */

/* =========================
   MOBILE : ลดแอมพลิจูดไม่ให้ภาพล้นจอ
========================= */
@media (max-width: 768px) {
    .anniv5thMainLayout {
        --anniv5th-in: .9s;
    }

    .anniv5thLogo img,
    .anniv5thporing_1 img,
    .anniv5thporing_2 img,
    .anniv5thporing_3 img,
    .anniv5thporing_4 img {
        animation-duration: 8s;
    }

    .anniv5thFeather {
        width: 18px;
        height: 18px;
    }
}