/* Kenwise story carousel v1.0 (2026-09-23) - story scenes, character portraits, app captures.
   Mount: <div class="kw-carousel" data-src="assets/carousel/carousel.json"></div> + story_carousel.js.
   Reads the host page's theme variables when present (--surface, --surface-2, --text, --text-2,
   --border, --primary, --on-primary, --font-disp) and falls back to the IndigoLeaf / Night Aurora palettes. */
.kw-carousel{
  --kwc-h:min(400px, calc(56vw - 16px));
  --kwc-gap:18px;
  --kwc-surface:var(--surface-2, #E8EDFB);
  --kwc-card:var(--surface, #FBFCFE);
  --kwc-text:var(--text, #1C2233);
  --kwc-text-2:var(--text-2, #525B75);
  --kwc-border:var(--border, #E4E8F2);
  --kwc-accent:var(--primary, #2F4FC6);
  --kwc-on-accent:var(--on-primary, #FFFFFF);
  --kwc-shadow:0 10px 30px rgba(16,28,64,.12);
  position:relative; width:100%; max-width:100%; outline:none;
  font-family:var(--font-body, 'Noto Sans Thai','Plus Jakarta Sans',sans-serif);
}
html[data-mode="dark"] .kw-carousel{
  --kwc-surface:var(--surface-2, #151B33);
  --kwc-card:var(--surface, #0C1020);
  --kwc-text:var(--text, #ECEDF7);
  --kwc-text-2:var(--text-2, #B4BBD6);
  --kwc-border:var(--border, #2E3556);
  --kwc-accent:#F5C86B;
  --kwc-on-accent:#3A2A05;
  --kwc-shadow:0 12px 34px rgba(0,0,0,.45);
}
.kw-carousel:focus-visible{box-shadow:0 0 0 3px var(--kwc-accent);border-radius:20px}
.kwc-track{
  display:flex; gap:var(--kwc-gap); margin:0; padding:6px max(16px, calc(50% - var(--kwc-h) * .8)) 10px;
  list-style:none; overflow-x:auto; overflow-y:hidden; position:relative;
  scroll-snap-type:x mandatory; scroll-behavior:auto; overscroll-behavior-x:contain;
  scrollbar-width:none; -webkit-overflow-scrolling:touch; cursor:grab;
}
.kwc-track::-webkit-scrollbar{display:none}
.kw-carousel.kwc-dragging .kwc-track{scroll-snap-type:none; cursor:grabbing; user-select:none}
.kwc-slide{flex:0 0 auto; margin:0; scroll-snap-align:center; width:calc(var(--kwc-h) * 1.6)}
.kwc-slide.kwc-portrait{width:calc(var(--kwc-h) * .75)}
.kwc-frame{
  position:relative; height:var(--kwc-h); width:100%; border-radius:18px; overflow:hidden;
  background:radial-gradient(120% 90% at 50% 20%, var(--kwc-card), var(--kwc-surface));
  border:1px solid var(--kwc-border); box-shadow:var(--kwc-shadow);
  transition:transform .35s ease, opacity .35s ease;
}
.kwc-frame img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block;
  opacity:0; transition:opacity .35s ease; -webkit-user-drag:none; user-select:none; pointer-events:none;
}
.kwc-frame img.kwc-loaded{opacity:1}
.kwc-slide:not(.kwc-current) .kwc-frame{transform:scale(.94); opacity:.72}
.kwc-caption{
  margin:10px 4px 0; font-family:var(--font-disp, 'Plus Jakarta Sans','Noto Sans Thai',sans-serif);
  font-weight:700; font-size:.95rem; line-height:1.35; color:var(--kwc-text); text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.kwc-slide:not(.kwc-current) .kwc-caption{color:var(--kwc-text-2)}
.kwc-arrow{
  position:absolute; top:calc(6px + var(--kwc-h) / 2); transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid var(--kwc-border);
  background:var(--kwc-card); color:var(--kwc-text); box-shadow:var(--kwc-shadow);
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  transition:background .2s, color .2s, transform .12s;
}
.kwc-arrow:hover{background:var(--kwc-accent); color:var(--kwc-on-accent)}
.kwc-arrow:active{transform:translateY(-50%) scale(.94)}
.kwc-arrow:focus-visible{outline:3px solid var(--kwc-accent); outline-offset:2px}
.kwc-prev{left:8px} .kwc-next{right:8px}
.kwc-arrow svg{width:20px; height:20px}
.kwc-dots{display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin:12px auto 0; padding:0 16px}
.kwc-dot{
  width:22px; height:22px; border:0; background:none; padding:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.kwc-dot::before{
  content:""; width:8px; height:8px; border-radius:99px; background:var(--kwc-border);
  transition:width .25s ease, background .25s ease;
}
.kwc-dot[aria-current="true"]::before{width:22px; background:var(--kwc-accent)}
.kwc-dot:focus-visible{outline:2px solid var(--kwc-accent); outline-offset:1px; border-radius:6px}
.kwc-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:640px){
  .kw-carousel{--kwc-gap:12px}
  .kwc-arrow{width:36px; height:36px}
  .kwc-caption{font-size:.86rem}
}
@media (prefers-reduced-motion: reduce){
  .kwc-frame, .kwc-frame img, .kwc-dot::before{transition:none}
  .kwc-slide:not(.kwc-current) .kwc-frame{transform:none}
}