:root {
  --gold-1: #fff8cf;
  --gold-2: #f1d06b;
  --gold-3: #c4932e;
  --brown-1: #6b3e12;
  --brown-2: #3b1e08;
  --white: #ffffff;
}

* { box-sizing: border-box; }

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  font-family: "Sarabun", system-ui, sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  background: #b98628;
  opacity: 0;
  animation: pageFadeIn 1.05s ease forwards;
}

.vesak-landing {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

.bg-layer {
  position: absolute;
  inset: 0;
  background-image: url("../images/bg.webp");
  background-size: cover;
  background-position: center center;
  transform: scale(1.015);
  z-index: -5;
}

.gold-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 27%, rgba(255,255,255,.03), rgba(255,255,255,0) 34%),
    linear-gradient(to bottom, rgba(70,34,5,0) 0%, rgba(70,34,5,.04) 42%, rgba(72,35,5,.42) 100%),
    radial-gradient(circle at center, rgba(255,255,255,0) 47%, rgba(52,24,4,.22) 100%);
  z-index: -4;
}

.sparkles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255,247,202,.86) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.42) 0 1px, transparent 2px);
  background-size: 180px 180px, 260px 260px;
  background-position: 20px 40px, 90px 120px;
  opacity: .22;
  animation: twinkle 7s ease-in-out infinite alternate;
  z-index: -3;
}

.content-wrap {
  position: relative;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
}

.text-panel {
  position: relative;
  width: min(96vw, 1180px);
  margin-bottom: clamp(18px, 2.4vh, 34px);
  text-align: center;
  z-index: 5;
  animation: textRise .9s ease both .16s;
}

.pre-title,
.main-title,
.date,
.subtitle,
.blessing-main,
.blessing-sub,
.blessing-org {
  font-family: "Noto Serif Thai", serif;
  text-shadow:
    0 3px 12px rgba(62,30,5,.55),
    0 0 24px rgba(255,244,190,.20);
}

.pre-title {
  margin: 0 0 -4px;
  color: rgba(255, 247, 197, .95);
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 700;
  letter-spacing: .04em;
}

.main-title {
  margin: 0;
  font-size: clamp(66px, 8vw, 128px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -0.045em;
  color: var(--gold-1);
  text-shadow:
    0 2px 0 rgba(115,67,16,.56),
    0 0 18px rgba(255,244,173,.62),
    0 8px 24px rgba(58,29,5,.42);
}

.title-divider {
  width: min(520px, 68vw);
  height: 2px;
  margin: clamp(8px, 1.2vw, 14px) auto clamp(12px, 1.5vw, 18px);
  background: linear-gradient(90deg, transparent, rgba(255,246,188,.95), transparent);
  box-shadow: 0 0 14px rgba(255,238,155,.46);
}

.date {
  margin: 0 0 4px;
  color: #fff2b0;
  font-size: clamp(24px, 3vw, 42px);
  font-weight: 800;
  line-height: 1.05;
}

.subtitle {
  margin: 0 0 11px;
  color: #fff;
  font-size: clamp(20px, 2.1vw, 31px);
  line-height: 1.18;
  font-weight: 700;
}

.blessing-main {
  margin: 0 auto 2px;
  max-width: 1400px;
  color: #fff;
  font-size: clamp(18px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.18;
}

.blessing-sub {
  margin: 0 0 11px;
  color: #fff;
  font-size: clamp(22px, 2.55vw, 38px);
  line-height: 1.2;
  font-weight: 800;
}

.blessing-org {
  margin: 0;
  color: rgba(255,255,255,.96);
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 18px;
  line-height: 1.32;
  font-weight: 600;
}

/* ปุ่มแบบละมุน: ไม่มีกรอบแข็ง */
.enter-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 8px 18px 15px;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(19px, 1.6vw, 25px);
  font-weight: 800;
  color: #fff5bd;
  letter-spacing: .035em;
  text-decoration: none;
  background: transparent;
  border: 0;
  text-shadow:
    0 2px 8px rgba(48,22,3,.76),
    0 0 16px rgba(255,235,145,.58),
    0 0 28px rgba(255,235,145,.25);
  transition:
    transform .22s ease,
    letter-spacing .22s ease,
    color .22s ease,
    text-shadow .22s ease;
}

.enter-btn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: min(220px, 86%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,244,184,.95), transparent);
  box-shadow: 0 0 12px rgba(255,236,155,.55);
  transition: width .22s ease, opacity .22s ease;
}

