/* Steve the shark floating over the page (shark-float.js): no card, no background. The wrapper ignores the
   pointer; only the shark area (.shark-float-hit) and the small X take clicks. */
.shark-float{position:fixed;z-index:85;pointer-events:none;bottom:0;line-height:0;
  transition:transform .6s cubic-bezier(.2,.9,.25,1.12),opacity .3s ease;opacity:0;
  filter:drop-shadow(0 10px 18px rgba(92,42,122,.18))}
.shark-float.in[class]{opacity:1;transform:none}
.shark-float.out{opacity:0;transition:transform .5s cubic-bezier(.55,0,.75,.2),opacity .45s ease .05s}
.shark-float-img{display:block;height:100%;width:100%;object-fit:contain;background:transparent;pointer-events:none;user-select:none;-webkit-user-drag:none}
.shark-float-hit{position:absolute;left:18%;right:18%;top:12%;bottom:4%;pointer-events:auto;cursor:pointer;border-radius:40%}
.shark-float-x{position:absolute;top:2px;right:2px;width:22px;height:22px;padding:0;border-radius:50%;pointer-events:auto;cursor:pointer;
  border:1px solid rgba(124,58,237,.16);background:rgba(255,255,255,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#5c2a7a;font-size:14px;line-height:1;display:grid;place-items:center;opacity:.6;transition:opacity .2s}
.shark-float-x:hover,.shark-float-x:focus-visible{opacity:1}
.shark-float-x:focus-visible{outline:2px solid rgba(124,58,237,.55);outline-offset:2px}
:where(:root[data-theme="dark"]) .shark-float-x{background:rgba(40,18,48,.55);color:#e9ddff;border-color:rgba(196,181,253,.25)}
@media (prefers-color-scheme:dark){:where(:root:not([data-theme="light"])) .shark-float-x{background:rgba(40,18,48,.55);color:#e9ddff;border-color:rgba(196,181,253,.25)}}

/* Exam passed (bailando, 0.95:1): bottom-right, standing on the bottom edge. */
.shark-float.at-exam .shark-float-x{right:6%;top:4%}
.shark-float.at-exam{right:3vw;height:300px;aspect-ratio:380/400;transform:translateX(calc(100% + 3vw + 20px))}
.shark-float.at-exam.out{transform:translateX(calc(100% + 3vw + 20px))}
/* Cameo from the right (clavado, 1.37:1): comes in from the right, dives into the bottom edge. */
.shark-float.at-cameo-right{right:2vw;height:220px;aspect-ratio:658/480;transform:translateX(calc(100% + 2vw + 20px))}
.shark-float.at-cameo-right.out{transform:translateX(calc(100% + 2vw + 20px))}
.shark-float.at-cameo-right .shark-float-hit{left:12%;right:30%}
.shark-float.at-cameo-right .shark-float-x{right:30%;top:4%}
/* Cameo from the left (saludando, 0.72:1): glued to the left edge, the clip itself peeks out from it. */
.shark-float.at-cameo-left{left:0;height:250px;aspect-ratio:346/480;transform:translateX(calc(-100% - 20px))}
.shark-float.at-cameo-left.no-slide{transform:none}
.shark-float.at-cameo-left.out{transform:translateX(calc(-100% - 20px))}
.shark-float.at-cameo-left .shark-float-hit{left:0;right:22%}
.shark-float.at-cameo-left .shark-float-x{right:8%}

@media (max-width:600px){
  /* Phones: a small Steve in a corner; shark-float.js sets 'bottom' to the lowest spot that covers no button
     and stays above the tab bar. */
  .shark-float{bottom:calc(76px + env(safe-area-inset-bottom));transition:transform .6s cubic-bezier(.2,.9,.25,1.12),opacity .3s ease,bottom .25s ease}
  .shark-float.at-exam{right:4px;left:auto;height:140px;transform:translateX(calc(100% + 24px))}
  .shark-float.at-exam.out{transform:translateX(calc(100% + 24px))}
  .shark-float.at-cameo-right{right:4px;height:104px}
  .shark-float.at-cameo-left{height:124px}
  .shark-float-x{width:20px;height:20px;font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .shark-float,.shark-float.in,.shark-float.out,.shark-float.at-exam,.shark-float.at-exam.out,.shark-float.at-cameo-right,
  .shark-float.at-cameo-right.out,.shark-float.at-cameo-left,.shark-float.at-cameo-left.out{transform:none;transition:opacity .2s linear}
}