/* ------------------------------------------------------------------
   musiccontest/assets/home.css — เอฟเฟกต์ "แสง สี เสียง" ของหน้าแรก
   ใช้เฉพาะ index.php · สีทั้งหมดอิงตัวแปรใน _lib/ui.php
   ทุกอนิเมชันปิดได้ 2 ทาง: ตั้งค่า home_motion = 0 (ใส่คลาส .no-motion)
   และระบบ prefers-reduced-motion ของเครื่องผู้ใช้
   ------------------------------------------------------------------ */

/* ================================================= ฉากหลังเคลื่อนไหว */

.mc-stage {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* ก้อนแสงนีออนลอยช้า ๆ */
.mc-stage .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .5;
    will-change: transform;
    animation: mc-drift 20s ease-in-out infinite alternate;
}

.mc-stage .blob.c1 { background: #027ffc; width: 46vw; height: 46vw; left: -12vw; top: -14vw; }
.mc-stage .blob.c2 { background: #fa05a0; width: 40vw; height: 40vw; right: -10vw; top: -12vw; animation-duration: 26s; }
.mc-stage .blob.c3 { background: #fc8322; width: 36vw; height: 36vw; left: 34vw; bottom: -20vw; animation-duration: 32s; opacity: .35; }

@keyframes mc-drift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(4vw, 3vh, 0) scale(1.14); }
}

/* พื้นตารางแบบซินธ์เวฟที่วิ่งเข้าหาคนดู */
.mc-stage .grid {
    position: absolute;
    left: -30%;
    right: -30%;
    bottom: -8vh;
    height: 52vh;
    background-image:
        linear-gradient(rgba(2, 191, 252, .34) 1px, transparent 1px),
        linear-gradient(90deg, rgba(250, 5, 160, .26) 1px, transparent 1px);
    background-size: 6vh 6vh, 6vh 6vh;
    transform: perspective(38vh) rotateX(74deg);
    -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%);
    mask-image: linear-gradient(to top, #000 8%, transparent 88%);
    animation: mc-grid 5s linear infinite;
}

@keyframes mc-grid {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 6vh, 0 0; }
}

/* ลำแสงกวาดจากด้านบนแบบไฟเวที */
.mc-stage .beam {
    position: absolute;
    top: -30%;
    width: 16vw;
    height: 150%;
    filter: blur(26px);
    opacity: .34;
    mix-blend-mode: screen;
    transform-origin: 50% 0;
    animation: mc-sweep 11s ease-in-out infinite alternate;
}

