/* HanAnHua v125 — program bears + clipped program photos matched to the supplied reference.
   The card keeps a stable responsive layout; only a dedicated left gutter is reserved for the mascot. */

.program-card.has-program-bear{
  --bear-gutter:clamp(168px,18vw,230px);
  width:calc(100% - var(--bear-gutter))!important;
  margin-left:var(--bear-gutter)!important;
  margin-right:0!important;
  overflow:visible!important;
  isolation:isolate;
}

/* Fully detach mascot artwork from the generic program-card figure rules. */
.program-card.has-program-bear > .program-bear-figure{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  right:auto!important;
  bottom:auto!important;
  z-index:10!important;
  display:block!important;
  width:clamp(220px,20vw,305px)!important;
  height:auto!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  overflow:visible!important;
  background:transparent!important;
  box-shadow:none!important;
  pointer-events:none!important;
  user-select:none;
  opacity:0;
  transform:translate(-78%,-50%) scale(.96);
  transform-origin:72% 52%;
  filter:drop-shadow(0 14px 16px rgba(17,17,17,.16));
}
.program-card.has-program-bear > .program-bear-figure::before,
.program-card.has-program-bear > .program-bear-figure::after{content:none!important;display:none!important}
.program-card.has-program-bear > .program-bear-figure img{
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:none!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:center!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  transform:none!important;
}
.program-card.has-program-bear:hover > .program-bear-figure img{transform:none!important}

/* Small optical corrections for the three source PNGs. */
.program-card.has-program-bear > .bear-maid{width:clamp(225px,20vw,310px)!important}
.program-card.has-program-bear > .bear-construction{width:clamp(230px,20.5vw,315px)!important}
.program-card.has-program-bear > .bear-graduation{width:clamp(226px,20vw,310px)!important}

/* Scroll entrance: bear comes out from behind the left edge, then floats gently. */
html.js-ready.motion-enabled .program-card.is-visible > .program-bear-figure,
html.motion-lite .program-card.is-visible > .program-bear-figure{
  animation:hanBearPeek124 .88s calc(var(--reveal-delay,0ms) + 80ms) cubic-bezier(.18,.88,.24,1) both;
}
html.js-ready.motion-enabled .program-card.is-visible > .program-bear-figure img,
html.motion-lite .program-card.is-visible > .program-bear-figure img{
  animation:hanBearFloat124 5.2s 1.05s ease-in-out infinite;
}
@keyframes hanBearPeek124{
  0%{opacity:0;transform:translate(-96%,-50%) scale(.91)}
  72%{opacity:1;transform:translate(-74%,-50%) scale(1.02)}
  100%{opacity:1;transform:translate(-78%,-50%) scale(1)}
}
@keyframes hanBearFloat124{
  0%,100%{transform:translate3d(0,0,0) rotate(-.2deg)}
  50%{transform:translate3d(0,-7px,0) rotate(.35deg)}
}

/* Wide monitors: do not push the card to the far right. */
@media (min-width:1700px){
  .program-card.has-program-bear{
    --bear-gutter:230px;
    width:min(1500px,calc(100% - var(--bear-gutter)))!important;
    margin-left:max(var(--bear-gutter),calc((100% - 1500px)/2 + var(--bear-gutter)/2))!important;
    margin-right:auto!important;
  }
  .program-card.has-program-bear > .program-bear-figure{width:300px!important}
}

/* Laptop / landscape tablet. */
@media (max-width:1180px) and (min-width:821px){
  .program-card.has-program-bear{
    --bear-gutter:clamp(128px,16vw,184px);
  }
  .program-card.has-program-bear > .program-bear-figure{
    width:clamp(190px,22vw,250px)!important;
    transform:translate(-75%,-50%) scale(.96);
  }
  @keyframes hanBearPeek124Tablet{
    0%{opacity:0;transform:translate(-94%,-50%) scale(.91)}
    72%{opacity:1;transform:translate(-71%,-50%) scale(1.02)}
    100%{opacity:1;transform:translate(-75%,-50%) scale(1)}
  }
  html.js-ready.motion-enabled .program-card.is-visible > .program-bear-figure,
  html.motion-lite .program-card.is-visible > .program-bear-figure{animation-name:hanBearPeek124Tablet}
}

/* Phones: keep only a compact mascot gutter so the card stays readable. */
@media (max-width:820px){
  .program-card.has-program-bear{
    --bear-gutter:clamp(44px,14vw,66px);
    width:calc(100% - var(--bear-gutter))!important;
    margin-left:var(--bear-gutter)!important;
    margin-right:0!important;
    overflow:visible!important;
  }
  .program-card.has-program-bear > .program-bear-figure,
  .program-card.has-program-bear > .bear-maid,
  .program-card.has-program-bear > .bear-construction,
  .program-card.has-program-bear > .bear-graduation{
    top:auto!important;
    bottom:clamp(14px,4vw,26px)!important;
    width:clamp(112px,32vw,154px)!important;
    transform:translate(-56%,0) scale(.96);
    filter:drop-shadow(0 8px 10px rgba(17,17,17,.14));
  }
  @keyframes hanBearPeek124Mobile{
    0%{opacity:0;transform:translate(-82%,8px) scale(.91)}
    72%{opacity:1;transform:translate(-52%,-2px) scale(1.02)}
    100%{opacity:1;transform:translate(-56%,0) scale(1)}
  }
  html.js-ready.motion-enabled .program-card.is-visible > .program-bear-figure,
  html.motion-lite .program-card.is-visible > .program-bear-figure{animation-name:hanBearPeek124Mobile}
}
@media (max-width:480px){
  .program-card.has-program-bear{--bear-gutter:42px}
  .program-card.has-program-bear > .program-bear-figure,
  .program-card.has-program-bear > .bear-maid,
  .program-card.has-program-bear > .bear-construction,
  .program-card.has-program-bear > .bear-graduation{width:124px!important;bottom:12px!important}
}

@media (prefers-reduced-motion:reduce){
  .program-card.has-program-bear > .program-bear-figure{opacity:1!important;animation:none!important}
  .program-card.has-program-bear > .program-bear-figure img{animation:none!important}
}


/* v125: keep every program photo inside the rounded card while the bear may stay outside on the left. */
.program-card.has-program-bear > figure:not(.program-bear-figure){
  overflow:hidden!important;
  border-top-right-radius:calc(var(--radius) - 3px)!important;
  border-bottom-right-radius:calc(var(--radius) - 3px)!important;
  clip-path:inset(0 round 0 calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0);
}
.program-card.has-program-bear > .program-dual-photo{
  overflow:hidden!important;
  border-top-right-radius:calc(var(--radius) - 3px)!important;
  border-bottom-right-radius:calc(var(--radius) - 3px)!important;
}
.program-card.has-program-bear > figure:not(.program-bear-figure) img,
.program-card.has-program-bear > .program-dual-photo img{
  max-width:100%!important;
  max-height:100%!important;
}

/* On stacked mobile cards the photo becomes the bottom panel, so clip both lower corners. */
@media (max-width:820px){
  .program-card.has-program-bear > figure:not(.program-bear-figure),
  .program-card.has-program-bear > .program-dual-photo{
    border-top-right-radius:0!important;
    border-bottom-right-radius:calc(28px - 3px)!important;
    border-bottom-left-radius:calc(28px - 3px)!important;
    clip-path:inset(0 round 0 0 calc(28px - 3px) calc(28px - 3px));
  }
}