.enter-btn::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(120px, 54%);
  height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,244,184,.58), transparent);
  opacity: .75;
  transition: width .22s ease, opacity .22s ease;
}

.enter-btn:hover {
  transform: translateY(-2px);
  letter-spacing: .09em;
  color: #fff9d6;
  text-shadow:
    0 2px 8px rgba(48,22,3,.78),
    0 0 20px rgba(255,239,156,.72),
    0 0 38px rgba(255,239,156,.38);
}

.enter-btn:hover::after {
  width: min(270px, 100%);
}

.enter-btn:hover::before {
  width: min(160px, 70%);
}

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

.auto-note {
  margin: 9px 0 0;
  font-family: "Sarabun", system-ui, sans-serif;
  font-size: 13px;
  color: rgba(255,255,255,.86);
  text-shadow: 0 2px 8px rgba(74,36,8,.48);
}

@keyframes pageFadeIn {
  to { opacity: 1; }
}

@keyframes textRise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes twinkle {
  from { opacity: .16; transform: translateY(0); }
  to { opacity: .32; transform: translateY(-6px); }
}

/* Notebook / จอเตี้ย */
@media (max-height: 760px) and (min-width: 901px) {
  .vesak-landing {
    min-height: 100svh;
  }

  .content-wrap {
    min-height: 100svh;
    align-items: flex-end;
    padding-top: 18px;
    padding-bottom: 14px;
  }

  .text-panel {
    margin-bottom: 0;
    transform: scale(.78);
    transform-origin: bottom center;
  }

  .pre-title {
    font-size: clamp(16px, 1.6vw, 22px);
  }

  .main-title {
    font-size: clamp(50px, 6.2vw, 88px);
  }

  .title-divider {
    margin-top: 6px;
    margin-bottom: 9px;
  }

  .date {
    font-size: clamp(22px, 2.45vw, 34px);
  }

  .subtitle,
  .blessing-main,
  .blessing-sub {
    margin-bottom: 5px;
  }

  .blessing-main {
    font-size: clamp(16px, 1.65vw, 24px);
  }

  .blessing-org {
    font-size: 16px;
  }

  .enter-btn {
    margin-top: 8px;
    font-size: clamp(17px, 1.35vw, 21px);
  }
}

/* Tablet แนวนอน */
@media (max-width: 1180px) and (min-width: 769px) {
  .bg-layer {
    background-position: center top;
  }

  .text-panel {
    width: min(96vw, 1000px);
    margin-bottom: 8vh;
  }

  .main-title {
    font-size: clamp(56px, 8vw, 92px);
  }

  .date {
    font-size: clamp(28px, 4vw, 42px);
  }

  .subtitle {
    font-size: clamp(18px, 2.5vw, 25px);
  }

  .blessing-main {
    font-size: clamp(19px, 2.8vw, 30px);
  }

  .blessing-sub {
    font-size: clamp(18px, 2.6vw, 28px);
  }
}

/* Tablet แนวตั้ง */
@media (max-width: 768px) {
  .vesak-landing {
    height: 100svh;
    min-height: 100svh;
  }

  .bg-layer {
    background-size: auto 100%;
    background-position: center top;
  }

  .content-wrap {
    padding: 18px;
    align-items: flex-end;
  }

  .text-panel {
    width: 96vw;
    margin-bottom: 9vh;
    transform-origin: bottom center;
  }

  .pre-title {
    font-size: clamp(15px, 3.2vw, 20px);
  }

  .main-title {
    font-size: clamp(46px, 11vw, 76px);
  }

  .date {
    font-size: clamp(24px, 5.8vw, 36px);
  }

  .subtitle {
    font-size: clamp(16px, 3.8vw, 22px);
  }

  .blessing-main {
    font-size: clamp(18px, 4.5vw, 27px);
  }

  .blessing-sub {
    font-size: clamp(17px, 4.2vw, 25px);
  }

  .blessing-org {
    font-size: clamp(12px, 2.7vw, 15px);
  }

  .enter-btn {
    margin-top: 12px;
    padding-bottom: 14px;
    font-size: 18px;
  }
}

