/* A stationary button surrounds one elastic layer. Native vertical scrolling
   stays available, even when the visitor starts a swipe on the character. */
.brand-stage .cast-dot { touch-action:pan-y pinch-zoom; -webkit-touch-callout:none; user-select:none; }
.brand-stage .dot-tactile { display:block; position:relative; transform-origin:50% 50%; transition:scale .18s ease; }
.brand-stage .is-dot-holding .dot-tactile { scale:.985; }
.brand-stage .is-dot-pulling .dot-tactile,
.brand-stage .is-dot-settling .dot-tactile { will-change:transform; }
.brand-stage .is-dot-pulling .dot-body,
.brand-stage .is-dot-settling .dot-body { animation-play-state:paused; }
.brand-stage .cast-dot[data-dot-reaction="pull"] { --dot-open-x:calc(.5 + var(--pull-tension,0)*.13); --dot-open-y:calc(.64 + var(--pull-tension,0)*.24); --dot-eye-height:calc(13% + var(--pull-tension,0)*1.1%); --dot-eye-top:39.65%; }
.brand-stage .cast-dot[data-dot-reaction="spring"] { --dot-smile-x:.73; --dot-smile-y:.56; --dot-eye-height:12.2%; --dot-eye-top:40.4%; }
.hero .brand-stage .dot-remark { top:0; left:auto; right:10%; max-width:min(172px,58%); padding:10px 15px; border-radius:18px 18px 18px 5px; rotate:1.5deg; transform-origin:20% 100%; translate:-2px 6px; scale:.96; box-shadow:0 8px 24px #192e9a0d; transition:opacity .18s ease,translate .42s cubic-bezier(.22,1,.36,1),scale .42s cubic-bezier(.22,1,.36,1); }
.hero .brand-stage.has-remark .dot-remark { translate:0 0; scale:1; }
@media (max-width:760px) {
  .hero .brand-stage .dot-remark { top:28%; right:3%; max-width:100px; padding:9px 13px; font-size:11px; }
}
@media (max-width:760px) and (max-height:700px) {
  .hero .brand-stage .dot-remark { top:38%; }
}
@media (max-width:370px) {
  .hero .brand-stage .dot-remark { top:16%; }
}
@media (hover:hover) and (pointer:fine) {
  .brand-stage .cast-dot { cursor:grab; }
  .brand-stage .cast-dot.is-dot-pulling { cursor:grabbing; }
}
@media (prefers-reduced-motion:reduce) {
  .brand-stage .dot-tactile { transform:none!important; }
  .brand-stage .cast-dot { cursor:pointer; }
  .hero .brand-stage .dot-remark,.brand-stage .dot-tactile { transition:none; }
}