/* ===========================================================================
   WISCRIPT — THE DUCK
   The cursor hunter and its moods. duck.js owns the behaviour; everything
   here is the costume: body parts it can move, props it can hold, and the
   scenery it leaves on the page. Nothing is load-bearing.
   =========================================================================== */

.dk-layer, .dk-fx {
  position: fixed; inset: 0; pointer-events: none;
  overflow: hidden;
}
.dk-layer { z-index: 8500; }
.dk-fx    { z-index: 8400; }

.dk {
  position: absolute; left: 0; top: 0;
  width: 52px; height: 46px;
  will-change: transform, opacity;
  filter: drop-shadow(0 4px 7px rgba(0,0,0,.42));
}
.dk__body { width: 52px; height: 46px; will-change: transform; }
.dk svg { display: block; overflow: visible; }

.dk__leg { transform-box: view-box; transform-origin: 24px 31px; }
.dk.is-walking .dk__leg--a { animation: dk-step 460ms linear infinite; }
.dk.is-walking .dk__leg--b { animation: dk-step 460ms linear infinite reverse; }
@keyframes dk-step {
  0%   { transform: rotate(24deg); }
  50%  { transform: rotate(-24deg); }
  100% { transform: rotate(24deg); }
}

.dk__wing  { transform-box: view-box; transform-origin: 20px 21px; transition: transform .18s ease; }
.dk__bill  { transform-box: view-box; transform-origin: 43px 14px; transition: transform .12s ease; }
.dk__neck  { transform-box: view-box; transform-origin: 30px 24px; }
.dk__head  { transform-box: view-box; transform-origin: 30px 24px; }
.dk__brow, .dk__lid, .dk__white { transition: opacity .16s ease; }

.dk.is-quack .dk__wing { transform: rotate(-38deg) translateY(-2px); }
.dk.is-quack .dk__bill { transform: rotate(13deg) scaleX(1.12); }
.dk.is-quack { animation: dk-lunge .42s cubic-bezier(.3,1.5,.5,1); }
@keyframes dk-lunge {
  0%   { filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)); }
  30%  { filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)) drop-shadow(0 0 14px rgba(255,210,63,.9)); }
  100% { filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)); }
}

