/* Fixed56: animated landing mascot using layered raster animation */
.landing-class-hero{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:18px!important;
}
.jclass-hero-motion{
  position:relative;
  width:min(82%,760px);
  margin:auto;
  aspect-ratio:1/1;
  transform-origin:50% 78%;
  animation:jclass-breathe 4.8s ease-in-out infinite;
  isolation:isolate;
}
.jclass-hero-base{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:1/1!important;
  object-fit:contain!important;
  object-position:center!important;
  background:transparent!important;
  user-select:none;
  pointer-events:none;
}
.jclass-hero-layer{
  position:absolute;
  inset:0;
  background-image:url('jayones-class-hero-animated.png?v=fixed56');
  background-position:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  will-change:transform;
  z-index:2;
}
/* 손으로 안경을 살짝 올리는 부분 */
.jclass-glasses-layer{
  clip-path:polygon(38% 40%,67% 38%,69% 61%,39% 62%);
  transform-origin:49% 52%;
  animation:jclass-adjust-glasses 5.6s cubic-bezier(.45,0,.25,1) infinite;
}
/* 키보드를 누르는 오른손 부분 */
.jclass-typing-layer{
  clip-path:polygon(45% 65%,72% 64%,76% 82%,43% 82%);
  transform-origin:59% 75%;
  animation:jclass-type-hand .62s steps(2,end) infinite;
}
.jclass-key{
  position:absolute;
  bottom:22.6%;
  width:2.2%;
  height:.55%;
  border-radius:999px;
  background:rgba(120,205,255,.72);
  box-shadow:0 0 12px rgba(68,180,255,.75);
  opacity:0;
  z-index:3;
  animation:jclass-key-flash 1.24s steps(1,end) infinite;
}
.jclass-key.key-one{left:51%;animation-delay:.05s}
.jclass-key.key-two{left:56%;animation-delay:.42s}
.jclass-key.key-three{left:61%;animation-delay:.78s}
@keyframes jclass-breathe{
  0%,100%{transform:translateY(0) rotate(.05deg)}
  50%{transform:translateY(-5px) rotate(-.05deg)}
}
@keyframes jclass-adjust-glasses{
  0%,57%,100%{transform:translate(0,0) rotate(0deg)}
  62%{transform:translate(-2px,-3px) rotate(-1.2deg)}
  67%{transform:translate(1px,-5px) rotate(.7deg)}
  72%{transform:translate(0,-1px) rotate(0deg)}
}
@keyframes jclass-type-hand{
  0%{transform:translateY(0) rotate(0deg)}
  50%{transform:translateY(2px) rotate(.35deg)}
  100%{transform:translateY(0) rotate(0deg)}
}
@keyframes jclass-key-flash{
  0%,33%,100%{opacity:0;transform:scaleX(.7)}
  34%,42%{opacity:1;transform:scaleX(1)}
  43%{opacity:0}
}
@media(max-width:980px){
  .landing-class-hero{padding:10px!important}
  .jclass-hero-motion{width:min(88%,680px)}
}
@media(max-width:620px){
  .landing-class-hero{padding:4px!important}
  .jclass-hero-motion{width:94%}
}
@media(prefers-reduced-motion:reduce){
  .jclass-hero-motion,.jclass-glasses-layer,.jclass-typing-layer,.jclass-key{animation:none!important}
}