.mc-stage .beam.b1 { left: 14%; background: linear-gradient(to bottom, #02bffc, transparent 72%); }
.mc-stage .beam.b2 { left: 46%; background: linear-gradient(to bottom, #fa05a0, transparent 72%); animation-duration: 14s; animation-delay: -3s; }
.mc-stage .beam.b3 { left: 76%; background: linear-gradient(to bottom, #fdc005, transparent 72%); animation-duration: 17s; animation-delay: -7s; }

@keyframes mc-sweep {
    from { transform: rotate(-16deg); }
    to   { transform: rotate(16deg); }
}

/* ================================================= ส่วนหัวหน้าแรก */

.mc-banner img { animation: mc-float 7s ease-in-out infinite alternate; }

@keyframes mc-float {
    from { transform: translateY(0); }
    to   { transform: translateY(-8px); }
}

.hero-tagline {
    text-align: center;
    font-size: clamp(1rem, 2.6vw, 1.35rem);
    font-weight: 700;
    letter-spacing: .4px;
    background: linear-gradient(90deg, #02bffc, #fa05a0 50%, #fdc005);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: mc-hue 7s linear infinite;
}

@keyframes mc-hue {
    from { background-position: 0% 0; }
    to   { background-position: 220% 0; }
}

/* ------------------------------ อีควอไลเซอร์ (ขยับตามเสียงจริงตอนเปิดเพลง) */

.eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    height: 78px;
    margin: 14px 0 26px;
}

.eq span {
    width: 7px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(to top, #027ffc, #fa05a0 55%, #fdc005);
    height: 14%;
    opacity: .85;
    transform-origin: bottom;
    /* ตอนยังไม่เปิดเพลงจะเต้นด้วย CSS · เปิดเพลงแล้ว JS จะมาคุมความสูงแทน */
    animation: mc-bar 1.15s ease-in-out infinite alternate;
    box-shadow: 0 0 10px rgba(250, 5, 160, .45);
}

.eq.live span { animation: none; transition: height .07s linear; }

/* จอแคบ: ลดจำนวน/ความกว้างแท่ง ไม่ให้แถวอีควอไลเซอร์ดันหน้าจนเลื่อนซ้ายขวาได้ */
@media (max-width: 520px) {
    .eq { height: 62px; gap: 3px; }
    .eq span { width: 6px; }
    .eq span:nth-child(n+21) { display: none; }
}

@keyframes mc-bar {
    from { height: 12%; }
    to   { height: 78%; }
}

/* ================================================= ปุ่มและการ์ด */

.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; }

.btn-mc.btn-pulse { animation: mc-pulse 2.6s ease-in-out infinite; }

@keyframes mc-pulse {
    0%, 100% { box-shadow: 0 6px 18px rgba(250, 5, 160, .32); }
    50%      { box-shadow: 0 8px 30px rgba(253, 192, 5, .55); }
}

.mc-card.card-glow { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

.mc-card.card-glow:hover {
    transform: translateY(-3px);
    border-color: rgba(250, 5, 160, .55);
    box-shadow: 0 0 0 1px rgba(2, 191, 252, .18), 0 22px 46px rgba(0, 0, 0, .55);
}

.stat-big {
    font-size: 2rem;
    font-weight: 800;
    /* ไล่จากชมพูไปทอง — ถ้าไล่จากฟ้าไปทองจะผ่านสีเขียวตรงกลาง ดูหลุดจากธีม */
    background: linear-gradient(90deg, #fa05a0, #fdc005);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ================================================= ปุ่มเปิดเพลงลอย */

.music-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 12px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #fa05a0, #fc8322 55%, #fdc005);
    color: #1a0620;
    font-weight: 800;
    box-shadow: 0 10px 26px rgba(250, 5, 160, .4);
    cursor: pointer;
}

.music-fab:hover { filter: brightness(1.08); }

.music-fab .ico {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
}

.music-fab .ico i {
    display: block;
    width: 4px;
    height: 40%;
    background: #1a0620;
    border-radius: 2px;
}

.music-fab.playing .ico i { animation: mc-bar .6s ease-in-out infinite alternate; }
.music-fab.playing .ico i:nth-child(2) { animation-delay: .2s; }
.music-fab.playing .ico i:nth-child(3) { animation-delay: .4s; }
.music-fab.playing { animation: mc-pulse 2s ease-in-out infinite; }

.music-fab .label { font-size: .95rem; white-space: nowrap; }

@media (max-width: 480px) {
    .music-fab .label { display: none; }
    .music-fab { padding: 12px; }
}

/* ================================================= ปิดการเคลื่อนไหว */

@media (prefers-reduced-motion: reduce) {
    .mc-stage .blob,
    .mc-stage .grid,
    .mc-stage .beam,
    .mc-banner img,
    .hero-tagline,
    .eq span,
    .btn-mc.btn-pulse,
    .music-fab.playing,
    .music-fab.playing .ico i {
        animation: none !important;
    }
}

.no-motion .mc-stage .blob,
.no-motion .mc-stage .grid,
.no-motion .mc-stage .beam,
.no-motion .mc-banner img,
.no-motion .hero-tagline,
.no-motion .eq span,
.no-motion .btn-mc.btn-pulse {
    animation: none !important;
}