@import url("https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

html {
    scroll-behavior: smooth;
    margin: 0;
}

body {
    font-family: "Kanit", sans-serif;
    font-weight: 300;
}

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

:root {
    --gold: #deca8b;
    --gold-dark: #d99d42;
    --gold-deep: #a0640a;
    --cream: #fff5dc;
    --blue-card: #1a5fa8;
    --shadow-glow: 0 0 40px rgba(222, 202, 139, 0.4);
}

html,
body {
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Kanit", sans-serif;
}

/* ─── SCENE STACK ─── */
.scene {
    position: relative;
    width: 100%;
    min-height: 100vh;
    overflow: hidden;
}

.layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

/* 1. Background */
.layer-bg {
    z-index: 1;
    background: url("../images/bg.png") center top / cover no-repeat;
}

/* 2. Characters */
.layer-chars {
    z-index: 3;
    background: url("../images/Landing-1.png") center top / contain no-repeat;
    background-size: 110% auto;
    animation: charFloat 6s ease-in-out infinite;
    transform-origin: center bottom;
}

@keyframes charFloat {
    0%,
    100% {
        transform: translateY(0px);
    }

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

/* 3. Bloom fog overlay between bg and chars */
.layer-bloom {
    z-index: 2;
    background: radial-gradient(ellipse 80% 50% at 50% 80%, rgba(255, 255, 255, 0.45) 0%, transparent 70%);
    mix-blend-mode: screen;
}

/* 4. Feather overlay above characters */
.layer-feathers {
    z-index: 4;
}

.layer-eclip {
    background: url("../images/Ellipse-1.png") center bottom / cover no-repeat;
    /*background-size: 30% auto;*/
    z-index: 5;
    opacity: 0.7;
}

/* ─── FEATHERS ─── */
.feather {
    position: absolute;
    background: url("../images/ef.png") center top/cover no-repeat;
    /*opacity: 0;*/
    /*
    animation: featherDrift var(--dur) var(--delay) ease-in-out infinite;
    width: var(--size);
    height: var(--size);
    left: var(--x);
    top: -10%;
    */
}

@keyframes featherDrift {
    0% {
        opacity: 0;
        transform: translateY(0) translateX(0) rotate(0deg);
    }

    10% {
        opacity: 0.85;
    }

    90% {
        opacity: 0.6;
    }

    100% {
        opacity: 0;
        transform: translateY(110vh) translateX(var(--drift)) rotate(var(--spin));
    }
}

/* ─── CONTENT ─── */

.bg-text {
    padding: 30px;
    background: radial-gradient(
        ellipse 60% 72% at 50% 50%,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.9) 43%,
        transparent 76%
    );
    width: 100%;
    justify-content: center;
    display: grid;
}
.content {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 32px 16px 60px;
    pointer-events: none;
    text-align: center;
}

.content > * {
    pointer-events: auto;
}

/* Logo */
.logo-wrap {
    margin-bottom: 8px;
    filter: drop-shadow(0 4px 24px rgba(217, 157, 66, 0.7));
    animation: logoPop 1s cubic-bezier(0.17, 0.67, 0.38, 1.3) both;
}

.logo-wrap img {
    width: clamp(180px, 30vw, 320px);
}

@keyframes logoPop {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(-30px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Headline */
.headline {
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-size: clamp(22px, 4.5vw, 48px);
    /*color: #ffd700;*/
    background: linear-gradient(181.21deg, #022893 21.97%, #4cdcff 98.69%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /*
    text-shadow:
        0 2px 0 #8b5e00,
        0 0 30px rgba(255, 200, 0, 0.8),
        2px 2px 8px rgba(0, 0, 0, 0.9);
        */
    text-align: center;
    line-height: 1.3;
    margin-bottom: 16px;
    letter-spacing: 0.02em;
    animation: fadeUp 0.8s 0.3s ease both;
}

.subtext {
    color: rgb(0, 0, 0);
    font-weight: 400;
    font-size: clamp(16px, 1.8vw, 18px);
    text-align: center;
    max-width: 1200px;
    line-height: 1.7;
    /*text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);*/
    margin-bottom: 6px;
    animation: fadeUp 0.8s 0.5s ease both;
}

.subtext-highlight {
    /*color: #ffeaa0;*/
    font-weight: 600;
}

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Spacer so cards appear lower (characters show beneath) */
.char-spacer {
    /*height: clamp(120px, 22vw, 240px);*/
}

/* ─── CARDS ─── */
.cards-section {
    width: 100%;
    max-width: 1200px;
    display: flex;
    gap: clamp(12px, 3vw, 28px);
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 32px;
    animation: fadeUp 0.9s 0.7s ease both;
}
.disable {
    pointer-events: none;
    filter: grayscale(1) brightness(0.7);
}
.card {
    flex: 1 1 300px;
    max-width: 500px;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-image: url(../images/framecard.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.card-profile {
    flex: 1 1 210px;
    max-width: 500px;
    background-image: url(../images/bg-profile.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: start;
    align-items: baseline;
    padding: 20px 30px;
    display: inline-grid;
}
.card-title-uid {
    font-weight: 500;
    color: rgba(98, 116, 142, 1);
}
.card-tuid {
    color: rgba(49, 65, 88, 1);
    font-size: 14px;
}
/* Sheen */
.card-sheen {
    position: absolute;
    top: 0;
    left: -80%;
    width: 100%;
    height: 100%;
    background: linear-gradient(300deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70%);
    animation: sheen 3s 2s ease-in-out infinite;
}

@keyframes sheen {
    0%,
    100% {
        left: -80%;
    }

    50% {
        left: 120%;
    }
}

.card-tag {
    font-size: clamp(10px, 1.5vw, 12px);
    color: var(--gold);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    padding: 4px 16px;
    border-radius: 20px;
    border: 1px solid rgba(222, 202, 139, 0.4);
}

.card-title {
    /*font-family: "Cinzel Decorative", cursive;*/
    font-size: clamp(16px, 2.8vw, 22px);
    font-weight: 500;
    color: var(--cream);
    text-align: center;
    text-shadow: 0 0 20px rgba(222, 202, 139, 0.5);
    line-height: 1.2;
}

.card-divider {
    width: 60%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.card-desc {
    font-size: clamp(12px, 1.5vw, 16px);
    color: white;
    text-align: center;
    line-height: 1.7;
}

.card-items {
    position: relative;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    /*background: rgba(0, 0, 0, 0.25);*/
    /*border: 1px solid rgba(222, 202, 139, 0.2);*/
    padding: 12px;
    display: flex;
    justify-content: center;
}

.card-items img {
    width: 100%;
    max-width: 100%;
    /*object-fit: contain;*/
    filter: drop-shadow(0px 0px 10px rgb(255, 255, 255));
    animation: itemFloat 4s ease-in-out infinite;
}

.card:first-child .card-items img {
    animation-delay: 0s;
}

.card:last-child .card-items img {
    animation-delay: 1.5s;
}

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

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

/* ─── CTA BUTTON ─── */
.cta-wrap {
    animation: fadeUp 1s 1s ease both;
}

.cta-btn {
    display: inline-block;
    padding: clamp(14px, 2vw, 18px) clamp(40px, 8vw, 72px);
    background: linear-gradient(272.42deg, #deca8b 6.18%, #d99d42 89.92%);
    background: linear-gradient(272.42deg, #deca8b 6.18%, #d99d42 89.92%);
    color: #fff;
    -webkit-text-stroke: 3px #b8750a;
    paint-order: stroke fill;
    font-family: "Kanit", sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 2.2vw, 26px);
    border-radius: 50px;
    border: none;
    cursor: pointer;
    box-shadow:
        0 5px 20px rgba(180, 110, 0, 0.5),
        inset 0 2px 4px rgba(255, 255, 255, 0.35),
        inset 0 -3px 6px rgba(120, 60, 0, 0.25);
    letter-spacing: 0.05em;
    transition:
        transform 0.15s,
        box-shadow 0.15s;
    position: relative;
    text-decoration: none;
}

.cta-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
    pointer-events: none;
}

.cta-btn:hover {
    transform: translateY(-3px);
    box-shadow:
        0 7px 0 #a0640a 0 12px 40px rgba(217, 157, 66, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cta-btn:active {
    transform: translateY(2px);
    box-shadow:
        0 2px 0 #a0640a,
        0 4px 16px rgba(217, 157, 66, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.cta-btn2 {
    font-size: clamp(15px, 2.2vw, 16px);
    padding: clamp(10px, 1vw, 5px) clamp(20px, 4vw, 10px);
    margin-bottom: 15px;
}

.btn-logout {
    background: #808080;
    background: linear-gradient(47deg, rgba(128, 128, 128, 1) 26%, rgb(203 203 203) 88%);
    font-size: clamp(12px, 1vw, 14px);
    box-shadow: none;
    -webkit-text-stroke: 2px grey;
}

/* ─── PARTICLE GLOW ─── */
.particles {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 215, 100, 0.9) 0%, transparent 70%);
    animation: particlePulse var(--p-dur) var(--p-delay) ease-in-out infinite;
    width: var(--p-size);
    height: var(--p-size);
    left: var(--p-x);
    top: var(--p-y);
}

@keyframes particlePulse {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.5);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.5);
    }
}

.box-remark {
    position: relative;
    z-index: 9;
    justify-content: center;
    display: grid;
    text-align: start;
    font-weight: 300;
}
.box-remark p {
    font-weight: 500;
    text-align: center;
    margin-bottom: 0;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
    .cards-section {
        flex-direction: row;
        align-items: center;
        display: grid;
    }

    .card {
        max-width: 100%;
    }

    .char-spacer {
        height: 80px;
    }

    .layer-chars {
        /*background: url("../images/cha-mb.png") center top / contain no-repeat;*/
        background-size: 100% auto;
        /*background-size: 130%;*/
        /*background-position: center bottom;*/
    }
    .card-items img {
        width: 250px;
        height: 110px;
    }
}

/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
    .content {
        /*background: url("../images/wh.png") center top / 100%  repeat;*/
        padding: 20px 0;
    }
    .cards-section {
        flex-direction: column;
        align-items: center;
    }

    .card {
        max-width: 100%;
        min-height: 380px;
    }

    .char-spacer {
        height: 80px;
    }
    .card-avatar img {
        width: 80px;
    }
    .layer-chars {
        background: url("../images/cha-mb.png") center top / contain no-repeat;
        background-size: 100% auto;
        /*background-size: 130%;*/
        /*background-position: center bottom;*/
    }
    .bg-text {
        background: radial-gradient(
            ellipse 90% 66% at 50% 50%,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(255, 255, 255, 0.9) 43%,
            transparent 76%
        );
        margin-top: 90%;
    }
    .card-items img {
        /*
        width: 150px;
        height: 80px;
        */
        width: 250px;
        height: 110px;
    }
}

.btn-news{
    position: fixed;
    top: 10%;
    background-image: url(../images/nav_soical.png);
    width: 90px;
    height: 90px;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    text-align: center;
    display: inline-grid;
    align-items: anchor-center;
}
.btn-news a {
    font-size: 18px;     color: #876000;
    font-weight: 400;
    text-shadow: 2px 2px #e7ad00;     text-decoration: auto;
}