/* =============================================================================
 * ฉากเคลื่อนไหวหัวหน้าแรก (5 พ.ย. 2026) — คู่กับ components/theme-scene.tsx
 * โหลดเฉพาะหน้าแรก เมื่อธีมมีฉาก (jade · lantern · neon · coral · aurora) และหลังบ้านไม่ได้ปิดไว้
 * กติกา: ขยับด้วย transform / opacity เท่านั้น (GPU) · กลางจอเรียบให้อ่านชื่อเว็บออก
 *        ผู้ใช้ตั้ง "ลดการเคลื่อนไหว" ในเครื่อง → เห็นเป็นภาพนิ่ง · จอเล็กลดจำนวนชิ้น (.fx-x)
 * ========================================================================== */

/* ฉากกว้างเต็มจอ (100vw) — กันแถบเลื่อนแนวนอนจากความกว้าง scrollbar */
html { overflow-x: clip; }

.site-intro.has-fx {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 316px; margin: 0; padding: 40px 0 118px;
}
.site-intro.has-fx > :not(.fx) { position: relative; z-index: 1; }
.site-intro.has-fx + .fhero-slider { position: relative; z-index: 1; margin-top: -44px; }

.fx {
  position: absolute; z-index: 0; top: 0; bottom: 0; left: 50%; width: 100vw; margin-left: -50vw;
  overflow: hidden; pointer-events: none; container-type: size; contain: layout paint style;
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - 70px), transparent);
  animation: fx-in 1.2s ease-out both;
}
.fx > * { position: absolute; display: block; }
.fx svg { display: block; overflow: visible; }
.fx-sky, .fx-veil { inset: 0; }
.fx-veil { background: radial-gradient(46% 44% at 50% 36%, rgba(var(--bg-rgb), .68), rgba(var(--bg-rgb), .26) 58%, transparent 80%); }
.fx-ridge { left: 0; bottom: 0; width: 100%; }
@keyframes fx-in { from { opacity: 0; } }
@keyframes fx-drift { to { transform: translate3d(-50%, 0, 0); } }
@keyframes fx-sway {
  from { transform: translate3d(calc(var(--sx) * -1), 0, 0) rotate(-5deg); }
  to   { transform: translate3d(var(--sx), 0, 0) rotate(5deg); }
}