/* Mobile */
@media (max-width: 560px) {
  .content-wrap {
    padding: 16px;
  }

  .bg-layer {
    background-size: auto 100%;
    background-position: center top;
  }

  .text-panel {
    width: 98vw;
    margin-bottom: 8vh;
    transform: scale(.92);
    transform-origin: bottom center;
  }

  .pre-title {
    margin-bottom: -1px;
  }

  .main-title {
    font-size: clamp(39px, 13vw, 58px);
    letter-spacing: -0.055em;
  }

  .title-divider {
    width: 72vw;
    margin-top: 7px;
    margin-bottom: 10px;
  }

  .date {
    font-size: clamp(22px, 7vw, 32px);
  }

  .subtitle {
    margin-bottom: 7px;
    font-size: clamp(14px, 4vw, 18px);
  }

  .blessing-main {
    font-size: clamp(16px, 4.9vw, 22px);
    line-height: 1.24;
  }

  .blessing-sub {
    margin-bottom: 7px;
    font-size: clamp(15px, 4.5vw, 21px);
  }

  .enter-btn {
    margin-top: 9px;
    font-size: 16px;
  }

  .auto-note {
    font-size: 12px;
  }
}

/* Mobile จอเตี้ยมาก */
@media (max-width: 560px) and (max-height: 720px) {
  .text-panel {
    margin-bottom: 2vh;
    transform: scale(.76);
  }

  .enter-btn {
    margin-top: 7px;
  }
}

/* Mobile จอแคบมาก */
@media (max-width: 390px) {
  .text-panel {
    transform: scale(.82);
    margin-bottom: 2vh;
  }
}

/* Mobile Landscape / มือถือแนวนอนจอเตี้ย */
@media (max-height: 520px) and (orientation: landscape) {
  body {
    overflow-y: auto;
  }

  .vesak-landing,
  .content-wrap {
    min-height: 100svh;
  }

  .bg-layer {
    background-size: cover;
    background-position: center center;
  }

  .content-wrap {
    align-items: flex-end;
    padding: 8px 14px 8px;
  }

  .text-panel {
    width: min(92vw, 760px);
    margin-bottom: 2px;
    transform: scale(.46);
    transform-origin: bottom center;
  }

  .pre-title {
    font-size: 18px;
    margin-bottom: -2px;
  }

  .main-title {
    font-size: 64px;
    line-height: .9;
  }

  .title-divider {
    width: min(360px, 70vw);
    margin-top: 4px;
    margin-bottom: 6px;
  }

  .date {
    font-size: 24px;
    margin-bottom: 2px;
  }

  .subtitle {
    font-size: 15px;
    margin-bottom: 4px;
  }

  .blessing-main {
    font-size: 18px;
    line-height: 1.14;
    margin-bottom: 2px;
  }

  .blessing-sub {
    font-size: 16px;
    line-height: 1.14;
    margin-bottom: 4px;
  }

  .blessing-org {
    font-size: 13px;
  }

  .enter-btn {
    margin-top: 4px;
    padding: 5px 14px 10px;
    font-size: 15px;
  }

  .enter-btn::after {
    width: min(170px, 82%);
  }

  .enter-btn::before {
    width: min(90px, 46%);
  }

  .auto-note {
    display: none;
  }
}


/* Desktop / Notebook จอเตี้ยมาก หรือ Browser ถูกย่อแนวตั้ง */
@media (max-height: 620px) and (min-width: 901px) {
  .content-wrap {
    padding-top: 12px;
    padding-bottom: 10px;
  }

  .text-panel {
    transform: scale(.68);
    margin-bottom: -6px;
  }

  .main-title {
    font-size: clamp(44px, 5.2vw, 72px);
  }

  .date {
    font-size: clamp(20px, 2.1vw, 30px);
  }

  .blessing-main {
    font-size: clamp(15px, 1.45vw, 21px);
  }

  .enter-btn {
    margin-top: 6px;
    padding-bottom: 12px;
  }
}

/* Tablet / Mobile แนวนอนที่สูงน้อย ให้ลดสเกลโดยไม่ตัดข้อความ */
@media (max-height: 520px) and (orientation: landscape) {
  body {
    overflow-y: auto;
  }

  .vesak-landing,
  .content-wrap {
    min-height: 100svh;
  }
}

/* Ultra short landscape fine tune เช่น iPhone แนวนอนใน DevTools */
@media (max-height: 430px) and (orientation: landscape) {
  .content-wrap {
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .text-panel {
    transform: scale(.40);
    margin-bottom: -6px;
  }

  .main-title {
    font-size: 58px;
  }

  .date {
    font-size: 22px;
  }

  .blessing-main {
    font-size: 16px;
  }

  .enter-btn {
    font-size: 14px;
    margin-top: 3px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}