/* =========================================================
   intro.css — Fullscreen (No black bars) + Main image NO CROP
   Technique:
   - Back layer: same image cover + blur (fills screen, can crop)
   - Front layer: main image contain (no crop, always full image)
   - Text/button positioned by --horse-head-y
   ========================================================= */

/* ================= Reset ================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #000;
}

/* ================= Variables (tune only here) ================= */
:root{
  --horse-head-y: 27%;     /* ✅ ปรับจุดเดียว: ตำแหน่งหัวม้า (เลื่อนทั้งหน้า) */
  --overlay-dim: 0.35;     /* ความทึบชั้นดำทับ (0-1) */

  --title-color: #8AA3B8;

  --btn-bg: #007bff;
  --btn-hover: #0056c7;

  --shadow: 0 2px 10px rgba(0,0,0,.65);
}

/* ================= Container ================= */
.overlay{
  position: relative;
  min-height: 100vh;
  min-height: 100svh; /* กัน address bar มือถือทำให้ vh แกว่ง */
  overflow: hidden;

  color: #fff;
  text-align: center;
}

/* ================= Media Layers ================= */
.hero-media{
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* ✅ ภาพเบลอ: เติมเต็มจอแบบไม่มีขอบ (ยอมครอปได้ เพราะเป็นพื้นหลัง) */
.hero-blur{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: blur(18px) saturate(1.05);
  transform: scale(1.08);   /* กันขอบเบลอ */
  opacity: .95;
}

/* ✅ ชั้นดำทับให้ตัวหนังสืออ่านง่าย */
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,var(--overlay-dim));
}

/* ✅ ภาพหลัก: เห็นครบ ไม่ครอป (คือพระเอก) */
.hero-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;       /* ✅ ไม่ครอป */
  object-position: center;
}

/* ================= Text & Button over media ================= */
.hero-text, .hero-action{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;

  width: min(1100px, 92%);
  padding: 0 10px;
}

.hero-text{
  top: clamp(
        20px,                         /* ✅ กันไม่ให้หลุดบน */
        calc(var(--horse-head-y) - 12%), /* ✅ สูงขึ้นจากเดิม */
        32vh
      );
}

.hero-text h1{
  font-size: clamp(1.25rem, 3.2vw, 3rem);
  line-height: 1.15;
  font-weight: 650;
  letter-spacing: .6px;
  color: var(--title-color);
  text-shadow: var(--shadow);

  /* ถ้าบราวเซอร์รองรับ จะช่วยจัดบรรทัดให้อ่านง่ายขึ้น */
  text-wrap: balance;
}

.hero-text p{
  font-size: clamp(.9rem, 1.4vw, 1.2rem);
  line-height: 1.55;
  margin-top: clamp(6px, 1vw, 12px);
  opacity: .92;
  text-shadow: var(--shadow);
}

/* ปุ่มบริเวณขาม้า + กันหลุดจอ */
.hero-action{
  top: clamp(58vh, calc(var(--horse-head-y) + 46%), 86vh);
  width: min(92vw, 520px);
  padding-bottom: 16px;
}

/* ================= Button ================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  max-width: 100%;
  white-space: nowrap;

  font-size: clamp(.95rem, 1.2vw, 1.2rem);
  padding: clamp(10px, 1.2vw, 14px)
           clamp(18px, 2.5vw, 35px);

  background: var(--btn-bg);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;

  box-shadow: 0 8px 20px rgba(0,0,0,.25);
  transition: transform .15s ease, background .25s ease, box-shadow .25s ease;
}

.btn:hover{
  background: var(--btn-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.28);
}

.btn:active{ transform: translateY(0); }

.btn:focus-visible{
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 3px;
}

/* ================= Small devices safety ================= */
@media (max-width: 360px){
  :root{ --horse-head-y: 26%; }
  .btn{ white-space: normal; text-align: center; }
}

/* ================= Short-height landscape phones ================= */
@media (max-height: 520px){
  .hero-text{
    top: clamp(10px, calc(var(--horse-head-y) - 9%), 26vh);
  }
  .hero-action{
    top: clamp(52vh, calc(var(--horse-head-y) + 42%), 82vh);
  }
}

/* ================= Reduced motion ================= */
@media (prefers-reduced-motion: reduce){
  .btn{ transition: none; }
}
/*--Add fade--*/
/* ================= Opening Animations ================= */

/* Fade ทั้งหน้า */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ภาพค่อย ๆ zoom-in เบา ๆ */
@keyframes softZoom {
  from { transform: scale(1.12); }
  to   { transform: scale(1.08); }
}

/* ข้อความลอยขึ้นนิดเดียว */
@keyframes riseFade {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}
.overlay{
  animation: fadeIn 0.8s ease-out both;
}
.hero-blur{
  animation: softZoom 1.6s ease-out both;
}
.hero-text{
  animation: riseFade 0.9s ease-out both;
  animation-delay: 0.35s;
}
.hero-action{
  animation: riseFade 0.9s ease-out both;
  animation-delay: 0.6s;
}
.animation: {fadeIn 1.2s ease-out;}