@charset "utf-8";
/* CSS Document */

		body {
			font-family: 'Poppins', 'Noto Sans Thai', sans-serif, serif;
			background-color: #020617;
			min-height: 100vh;
			overflow-x: hidden;
			color: #f8fafc;
		}

        .cinzel { font-family: 'Cinzel', 'Noto Sans Thai', sans-serif, serif; }

		/* ชั้นพื้นหลัง Mystic Night Indigo แบบล็อคนิ่ง */
		.bg-mystic-indigo {
			position: fixed;
			top: 0;
			left: 0;
			width: 100vw;
			height: 100vh;
			background-color: #020617;
			background-image: radial-gradient(ellipse at top, #1e1b4b 0%, #090d16 60%, #030712 100%);
			background-repeat: no-repeat;
			background-size: cover;
			z-index: -10; /* ดันไปอยู่หลังสุดของทุก Element */
			pointer-events-none: none;
		}

		/* เอฟเฟกต์การพริ้วไหวและเปลี่ยนรูปร่างของลำแสงออโรร่า */
		@keyframes aurora-wave-1 {
		  0%, 100% {
			transform: translateY(0) scaleY(1) rotate(-2deg);
			opacity: 0.45;
		  }
		  50% {
			transform: translateY(-25px) scaleY(1.2) rotate(3deg);
			opacity: 0.75;
		  }
		}

		@keyframes aurora-wave-2 {
		  0%, 100% {
			transform: translateY(0) scaleY(1) rotate(4deg);
			opacity: 0.35;
		  }
		  50% {
			transform: translateY(30px) scaleY(1.3) rotate(-3deg);
			opacity: 0.65;
		  }
		}

		@keyframes aurora-wave-3 {
		  0%, 100% {
			transform: translateY(0) scaleY(0.9) rotate(-1deg);
			opacity: 0.3;
		  }
		  50% {
			transform: translateY(-20px) scaleY(1.15) rotate(2deg);
			opacity: 0.55;
		  }
		}

		.aurora-stream-1 {
		  animation: aurora-wave-1 12s ease-in-out infinite;
		  transform-origin: center;
		}

		.aurora-stream-2 {
		  animation: aurora-wave-2 17s ease-in-out infinite;
		  transform-origin: center;
		}

		.aurora-stream-3 {
		  animation: aurora-wave-3 22s ease-in-out infinite;
		  transform-origin: center;
		}

		  /* แสงออร่าเรืองแสงสีทองทรงนุ่มนวล ฟุ้งพอดีรูปโลโก้ */
		  @keyframes aura-logo-glow {
			0%, 100% {
			  opacity: 0.45;
			  transform: scale(0.92);
			  filter: blur(10px);
			}
			50% {
			  opacity: 0.85;
			  transform: scale(1.08);
			  filter: blur(16px);
			}
		  }
		  .animate-aura-logo {
			animation: aura-logo-glow 3.5s ease-in-out infinite;
		  }
		/* ซ่อน scrollbar สำหรับแถบเมนูแบบลากแนวนอน */
		  .no-scrollbar::-webkit-scrollbar {
			display: none;
		  }
		  .no-scrollbar {
			-ms-overflow-style: none;
			scrollbar-width: none;
		  }

        /* Animation: ดาวระยิบระยับ */
        @keyframes twinkle {
            0%, 100% { opacity: 0.2; transform: scale(0.8); }
            50% { opacity: 1; transform: scale(1.2); }
        }
        .star {
            position: absolute;
            background: white;
            border-radius: 50%;
            opacity: 0.3;
            animation: twinkle var(--duration) ease-in-out infinite;
            box-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
        }

        /* Animation: แสงวิบวับบนปุ่ม (Shimmer) */
        @keyframes shimmer {
            100% { transform: translateX(100%); }
        }
        
        /* Animation: หมุนช้าๆ (Slow Spin for Mandala) */
        @keyframes spin-slow {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        .spin-slow {
            animation: spin-slow 120s linear infinite;
        }

        /* CSS สำหรับซ่อน/แสดงภาษา */
        .hidden-lang {
            display: none !important;
        }

		/* CSS สำหรับ Card */
        .card-container {
            perspective: 1000px;
        }
        .card-inner {
            position: relative;
            width: 100%;
            height: 100%;
            text-align: center;
            transition: transform 0.8s;
            transform-style: preserve-3d;
        }
        .card-inner.flipped {
            transform: rotateY(180deg);
        }
        .card-front, .card-back {
            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
            border-radius: 1rem;
            box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
        }
        .card-back {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            border: 2px solid #ffd700;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #ffd700;
        }
        .card-front {
            background-color: white;
            transform: rotateY(180deg);
            overflow: hidden;
        }
        .pattern-overlay {
            background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffd700' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        
        /* Animation Classes */
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0px); }
        }
        .animate-float {
            animation: float 3s ease-in-out infinite;
        }
        @keyframes glow {
            0% { box-shadow: 0 0 10px #ffd700; }
            50% { box-shadow: 0 0 25px #ffd700, 0 0 10px #ff00de; }
            100% { box-shadow: 0 0 10px #ffd700; }
        }
        .glow-effect {
            animation: glow 2s infinite alternate;
        }
        .hidden-initial {
            opacity: 0;
            transform: translateY(20px);
            transition: all 1s ease-out;
        }
        .reveal {
            opacity: 1;
            transform: translateY(0);
        }
		@keyframes shimmer {
			100% { transform: translateX(100%); }
		}
		@keyframes zoom-in-out {
			0% { transform: scale(1); }
			50% { transform: scale(1.15); } /* ซูมขยาย 15% */
			100% { transform: scale(1); }
		}

		.animate-zoom-in-out {
			animation: zoom-in-out 6s ease-in-out infinite; /* ขยับช้าๆ นุ่มนวล 6 วินาที */
		}

	/* Type Text */
	/* แอนิเมชันเปิดความกว้างข้อความทีละตัวอักษร */
  @keyframes typing {
    from { width: 0; }
    to { width: 100%; }
  }

  /* แอนิเมชันเคอร์เซอร์ขีดกะพริบ | */
  @keyframes blink {
    50% { border-color: transparent; }
  }

  .animate-typing {
    animation: 
      typing 3.5s steps(30, end) forwards,
      blink 0.8s step-end infinite;
  }