/* Kenwise homepage v2 - hero avatar ladder stage (SPEC.md section 4). Pairs with hero_avatar.js. */

/* Tokens: fall back to the page's variables when present, otherwise to the IndigoLeaf / Night Aurora palette. */
.hero-avatar{
  --kwha-surface:rgba(251,252,254,.84);
  --kwha-text:var(--text,#1C2233);
  --kwha-text-2:var(--text-2,#525B75);
  --kwha-accent:#2F4FC6;
  --kwha-accent-2:#3D7A1E;
  --kwha-track:rgba(47,79,198,.16);
  --kwha-glow:rgba(245,200,107,.85);
  --kwha-border:rgba(228,232,242,.9);
}
html[data-mode="dark"] .hero-avatar{
  --kwha-surface:rgba(12,16,32,.78);
  --kwha-text:#ECEDF7;
  --kwha-text-2:#B4BBD6;
  --kwha-accent:#F5C86B;
  --kwha-accent-2:#8FE06C;
  --kwha-track:rgba(245,200,107,.2);
  --kwha-glow:rgba(255,196,107,.9);
  --kwha-border:rgba(46,53,86,.9);
}

/* Progressive enhancement:
 * - no JS: the avatar box stays hidden and the Needle shows as before;
 * - JS on but hero_avatar.js not run yet: the Needle is held invisible for at most 2.5 s
 *   (CSS reveals it by itself if the script never arrives), so it does not flash before the avatar. */
html:not([data-hero-avatar]) .hero-avatar[data-avatar="pending"]:not([data-avatar-stay]){display:none}
/* stay-in-place block (Ken 2026-09-24): visible (it must be, to be scrolled into view) unless there is no JS */
@media (scripting: none){.hero-avatar[data-avatar-stay]{display:none}}
@media (scripting: enabled){
  html:not([data-hero-avatar]) #needle[data-needle="waiting"]{visibility:hidden;animation:kwhaNeedleReveal 0s linear 2.5s forwards}
}
@keyframes kwhaNeedleReveal{to{visibility:visible}}
/* (#needle[hidden] is left to the page: index.html keeps its space with visibility:hidden on desktop) */
.hero-avatar[hidden]{display:none!important}

/* The box: 4:5, at most 560 px tall; full width of the column on small screens. */
.preview.hero-avatar,.hero-avatar{
  position:relative;padding:0;overflow:hidden;
  width:100%;max-width:448px;margin-inline:auto;aspect-ratio:4/5;max-height:560px;
  border-radius:24px;
  background:linear-gradient(180deg,#E8EDFB 0%,#FBFCFE 100%);
}
html[data-mode="dark"] .hero-avatar{background:linear-gradient(180deg,#141a33 0%,#0C1020 100%)}

.kwha-stage{position:absolute;inset:0;opacity:1;transition:opacity 500ms ease}
.kwha-stage.kwha-out{opacity:0}

.kwha-scene{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
  opacity:1;transition:opacity var(--kwha-switch-fade,500ms) ease;
}
.kwha-scene.kwha-hide{opacity:0}

/* Figure: centred-left, about 88 % of the stage height (the cutout's figure fills ~92 % of its canvas). */
.kwha-figwrap{position:absolute;inset:0;pointer-events:none}
.kwha-fig{
  position:absolute;bottom:0;left:-6%;height:95%;width:auto;aspect-ratio:2/3;
  opacity:0;transition:opacity var(--kwha-rung-fade,250ms) ease;
  filter:drop-shadow(0 10px 18px rgba(16,28,64,.22));
}
.kwha-fig.kwha-on{opacity:1}
.kwha-figwrap.kwha-glow .kwha-fig.kwha-on{animation:kwhaGlow 1.5s ease-in-out infinite}
@keyframes kwhaGlow{
  0%,100%{filter:drop-shadow(0 10px 18px rgba(16,28,64,.22)) drop-shadow(0 0 0 var(--kwha-glow))}
  50%{filter:drop-shadow(0 10px 18px rgba(16,28,64,.22)) drop-shadow(0 0 22px var(--kwha-glow))}
}

/* Read-out: bottom-right, over the pale sky side of the plate. */
.kwha-read{
  position:absolute;right:12px;bottom:12px;max-width:52%;min-width:42%;
  padding:12px 14px 13px;border-radius:16px;
  background:var(--kwha-surface);border:1px solid var(--kwha-border);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 8px 24px rgba(16,28,64,.14);
  color:var(--kwha-text);font-family:var(--font-body,'Noto Sans Thai','Plus Jakarta Sans',sans-serif);
  line-height:1.35;
}
.kwha-bar{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;margin-bottom:9px}
.kwha-bar i{display:block;height:5px;border-radius:3px;background:var(--kwha-track);transition:background .25s}
.kwha-bar i.kwha-lit{background:linear-gradient(90deg,var(--kwha-accent),var(--kwha-accent-2))}
.kwha-fac{font-size:.78rem;font-weight:700;color:var(--kwha-text-2);letter-spacing:.01em}
.kwha-step{font-family:var(--font-disp,'Plus Jakarta Sans','Noto Sans Thai',sans-serif);font-weight:800;font-size:1.05rem;color:var(--kwha-accent);font-variant-numeric:tabular-nums;margin:1px 0 2px}
.kwha-title{font-size:.92rem;font-weight:700;color:var(--kwha-text)}

/* Skip: tiny, top-right. */
.kwha-skip{
  position:absolute;top:10px;right:10px;z-index:2;
  background:var(--kwha-surface);color:var(--kwha-text-2);border:1px solid var(--kwha-border);
  border-radius:999px;padding:3px 11px;font:700 .74rem/1.5 var(--font-body,'Noto Sans Thai',sans-serif);
  cursor:pointer;opacity:.85;
}
.kwha-skip:hover,.kwha-skip:focus-visible{opacity:1;color:var(--kwha-text)}
.kwha-skip:focus-visible{outline:2px solid var(--kwha-accent);outline-offset:2px}

.kwha-static .kwha-fig,.kwha-static .kwha-scene,.kwha-static{transition:none}

@media (max-width:480px){
  .kwha-read{padding:10px 11px 11px;max-width:56%}
  .kwha-step{font-size:.95rem}
  .kwha-title{font-size:.84rem}
}
@media (prefers-reduced-motion: reduce){
  .kwha-fig,.kwha-scene,.kwha-stage{transition:none!important}
  .kwha-figwrap.kwha-glow .kwha-fig.kwha-on{animation:none}
}