/* Lesson peek styles stay unused while PEEK_ENABLED is false. The landing hero waves, blinks, or hops. */
.shark-host{position:fixed;z-index:16;width:76px;height:102px;pointer-events:none;overflow:visible;user-select:none}
.shark-slide,.shark-act{width:100%;height:100%}
.shark-img{width:100%;height:100%;display:block;object-fit:contain;transform-origin:50% 55%}
.shark-act{transform-origin:50% 92%}
.shark-edge-left{left:-18px;top:36%}
.shark-edge-right{right:-18px;top:42%}
.shark-edge-bottom{left:10px;bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
.shark-edge-corner{right:-8px;bottom:calc(84px + env(safe-area-inset-bottom, 0px))}
.shark-live.shark-from-left .shark-slide{animation:shark-in-left 3.4s ease-in-out both}
.shark-live.shark-from-right .shark-slide{animation:shark-in-right 3.4s ease-in-out both}
.shark-live.shark-from-bottom .shark-slide{animation:shark-in-bottom 3.4s ease-in-out both}
.shark-live.shark-from-corner .shark-slide{animation:shark-in-corner 3.4s ease-in-out both}
.shark-live.shark-act-wave .shark-img{animation:shark-wave 3.4s ease-in-out both}
.shark-live.shark-act-wink .shark-img{animation:shark-wink 3.4s ease-in-out both}
.shark-live.shark-act-bounce .shark-act{animation:shark-bounce 3.4s ease-in-out both}
@keyframes shark-in-left{0%{transform:translate3d(-130%,0,0)}18%{transform:translate3d(0,0,0)}74%{transform:translate3d(0,0,0)}100%{transform:translate3d(-130%,0,0)}}
@keyframes shark-in-right{0%{transform:translate3d(130%,0,0)}18%{transform:translate3d(0,0,0)}74%{transform:translate3d(0,0,0)}100%{transform:translate3d(130%,0,0)}}
@keyframes shark-in-bottom{0%{transform:translate3d(0,130%,0)}18%{transform:translate3d(0,8px,0)}74%{transform:translate3d(0,8px,0)}100%{transform:translate3d(0,130%,0)}}
@keyframes shark-in-corner{0%{transform:translate3d(120%,40%,0)}18%{transform:translate3d(0,0,0)}74%{transform:translate3d(0,0,0)}100%{transform:translate3d(120%,40%,0)}}
@keyframes shark-wink{0%,32%{transform:scaleY(1)}46%{transform:scaleY(.62)}62%,100%{transform:scaleY(1)}}
@keyframes shark-wave{0%,22%{transform:rotate(0)}34%{transform:rotate(-16deg)}46%{transform:rotate(12deg)}58%{transform:rotate(-12deg)}74%,100%{transform:rotate(0)}}
@keyframes shark-bounce{0%,24%{transform:translateY(0)}38%{transform:translateY(-16px)}50%{transform:translateY(0)}60%{transform:translateY(-8px)}74%,100%{transform:translateY(0)}}

/* Landing hero: wave around the feet, or a small hop. The blink is an image swap. */
.land-brand picture{transform-origin:50% 100%}
.land-brand picture.land-act-wave{animation:land-wave .8s ease-in-out}
.land-brand picture.land-act-bounce{animation:land-bounce .6s ease-out}
@keyframes land-wave{
  0%,100%{transform:rotate(0deg)}
  20%{transform:rotate(-6deg)}
  40%{transform:rotate(6deg)}
  60%{transform:rotate(-6deg)}
  80%{transform:rotate(6deg)}
}
@keyframes land-bounce{
  0%,100%{transform:translateY(0)}
  40%{transform:translateY(-12px)}
  62%{transform:translateY(0)}
  78%{transform:translateY(-5px)}
}
@media (prefers-reduced-motion:reduce){
  .shark-host .shark-slide,
  .shark-host .shark-act,
  .shark-host .shark-img,
  .land-brand picture{animation:none !important}
}