/* ════════════════════════════════════════════════════════════
   KOLLEN OWL (uggla) — the graduation-cap mascot replacing the
   "K" eye. Markup: js/kollen-owl.js. Personality classes (k-*)
   still come from js/kollen-life.js; this file remaps them onto
   the owl. Loaded AFTER styles.css so its #agent-fab overrides
   win. Reuses global keyframes (keiTilt, keiRecoil, keiDizzy,
   keiSneeze, keiColor, keiRainbow) from styles.css.
   ════════════════════════════════════════════════════════════ */

.kollen-owl { position: relative; flex: none; z-index: 1; }
.kollen-owl svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ── Sizes ──────────────────────────────────────────────────── */
.kollen-owl.owl-fab    { width: 46px; height: 46px; }
.kollen-owl.owl-avatar { width: 40px; height: 40px; }
.kollen-owl.owl-nav    { width: 22px; height: 22px; }

/* ── FAB: warm paper disc, same blue glow ring as before ────── */
#agent-fab {
  display: grid; place-items: center;
  background: #F6F1E7;
  overflow: visible;
}
/* Cap + tassel may poke past the disc — charming, keep it. */

/* ── Idle life: gentle bob + tassel sway (from the demo) ────── */
.kollen-owl.owl-fab { animation: owlBob 2.6s ease-in-out infinite; }
@keyframes owlBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.kollen-owl .owl-tassel {
  transform-origin: 126px 40px;
  animation: owlTasselSway 3s ease-in-out infinite;
}
@keyframes owlTasselSway {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(8deg); }
}

/* ── Eyes & pupils: engine hooks ────────────────────────────────
   kollen-life.js sets --kei-x/--kei-y (mouse follow) and --dx/--dy
   (glances) in *screen* pixels sized for a ~58px element. CSS
   transforms on SVG children act in viewBox units (160 wide), so
   multiply by ~2.75 to land at the intended on-screen distance. */
.kollen-owl .owl-eye   { transform-box: fill-box; transform-origin: center; }
.kollen-owl .owl-pupil {
  transform-box: fill-box; transform-origin: center;
  transform: translate(calc(var(--kei-x, 0px) * 2.75), calc(var(--kei-y, 0px) * 2.75));
  transition: transform .16s ease-out;
}

/* ── Blink family (whole eye squashes shut) ─────────────────── */
.kollen-owl.k-blink   .owl-eye { animation: owlBlink .34s ease-in-out; }
.kollen-owl.k-blink2  .owl-eye { animation: owlBlink2 .66s ease-in-out; }
.kollen-owl.k-sleepy  .owl-eye { animation: owlSleepyBlink .95s ease-in-out; }
.kollen-owl.k-flutter .owl-eye { animation: owlFlutter .78s ease-in-out; }
/* Wink: one eye only, plus the cheeky head-tilt */
.kollen-owl.k-wink .owl-eye-l { animation: owlBlink .55s ease-in-out; }
.kollen-owl.k-wink            { animation: keiTilt .55s ease-in-out; }

@keyframes owlBlink  { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.08); } }
@keyframes owlBlink2 {
  0% { transform: scaleY(1); } 18% { transform: scaleY(.08); } 36% { transform: scaleY(1); }
  54% { transform: scaleY(.08); } 72%, 100% { transform: scaleY(1); }
}
@keyframes owlSleepyBlink { /* slow, heavy-lidded close + hold */
  0% { transform: scaleY(1); } 38%, 62% { transform: scaleY(.08); } 100% { transform: scaleY(1); }
}
@keyframes owlFlutter { /* rapid triple */
  0% { transform: scaleY(1); } 12% { transform: scaleY(.08); } 24% { transform: scaleY(1); }
  36% { transform: scaleY(.08); } 48% { transform: scaleY(1); }
  60% { transform: scaleY(.08); } 72%, 100% { transform: scaleY(1); }
}

/* ── Glance / dart & eye-roll (pupils move, scaled ×2.75) ───── */
.kollen-owl.k-look .owl-pupil { animation: owlLook 1.5s ease-in-out; }
@keyframes owlLook {
  0%, 100% { transform: translate(0, 0); }
  22%, 68% { transform: translate(calc(var(--dx, 5px) * 2.75), calc(var(--dy, 0px) * 2.75)); }
}
.kollen-owl.k-roll .owl-pupil { animation: owlRoll 1.15s ease-in-out; }
@keyframes owlRoll {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(0, -14px); } 40% { transform: translate(14px, 0); }
  60% { transform: translate(0, 14px); }  80% { transform: translate(-14px, 0); }
}

/* ── Surprise: pupils dilate, whole owl recoils ─────────────── */
.kollen-owl.k-surprise            { animation: keiRecoil .9s ease-out; }
.kollen-owl.k-surprise .owl-pupil { animation: owlDilate .9s cubic-bezier(.34,1.56,.64,1); }
@keyframes owlDilate {
  0%, 100% { transform: scale(1); } 28% { transform: scale(1.5); } 52% { transform: scale(.88); }
}

/* ── Dizzy / sneeze / colour: reuse global keyframes ────────── */
.kollen-owl.k-dizzy            { animation: keiDizzy 1.6s ease-in-out; }
.kollen-owl.k-dizzy .owl-pupil { animation: owlRoll 1.6s linear; }
.kollen-owl.k-sneeze           { animation: keiSneeze .85s ease-in-out; }
.kollen-owl.k-color            { animation: keiColor 4s ease-in-out; }
.kollen-owl.k-rainbow          { animation: keiRainbow 4.5s linear; }

/* ── Reduced motion: owl sits still, only gentle blinks ─────── */
@media (prefers-reduced-motion: reduce) {
  .kollen-owl.owl-fab, .kollen-owl .owl-tassel { animation: none; }
  .kollen-owl.k-look .owl-pupil, .kollen-owl.k-roll .owl-pupil,
  .kollen-owl.k-dizzy .owl-pupil, .kollen-owl.k-surprise .owl-pupil { animation: none; }
  .kollen-owl.k-dizzy, .kollen-owl.k-sneeze,
  .kollen-owl.k-surprise, .kollen-owl.k-wink,
  .kollen-owl.k-rainbow { animation: none; }
}