/* ---------------- jade · เขาหินปูนลายหมึก หมอกลอย นกบินผ่านจันทร์ ---------------- */
.fx-jade .fx-sky {
  background:
    radial-gradient(42% 60% at 80% 20%, rgba(233, 196, 106, .16), transparent 62%),
    linear-gradient(180deg, #06130e 0%, #0a1f17 40%, #123629 74%, #0f2c21 100%);
}
.fx-jade .fx-moon {
  bottom: 30%; right: 11%; width: 86px; aspect-ratio: 1; border-radius: 50%; opacity: .95;
  background: radial-gradient(circle at 40% 38%, #fff7da 0 28%, #f1dfa6 58%, #d8bd6e 100%);
  box-shadow: 0 0 34px 6px rgba(233, 196, 106, .3), 0 0 120px 40px rgba(233, 196, 106, .1);
}
.fx-jade .fx-far { height: 80%; opacity: .5; }
.fx-jade .fx-mid { height: 58%; }
.fx-jade .fx-near { height: 34%; }
.fx-mist {
  left: 0; width: 200%; will-change: transform;
  background-repeat: repeat-x; background-size: 50% 100%;
  animation: fx-drift var(--t, 80s) linear infinite;
}
.fx-jade .fx-m1 {
  --t: 110s; bottom: 24%; height: 42%;
  background-image:
    radial-gradient(46% 26% at 18% 62%, rgba(214, 251, 235, .28), transparent 72%),
    radial-gradient(38% 20% at 52% 48%, rgba(214, 251, 235, .16), transparent 72%),
    radial-gradient(48% 28% at 84% 64%, rgba(214, 251, 235, .26), transparent 72%);
}
.fx-jade .fx-m2 {
  --t: 74s; bottom: 2%; height: 36%; animation-direction: reverse;
  background-image:
    radial-gradient(50% 30% at 26% 64%, rgba(214, 251, 235, .24), transparent 72%),
    radial-gradient(44% 26% at 74% 56%, rgba(214, 251, 235, .2), transparent 72%);
}
.fx-bird {
  top: var(--y); left: 0; width: calc(26px * var(--s)); will-change: transform;
  transform: translate3d(var(--rx, 64cqw), 0, 0);
  animation: fx-fly var(--t) linear var(--d) infinite;
}
.fx-bird svg {
  width: 100%; height: auto; fill: none; stroke: #eaf8f0; stroke-width: 1.9; stroke-linecap: round; opacity: .75;
  transform-origin: 50% 75%; will-change: transform;
  animation: fx-flap var(--b) ease-in-out infinite alternate;
}
@keyframes fx-fly {
  0%   { transform: translate3d(-6cqw, 0, 0); }
  30%  { transform: translate3d(28cqw, -7px, 0); }
  62%  { transform: translate3d(64cqw, 5px, 0); }
  100% { transform: translate3d(106cqw, -4px, 0); }
}
@keyframes fx-flap { 0%, 30% { transform: scaleY(1); } 100% { transform: scaleY(.28); } }
[data-theme="jade"] .site-intro.has-fx .site-h1 { animation: fx-brush 1.5s cubic-bezier(.3, .7, .2, 1) .15s both; }
@keyframes fx-brush { from { clip-path: inset(-30% 100% -30% 0); } to { clip-path: inset(-30% 0 -30% 0); } }

/* ---------------- lantern · โคมลอยขึ้นจากหลังคาเมือง ---------------- */
.fx-lantern .fx-sky {
  background:
    radial-gradient(74% 62% at 50% 108%, rgba(255, 150, 40, .5), transparent 70%),
    radial-gradient(38% 50% at 12% 104%, rgba(255, 107, 61, .3), transparent 70%),
    radial-gradient(38% 50% at 90% 104%, rgba(255, 159, 28, .26), transparent 70%),
    linear-gradient(180deg, #120a04 0%, #1c1007 36%, #33190a 70%, #55290c 100%);
}
.fx-lantern .fx-far { height: 54%; }
.fx-lantern .fx-near { height: 30%; }
.fx-lan {
  left: var(--x); top: 100%; width: calc(17px * var(--s)); height: calc(22px * var(--s)); opacity: var(--o);
  will-change: transform; transform: translate3d(0, var(--ry), 0);
  animation: fx-rise var(--t) linear var(--d) infinite;
}
@keyframes fx-rise { from { transform: translate3d(0, 6cqh, 0); } to { transform: translate3d(0, -120cqh, 0); } }
.fx-lan i {
  position: absolute; inset: 0; border-radius: 46% 46% 30% 30% / 40% 40% 24% 24%;
  background: radial-gradient(70% 62% at 50% 82%, #fff4c8 0%, #ffcf6e 24%, #ff9a2e 54%, #d9530f 86%, #a8380a 100%);
  box-shadow: 0 0 calc(10px * var(--s)) calc(2px * var(--s)) rgba(255, 150, 40, .5), 0 0 calc(36px * var(--s)) calc(9px * var(--s)) rgba(255, 120, 30, .2);
  will-change: transform; animation: fx-sway var(--w) ease-in-out infinite alternate;
}
.fx-lan i::after {
  content: ""; position: absolute; left: 30%; right: 30%; bottom: 9%; height: 24%; border-radius: 50%;
  background: #fff7d6; filter: blur(1px); will-change: opacity;
  animation: fx-flicker var(--f) linear infinite alternate;
}
@keyframes fx-flicker { 0% { opacity: .5; } 35% { opacity: 1; } 60% { opacity: .68; } 100% { opacity: .95; } }

/* ---------------- neon · สปอตไลต์กวาด + หลอดไฟป้ายงานเปิดตัว ---------------- */
.fx-neon .fx-sky {
  background:
    radial-gradient(56% 80% at 50% 118%, rgba(139, 92, 246, .42), transparent 70%),
    radial-gradient(36% 60% at 6% 112%, rgba(34, 211, 238, .16), transparent 70%),
    radial-gradient(36% 60% at 94% 112%, rgba(139, 92, 246, .22), transparent 70%),
    linear-gradient(180deg, #07061a 0%, #0a0824 58%, #120c37 100%);
}
.fx-floor { left: 0; right: 0; bottom: 0; height: 38%; background: radial-gradient(60% 100% at 50% 100%, rgba(196, 181, 253, .16), transparent 72%); }
.fx-beam {
  left: var(--x); bottom: -6%; width: 640px; height: 150%; margin-left: -320px;
  transform-origin: 50% 100%; transform: rotate(var(--a0)); will-change: transform;
  background: radial-gradient(70% 100% at 50% 100%, rgba(var(--c), .85), rgba(var(--c), .3) 72%, transparent);
  -webkit-mask-image: conic-gradient(from -18deg at 50% 100%, transparent 0deg, #000 10deg, #000 26deg, transparent 36deg), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .72) 50%, transparent 96%);
  -webkit-mask-composite: source-in;
          mask-image: conic-gradient(from -18deg at 50% 100%, transparent 0deg, #000 10deg, #000 26deg, transparent 36deg), linear-gradient(0deg, #000 0%, rgba(0, 0, 0, .72) 50%, transparent 96%);
          mask-composite: intersect;
  mix-blend-mode: screen;
  animation: fx-sweep var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes fx-sweep { from { transform: rotate(var(--a0)); } to { transform: rotate(var(--a1)); } }
.fx-bulbs { left: 0; right: 0; height: 12px; }
.fx-bulbs.fx-top { top: 12px; }
.fx-bulbs.fx-bot { bottom: 84px; }
.fx-bulbs b {
  position: absolute; inset: 0; will-change: opacity;
  background: radial-gradient(circle, #fff 0 1.5px, rgba(230, 223, 255, .95) 2.3px, rgba(139, 92, 246, .55) 3.8px, transparent 5.6px) 0 50% / 26px 12px repeat-x;
  animation: fx-chase 1.2s steps(1, end) infinite;
}
.fx-bulbs b + b {
  background-image: radial-gradient(circle, #fff 0 1.5px, rgba(207, 250, 254, .95) 2.3px, rgba(34, 211, 238, .55) 3.8px, transparent 5.6px);
  background-position: 13px 50%; animation-delay: -.6s;
}
@keyframes fx-chase { 0% { opacity: 1; } 50% { opacity: .14; } }
[data-theme="neon"] .site-intro.has-fx .site-h1 {
  background: none; color: #f6f2ff; -webkit-text-fill-color: currentColor;
  text-shadow: 0 0 2px #fff, 0 0 9px rgba(196, 181, 253, .95), 0 0 22px rgba(139, 92, 246, .85), 0 0 46px rgba(139, 92, 246, .5), 0 0 80px rgba(34, 211, 238, .28);
  animation: fx-neon-on 1.7s steps(1, end) .35s both;
}
@keyframes fx-neon-on { 0% { opacity: 0; } 6% { opacity: .85; } 10% { opacity: .08; } 16% { opacity: 1; } 21% { opacity: .3; } 27% { opacity: 1; } 100% { opacity: 1; } }

/* ---------------- coral · กลีบซากุระหน้าเส้นขอบฟ้าโซลยามเย็น ---------------- */
.fx-coral .fx-sky { background: linear-gradient(180deg, #0d1117 0%, #161823 24%, #2b1e2f 50%, #55293a 72%, #85393a 88%, #a24a3c 100%); }
.fx-sun {
  left: 70%; bottom: -7%; width: 240px; aspect-ratio: 1; margin-left: -120px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 220, 178, .96) 0 15%, rgba(255, 165, 115, .72) 29%, rgba(255, 122, 89, .24) 48%, transparent 66%);
}
.fx-coral .fx-far { height: 60%; }
.fx-coral .fx-mid { height: 45%; }
.fx-coral .fx-near { height: 21%; }
.fx-pet {
  left: var(--x); top: 0; width: calc(14px * var(--s)); height: calc(11px * var(--s)); opacity: var(--o);
  will-change: transform; transform: translate3d(var(--rx), var(--ry), 0);
  animation: fx-fall var(--t) linear var(--d) infinite;
}
@keyframes fx-fall { from { transform: translate3d(0, -12cqh, 0); } to { transform: translate3d(var(--dx), 112cqh, 0); } }
.fx-pet i {
  position: absolute; inset: 0; border-radius: 80% 0 75% 0;
  background: linear-gradient(135deg, #ffe8e1 0%, #ffc0b0 45%, #ff8f78 100%);
  will-change: transform; animation: fx-flutter var(--sp) linear infinite;
}
@keyframes fx-flutter {
  0%   { transform: rotate(0deg) rotateY(0deg) rotateX(0deg); }
  50%  { transform: rotate(170deg) rotateY(72deg) rotateX(28deg); }
  100% { transform: rotate(360deg) rotateY(0deg) rotateX(0deg); }
}

/* ---------------- aurora · แสงเหนือพลิ้ว + หิมะแรก ---------------- */
.fx-aurora .fx-sky {
  background:
    radial-gradient(80% 60% at 50% 104%, rgba(45, 212, 191, .12), transparent 70%),
    linear-gradient(180deg, #030914 0%, #061224 52%, #0a1c33 100%);
}
.fx-stars {
  inset: 0 0 30% 0; opacity: .8;
  background:
    radial-gradient(1px 1px at 6% 22%, #fff, transparent), radial-gradient(1px 1px at 13% 58%, #dff, transparent),
    radial-gradient(1px 1px at 19% 9%, #fff, transparent), radial-gradient(1.2px 1.2px at 27% 40%, #cfe, transparent),
    radial-gradient(1px 1px at 33% 16%, #fff, transparent), radial-gradient(1px 1px at 41% 62%, #dff, transparent),
    radial-gradient(1px 1px at 46% 28%, #fff, transparent), radial-gradient(1.2px 1.2px at 58% 12%, #fff, transparent),
    radial-gradient(1px 1px at 66% 44%, #dff, transparent), radial-gradient(1px 1px at 71% 6%, #fff, transparent),
    radial-gradient(1.2px 1.2px at 84% 20%, #cfe, transparent), radial-gradient(1px 1px at 89% 52%, #fff, transparent),
    radial-gradient(1px 1px at 96% 12%, #fff, transparent);
}
.fx-tw {
  left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%;
  background: #effdff; box-shadow: 0 0 6px 1px rgba(153, 246, 228, .75); will-change: opacity;
  animation: fx-twinkle var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes fx-twinkle { from { opacity: .12; } to { opacity: 1; } }
.fx-aur {
  left: -15%; top: var(--y); width: 130%; height: 66%; opacity: .8; mix-blend-mode: screen;
  transform-origin: 50% 100%; will-change: transform, opacity;
  animation: fx-aurora var(--t) ease-in-out var(--d) infinite alternate;
}
@keyframes fx-aurora {
  0%   { transform: translate3d(-5%, 0, 0) scaleY(.8) skewX(-9deg); opacity: .45; }
  50%  { opacity: .95; }
  100% { transform: translate3d(5%, -4%, 0) scaleY(1.14) skewX(8deg); opacity: .62; }
}
.fx-aurora .fx-far { height: 55%; }
.fx-aurora .fx-veil { background: radial-gradient(48% 46% at 50% 36%, rgba(var(--bg-rgb), .76), rgba(var(--bg-rgb), .32) 60%, transparent 82%); }
.fx-aurora .fx-near { height: 32%; }
.fx-snow {
  left: var(--x); top: 0; width: calc(5px * var(--s)); height: calc(5px * var(--s));
  will-change: transform; transform: translate3d(0, var(--ry), 0);
  animation: fx-snowfall var(--t) linear var(--d) infinite;
}
@keyframes fx-snowfall { from { transform: translate3d(0, -6cqh, 0); } to { transform: translate3d(0, 106cqh, 0); } }
.fx-snow i {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 34%, rgba(255, 255, 255, .5) 54%, transparent 72%);
  will-change: transform; animation: fx-sway var(--w) ease-in-out infinite alternate;
}

/* ---------------- จอเล็ก ---------------- */
@media (max-width: 768px) {
  .site-intro.has-fx { min-height: 240px; padding: 28px 0 92px; }
  .site-intro.has-fx + .fhero-slider { margin-top: -36px; }
  .fx {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent);
            mask-image: linear-gradient(180deg, #000 calc(100% - 52px), transparent);
  }
  .fx-bulbs.fx-bot { bottom: 66px; }
}
@media (max-width: 640px) {
  .fx .fx-x { display: none; }
  .fx-jade .fx-moon { display: none; }
  .fx-sun { width: 140px; margin-left: -70px; left: 70%; bottom: -8%; }
}

/* ---------------- ลดการเคลื่อนไหว → ภาพนิ่ง ---------------- */
@media (prefers-reduced-motion: reduce) {
  .fx, .fx *, .fx *::after, .site-intro.has-fx .site-h1 { animation: none !important; }
}