/* The character has its own 3D head rig; the layout remains stable. */
.hero--head .hero-visual{
  width:59%;right:-4%;top:0;bottom:0;
  perspective:none;will-change:auto;
}
.hero--head .hero-head-stage{
  position:absolute;top:49%;right:0;width:100%;aspect-ratio:1.08;
  transform:translateY(-50%);isolation:isolate;
}
.hero--head .hero-head-renderer{position:absolute;inset:0}
.hero--head .hero-touch-pad{
  position:absolute;z-index:2;left:7%;top:21%;width:86%;height:62%;
  touch-action:pinch-zoom;user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;
}
.hero--head .hero-touch-pad[hidden]{display:none}
.hero--head .hero-head-renderer canvas{
  display:block;width:100%;height:100%;touch-action:pan-y pinch-zoom;
}
.hero--head .hero-art,.hero--head .fallback{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  object-fit:contain;transform:none;filter:none;animation:none;transition:opacity .2s;
  pointer-events:none;
}
.hero--head .hero-art[hidden],.hero--head .fallback{display:none}
.hero--head .hero-orb,.hero--head .touch-badge,.hero--head .hero-spark{display:none}
.hero--head .speech{
  top:36px;right:6%;left:auto;max-width:210px;font-size:12px;padding:12px 16px;
  pointer-events:none;
}
.hero--head .mood-picker{right:5%}
@media(min-width:1550px){.hero--head .hero-head-stage{width:108%;right:-3%}}
@media(max-width:1150px){
  .hero--head .hero-visual{width:57%;right:-4%;top:0;bottom:0}
  .hero--head .speech{top:45px;right:2%;font-size:11px;max-width:195px}
}
@media(max-width:900px) and (min-width:701px){
  .hero--head .hero-visual{width:55%;right:-4%}
  .hero--head .speech{top:40px;right:0;font-size:10px;max-width:180px}
}
@media(max-width:700px){
  .hero--head .hero-visual{
    position:relative;inset:auto;width:calc(100% + 40px);height:auto;
    margin:18px -20px 0;padding-top:48px;
  }
  .hero--head .hero-head-stage{position:relative;inset:auto;width:100%;aspect-ratio:1.22;transform:none}
  .hero--head .speech{top:2px;right:17px;max-width:220px;font-size:10px;padding:10px 12px;transform:rotate(3deg)}
  .hero--head .mood-picker{right:auto;margin-top:0}
}
@media(max-width:359px){.hero--head .hero-visual{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}}
@media(prefers-reduced-motion:reduce){
  .hero--head .hero-art{transition:none}
  .hero--head .hero-touch-pad{pointer-events:none;touch-action:pan-y pinch-zoom}
}

/* A transparent, lightweight first frame; the photograph is only a 3D texture. */
.hero--head .hero-head-placeholder{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;opacity:1;visibility:visible;transition:opacity .36s ease,visibility 0s}
.hero--head .hero-head-preview{display:block;width:94%;height:78%;overflow:visible;flex:0 1 auto;stroke:none}
.hero--head .hero-head-status{font-size:12px;line-height:1.5;color:#655775;text-align:center;margin:5px 0 0}
.hero--head .hero-head-loading-dots{display:flex;gap:5px;margin-top:10px;height:5px}
.hero--head .hero-head-loading-dots i{display:block;width:5px;height:5px;border-radius:50%;background:#a99bd3;animation:hero-head-dot 1.4s ease-in-out infinite}
.hero--head .hero-head-loading-dots i:nth-child(2){animation-delay:.15s}
.hero--head .hero-head-loading-dots i:nth-child(3){animation-delay:.3s}
.hero--head .hero-head-renderer{opacity:0;transition:opacity .36s ease}
.hero--head[data-head-state="ready"] .hero-head-renderer{opacity:1}
.hero--head[data-head-state="ready"] .hero-head-placeholder{opacity:0;visibility:hidden;transition:opacity .36s ease,visibility 0s .36s}
.hero--head[data-head-state="fallback"] .hero-head-loading-dots{visibility:hidden;animation:none}
.hero--head[data-head-state="fallback"] .hero-head-loading-dots i{animation:none}
.hero--head:not([data-head-state="ready"]) .cursor-orbit,.hero--head:not([data-head-state="ready"]) .cursor-invitation{visibility:hidden}
.hero--head .hero-head-noscript{font-size:11px;color:#655775;text-align:center;margin:8px 0 0}
@keyframes hero-head-dot{0%,70%,100%{opacity:.35}35%{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .hero--head .hero-head-placeholder,.hero--head .hero-head-renderer{transition:none}
  .hero--head .hero-head-loading-dots i{animation:none}
  .hero--head .cursor-orbit,.hero--head .cursor-invitation{visibility:hidden}
}