/*
 * ฉากเลื่อนของหน้า Games: Pha Klai และ Obby Minigame
 * ทุกอย่างผูกกับ --p (0 → 1) จาก assets/scrub.js
 * ช่วงของแต่ละชิ้น: clamp(0, calc((var(--p) - เริ่ม) / (จบ - เริ่ม)), 1)
 */
.pk-scene,
.ob-scene {
  position: relative;
  height: 430svh;
  --p: 0;
}
.pk-stage,
.ob-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
}

/* ---------------------------------------------------------------
   Pha Klai
   --------------------------------------------------------------- */
.pk-scene {
  --rise: clamp(0, calc((var(--p, 0) - 0.18) / 0.4), 1);
  --rise-e: calc(var(--rise) * var(--rise) * (3 - 2 * var(--rise)));
  background: #22313e;
}
.pk-stage {
  background: linear-gradient(#1b7dff, #3fa2ff 30%, #7cc8ff 60%, #bfe7ff 84%, #f3fbff);
  background-size: 100% 240%;
  background-position: center calc(var(--rise-e) * 100%);
}

/* ข้อความสองชุดสลับกัน: a game by TeeLaser แล้วตามด้วยคำอธิบาย */
.pk-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 24svh;
  z-index: 6;
  margin: 0 auto;
  padding: 0 6%;
  text-align: center;
  color: #fff;
  will-change: transform, opacity;
}
.pk-copy-1 {
  --in: clamp(0, calc((var(--p, 0) - 0.03) / 0.12), 1);
  --out: clamp(0, calc((var(--p, 0) - 0.27) / 0.08), 1);
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc((1 - var(--in)) * 7svh - var(--out) * 6svh));
}
.pk-copy-1 small {
  display: block;
  margin-bottom: 14px;
  font:
    italic 600 clamp(20px, 2.6vw, 34px) / 1.3 "Anuphan",
    sans-serif;
  letter-spacing: 0.02em;
  color: #eaf6ff;
}
.pk-copy-1 strong {
  display: block;
  font:
    italic 900 clamp(56px, 11vw, 168px) / 0.95 "Archivo Black",
    sans-serif;
  letter-spacing: -0.07em;
  text-shadow: 0 6px 0 #0a3a8a55;
}
.pk-copy-2 {
  --in: clamp(0, calc((var(--p, 0) - 0.33) / 0.12), 1);
  --out: clamp(0, calc((var(--p, 0) - 0.58) / 0.08), 1);
  max-width: 880px;
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc((1 - var(--in)) * 7svh - var(--out) * 6svh));
  font:
    700 clamp(22px, 3vw, 42px) / 1.5 "Anuphan",
    sans-serif;
  text-shadow: 0 2px 14px #0a3a8a88;
}

