/* Little surprises (see static/js/critters.js): an animal, a flyer or a
 * growing tree now and then. Nothing here stays on screen. */
.cr-layer { position: fixed; left: 0; right: 0; bottom: 0; height: 0; z-index: 30; pointer-events: none; }

.cr-walker { position: fixed; bottom: 4px; left: 0; font-size: 64px; line-height: 1; pointer-events: auto; cursor: pointer;
  user-select: none; will-change: transform; filter: drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.cr-walker .cr-body { display: inline-block; animation: cr-bob .45s ease-in-out infinite alternate; }
.cr-walker.cr-flip .cr-body { scale: -1 1; }
.cr-walker.cr-paused .cr-body { animation: cr-breathe 1.6s ease-in-out infinite; }
.cr-walker.cr-hop .cr-body { animation: cr-hop .55s cubic-bezier(.34,1.56,.64,1); }
@keyframes cr-bob { from { translate: 0 0; rotate: -4deg; } to { translate: 0 -5px; rotate: 4deg; } }
@keyframes cr-breathe { 50% { translate: 0 -2px; } }
@keyframes cr-hop { 0%, 100% { translate: 0 0; } 45% { translate: 0 -26px; } }

.cr-flyer { position: fixed; left: 0; top: 0; font-size: 50px; pointer-events: auto; cursor: pointer; user-select: none; will-change: transform; }

.cr-say { position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; white-space: nowrap;
  padding: 6px 11px; border-radius: 14px; background: #fff; color: #1f2937; border: 1px solid rgba(0,0,0,.08);
  font: 600 14px/1.2 Inter, system-ui, sans-serif; box-shadow: 0 8px 20px -10px rgba(0,0,0,.35);
  opacity: 0; scale: .6; transition: opacity .25s ease, scale .35s cubic-bezier(.34,1.56,.64,1); pointer-events: none; }
.cr-say::after { content: ""; position: absolute; top: 100%; left: 50%; translate: -50% 0; border: 7px solid transparent; border-top-color: #fff; }
.cr-say.cr-show { opacity: 1; scale: 1; }

/* ---- the tree that grows and goes ---- */
.cr-tree { position: fixed; bottom: 4px; width: 140px; height: 172px; pointer-events: none;
  transition: opacity 1.4s ease, translate 1.6s ease; }
.cr-tree.cr-leaving { opacity: 0; translate: 0 30px; }
.cr-tree svg { width: 100%; height: 100%; overflow: visible; }
.cr-tree .cr-part { transform-box: fill-box; transform-origin: 50% 100%; transform: scale(0); opacity: 0;
  transition: transform 1.4s cubic-bezier(.34,1.4,.64,1), opacity .8s ease; }
.cr-tree .cr-dot { transform-origin: 50% 50%; }
.cr-tree .cr-on { transform: scale(1); opacity: 1; }
.cr-tree .cr-canopy.cr-on { animation: cr-sway 5s ease-in-out infinite; }
@keyframes cr-sway { 0%, 100% { rotate: -1.5deg; } 50% { rotate: 1.5deg; } }

@media (max-width: 640px) { .cr-walker { font-size: 46px; } .cr-tree { width: 96px; height: 118px; } .cr-car { font-size: 42px !important; } .cr-cargo { font-size: 10px !important; } }
@media print { .cr-layer { display: none !important; } }

/* ---- floating Python keywords ---- */
.cr-word { position: fixed; left: 0; top: 0; pointer-events: auto; cursor: pointer; user-select: none; will-change: transform, opacity;
  padding: 7px 14px; border-radius: 12px; white-space: nowrap; opacity: 0;
  font: 600 22px/1.2 "JetBrains Mono", ui-monospace, monospace;
  color: hsl(var(--hue) 70% 32%); background: hsl(var(--hue) 90% 96% / .92); border: 1px solid hsl(var(--hue) 70% 80%);
  box-shadow: 0 8px 18px -12px hsl(var(--hue) 60% 30% / .6); }
.cr-word.cr-pop { transition: transform .3s ease, opacity .3s ease; opacity: 0 !important; scale: 1.6; }

/* a little see-through, so they never hide what students are reading */
.cr-walker .cr-body, .cr-flyer, .cr-cars, .cr-tree svg { opacity: .8; }

/* ---- the train ---- */
.cr-train { position: fixed; bottom: 2px; left: 0; pointer-events: auto; cursor: pointer; user-select: none; will-change: transform;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.18)); }
.cr-cars { display: flex; align-items: flex-end; gap: 2px; padding-top: 26px; }
.cr-car { position: relative; display: inline-block; font-size: 60px; line-height: 1; animation: cr-chug .32s ease-in-out infinite alternate; }
.cr-car:nth-child(2n) { animation-delay: .16s; }
.cr-train.cr-flip .cr-car { scale: -1 1; }
.cr-cargo { position: absolute; left: 50%; bottom: 88%; translate: -50% 0; white-space: nowrap;
  padding: 2px 7px; border-radius: 8px; font: 600 13px/1.2 "JetBrains Mono", ui-monospace, monospace;
  color: #92400e; background: rgba(255, 247, 237, .95); border: 1px solid #fdba74; }
.cr-train.cr-flip .cr-cargo { scale: -1 1; } /* undo the wagon's flip so words stay readable */
@keyframes cr-chug { from { translate: 0 0; } to { translate: 0 -3px; } }
.cr-puff { position: fixed; font-size: 30px; pointer-events: none; animation: cr-puff 1.9s ease-out forwards; }
@keyframes cr-puff { from { translate: 0 0; scale: .5; opacity: .7; } to { translate: var(--dx) -90px; scale: 1.7; opacity: 0; } }
.cr-racer .cr-body { animation-duration: .18s; }

/* ---- click pop: the student's name in big letters, and sparkles ---- */
.cr-boom { position: fixed; z-index: 2; translate: -50% -50%; rotate: var(--tilt); pointer-events: none; white-space: nowrap;
  font: 900 26px/1 "Fraunces", Georgia, serif; color: #fff; letter-spacing: .01em;
  -webkit-text-stroke: 1.5px #7c2d12; paint-order: stroke fill; text-shadow: 0 3px 0 #f97316, 0 6px 12px rgba(0,0,0,.35);
  animation: cr-boom 1.5s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes cr-boom { 0% { scale: .3; opacity: 0; } 15% { scale: 1.25; opacity: 1; } 30% { scale: 1; } 75% { opacity: 1; translate: -50% -90%; } 100% { opacity: 0; translate: -50% -130%; } }
.cr-bit { position: fixed; font-size: 22px; pointer-events: none; translate: -50% -50%; animation: cr-bit .9s ease-out forwards; }
@keyframes cr-bit { to { transform: translate(var(--dx), var(--dy)) scale(.4); opacity: 0; } }

/* ---- balloons and bubbles ---- */
.cr-balloon { position: fixed; left: 0; top: 0; font-size: 58px; pointer-events: auto; cursor: pointer; user-select: none; will-change: transform;
  filter: hue-rotate(var(--hue)) drop-shadow(0 6px 6px rgba(0,0,0,.15)); opacity: .9; }
.cr-bubble { position: fixed; left: 0; top: 0; border-radius: 50%; pointer-events: auto; cursor: pointer; will-change: transform;
  background: radial-gradient(circle at 30% 28%, rgba(255,255,255,.95) 0 9%, rgba(255,255,255,.15) 22%, rgba(186,230,253,.18) 60%, rgba(167,139,250,.35) 100%);
  border: 1.5px solid rgba(147, 197, 253, .7); box-shadow: inset -6px -8px 14px rgba(244, 114, 182, .25); }
.cr-balloon.cr-pop, .cr-bubble.cr-pop { transition: scale .2s ease, opacity .2s ease; scale: 1.8; opacity: 0 !important; }

/* ---- weather: a see-through layer that never blocks clicks ---- */
.cr-weather { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease; overflow: hidden; }
.cr-weather.cr-on { opacity: 1; }
.cr-rain { background: linear-gradient(rgba(71, 85, 105, .16), rgba(71, 85, 105, 0) 60%); }
.cr-cloud { position: absolute; opacity: .85; filter: drop-shadow(0 6px 8px rgba(0,0,0,.12)); animation: cr-drift 26s linear infinite alternate; }
@keyframes cr-drift { from { translate: -6vw 0; } to { translate: 6vw 0; } }
.cr-drop { position: absolute; top: -30px; width: 2px; border-radius: 2px; background: linear-gradient(rgba(96,165,250,0), rgba(59,130,246,.75));
  animation: cr-fall linear infinite; }
@keyframes cr-fall { to { transform: translate(-30px, 110vh); } }
.cr-flake { position: absolute; top: -30px; color: #93c5fd; text-shadow: 0 0 4px #fff; font-style: normal; animation: cr-snowfall linear infinite; }
@keyframes cr-snowfall { 0% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(28px, 55vh) rotate(180deg); } 100% { transform: translate(-10px, 112vh) rotate(360deg); } }
.cr-umbrella { transition: opacity 1.2s ease; }
.cr-umbrella.cr-gone { opacity: 0; }
.cr-rainbow-box { display: grid; justify-items: center; }
.cr-rainbow { position: absolute; top: 9vh; left: 50%; translate: -50% 0; width: min(760px, 92vw); aspect-ratio: 2 / 1; border-radius: 50% 50% 0 0 / 100% 100% 0 0; opacity: .5;
  background: radial-gradient(circle at 50% 100%, transparent 54%, #a855f7 54% 57%, #3b82f6 57% 60%, #22c55e 60% 63%, #facc15 63% 66%, #f97316 66% 69%, #ef4444 69% 72%, transparent 72%); }
.cr-say-top { top: 9vh; bottom: auto; }
.cr-sunny { background: radial-gradient(circle at 92% 6%, rgba(253, 224, 71, .35), rgba(253, 224, 71, 0) 45%); }
.cr-sun { position: absolute; top: 78px; right: 4vw; width: 120px; height: 120px; display: grid; place-items: center; pointer-events: none;
  animation: cr-rise 1.6s cubic-bezier(.34,1.3,.64,1) both; }
.cr-sun-face { position: relative; font-size: 86px; line-height: 1; animation: cr-breathe 2.4s ease-in-out infinite; }
.cr-rays { position: absolute; inset: -18px; border-radius: 50%; background: repeating-conic-gradient(rgba(250, 204, 21, .55) 0 8deg, transparent 8deg 22deg);
  -webkit-mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 70%); mask: radial-gradient(circle, transparent 42%, #000 44%, transparent 70%);
  animation: cr-spin 12s linear infinite; }
.cr-sun .cr-say { bottom: auto; top: calc(100% + 4px); left: auto; right: 0; translate: 0 0; }
.cr-sun .cr-say::after { display: none; }
@keyframes cr-rise { from { translate: 0 -160px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
@keyframes cr-spin { to { rotate: 360deg; } }

/* ---- fireworks, confetti and a big friendly message ---- */
.cr-spark { position: fixed; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; translate: -50% -50%; box-shadow: 0 0 8px currentColor;
  animation: cr-spark 1.3s cubic-bezier(.1,.8,.3,1) forwards; }
@keyframes cr-spark { 70% { opacity: 1; } to { transform: translate(var(--dx), calc(var(--dy) + 40px)); opacity: 0; } }
.cr-conf { position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2px; animation: cr-conf linear forwards; }
@keyframes cr-conf { to { transform: translate(40px, 110vh) rotate(var(--spin)); } }
.cr-shout { position: fixed; top: 90px; left: 50%; translate: -50% 0; z-index: 3; pointer-events: none; white-space: nowrap; max-width: 94vw; overflow: hidden; text-overflow: ellipsis;
  padding: 10px 22px; border-radius: 999px; background: rgba(255,255,255,.92); color: #7c2d12; border: 2px solid #fdba74;
  font: 800 22px/1.2 "Fraunces", Georgia, serif; box-shadow: 0 16px 34px -16px rgba(0,0,0,.4);
  animation: cr-boom-in .6s cubic-bezier(.34,1.56,.64,1) both; transition: opacity .5s ease, translate .5s ease; }
.cr-shout.cr-gone { opacity: 0; translate: -50% -20px; }
@keyframes cr-boom-in { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
@media (max-width: 640px) { .cr-balloon { font-size: 44px; } .cr-boom { font-size: 21px; } .cr-shout { font-size: 17px; } .cr-sun { width: 90px; height: 90px; } .cr-sun-face { font-size: 62px; } }