/* ------------------------------------------------------------------ moods */
.dk.is-angry .dk__skull, .dk.is-angry .dk__belly { fill: #ffc21f; }
.dk.is-mad   { filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)) drop-shadow(0 0 10px rgba(226,69,58,.55)); }
.dk.is-low   .dk__body { filter: none; }
.dk.is-low   { transform-origin: 50% 100%; }
.dk.is-low   .dk__legs { opacity: .45; }
.dk.is-drunk { filter: drop-shadow(0 4px 7px rgba(0,0,0,.42)) blur(.2px); }
.dk.is-tired .dk__wing { transform: rotate(16deg) translateY(3px); }
.dk.is-asleep .dk__wing { transform: rotate(6deg) translateY(2px); }
.dk.is-rage  { filter: drop-shadow(0 0 12px rgba(226,69,58,.9)) drop-shadow(0 4px 7px rgba(0,0,0,.5)); }
.dk.is-rage  .dk__skull, .dk.is-rage .dk__belly, .dk.is-rage .dk__tail { fill: #ff9d2e; }
.dk.is-magnet::after {
  content: ''; position: absolute; left: 50%; top: 55%;
  width: 190px; height: 190px; margin: -95px 0 0 -95px;
  border-radius: 50%;
  border: 1px dashed rgba(255,210,63,.42);
  animation: dk-pulse 1.6s ease-out infinite;
}
@keyframes dk-pulse {
  0%   { transform: scale(.35); opacity: .75; }
  100% { transform: scale(1.1); opacity: 0; }
}
.dk.is-hole .dk__skull, .dk.is-hole .dk__belly, .dk.is-hole .dk__tail,
.dk.is-hole .dk__neck path, .dk.is-hole .dk__wing { fill: #120c06; }
.dk.is-hole { filter: drop-shadow(0 0 18px rgba(120,80,255,.7)); }
.dk.is-pac .dk__bill { animation: dk-chomp .28s steps(2, end) infinite; }
@keyframes dk-chomp {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(26deg); }
}
.dk.is-heli::before {
  content: ''; position: absolute; left: 50%; top: -6px;
  width: 60px; height: 6px; margin-left: -30px;
  border-radius: 6px; background: rgba(240,180,41,.75);
  animation: dk-rotor .12s linear infinite;
}
@keyframes dk-rotor {
  0%   { transform: scaleX(1); }
  50%  { transform: scaleX(.12); }
  100% { transform: scaleX(1); }
}
.dk.is-ice::after {
  content: ''; position: absolute; left: 50%; bottom: 2px;
  width: 44px; height: 8px; margin-left: -22px;
  border-radius: 50%; background: rgba(160,220,255,.32);
}
.dk.is-blades .dk__legs { stroke: #9fb4c8; }
.dk.is-flail .dk__wing { animation: dk-flail .18s linear infinite; }
@keyframes dk-flail {
  0%   { transform: rotate(-40deg); }
  50%  { transform: rotate(30deg); }
  100% { transform: rotate(-40deg); }
}
.dk.is-wave .dk__wing { animation: dk-wave .34s ease-in-out 2; }
@keyframes dk-wave {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-52deg) translateY(-3px); }
  100% { transform: rotate(0deg); }
}
.dk.is-camo { filter: grayscale(.7) brightness(.7); }
.dk.is-boss { filter: drop-shadow(0 0 16px rgba(226,69,58,.8)) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.dk.is-boss .dk__pupil { fill: #e2453a; }
.dk.is-final { filter: drop-shadow(0 0 26px rgba(255,210,63,.95)) drop-shadow(0 8px 14px rgba(0,0,0,.6)); }
.dk.is-final .dk__pupil { fill: #fff; }
.dk.is-final::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 120px; height: 120px; margin: -60px 0 0 -60px;
  border-radius: 50%; background: radial-gradient(circle, rgba(255,210,63,.28), transparent 70%);
}
.dk.is-spin { filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }

/* ---------------------------------------------------------- speech + tags */
.dk__bubble {
  position: absolute; left: 50%; bottom: 100%;
  transform: translate(-50%, -6px) scale(.9);
  padding: 4px 8px; border-radius: 9px;
  font: 600 11px/1.3 'Spline Sans Mono', ui-monospace, monospace;
  white-space: nowrap;
  color: #1a1206; background: #ffd23f;
  box-shadow: 0 3px 10px rgba(0,0,0,.35);
  opacity: 0; transition: opacity .2s ease, transform .2s cubic-bezier(.2,1.4,.4,1);
}
.dk__bubble.is-on { opacity: 1; transform: translate(-50%, -10px) scale(1); }
.dk__bubble b { color: #7a1408; }
.dk__tag {
  position: absolute; left: 50%; top: 100%;
  transform: translate(-50%, 4px);
  font: 600 9px/1 'Spline Sans Mono', ui-monospace, monospace;
  letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,210,63,.85); text-shadow: 0 1px 3px #000;
  opacity: 0;
}
.dk__tag.is-on { opacity: 1; }

/* ------------------------------------------------------------------ props */
.dk__prop { position: absolute; inset: 0; opacity: 0; transition: opacity .2s ease; }
.dk__prop.is-on { opacity: 1; }
.dk-lens {
  position: absolute; left: 34px; top: 2px; font-size: 19px;
  transform: rotate(-18deg);
}
.dk-cannon {
  position: absolute; left: -2px; top: 22px; z-index: -1;
  width: 40px; height: 17px; border-radius: 3px 10px 10px 3px;
  background: linear-gradient(#3a3229, #17130e);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 3px 8px rgba(0,0,0,.45);
  transform: rotate(-16deg);
}
.dk-cannon::before {
  content: ''; position: absolute; left: -5px; bottom: -5px;
  width: 13px; height: 13px; border-radius: 50%;
  background: #241f19;
}
.dk-cannon::after {
  content: ''; position: absolute; left: -2px; top: -8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #ffce3f;
  box-shadow: 0 0 9px 3px rgba(255,150,40,.85);
  opacity: calc(.3 + var(--fuse, 0) * .7);
}
.dk-board {
  position: absolute; left: 6px; bottom: -2px;
  width: 42px; height: 6px; border-radius: 4px;
  background: #2d2a26;
}
.dk-board::before, .dk-board::after {
  content: ''; position: absolute; bottom: -4px;
  width: 7px; height: 7px; border-radius: 50%; background: #e0c169;
}
.dk-board::before { left: 4px; }
.dk-board::after  { right: 4px; }
.dk-sign {
  position: absolute; left: 50%; top: -14px;
  transform: translateX(-50%) rotate(-7deg);
  padding: 3px 7px; border-radius: 3px;
  font: 800 10px/1 'Spline Sans Mono', ui-monospace, monospace;
  letter-spacing: .1em; color: #1a1206; background: #f6ead2;
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.dk-case { position: absolute; left: 2px; top: 22px; font-size: 15px; }

.dk-boss {
  position: fixed; left: 50%; bottom: 26px; z-index: 9100;
  transform: translate(-50%, 14px);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 13px; border-radius: 10px;
  font: 700 11px/1 'Spline Sans Mono', ui-monospace, monospace;
  letter-spacing: .16em; color: #f6ead2;
  background: rgba(12,8,4,.92);
  border: 1px solid rgba(226,69,58,.6);
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  opacity: 0; transition: opacity .35s ease, transform .35s cubic-bezier(.22,.9,.3,1);
}
.dk-boss.is-in { opacity: 1; transform: translate(-50%, 0); }
.dk-boss i { display: block; width: 190px; height: 7px; border-radius: 4px; background: rgba(246,234,210,.16); }
.dk-boss u { display: block; height: 100%; width: 100%; border-radius: 4px; background: linear-gradient(90deg, #e2453a, #ffd23f); transition: width .2s linear; }

/* --------------------------------------------------------------- scenery */
.dkfx {
  position: absolute; left: 0; top: 0;
  transform: translate(-50%, -50%);
  font: 600 13px/1 'Spline Sans Mono', ui-monospace, monospace;
  color: #ffd23f;
  will-change: transform, opacity;
}
.dkfx--puff, .dkfx--dust, .dkfx--smoke {
  width: 13px; height: 13px; border-radius: 50%;
  background: rgba(246,234,210,.5);
}
.dkfx--dust { animation: dk-fade .5s ease-out forwards; }
.dkfx--smoke { background: rgba(200,190,180,.35); animation: dk-fade .7s ease-out forwards; }
@keyframes dk-fade {
  0%   { transform: translate(-50%,-50%) scale(.5); opacity: .7; }
  100% { transform: translate(-50%,-50%) scale(2.1); opacity: 0; }
}
.dkfx--ring {
  width: 30px; height: 30px; border-radius: 50%;
  border: 2px solid rgba(255,210,63,.75);
  animation: dk-ring .9s cubic-bezier(.2,.7,.4,1) forwards;
}
@keyframes dk-ring {
  0%   { transform: translate(-50%,-50%) scale(.2); opacity: .9; }
  100% { transform: translate(-50%,-50%) scale(calc(2.6 * var(--r, 1))); opacity: 0; }
}
.dkfx--spark {
  width: 5px; height: 5px; border-radius: 50%;
  background: #ffce3f; box-shadow: 0 0 8px 2px rgba(255,150,40,.8);
  animation: dk-fade .42s ease-out forwards;
}
.dkfx--ember {
  width: 4px; height: 8px; border-radius: 3px;
  background: linear-gradient(#ffd23f, rgba(226,69,58,0));
  animation: dk-rise 1.1s ease-out forwards;
}
@keyframes dk-rise {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: .9; }
  100% { transform: translate(-50%,-190%) scale(.4); opacity: 0; }
}
.dkfx--dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,210,63,.6); animation: dk-fade .6s ease-out forwards; }
.dkfx--print {
  width: 9px; height: 7px; border-radius: 50% 50% 40% 40%;
  background: rgba(246,234,210,.34);
  animation: dk-hold 1.4s ease-out forwards;
}
@keyframes dk-hold {
  0%   { opacity: .8; }
  70%  { opacity: .5; }
  100% { opacity: 0; }
}
.dkfx--z {
  font-size: 14px; color: rgba(246,234,210,.8);
  animation: dk-rise 1.9s ease-out forwards;
}
.dkfx--pant {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(200,225,255,.45);
  animation: dk-rise .9s ease-out forwards;
}
.dkfx--bread, .dkfx--doodle { font-size: 19px; filter: drop-shadow(0 3px 6px rgba(0,0,0,.45)); }
.dkfx--doodle { animation: dk-hold 2.6s ease-out forwards; }
.dkfx--think { font-size: 20px; color: rgba(246,234,210,.7); animation: dk-rise 1.4s ease-out forwards; }
.dkfx--math { font-size: 15px; color: rgba(255,210,63,.8); animation: dk-rise 1.3s ease-out forwards; }
.dkfx--iron { width: 4px; height: 4px; border-radius: 50%; background: rgba(255,210,63,.75); }
.dkfx--tell {
  width: 34px; height: 34px; border-radius: 50%;
  border: 2px dashed rgba(255,210,63,.8);
  animation: dk-spin .7s linear forwards;
}
@keyframes dk-spin {
  0%   { transform: translate(-50%,-50%) rotate(0) scale(.5); opacity: .95; }
  100% { transform: translate(-50%,-50%) rotate(240deg) scale(1.2); opacity: .2; }
}
.dkfx--portal {
  width: 34px; height: 50px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(180,120,255,.85), rgba(80,30,160,.25) 70%, transparent);
  box-shadow: 0 0 22px rgba(150,90,255,.6);
  animation: dk-open .4s ease-out;
}
.dkfx--portal-out { background: radial-gradient(ellipse at center, rgba(255,170,90,.85), rgba(160,70,20,.25) 70%, transparent); box-shadow: 0 0 22px rgba(255,150,60,.55); }
@keyframes dk-open {
  0%   { transform: translate(-50%,-50%) scale(.1); }
  100% { transform: translate(-50%,-50%) scale(1); }
}
.dkfx--shadow {
  width: 46px; height: 18px; border-radius: 50%;
  background: rgba(0,0,0,.42);
  box-shadow: 0 0 18px 6px rgba(0,0,0,.28);
}
.dkfx--bump {
  width: 26px; height: 12px; border-radius: 50%;
  background: rgba(255,210,63,.38);
  box-shadow: 0 0 0 6px rgba(255,210,63,.12);
}
.dkfx--shot { font-size: 15px; }
.dkfx--mark {
  width: 28px; height: 28px; border-radius: 50%;
  border: 2px solid rgba(226,69,58,.8);
  animation: dk-blink .55s steps(2, end) infinite;
}
@keyframes dk-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.dkfx--mine {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px dashed rgba(226,69,58,.7);
  background: radial-gradient(circle, rgba(226,69,58,.22), transparent 70%);
  animation: dk-blink 1.1s steps(2, end) infinite;
}
.dkfx--zone {
  border: 1px dashed rgba(255,210,63,.45);
  border-radius: 12px;
  background: rgba(255,210,63,.05);
  transition: background .25s ease, border-color .25s ease;
}
.dkfx--zone.is-hot { border-color: rgba(226,69,58,.8); background: rgba(226,69,58,.12); }
.dkfx--ufo {
  width: 74px; height: 26px; border-radius: 50%;
  background: linear-gradient(#cfd8e3, #6d7b8d);
  box-shadow: 0 8px 22px rgba(120,190,255,.35);
}
.dkfx--ufo::after {
  content: ''; position: absolute; left: 50%; top: -9px;
  width: 30px; height: 18px; margin-left: -15px;
  border-radius: 16px 16px 0 0;
  background: rgba(150,220,255,.75);
}
.dkfx--ufo.is-beaming::before {
  content: ''; position: absolute; left: 50%; top: 12px;
  width: 54px; height: 130px; margin-left: -27px;
  background: linear-gradient(rgba(180,240,255,.5), rgba(180,240,255,0));
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
}
.dkfx--peek { font-size: 17px; animation: dk-hold 1.6s ease-out forwards; }
.dkfx--skid {
  width: 22px; height: 4px; border-radius: 3px;
  background: rgba(160,220,255,.35);
  animation: dk-hold .7s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .dk-layer, .dk-fx { display: none; }
}