/* โลโก้ใหญ่กลางฉาก อยู่หลังภูเขาและตึก */
.pk-biglogo {
  --in: clamp(0, calc((var(--p, 0) - 0.62) / 0.3), 1);
  --in-e: calc(1 - (1 - var(--in)) * (1 - var(--in)) * (1 - var(--in)));
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 31svh;
  width: min(72vw, 54svh);
  height: auto;
  opacity: var(--in-e);
  transform: translate(-50%, calc((1 - var(--in-e)) * 34svh)) scale(calc(0.78 + var(--in-e) * 0.22));
  filter: drop-shadow(0 18px 40px #0a2a5066);
}

/* หมอกจาง ๆ ทับโลโก้ */
.pk-fog {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  --in: clamp(0, calc((var(--p, 0) - 0.55) / 0.3), 1);
  opacity: calc(0.45 + var(--in) * 0.45);
}
.pk-fog i {
  position: absolute;
  left: -30%;
  width: 160%;
  height: 46%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #ffffffcc, #ffffff00 72%);
  animation: pk-drift 26s ease-in-out infinite alternate;
}
.pk-fog i:nth-child(1) {
  top: 28%;
}
.pk-fog i:nth-child(2) {
  top: 46%;
  height: 40%;
  animation-duration: 34s;
  animation-direction: alternate-reverse;
  opacity: 0.8;
}
.pk-fog i:nth-child(3) {
  top: 8%;
  height: 34%;
  animation-duration: 40s;
  opacity: 0.45;
}
@keyframes pk-drift {
  to {
    transform: translateX(14%);
  }
}

/* ภูเขาและตึก: โผล่ขึ้นมาจากขอบล่างตามการเลื่อน */
.pk-land {
  position: absolute;
  bottom: -1px;
  left: 50%;
  z-index: 4;
  width: max(100%, 108svh);
  aspect-ratio: 2048 / 1080;
  transform: translate(-50%, calc((1 - var(--rise-e)) * 72% + 14%));
}
.pk-land img {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
}
.pk-land .pk-ridge {
  z-index: 1;
  transform: translateY(calc(-15.74% + var(--rise-e) * 8.15%));
}
.pk-land::after {
  content: "";
  position: absolute;
  inset: 52% 0 0;
  z-index: 3;
  background: #354651;
}
.pk-land .pk-town {
  z-index: 4;
}
@media (min-aspect-ratio: 2/1) {
  .pk-land {
    bottom: min(0px, calc(52svh - 29vw));
  }
}
@media (max-width: 700px) and (orientation: portrait) {
  .pk-biglogo {
    bottom: 34svh;
    width: 84vw;
  }
  .pk-copy {
    top: 20svh;
  }
}

/* ---------------------------------------------------------------
   Obby Minigame
   --------------------------------------------------------------- */
.ob-scene {
  background: #0c1512;
}
.ob-stage {
  background:
    radial-gradient(ellipse 70% 50% at 50% 100%, #1f4a39, transparent 70%),
    linear-gradient(#0a110f, #14251f 60%, #1c3a2e);
  color: #dbfae2;
}

/* ตัวอักษรยักษ์อยู่หลังด่าน */
.ob-bgword {
  --in: clamp(0, calc((var(--p, 0) - 0.6) / 0.3), 1);
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  padding-bottom: 14svh;
  font:
    normal clamp(120px, 30vw, 520px) / 0.85 "CheemsRed Display",
    "Archivo Black",
    sans-serif;
  color: transparent;
  -webkit-text-stroke: 3px #83fd80;
  letter-spacing: 0.02em;
  opacity: calc(var(--in) * 0.9);
  transform: translateY(calc((1 - var(--in)) * 22svh)) scale(calc(0.86 + var(--in) * 0.14));
  user-select: none;
}
.ob-bgword b {
  font: inherit;
  color: #83fd8022;
  -webkit-text-stroke: 3px #83fd80;
}
.ob-copy {
  position: absolute;
  left: 0;
  right: 0;
  top: 22svh;
  z-index: 6;
  margin: 0 auto;
  padding: 0 6%;
  text-align: center;
}
.ob-copy-1 {
  --in: clamp(0, calc((var(--p, 0) - 0.03) / 0.12), 1);
  --out: clamp(0, calc((var(--p, 0) - 0.27) / 0.08), 1);
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc((1 - var(--in)) * 7svh - var(--out) * 6svh));
}
.ob-copy-1 small {
  display: block;
  margin-bottom: 12px;
  font:
    italic 600 clamp(20px, 2.6vw, 34px) / 1.3 "Anuphan",
    sans-serif;
  color: #9fe5ae;
}
.ob-copy-1 strong {
  display: block;
  font:
    normal clamp(56px, 11vw, 160px) / 1 "CheemsRed Display",
    sans-serif;
  color: #83fd80;
  text-shadow: 0 6px 0 #1c5a33;
}
.ob-copy-2 {
  --in: clamp(0, calc((var(--p, 0) - 0.33) / 0.12), 1);
  --out: clamp(0, calc((var(--p, 0) - 0.56) / 0.08), 1);
  max-width: 860px;
  opacity: calc(var(--in) * (1 - var(--out)));
  transform: translateY(calc((1 - var(--in)) * 7svh - var(--out) * 6svh));
  font:
    600 clamp(20px, 2.6vw, 36px) / 1.55 "Anuphan",
    sans-serif;
}

/* ด่านบันไดลอยฟ้า ตัวละครวิ่งกระโดดตามการเลื่อน */
.ob-course {
  --run: clamp(0, calc((var(--p, 0) - 0.12) / 0.8), 1);
  position: absolute;
  left: 50%;
  bottom: 12svh;
  z-index: 4;
  width: min(92vw, 1100px);
  height: 40svh;
  transform: translateX(-50%);
}
.ob-course i {
  position: absolute;
  left: calc(var(--n) * 14.2%);
  bottom: calc(var(--n) * 11%);
  width: 10.6%;
  aspect-ratio: 1.8;
  background: linear-gradient(#a9ffa6, #83fd80);
  box-shadow: 0 10px #2f7a4b;
  transform: skewY(-15deg);
  --drop: clamp(0, calc((var(--p, 0) - 0.04 - var(--n) * 0.05) / 0.1), 1);
  opacity: var(--drop);
  translate: 0 calc((1 - var(--drop)) * -14svh);
}
.ob-runner {
  position: absolute;
  left: calc(var(--run) * 85.2% + 4.5%);
  bottom: calc(var(--run) * 66% + 7%);
  width: clamp(26px, 3.4vw, 46px);
  aspect-ratio: 1;
}
.ob-runner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #ff2631;
  border: 3px solid #210819;
  border-radius: 6px;
  box-shadow: 0 6px 0 #92104c;
  animation: ob-hop 0.62s ease-in-out infinite;
}
.ob-runner::after {
  content: "";
  position: absolute;
  left: 22%;
  top: 28%;
  width: 56%;
  height: 20%;
  background: #ffebcb;
  border-radius: 3px;
  animation: ob-hop 0.62s ease-in-out infinite;
}
@keyframes ob-hop {
  50% {
    transform: translateY(-120%) rotate(8deg);
  }
}

.ob-fog {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  background: linear-gradient(transparent 56%, #dbfae21f 82%, #dbfae233);
}
.ob-fog i {
  position: absolute;
  left: -30%;
  top: 60%;
  width: 160%;
  height: 38%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, #dbfae233, transparent 72%);
  animation: pk-drift 30s ease-in-out infinite alternate;
}
.ob-title {
  position: absolute;
  right: 6%;
  bottom: 6svh;
  z-index: 7;
  margin: 0;
  font:
    normal clamp(20px, 2.4vw, 32px) / 1 "CheemsRed Display",
    sans-serif;
  letter-spacing: 0.04em;
  color: #dbfae2;
  --in: clamp(0, calc((var(--p, 0) - 0.8) / 0.12), 1);
  opacity: var(--in);
}

@media (prefers-reduced-motion: reduce) {
  .pk-fog i,
  .ob-fog i,
  .ob-runner::before,
  .ob-runner::after {
    animation: none;
  }
}

/* โลโก้ TeeLaser แทนตัวอักษร */
.pk-copy-1 .pk-wordmark { display: block; width: min(78vw, 880px); height: auto; margin: 0 auto; filter: drop-shadow(0 6px 0 #0a3a8a55); }