/* ท้องฟ้าโคมลอย: Dream theme for personal.html#dreams, active while body.theme-dreams
   is set by assets/personal-dreams.js. Night = lanterns over a moonlit lake,
   light = the same lake at dawn. The list itself is dressed in personal-dreams-shadow.css. */
#personal-dreams[hidden]{display:none!important}
#personal-dreams{--lsky-amber:#ffb347;--lsky-flame:#fff2c4;--lsky-ember:#d9502a;--lsky-ink:#f6efe2;--lsky-copy:#d8cfe6;--lsky-accent:#ffc978;
  position:relative;margin-top:8px;min-width:0;color:var(--lsky-ink);font-family:var(--aku-font-body)}
html[data-theme="light"] #personal-dreams{--lsky-ink:#2b1d3f;--lsky-copy:#4b3d5e;--lsky-accent:#a3480f}

/* The page's own header, back bar and gallery hero step aside, like every other themed category. */
body.theme-dreams .back-bar,body.theme-dreams .hero-title,body.theme-dreams .hero-sub,
body.theme-dreams .category-view-header,
body.personal-dreams-active .gallery-wrap>.pcms-admin-only{display:none!important}

.lsky-back{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 16px;border-radius:999px;cursor:pointer;
  font:600 .95rem/1 var(--aku-font-body);color:var(--lsky-ink);background:rgba(255,179,71,.1);border:1px solid rgba(255,201,120,.45);
  transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s}
