:root {
  --navy: #06152e;
  --navy-soft: #0d2b56;
  --gold-light: #fff0aa;
  --gold: #e4b84f;
  --gold-deep: #8b5a13;
  --white: #fffdf5;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }

body {
  font-family: "Sarabun", system-ui, sans-serif;
  overflow: hidden;
  background: var(--navy);
  opacity: 0;
  animation: pageFadeIn 1.1s ease forwards;
}

.asalha-landing {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
}

.bg-layer {
  position: absolute;
  inset: 0;
  z-index: -5;
  background: url("../images/bg.webp") center center / cover no-repeat;
  transform: scale(1.012);
  animation: sceneBreath 14s ease-in-out infinite alternate;
}

.scene-overlay {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    linear-gradient(90deg, rgba(2,10,25,.08) 0%, rgba(2,10,25,.24) 35%, rgba(2,10,25,.48) 50%, rgba(2,10,25,.13) 70%, rgba(2,10,25,.08) 100%),
    linear-gradient(180deg, rgba(0,8,24,.08) 0%, rgba(0,8,24,.04) 56%, rgba(0,5,18,.30) 100%),
    radial-gradient(circle at 50% 44%, rgba(6,20,45,.08) 0%, rgba(4,15,35,.36) 43%, rgba(0,6,18,.35) 100%);
}

.sparkles {
  position: absolute;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  opacity: .42;
  background-image:
    radial-gradient(circle, rgba(255,225,128,.95) 0 1px, transparent 2px),
    radial-gradient(circle, rgba(255,255,255,.7) 0 1px, transparent 2px);
  background-size: 190px 190px, 285px 285px;
  background-position: 18px 42px, 104px 132px;
  animation: twinkle 6s ease-in-out infinite alternate;
}

.content-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px;
}

.content-panel {
  width: min(92vw, 940px);
  margin-top: -1vh;
  padding: 24px 42px 30px;
  text-align: center;
  color: var(--white);
}


.pre-title {
  margin: 0 0 2px;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(15px, 1.25vw, 19px);
  color: rgba(255,248,218,.92);
  letter-spacing: .03em;
}

h1 {
  margin: 0;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(54px, 7.1vw, 112px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: .01em;
  color: var(--gold-light);
  background: linear-gradient(180deg, #fff8c8 0%, #f8d873 34%, #d89b2b 68%, #fff0a1 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 4px 4px rgba(44,22,0,.74)) drop-shadow(0 0 12px rgba(255,204,84,.18));
}

.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(80%, 560px);
  margin: 10px auto 8px;
  color: var(--gold);
}
.ornament span { height: 1px; flex: 1; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.ornament b { font-size: 18px; font-weight: 400; text-shadow: 0 0 8px rgba(255,198,63,.55); }

.date,
.main-text,
.sub-text,
.org-label {
  font-family: "Noto Serif Thai", serif;
  text-shadow: 0 2px 7px rgba(0,0,0,.72);
}
.date {
  margin: 0 0 8px;
  font-size: clamp(25px, 2.6vw, 39px);
  color: #ffe59a;
}
.main-text {
  margin: 0;
  font-size: clamp(18px, 1.65vw, 25px);
  line-height: 1.45;
  color: #fff;
}
.sub-text {
  margin: 2px 0 0;
  font-size: clamp(17px, 1.5vw, 23px);
  line-height: 1.42;
  color: rgba(255,255,255,.95);
}
.org-label {
  margin: 8px 0 0;
  font-size: clamp(14px, 1.1vw, 17px);
  color: rgba(255,244,210,.80);
}

.enter-btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 245px;
  margin-top: 20px;
  padding: 14px 38px 15px;
  border-radius: 999px;
  font-family: "Noto Serif Thai", serif;
  font-size: clamp(17px, 1.35vw, 21px);
  font-weight: 600;
  color: #fff4c9;
  text-decoration: none;
  background: linear-gradient(180deg, rgba(190,132,27,.96), rgba(126,77,11,.96));
  border: 2px solid #f2cf72;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.38), 0 10px 30px rgba(0,0,0,.30), 0 0 20px rgba(255,189,51,.16);
  transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
}
.enter-btn::before {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.50), transparent);
  animation: buttonShine 4.8s ease-in-out infinite;
}
.enter-btn:hover { transform: translateY(-3px); filter: brightness(1.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 14px 34px rgba(0,0,0,.34), 0 0 28px rgba(255,189,51,.23); }
.enter-btn:active { transform: translateY(0); }

@keyframes pageFadeIn { to { opacity: 1; } }
@keyframes sceneBreath { from { transform: scale(1.012); } to { transform: scale(1.027); } }
@keyframes twinkle { from { opacity: .25; transform: translateY(0); } to { opacity: .5; transform: translateY(-5px); } }
@keyframes buttonShine { 0%,55% { left:-120%; } 100% { left:170%; } }

@media (max-height: 760px) and (min-width: 901px) {
  .asalha-landing { min-height: 560px; }
  .content-panel { transform: scale(.88); width: min(95vw, 940px); }
}

@media (max-width: 900px) {
  .asalha-landing { min-height: 620px; }
  .bg-layer { background-position: 46% center; }
  .scene-overlay { background: linear-gradient(180deg, rgba(0,8,24,.18), rgba(0,8,24,.32)); }
  .content-wrap { padding: 22px; align-items: center; }
  .content-panel { width: min(94vw, 690px); padding: 24px 24px 28px; }
  h1 { font-size: clamp(50px, 10vw, 78px); }
}

@media (max-width: 600px) {
  body { overflow: hidden; }
  .asalha-landing { min-height: 560px; }
  .bg-layer { background-position: 43% center; }
  .content-wrap { padding: 14px; }
  .content-panel { width: 100%; margin-top: 0; padding: 20px 14px 24px; }
  h1 { font-size: clamp(44px, 15vw, 66px); line-height: 1.08; }
  .ornament { width: 90%; margin: 7px auto 6px; }
  .date { margin-bottom: 7px; }
  .main-text, .sub-text { line-height: 1.38; }
  .org-label { margin-top: 7px; }
  .enter-btn { min-width: 210px; margin-top: 16px; padding: 12px 28px 13px; }
}

@media (max-height: 680px) and (max-width: 600px) {
  .content-panel { transform: scale(.89); width: 108%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}