/* =======================================================================
   PREMIUM LAYER — ชั้นตกแต่งเพิ่มความ "พรีเมียม" (ไม่แก้ของเดิม เพิ่มทับอย่างเดียว)
   แรงบันดาลใจ: 23rd.dev (glow / shader pulse) · bencho.dev (micro-interaction)
                uiarc.dev (numbers that move) · beautifului.dev (glass surface)
   ทุกการเคลื่อนไหวปิดอัตโนมัติเมื่อผู้ใช้ตั้ง prefers-reduced-motion: reduce
   ======================================================================= */

/* ---------- 0. ฐาน ---------- */
.eg-num { font-variant-numeric: tabular-nums; }

/* ---------- 1. แถบความคืบหน้าการเลื่อน (hairline gradient) ---------- */
.eg-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 200;
  transform-origin: 0 50%;
  transform: scaleX(var(--eg-p, 0));
  background: linear-gradient(90deg, var(--sage) 0%, var(--sage-light) 25%, var(--terra) 62%, var(--dusk) 100%);
  box-shadow: 0 1px 10px rgba(196, 113, 75, 0.35);
  pointer-events: none;
}

/* ---------- 2. เนวิเกชันแบบกระจก ---------- */
.sticky-nav {
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}
.sticky-nav.eg-scrolled {
  background: rgba(253, 250, 246, 0.94);
  border-bottom-color: rgba(100, 80, 60, 0.14);
  box-shadow: 0 10px 30px -16px rgba(44, 40, 36, 0.5);
}
.nav-links a {
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--terra), var(--dusk));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-links a:hover::after,
.nav-links a:focus-visible::after {
  transform: scaleX(1);
}

/* ---------- 3. ไมโครอินเทอแรกชัน: ยก/กด (bencho) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .map-legend-row,
  .map-near-row,
  .map-near-pick,
  .campus-chip,
  .map-card-go,
  .map-fact,
  .btn-primary,
  .btn-ghost,
  .filter-btn {
    transition: transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1),
      box-shadow 0.24s ease, background 0.24s ease, border-color 0.24s ease, color 0.24s ease;
  }
  .map-legend-row:active,
  .map-near-row:active,
  .map-near-pick:active,
  .campus-chip:active,
  .map-card-go:active,
  .btn-primary:active,
  .btn-ghost:active,
  .filter-btn:active {
    transform: scale(0.97);
  }
  .map-near-row:hover {
    transform: translateX(3px);
  }
  .map-legend-row:hover {
    transform: translateX(2px);
  }
  .btn-primary:hover,
  .btn-ghost:hover {
    transform: translateY(-1.5px);
  }
  .btn-primary:hover {
    box-shadow: 0 12px 28px -12px rgba(196, 113, 75, 0.75);
  }
  .btn-ghost:hover {
    box-shadow: 0 10px 24px -14px rgba(44, 40, 36, 0.5);
  }
  /* แสงกวาดผ่านปุ่มหลัก */
  .btn-primary {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }
  .btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.38) 50%, transparent 66%);
    transform: translateX(-130%);
    transition: transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
  }
  .btn-primary:hover::after {
    transform: translateX(130%);
  }
}

/* ---------- 4. พื้นผิวการ์ดระดับพรีเมียม (beautifului) ---------- */
.map-card {
  border: 1px solid transparent;
  border-radius: 16px;
  background:
    linear-gradient(rgba(253, 250, 246, 0.96), rgba(253, 250, 246, 0.96)) padding-box,
    linear-gradient(140deg, rgba(255, 255, 255, 0.95), rgba(196, 113, 75, 0.35) 46%, rgba(125, 155, 118, 0.4) 100%) border-box;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    0 18px 44px -26px rgba(44, 40, 36, 0.55),
    0 4px 14px -9px rgba(44, 40, 36, 0.28);
  backdrop-filter: blur(10px) saturate(1.15);
  -webkit-backdrop-filter: blur(10px) saturate(1.15);
}

@media (prefers-reduced-motion: no-preference) {
  .map-card:not([hidden]) {
    animation: egCardIn 0.44s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .map-card:not([hidden]) > * {
    animation: egRowIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .map-card:not([hidden]) > *:nth-child(2) { animation-delay: 0.05s; }
  .map-card:not([hidden]) > *:nth-child(3) { animation-delay: 0.09s; }
  .map-card:not([hidden]) > *:nth-child(4) { animation-delay: 0.13s; }
  .map-card:not([hidden]) > *:nth-child(5) { animation-delay: 0.17s; }
  .map-card:not([hidden]) > *:nth-child(6) { animation-delay: 0.21s; }
  .map-card:not([hidden]) > *:nth-child(n + 7) { animation-delay: 0.25s; }
}

@keyframes egCardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.988); }
  to { opacity: 1; transform: none; }
}
@keyframes egRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 5. หมุดจุฬาฯ หายใจ (23rd · Live Orb) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .chula-ring {
    transform-box: fill-box;
    transform-origin: center;
    animation: egBreathe 3.6s ease-in-out infinite;
  }
}
@keyframes egBreathe {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.42); opacity: 0.08; }
}

/* ---------- 6. ไฟส่องตามเคอร์เซอร์บนแผ่นแผนที่ ---------- */
.map-paper::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.45s ease;
  background: radial-gradient(440px circle at var(--eg-mx, 50%) var(--eg-my, 50%),
    rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 62%);
  mix-blend-mode: soft-light;
}
.map-section.eg-glint .map-paper::after {
  opacity: 1;
}

/* ---------- 6b. หมุดที่เลือกอยู่: วงแหวนเต้นเป็นจังหวะ ---------- */
.pin-halo {
  transform-box: fill-box;
  transform-origin: center;
}
@media (prefers-reduced-motion: no-preference) {
  .map-pin.on .pin-halo {
    animation: egHalo 2.6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  }
  .map-pin:hover .pin-dot {
    filter: drop-shadow(0 0 5px rgba(196, 113, 75, 0.55));
  }
}
@keyframes egHalo {
  0% { transform: scale(1); opacity: 0.34; }
  72%, 100% { transform: scale(2.15); opacity: 0; }
}

/* ---------- 7. เก็บงานช่วงท้ายหน้า (hero depth + เงานุ่ม) ---------- */
.hero-content {
  position: relative;
  z-index: 2;
  will-change: transform, opacity;
}
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 78% at 50% -6%, rgba(255, 245, 235, 0.09), rgba(0, 0, 0, 0) 58%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 62%, rgba(20, 16, 12, 0.34) 100%);
}
.hero-overlay,
.hero-breath-bg {
  /* อยู่ใต้เลเยอร์ใหม่เสมอ */
  z-index: 0;
}

/* ---------- 8. โฟกัสที่ดูตั้งใจ ---------- */
:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ปุ่มปิดการ์ดแผนที่ต้องกด/แตะได้เสมอ — egRowIn แตะ transform ของ .map-card > * ทุกตัว
   ทำให้ลูกที่อยู่หลังปุ่มใน DOM สร้าง stacking context วาดทับ (tester รอบ 5: แตะกลางปุ่มไม่ปิดที่ 390px) */
.map-card-close { z-index: 3; }