.lsky-back span{font-size:1.25rem;transition:transform .25s ease}
.lsky-back:is(:hover,:focus-visible){background:rgba(255,179,71,.2);transform:translateY(-1px)}
.lsky-back:hover span{transform:translateX(-3px)}
.lsky-back:focus-visible{outline:2px solid var(--lsky-accent);outline-offset:3px}
html[data-theme="light"] .lsky-back{background:#fff7e8;border-color:#d99a52}

.lsky-stage{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:clamp(18px,4vw,48px);margin:18px 0 8px}
.lsky-head{display:block;min-width:0}
.lsky-chip{display:inline-flex;align-items:center;gap:6px;margin:0 0 12px;padding:4px 14px;border-radius:999px;font-weight:600;font-size:.9rem;
  color:var(--lsky-accent);background:rgba(255,179,71,.12);border:1px solid rgba(255,201,120,.38)}
html[data-theme="light"] .lsky-chip{background:#fff3df;border-color:#e2ad6b}
.lsky-head h2{margin:0;font:700 clamp(2.2rem,5vw,3.6rem)/1.15 var(--aku-font-head);color:var(--lsky-ink);letter-spacing:-.01em}
.lsky-head h2 em{display:block;font-style:normal;color:var(--lsky-accent);text-shadow:0 0 28px rgba(255,179,71,.45)}
html[data-theme="light"] .lsky-head h2 em{text-shadow:none}
.lsky-sub{margin:14px 0 10px;max-width:44ch;font-size:1.06rem;line-height:1.7;color:var(--lsky-copy)}
.lsky-private{margin:0;font-size:.88rem;color:var(--lsky-copy)}

/* The sky picture: a feathered scene, not a framed box. */
.lsky-sky{position:relative;height:clamp(240px,30vw,340px);overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse 60% 70% at 70% 30%,rgba(120,92,190,.55),transparent 70%),linear-gradient(180deg,#141a44 0%,#2b2366 58%,#5b3c7c 78%,#1c1a46 100%);
  -webkit-mask-image:radial-gradient(closest-side,#000 58%,transparent 100%);mask-image:radial-gradient(closest-side,#000 58%,transparent 100%)}
html[data-theme="light"] .lsky-sky{background:radial-gradient(ellipse 55% 60% at 72% 32%,rgba(255,214,150,.9),transparent 70%),linear-gradient(180deg,#cfe3fb 0%,#f6d9e6 55%,#ffe3c4 74%,#d7e6f3 100%)}
.lsky-moon{position:absolute;right:20%;top:14%;width:58px;height:58px;border-radius:50%;background:#fffbe9;box-shadow:0 0 30px 12px rgba(255,246,214,.4),0 0 80px 30px rgba(190,160,255,.25)}
html[data-theme="light"] .lsky-moon{background:#ffd27a;box-shadow:0 0 34px 16px rgba(255,200,110,.55)}
.lsky-hills{position:absolute;inset:auto 0 22% 0;height:22%;background:#151339;clip-path:polygon(0 60%,14% 30%,30% 55%,46% 20%,62% 50%,78% 25%,100% 55%,100% 100%,0 100%)}
html[data-theme="light"] .lsky-hills{background:#a9b9d6}
.lsky-lake{position:absolute;inset:auto 0 0 0;height:23%;background:linear-gradient(180deg,#1b1d4a,#10123a);
  box-shadow:inset 0 1px 0 rgba(255,201,120,.3)}
.lsky-lake::before,.lsky-lake::after{content:'';position:absolute;height:2px;border-radius:2px;background:rgba(255,201,120,.45);animation:lskyShimmer 4s ease-in-out infinite}
.lsky-lake::before{left:30%;top:30%;width:18%}.lsky-lake::after{left:52%;top:62%;width:12%;animation-delay:-2s}
html[data-theme="light"] .lsky-lake{background:linear-gradient(180deg,#c9dcef,#b4cbe2)}

.lsky-lantern{position:absolute;bottom:26%;width:22px;height:28px;border-radius:42% 42% 30% 30% / 50% 50% 34% 34%;
  background:radial-gradient(circle at 50% 64%,var(--lsky-flame),var(--lsky-amber) 46%,var(--lsky-ember) 100%);
  box-shadow:0 0 16px 5px rgba(255,170,70,.5);animation:lskyRise 14s linear infinite;opacity:0}
.lsky-lantern::after{content:'';position:absolute;left:30%;right:30%;bottom:-2px;height:3px;border-radius:2px;background:#7a2e14}
.lsky-lantern.l0{left:12%;animation-delay:-1s}.lsky-lantern.l1{left:26%;scale:1.3;animation-delay:-6s;animation-duration:16s}
.lsky-lantern.l2{left:40%;scale:.8;animation-delay:-10s}.lsky-lantern.l3{left:52%;scale:1.1;animation-delay:-3s;animation-duration:17s}
.lsky-lantern.l4{left:64%;scale:.7;animation-delay:-12s;animation-duration:13s}.lsky-lantern.l5{left:76%;scale:1.2;animation-delay:-8s}
.lsky-lantern.l6{left:86%;scale:.85;animation-delay:-4.5s;animation-duration:15s}.lsky-lantern.l7{left:34%;scale:.6;animation-delay:-13s;animation-duration:19s}
.lsky-lantern.l8{left:70%;scale:.95;animation-delay:-15.5s;animation-duration:18s}
@keyframes lskyRise{0%{transform:translate(0,0);opacity:0}8%{opacity:1}50%{transform:translate(10px,-110px)}85%{opacity:.9}100%{transform:translate(-6px,-230px);opacity:0}}
@keyframes lskyShimmer{0%,100%{opacity:.25;transform:scaleX(.7)}50%{opacity:.8;transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.lsky-lantern{animation:none;opacity:1;transform:translateY(-60px)}.lsky-lake::before,.lsky-lake::after{animation:none}}
html[data-motion="paused"] .lsky-lantern,body.paused .lsky-lantern{animation-play-state:paused}
html[data-motion="paused"] .lsky-lake::before,html[data-motion="paused"] .lsky-lake::after{animation-play-state:paused}

.lsky-mount{margin-top:8px;min-width:0}
@media (max-width:760px){
  .lsky-stage{grid-template-columns:1fr;gap:6px}
  .lsky-sky{order:-1;height:200px}
  .lsky-sub{max-width:none}
}