/* Transparent day/night cutouts. No filter recolors the artwork. */
img[data-jus-mascot] { object-fit: contain; mix-blend-mode: normal; background: transparent; }
.character-card > img[data-jus-mascot] { object-fit: contain; mix-blend-mode: normal; }
.sticker img[data-jus-mascot] { border-radius: 0; object-fit: contain; transform: scale(1.18); }
.join-block > img[data-jus-mascot] { object-fit: contain; mix-blend-mode: normal; border-radius: 0; }
.join-experience .join-object,html[data-theme="dark"] .join-experience .join-object,
.login-experience .login-object,html[data-theme="dark"] .login-experience .login-object { overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.join-experience .join-object img[data-jus-mascot],.login-experience .login-object[data-jus-mascot] { object-fit: contain; filter: drop-shadow(0 9px 9px #17222d12); }
.join-intro::after { background-image: url('assets/v3/mascot-hook-day.webp'); background-size: contain; background-repeat: no-repeat; }
html[data-theme="dark"] .join-intro::after { background-image: url('assets/v3/mascot-hook-night.webp'); }
.model-symbol.mascot-model { position: relative; flex: 0 0 194px; height: 194px; width: 100%; font-size: 0; line-height: 0; rotate: 0deg; isolation: isolate; }
.model-mascot { position: absolute; width: 220px; height: 220px; max-width: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-7deg); pointer-events: none; transition: transform .35s ease; }
.model-card:hover .model-mascot--main { transform: translate(-50%, -54%) rotate(2deg); }
.mascot-model[data-mascot-model="magnet"] .model-mascot--main { width: 190px; height: 190px; z-index: 2; }
.model-mascot--left,.model-mascot--right { width: 139px; height: 139px; z-index: 1; }
.model-mascot--left { left: 19%; top: 43%; transform: translate(-50%, -50%) rotate(-16deg); }
.model-mascot--right { left: 82%; top: 45%; transform: translate(-50%, -50%) rotate(15deg); }
.model-card:hover .model-mascot--left { transform: translate(-44%, -51%) rotate(-8deg); }
.model-card:hover .model-mascot--right { transform: translate(-56%, -51%) rotate(8deg); }
.jus-scroll-thumb.has-canonical-mascot { overflow: visible; }
.jus-scroll-mascot { position: absolute; inset: -7px -20px; width: 78px; height: 78px; max-width: none; pointer-events: none; transform: rotate(var(--jus-hook-tilt, -7deg)); transform-origin: 55% 24%; filter: drop-shadow(0 2px 2px #071b3025); transition: transform .18s ease-out; }
.jus-scroll-thumb:has(.jus-scroll-mascot[data-mascot-loaded="true"]) > .jus-hook-drawing { opacity: 0; }
.jus-scroll-control.is-decorative .jus-scroll-mascot { width: 46px; height: 46px; inset: -5px -13px; }
#back-top .jus-magnet-icon.has-canonical-mascot { position: relative; }
#back-top .jus-top-mascot { position: absolute; width: 55px; height: 55px; max-width: none; inset: -6px; transform: rotate(-10deg); filter: drop-shadow(0 2px 2px #071b3020); transition: transform .22s ease; }
#back-top .jus-magnet-icon:has(.jus-top-mascot[data-mascot-loaded="true"]) .jus-magnet-core { opacity: 0; }
#back-top:hover .jus-top-mascot { transform: rotate(6deg) translateY(-2px); }
#back-top.is-attracting .jus-top-mascot { animation: canonical-magnet-pull .5s ease both; }
@keyframes canonical-magnet-pull { 35% { transform: translateY(-4px) rotate(9deg) scale(1.05); } 70% { transform: translateY(1px) rotate(-13deg) scale(.98); } }
@media(max-width:800px) {
  .join-block > img[data-jus-mascot] { width: 61%; right: -4%; bottom: -1%; }
  .model-symbol.mascot-model { height: 155px; min-width: 0; }
  .model-mascot { width: 187px; height: 187px; max-width: 145%; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--main { width: 152px; height: 152px; }
  .model-mascot--left,.model-mascot--right { width: 102px; height: 102px; }
  .model-mascot--left { left: 10%; }.model-mascot--right { left: 88%; }
  #back-top .jus-top-mascot { width: 50px; height: 50px; inset: -5px; }
}
@media(max-width:400px) {
  .model-symbol.mascot-model { height: 135px; }
  .model-mascot { width: 164px; height: 164px; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--main { width: 124px; height: 124px; }
  .model-mascot--left,.model-mascot--right { width: 87px; height: 87px; }
}
@media(max-width:600px) {
  .model-card:has([data-mascot-model="magnet"]) h3 { grid-column: 1 / -1; }
  .model-card:has([data-mascot-model="magnet"]) .mascot-model { grid-column: 1 / -1; grid-row: 3; height: 157px; }
  .model-card:has([data-mascot-model="magnet"]) p { grid-column: 1 / -1; grid-row: 4; margin-top: 8px; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--main { width: 163px; height: 163px; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--left,
  .mascot-model[data-mascot-model="magnet"] .model-mascot--right { width: 114px; height: 114px; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--left { left: 16%; top: 45%; }
  .mascot-model[data-mascot-model="magnet"] .model-mascot--right { left: 84%; top: 45%; }
}
html[data-motion="off"] .model-mascot,html[data-motion="off"] .jus-scroll-mascot,html[data-motion="off"] #back-top .jus-top-mascot { transition: none; animation: none; }
@media(prefers-reduced-motion:reduce) { .model-mascot,.jus-scroll-mascot,#back-top .jus-top-mascot { transition: none; animation: none!important; } }