/* รีเซ็ตพื้นฐาน */
html, body { height: 100%; margin: 0; }
body {
  font: 16px/1.5 system-ui, sans-serif;
  background-image: url("sky.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;   /* มือถือบางรุ่นไม่รองรับ ถ้าหน่วงให้เอาออก */
  background-color: #111;
}

.hero{
  position: relative;
  overflow: hidden;                 /* กันขอบตอนเลื่อน */
  min-height:65vh;
  display:flex; justify-content:center; align-items:flex-start;
  padding: clamp(80px, 60vh, 240px) 24px 24px;
  background: none;                 /* ย้ายรูปไปไว้ใน ::before */

}

/* เลเยอร์ภาพพื้นหลัง */
.hero::before{
  content:"";
  position:absolute; inset:-3rem;   /* ขยายขอบกันเห็นรอยตอนเลื่อน */
  background: url("sky80.png") center/cover no-repeat;
  transform: translateY(0);
  will-change: transform;
  z-index: -1;                      /* อยู่หลังเนื้อหา */
  animation: floatLayer 2s ease-in-out infinite alternate;
}

/* ลอยด้วย transform (เนียนกว่า) */
@keyframes floatLayer{
  from { transform: translateY( -170px) scale(1.05); }
  to   { transform: translateY( -150px) scale(1.05); }
}

@media (prefers-reduced-motion: reduce){
  .hero::before{ animation: none; }
}


/* กล่องฟอร์ม */
.card {
  position:absolute;
  left:50%; top:110%;
  transform:translate(-50%,-130%);
  width: 340px;
  background: #fff;               /* พื้นขาว */
  border: 1px solid #000;         /* ขอบดำ */
  border-radius: 12px;
  padding: 20px;
  text-align: left;
}

.card h1 { margin: 0 0 14px; font-size: 18px; color: #111; }

.field { margin-bottom: 14px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #111;
}

/* ช่องกรอก: ขอบดำ พื้นขาว */
.input {
  width: 90%;
  padding: 12px 14px;
  border: 1.5px solid #000;       /* ขอบสีดำ */
  background: #fff;               /* พื้นขาว */
  color: #000;
  border-radius: 8px;
  outline: none;
}
.input::placeholder { color: #6b7280; }
.input:focus-visible {
  outline: 3px solid #000;        /* แหวนโฟกัสชัด ๆ */
  outline-offset: 2px;
}

/* ปุ่มแสดง/ซ่อนรหัสผ่าน ซ้อนในช่องด้านขวา */
.pw-wrap { position: relative; } .toggle { position: absolute;
  right: 8px; top: 50%; transform: translateY(0%);
  padding: 6px 10px; border: 1px solid #000;
  background: #fff;
  color: #000;
  border-radius: 6px;
  cursor: pointer;
} .toggle:focus-visible 
{ 
  outline: 3px solid #000; outline-offset: 2px; 
}

/* ปุ่มส่งฟอร์ม */
.btn {
  width: 100%;
  margin-top: 6px;
  padding: 12px 14px;
  border: 1.5px solid #000;
  background: #fff; color: #000;
  border-radius: 8px;
  cursor: pointer; font-weight: 600;
}
.btn:focus-visible {
  outline: 3px solid #000; outline-offset: 2px;
}