/* ========== Reset & Base ========== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Rajdhani', sans-serif;
  background: #0a0a0a;
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
  font-weight: 400;
}

/* ========== Font Utilities ========== */
/* ใช้ Kanit ตัวบาง (300) เป็นค่าเริ่มของทุกจุดที่มี .Kanit-text */
.Kanit-text {
  font-family: 'Kanit', sans-serif;
  font-weight: 300;
}

/* ถ้าอยากได้น้ำหนักปกติ ใช้ class เพิ่มเติมนี้ */
.Kanit-regular {
  font-weight: 400;
}

/* บังคับ Orbitron เฉพาะเมื่อมี .Orbitron-text */
.Orbitron-text {
  font-family: 'Orbitron', monospace;
}

/* ========== Hero Section ========== */
.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 80px 20px 20px;
}

.hero-content {
  text-align: center;
  max-width: 1200px;
  animation: fade-in-up 1s ease-out;
  z-index: 10;
  width: 100%;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ========== Text Rotator ========== */
.text-rotator {
  position: relative;
  min-height: 100px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.text-set {
  position: absolute;
  width: 100%;
  opacity: 0;
  display: none;
}

.text-set.active {
  opacity: 1;
  display: block;
}

/* ========== Glitch Heading ========== */
/* หมายเหตุ: จะใช้ Orbitron ก็ต่อเมื่อ element นั้น "ไม่มี" .Kanit-text */
.glitch-text {
  font-size: clamp(3.5rem, 1vw, 5rem);
  font-weight: 700;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-shadow: 0 0 20px rgba(255, 94, 0, 0.5);
  overflow: hidden;
}

/* บังคับ Orbitron เมื่อไม่ใช่ Kanit */
.glitch-text:not(.Kanit-text) {
  font-family: 'Orbitron', monospace;
}

/* ถ้าอยากบังคับ Orbitron แม้มี .Kanit-text ให้ใส่ .Orbitron-text เพิ่มใน HTML */
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  animation: glitch-1 0.5s infinite;
  color: #00B2FF;
  z-index: -1;
  text-shadow: -2px 0 #00B2FF;
}

.glitch-text::after {
  animation: glitch-2 0.5s infinite;
  color: #f700ff;
  z-index: -1;
  text-shadow: 2px 0 #f700ff;
}

/* ========== Per-Char Motion ========== */
.char {
  display: inline-block;
  opacity: 0;
  transform: translateY(50px);
  animation: charFlyIn 0.5s ease-out forwards;
}

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

.char.out {
  animation: charFlyOut 0.3s ease-in forwards;
}

@keyframes charFlyOut {
  to {
    opacity: 0;
    transform: translateY(-30px) rotateX(90deg);
  }
}

/* ========== Subtitle ========== */
/* subtitle จะใช้ Kanit ถ้ามี .Kanit-text ใน HTML */
.subtitle {
  font-size: 1.5rem;
  margin: 20px 0;
  opacity: 0.6;            /* แสดงผลสุดท้าย */
  animation: fade-in 1s ease-out 0.5s both;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
  font-weight: 300;        /* บาง */
}

.subtitle.visible {
  animation: subtitleFade 0.8s ease-out 0.5s forwards;
}

/* ========== Animations ========== */
@keyframes subtitleFade {
  to { opacity: 0.6; }
}

@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes glitch-1 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(33% 0 33% 0); transform: translate(-2px); }
  40% { clip-path: inset(66% 0 0 0); transform: translate(2px); }
  60% { clip-path: inset(0 0 66% 0); transform: translate(1px); }
  80% { clip-path: inset(25% 0 50% 0); transform: translate(-1px); }
}

@keyframes glitch-2 {
  0%, 100% { clip-path: inset(0 0 0 0); transform: translate(0); }
  20% { clip-path: inset(50% 0 25% 0); transform: translate(2px); }
  40% { clip-path: inset(0 0 75% 0); transform: translate(-2px); }
  60% { clip-path: inset(75% 0 0 0); transform: translate(-1px); }
  80% { clip-path: inset(40% 0 40% 0); transform: translate(1px); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 0.6; }
}

/* ========== CTA Glitch Button ========== */
.cta-button.glitch-link {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  border: 2px solid #ffffff;
  color: #ffffff;
  font-family: 'Orbitron', monospace;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.cta-button.glitch-link::before,
.cta-button.glitch-link::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  pointer-events: none;
}

.cta-button.glitch-link::before {
  animation: glitch-1 0.5s infinite;
  color: #00B2FF;
  z-index: -1;
  text-shadow: -3px 0 #00B2FF;
}

.cta-button.glitch-link::after {
  animation: glitch-2 0.5s infinite;
  color: #f700ff;
  z-index: -1;
  text-shadow: 3px 0 #f700ff;
}

.cta-button.glitch-link span {
  position: absolute;
  inset: 0;
  border: 2px solid #ffffff;
  pointer-events: none;
}

.cta-button.glitch-link span::before,
.cta-button.glitch-link span::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid transparent;
}

.cta-button.glitch-link span::before {
  border-color: #00B2FF;
  animation: glitch-1 0.5s infinite;
}

.cta-button.glitch-link span::after {
  border-color: #f700ff;
  animation: glitch-2 0.5s infinite;
}

.cta-button.glitch-link:hover {
  transform: translateY(-2px);
}

.cta-secondary:hover {
  background: rgba(0, 0, 0, 0.1);
  color: white;
  transform: translateY(-2px);
  border-color: #ffffff;
}

/* ========== Responsive ========== */
@media (max-width: 768px) {
  .hero-content { padding: 0 20px; }

  .glitch-text {
    font-size: clamp(1.2rem, 4.9vw, 2.4rem);
  }

  .text-rotator { min-height: 150px; }

  .subtitle { font-size: 1.2rem; }

  .cta-container {
    flex-direction: column;
    align-items: center;
  }

  .cta-button {
    width: 100%;
    max-width: 300px;
  }
}
/* ------ Base glitch for any .glitch-link (text links too) ------ */
.glitch-link {
  position: relative;
  display: inline-block;
  text-decoration: none;
  color: inherit;          /* ให้ใช้สีตามบริบท */
}

.glitch-link::before,
.glitch-link::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: inherit;           /* ใช้ฟอนต์เดียวกับตัวหลัก (Kanit ก็จะติดมาด้วย) */
  line-height: inherit;
  pointer-events: none;
  z-index: -1;             /* ซ้อนด้านหลังตัวอักษรหลัก */
}

.glitch-link::before {
  animation: glitch-1 0.5s infinite;
  color: #00B2FF;
  text-shadow: -2px 0 #00B2FF;
}

.glitch-link::after {
  animation: glitch-2 0.5s infinite;
  color: #f700ff;
  text-shadow: 2px 0 #f700ff;
}

/* (ไม่บังคับ แต่ช่วยความรู้สึกการกดลิงก์) */
.glitch-link:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;

}