/* The outer hero button belongs to the elastic edge. Its inner figure alone
   slides in, so video playback never overwrites the boundary transform. */
.hero-scroll { overflow-x: clip; overflow-y: visible; }
.hero-edge-mascot {
  left: 88.056%; width: 18.4722vw;
  transform: translate(-50%, calc(-91.3% + var(--mascot-edge-y, 0px))) rotate(var(--mascot-edge-angle, 0deg));
  transform-origin: 50% 91.3%;
}
.mascot-figure { position: relative; display: block; width: 100%; height: 100%; aspect-ratio: 1; }
.mascot-video-poster, .mascot-video-canvas {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain;
}
.mascot-video-canvas { visibility: hidden; }
/* Keep the phone's decoder attached to a rendered element. The packed RGB /
   alpha source is clipped; only its transparent canvas is ever displayed. */
[data-mascot-clip='phone'] .mascot-video-source {
  position: absolute; top: 50%; left: 50%; display: block;
  width: 1px; height: 1px; opacity: .001; clip-path: inset(50%);
  pointer-events: none;
}
[data-mascot-frame-ready='true']:not([data-mascot-paused='true']) .mascot-video-canvas { visibility: visible; }
[data-mascot-frame-ready='true']:not([data-mascot-paused='true']) .mascot-video-poster { visibility: hidden; }
.hero-edge-mascot[data-mascot-state='entering'] .mascot-figure { animation: mascot-arrive 1040ms cubic-bezier(.22,1,.36,1) both; }
@keyframes mascot-arrive { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.greeting-bubble {
  position: absolute; right: 83%; top: 51%; display: flex; align-items: center; gap: 10px;
  width: max-content; padding: 14px 18px; border-radius: 12px; background: #fbfbfb;
  color: var(--ink); box-shadow: 0 4px 22px #00071f12; font: 700 clamp(12px,1.1vw,17px)/1.4 var(--font-ja);
  opacity: 0; visibility: hidden; transform: translateY(8px) scale(.94); transform-origin: right bottom;
}
.greeting-bubble::after { content: ''; position: absolute; right: 10px; bottom: -8px; width: 16px; height: 16px; background: inherit; clip-path: polygon(0 0,100% 0,100% 100%); }
.greeting-bubble i { font: 700 20px/1 var(--font-en); color: #777; }
[data-mascot-state='ready'] .greeting-bubble { opacity: 1; visibility: visible; transform: none; transition: opacity 240ms ease,transform 360ms cubic-bezier(.22,1,.36,1); }
[data-mascot-state='ready'] .greeting-bubble > span { animation: greeting-type 580ms steps(6,end) both; }
@keyframes greeting-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.hero-edge-mascot:focus-visible .greeting-bubble, .hero-edge-mascot:hover .greeting-bubble { box-shadow: 0 6px 24px #00071f24; }
.footer-wordmark img { display: block; width: 176px; height: auto; }
.site-footer:has(.footer-mascot) { overflow: visible; z-index: 2; }
.footer-mascot { position: absolute; left: calc(50% - 160px); top: -345px; width: 320px; height: 320px; pointer-events: none; }
@media (max-width:767px) {
  .hero-edge-mascot { left: 80%; width: 144px; max-width: 38vw; }
  .greeting-bubble { right: 86%; top: 49%; gap: 7px; padding: 11px 13px; border-radius: 9px; font-size: 12px; }
  .greeting-bubble i { font-size: 17px; }
  .footer-wordmark img { width: 148px; }
  .footer-mascot { left: calc(50% - 100px); top: -180px; width: 200px; height: 200px; }
}
@media (max-width:767px) and (max-height:700px) { .hero-edge-mascot { width: 112px; } }
@media (prefers-reduced-motion:reduce) {
  .hero-edge-mascot .mascot-figure, [data-mascot-state='ready'] .greeting-bubble > span { animation: none; }
  [data-mascot-state='ready'] .greeting-bubble { transition: none; }
}
html[data-motion-paused='true'] .mascot-figure, html[data-motion-paused='true'] .greeting-bubble > span { animation: none; }
html[data-motion-paused='true'] .greeting-bubble { transition: none; }