/* ===== About page only ===== */

/* สีหลัก (อิงตัวแปรเดิม ถ้าไม่มีจะกำหนดสำรอง) */
:root{
  --brand: #B65B3A;
  --brand-2:#9E4D31;
}

/* ฐานหน้า */
body.about-page{
  margin:0;
  background:#000;
  color:#fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ----- HERO (เต็มจอ) ----- */
.about-hero{
  position: relative;
  min-height: 100svh;          /* รองรับมือถือ */
  display: grid;
  place-items: center;
  padding:
    calc(20px + env(safe-area-inset-top,0px))
    max(16px, env(safe-area-inset-right,0px))
    calc(36px + env(safe-area-inset-bottom,0px))
    max(16px, env(safe-area-inset-left,0px));
  overflow: hidden;
  isolation: isolate;          /* ให้ overlay แยกเลเยอร์ */
}

/* พื้นหลังภาพ: ใช้เลเยอร์ fixed (ปลอดภัยกว่า background-attachment: fixed) */
.about-hero::before{
  content:"";
  position: fixed;
  inset:0;
  background: url("about.jpg") center / cover no-repeat;
  transform: translateZ(0) scale(1.06);
  will-change: transform;
  z-index:-2;
  animation: kb 36s ease-in-out infinite alternate; /* Ken-Burns ช้า ๆ */
  filter: saturate(1.06) contrast(1.06);
}

/* วิกเน็ตและไล่โทนเพื่อให้อ่านง่าย */
.about-hero::after{
  content:"";
  position: fixed;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(120% 100% at 50% 40%, rgba(0,0,0,0) 35%, rgba(0,0,0,.45) 90%),
    linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));
}

/* กล่องข้อความแบบ glass */
.about-box{
  position: relative;
  width: min(1100px, 94%);
  padding: clamp(32px, 4vw, 64px);
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 18px 44px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* แถบสะท้อนวาวบนกล่อง */
.about-box::before{
  content:"";
  position:absolute; left:-10%; right:-10%; top:-60px; height:120px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  filter: blur(8px);
  pointer-events:none;
}

/* หัวเรื่องและย่อหน้า */
.about-box h1{
  margin:0 0 14px;
  font: 800 clamp(2rem, 4.5vw, 3rem)/1.1 Arial, sans-serif;
  letter-spacing:.4px;
  text-shadow: 0 1px 0 #000, 0 18px 42px rgba(0,0,0,.35);
}
.about-box h2{
  margin: 22px 0 10px;
  font: 700 1.2rem/1.25 Arial, sans-serif;
  color: #ffd2c3;             /* โทนวาวอุ่น ๆ */
}
.about-box p{
  margin:0 0 12px;
  color:#eaeaea;
  text-wrap: pretty;
}

/* เอฟเฟ็กต์ Reveal ทีละช่วง */
.reveal{ opacity:0; transform: translateY(10px); animation:fadeUp .7s ease forwards; }
.reveal.d1{ animation-delay:.10s }
.reveal.d2{ animation-delay:.20s }
.reveal.d3{ animation-delay:.30s }
.reveal.d4{ animation-delay:.40s }
.reveal.d5{ animation-delay:.50s }

/* ปุ่มกลับหน้าแรก */
.home-btn{
  position: fixed;
  left:50%; bottom: max(18px, calc(10px + env(safe-area-inset-bottom,0px)));
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap:10px;
  padding: 10px 16px;
  border-radius:999px;
  font-weight:700; font-size:.95rem;
  text-decoration:none;
  color:#fff;
  opacity:.78;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border:1px solid rgba(255,255,255,.25);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  animation: blink 2.6s ease-in-out infinite;
}
.home-btn:hover{ opacity:1; }

/* จุดไฟวิบวับเล็ก ๆ */
.home-btn .dot{
  width:8px; height:8px; border-radius:50%;
  background:#fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.45);
  animation: pulse 1.6s ease-out infinite;
}

/* เคนเบิร์นส์ภาพพื้นหลัง */
@keyframes kb{
  0%   { transform: translateZ(0) scale(1.06); }
  100% { transform: translateZ(0) scale(1.12); }
}

/* Fade-up สำหรับข้อความ */
@keyframes fadeUp{
  from{ opacity:0; transform: translateY(12px) }
  to  { opacity:1; transform: none }
}

/* วาบ ๆ เบา ๆ ที่ปุ่ม */
@keyframes blink{
  0%, 100%{ filter: brightness(1); }
  50%     { filter: brightness(1.18); }
}

/* วงแหวนเต้นจังหวะ */
@keyframes pulse{
  0%  { box-shadow: 0 0 0 0 rgba(255,255,255,.45); }
  70% { box-shadow: 0 0 0 12px rgba(255,255,255,0); }
  100%{ box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Mobile tweaks */
@media (max-width: 680px){
  .about-box{ padding: 28px 22px; }
  .home-btn{ font-size:.9rem; padding: 9px 14px; }
}

/* ลดแอนิเมชันเมื่อผู้ใช้ตั้งค่าลดการเคลื่อนไหว */
@media (prefers-reduced-motion: reduce){
  .about-hero::before,
  .reveal,
  .home-btn, .home-btn .dot{
    animation: none !important;
  }
}