/* Grizzly's stage (grizzly-stage.js): the 2D stand-in world and bear, made
   of the user's paintings: the page's first paint and its fallback. The live
   3D stage (grizzly-stage3d.js) draws its canvas under it and hides it once
   the 3D has taken over. Every head layer is placed in the head's own px (--x, --y, --w,
   --h, from grizzly-art.js) times --u (screen px per head px, set by the
   stage on each resize), so all of them stay registered at any size. */
.g-world {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
.g-plate,
.g-aurora {
  position: absolute;
  display: block;
  max-width: none;
}
/* The sky moves: the aurora's curtains (the plate keyed to their greens by
   grizzly-stage.js's #g-aurora-key) brighten, stretch and sway slowly over
   the plate, and so does their reflection on the ice. Only opacity and
   transform change, so a frame never repaints the picture. */
.g-keys {
  position: absolute;
  width: 0;
  height: 0;
}
.g-aurora {
  opacity: 0;
  filter: url("#g-aurora-key");
  mix-blend-mode: screen;
  transform-origin: 50% 0;
  will-change: transform, opacity;
  /* (the sky and the reflection under the horizon, not the teal ice nearer) */
  -webkit-mask-image: linear-gradient(180deg, #000 52%, #0000 60%);
  mask-image: linear-gradient(180deg, #000 52%, #0000 60%);
}
.g-world[data-orientation="portrait"] .g-aurora {
  -webkit-mask-image: linear-gradient(180deg, #000 44%, #0000 50%);
  mask-image: linear-gradient(180deg, #000 44%, #0000 50%);
}
.g-world.is-ready .g-aurora {
  animation: g-aurora 11s ease-in-out infinite alternate;
}
@keyframes g-aurora {
  0% { opacity: 0.1; transform: translateX(-5px) scaleY(1); }
  35% { opacity: 0.75; transform: translateX(3px) scaleY(1.02); }
  70% { opacity: 0.35; transform: translateX(6px) scaleY(1.035); }
  100% { opacity: 0.85; transform: translateX(-2px) scaleY(1.015); }
}
/* The lake's fish (grizzly-stage.js's makeLake): a layer the plate's size in
   plate px, placed and scaled with it, holding the ice over each painted
   fish and the fish swimming over it by transform alone. */
.g-lake {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.g-fill,
.g-fish {
  position: absolute;
  display: block;
}
.g-fish {
  will-change: transform;
}
/* Behind the live 3D world (which has its own aurora and fish) the
   stand-in's sky and fish stop and leave the compositor. */
[data-stage="3d"] .g-aurora,
[data-stage="3d"] .g-lake {
  display: none;
}
/* (reduced motion: a still sky, the painted fish where they are painted) */
@media (prefers-reduced-motion: reduce) {
  .g-aurora,
  .g-lake {
    display: none;
  }
}
.g-bear {
  --u: 0.5;
  position: absolute;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}
.g-world.is-ready .g-bear {
  opacity: 1;
}
.g-motion {
  position: absolute;
  inset: 0;
}
.g-layer,
.g-fang,
.g-eyes {
  position: absolute;
  left: calc(var(--x) * var(--u) * 1px);
  top: calc(var(--y) * var(--u) * 1px);
  width: calc(var(--w) * var(--u) * 1px);
  height: calc(var(--h) * var(--u) * 1px);
}
img.g-layer {
  display: block;
  max-width: none;
}
/* The fangs: each a window of head-fangs.webp masked by itself at rest, so a
   sunk fang slides into the gum and is gone where the lip hides it. */
.g-fangs {
  position: absolute;
  inset: 0;
}
.g-fang {
  /* bigger than the painting's, about its root (grizzly-stage.js FANG_SCALE):
     its mask, its press and its frost with it */
  scale: var(--fang-scale, 1);
  transform-origin: calc(var(--rx, 0) * var(--u) * 1px) calc(var(--ry, 0) * var(--u) * 1px);
  -webkit-mask-image: var(--fangs);
  mask-image: var(--fangs);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--fw) * var(--u) * 1px) calc(var(--fh) * var(--u) * 1px);
  mask-size: calc(var(--fw) * var(--u) * 1px) calc(var(--fh) * var(--u) * 1px);
  -webkit-mask-position: calc((var(--fx) - var(--x)) * var(--u) * 1px) calc((var(--fy) - var(--y)) * var(--u) * 1px);
  mask-position: calc((var(--fx) - var(--x)) * var(--u) * 1px) calc((var(--fy) - var(--y)) * var(--u) * 1px);
}
.g-fang > i {
  position: absolute;
  inset: 0;
  display: block;
  background-image: var(--fangs);
  background-repeat: no-repeat;
  background-size: calc(var(--fw) * var(--u) * 1px) calc(var(--fh) * var(--u) * 1px);
  background-position: calc((var(--fx) - var(--x)) * var(--u) * 1px) calc((var(--fy) - var(--y)) * var(--u) * 1px);
  transition: transform 300ms cubic-bezier(0.2, 0.9, 0.3, 1.15) var(--rise-delay, 0ms);
}
.g-fang.is-sunk > i {
  transform: translateY(calc(var(--sink) * var(--u) * 1px));
  animation: g-fang-pick calc(var(--catch, 110ms) + 160ms) linear both;
}
/* The crocodile's pick: the fang catches showing 0.8 of itself (0.36 of its
   sink) by 30 % of the catch, holds, then slams home past its seat (1.12)
   and settles (0.97, 1) over 160 ms; --catch is 60 ms and more with the
   tension (grizzly-stage.js). */
@keyframes g-fang-pick {
  0% { transform: none; animation-timing-function: ease-out; }
  12% { transform: translateY(calc(var(--sink) * 0.36 * var(--u) * 1px)) rotate(1deg); }
  30% { transform: translateY(calc(var(--sink) * 0.36 * var(--u) * 1px)) rotate(-1deg); animation-timing-function: cubic-bezier(0.55, 0, 0.85, 0.35); }
  67% { transform: translateY(calc(var(--sink) * 1.12 * var(--u) * 1px)); animation-timing-function: ease-in-out; }
  85% { transform: translateY(calc(var(--sink) * 0.97 * var(--u) * 1px)); }
  100% { transform: translateY(calc(var(--sink) * var(--u) * 1px)); }
}
/* A seated fang's frost (stage.frost): a layer inside the fang's own, so it
   sinks, nods and squashes with it, masked by the fang's painted shape (and
   by the fang's rest window round it, so the gum hides it with the fang):
   the fang itself in icy blue and white (its own shading kept), white
   flecks (on its lit pixels: the dark shading round its edge stays the
   painting's), creeping in from the seated fang's gum line toward its tip
   (--creep-at, along --toward), a short glint running along it (--glint-at),
   the tally's light sweeping across it (--sweep-at) and brightening it
   (--won); --frost is its opacity. It never touches the gum or the head. */
.g-frost {
  position: absolute;
  inset: 0;
  display: none;
  background: inherit;
  opacity: var(--frost, 0);
  -webkit-mask-image: var(--fangs), linear-gradient(var(--toward), #000 calc(var(--creep-at, 0%) - 7%), transparent calc(var(--creep-at, 0%) + 7%));
  mask-image: var(--fangs), linear-gradient(var(--toward), #000 calc(var(--creep-at, 0%) - 7%), transparent calc(var(--creep-at, 0%) + 7%));
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: calc(var(--fw) * var(--u) * 1px) calc(var(--fh) * var(--u) * 1px), 100% 100%;
  mask-size: calc(var(--fw) * var(--u) * 1px) calc(var(--fh) * var(--u) * 1px), 100% 100%;
  -webkit-mask-position: calc((var(--fx) - var(--x)) * var(--u) * 1px) calc((var(--fy) - var(--y)) * var(--u) * 1px), 0 0;
  mask-position: calc((var(--fx) - var(--x)) * var(--u) * 1px) calc((var(--fy) - var(--y)) * var(--u) * 1px), 0 0;
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  /* (the fang's painted light, not just its alpha: the dark shading round
     its edge stays the painting's) */
  mask-mode: luminance, alpha;
  pointer-events: none;
}
.g-fang.is-frosted .g-frost {
  display: block;
}
.g-frost::before,
.g-frost::after {
  content: "";
  position: absolute;
  inset: 0;
}
.g-frost::before {
  background: inherit;
  filter: grayscale(1) sepia(1) hue-rotate(170deg) saturate(3.2) brightness(calc(1.08 + 0.25 * var(--won, 0)));
}
.g-frost::after {
  background:
    linear-gradient(var(--toward), transparent calc(var(--glint-at, -60%) - 6%), #fffffff2 var(--glint-at, -60%), transparent calc(var(--glint-at, -60%) + 6%)),
    linear-gradient(100deg, transparent calc(var(--sweep-at, -200%) - 14%), #ffffff99 var(--sweep-at, -200%), transparent calc(var(--sweep-at, -200%) + 14%)),
    linear-gradient(var(--toward), transparent calc(var(--creep-at, 0%) - 9%), #ffffffcc calc(var(--creep-at, 0%) - 4%), transparent var(--creep-at, 0%)),
    radial-gradient(circle at 30% 35%, #ffffffe6 0 0.7px, transparent 1.1px) 0 0 / 7px 8px,
    radial-gradient(circle at 70% 60%, #ffffffb3 0 0.6px, transparent 1px) 3px 2px / 9px 7px,
    linear-gradient(var(--toward), #ffffff66, #dff4ff1a 45%, #ffffff40);
}
/* pressed by a pointer: it gives a little; pointed at: it wobbles */
.g-fang.is-pressing:not(.is-sunk) > i {
  transform: translateY(calc(var(--sink) * 0.18 * var(--u) * 1px));
  transition: transform 180ms ease-out;
}
.g-fang.is-wobbling:not(.is-sunk) > i {
  animation: g-fang-wobble 520ms ease-in-out;
}
@keyframes g-fang-wobble {
  20% { rotate: -3deg; }
  45% { rotate: 2.4deg; }
  68% { rotate: -1.3deg; }
  86% { rotate: 0.5deg; }
}
/* the bite's trap fang gives a little under the wind-up */
.g-fang.is-trap:not(.is-sunk) > i {
  transform: translateY(calc(var(--sink) * 0.3 * var(--u) * 1px));
  transition: transform 380ms cubic-bezier(0.4, 0, 0.6, 1);
}
/* The eyes: the openings' whites (no pupils) with the irises looking around
   inside them, clipped by the openings. */
.g-eyes {
  -webkit-mask: var(--whites) 0 0 / 100% 100% no-repeat;
  mask: var(--whites) 0 0 / 100% 100% no-repeat;
}
.g-whites,
.g-irises {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--whites) 0 0 / 100% 100% no-repeat;
}
.g-irises {
  background-image: var(--irises);
  transform: translate(calc(var(--lx, 0) * var(--u) * 1px), calc(var(--ly, 0) * var(--u) * 1px));
  transition: transform 400ms cubic-bezier(0.25, 0.8, 0.35, 1);
}
/* The mouth, the faces and the chomp: cuts. Two paintings have no
   in-between: half way through a cross-fade both show (two sets of eyes,
   the teeth through the smile), so each swap is instant (Cute Temple's rule:
   a swap with no in-between painting is instant or hidden behind a blink).
   A face shows only inside its own small mask. */
.g-closed,
.g-face,
.g-chomp {
  opacity: 0;
}
.g-bear[data-mouth="closed"] .g-closed {
  opacity: 1;
}
.g-bear[data-face="blink"] .g-face[data-face="blink"],
.g-bear[data-face="squint"] .g-face[data-face="squint"],
.g-bear[data-face="wink"] .g-face[data-face="wink"],
.g-bear[data-face="worried"] .g-face[data-face="worried"],
.g-bear[data-face="happy"] .g-face[data-face="happy"],
.g-bear[data-face="bright"] .g-face[data-face="bright"],
.g-bear[data-face="oops"] .g-face[data-face="oops"],
.g-bear[data-face="happyClosed"] .g-face[data-face="happyClosed"],
.g-bear.is-blinking[data-face="neutral"] .g-face[data-face="blink"] {
  opacity: 1;
}
.g-bear[data-face="chomp"] .g-chomp {
  opacity: 1;
}
/* The closed smile and the chomp have the shorter shut jaw and sit lower
   (--seat, the closed head's, head px): above their own rows the open head
   moved down by the seat (.g-seated, faded out from its row --top), the
   unmoved open head and its fangs hidden once one is in; the closed head
   stays under the chomp, and the eyes ride the closed head's seat. Each
   moves between the open head's frame and its seat with its cut. */
.g-closed,
.g-chomp {
  position: absolute;
  inset: 0;
}
.g-closed,
.g-face[data-face="oops"],
.g-face[data-face="happyClosed"] {
  transform: translateY(calc(var(--seat, 0) * var(--u) * -1px));
}
.g-chomp {
  transform: translateY(calc(var(--seat-chomp, 0) * var(--u) * -1px));
}
.g-bear[data-mouth="closed"] .g-closed,
.g-bear[data-mouth="closed"] .g-face[data-face="oops"],
.g-bear[data-mouth="closed"] .g-face[data-face="happyClosed"],
.g-bear[data-face="chomp"] .g-chomp {
  transform: none;
}
.g-seated {
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(var(--top) * var(--u) * 1px), transparent calc((var(--top) + 30) * var(--u) * 1px));
  mask-image: linear-gradient(to bottom, #000 calc(var(--top) * var(--u) * 1px), transparent calc((var(--top) + 30) * var(--u) * 1px));
}
.g-bear[data-mouth="closed"] .g-open,
.g-bear[data-mouth="closed"] .g-fangs,
.g-bear[data-face="chomp"] .g-open,
.g-bear[data-face="chomp"] .g-fangs {
  opacity: 0;
}
.g-bear[data-face="chomp"] .g-closed {
  opacity: 1;
  transform: none;
}
.g-bear[data-mouth="closed"] .g-eyes {
  transform: translateY(calc(var(--seat, 0) * var(--u) * 1px));
}
/* Nothing moves while anything is still (reduced motion, a hidden tab). */
.g-bear.is-still *,
.g-bear.is-still *::before,
.g-bear.is-still *::after {
  transition: none !important;
}