/* ============================================================
   Merlin — Retro Robot Owl Mascot
   Drop-in: <link rel="stylesheet" href="merlin.css">
   Usage:   Place <div class="merlin-branch"></div> anywhere
   ============================================================ */

/* --- Branch element --- */
.merlin-branch {
  display: inline-block;
  position: relative;
  vertical-align: bottom;
  line-height: 0;
}

/* --- Owl container --- */
.merlin-owl {
  position: fixed;
  bottom: 0;
  right: 20px;
  width: 120px;
  pointer-events: auto;
  cursor: pointer;
  user-select: none;
  z-index: 9999;
  overflow: visible;
  animation: m-float 5s ease-in-out infinite;
  transform-origin: center bottom;
}

.merlin-owl svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* Mobile: shrink owl */
@media (max-width: 600px) {
  .merlin-owl {
    width: 72px;
    right: 12px;
  }
}

/* ---- States ---- */
.merlin-flying {
  animation: none !important;
}

.merlin-landing {
  animation: m-land 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
}

/* ============================================================
   KEYFRAMES — Owl-level
   ============================================================ */

@keyframes m-float {
  0%,  100% { transform: translateY(0px); }
  50%        { transform: translateY(-9px); }
}

@keyframes m-land {
  0%   { transform: translateY(-14px) scaleY(0.88); }
  55%  { transform: translateY(5px)  scaleY(1.06); }
  78%  { transform: translateY(-3px) scaleY(0.98); }
  100% { transform: translateY(0px)  scaleY(1); }
}

/* ============================================================
   KEYFRAMES — SVG internals
   ============================================================ */

@keyframes m-blink {
  0%, 82%, 94%, 100% { transform: scaleY(1); }
  88%                 { transform: scaleY(0.04); }
}

@keyframes m-look {
  0%,  30%, 100% { transform: translate(0,    0); }
  35%, 45%       { transform: translate(2px,  1px); }
  50%, 60%       { transform: translate(-1.5px, 1.5px); }
  65%, 75%       { transform: translate(1px, -1.5px); }
  80%, 90%       { transform: translate(0,    0); }
}

@keyframes m-twinkle {
  0%,  100% { opacity: 1;    transform: scale(1); }
  50%        { opacity: 0.3;  transform: scale(0.78); }
}

@keyframes m-needle {
  0%,  100% { transform: rotate(-38deg); }
  50%        { transform: rotate(38deg); }
}

@keyframes m-shadow-breathe {
  0%,  100% { transform: scaleX(1);    opacity: 0.2; }
  50%        { transform: scaleX(0.66); opacity: 0.1; }
}

@keyframes m-wing-l-idle {
  0%,  100% { transform: rotate(0deg); }
  50%        { transform: rotate(-3deg); }
}

@keyframes m-wing-r-idle {
  0%,  100% { transform: rotate(0deg); }
  50%        { transform: rotate(3deg); }
}

@keyframes m-wing-l-flap {
  0%,  100% { transform: rotate(-18deg); }
  50%        { transform: rotate(6deg); }
}

@keyframes m-wing-r-flap {
  0%,  100% { transform: rotate(18deg); }
  50%        { transform: rotate(-6deg); }
}

@keyframes m-wing-l-settle {
  0%   { transform: rotate(-12deg); }
  100% { transform: rotate(0deg); }
}

@keyframes m-wing-r-settle {
  0%   { transform: rotate(12deg); }
  100% { transform: rotate(0deg); }
}

@keyframes m-wiggle {
  0%,  100% { transform: rotate(0deg); }
  20%        { transform: rotate(-8deg); }
  50%        { transform: rotate(7deg); }
  75%        { transform: rotate(-5deg); }
}

/* ============================================================
   SVG ELEMENT ANIMATIONS
   ============================================================ */

/* Head tilt on hover */
.merlin-owl .m-head {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.72s cubic-bezier(0.34, 1.45, 0.64, 1);
}
.merlin-owl:hover .m-head {
  transform: rotate(-14deg);
}

/* Eyes — blink */
.merlin-owl .m-el,
.merlin-owl .m-er {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-blink 7s ease-in-out infinite;
}
.merlin-owl .m-er { animation-delay: 0.13s; }

/* Pupils — look around */
.merlin-owl .m-pl { animation: m-look 11s ease-in-out infinite; }
.merlin-owl .m-pr { animation: m-look 11s ease-in-out infinite; animation-delay: 0.07s; }

/* Hat star twinkle */
.merlin-owl .m-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-twinkle 3s ease-in-out infinite;
}

/* Gauge needle */
.merlin-owl .m-needle {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: m-needle 4.5s ease-in-out infinite;
}

/* Shadow */
.merlin-owl .m-shadow {
  transform-box: fill-box;
  transform-origin: center;
  animation: m-shadow-breathe 5s ease-in-out infinite;
}

/* Wings — idle sway */
.merlin-owl .m-wl {
  transform-box: fill-box;
  transform-origin: right center;
  animation: m-wing-l-idle 5s ease-in-out infinite;
}
.merlin-owl .m-wr {
  transform-box: fill-box;
  transform-origin: left center;
  animation: m-wing-r-idle 5s ease-in-out infinite;
}

/* Wings — flapping during flight */
.merlin-flying .m-wl {
  animation: m-wing-l-flap 0.32s ease-in-out infinite !important;
}
.merlin-flying .m-wr {
  animation: m-wing-r-flap 0.32s ease-in-out infinite !important;
}

/* Wings — settle on landing */
.merlin-landing .m-wl {
  animation: m-wing-l-settle 0.55s ease-out forwards !important;
}
.merlin-landing .m-wr {
  animation: m-wing-r-settle 0.55s ease-out forwards !important;
}

/* Click wiggle */
.merlin-owl.m-clicked .m-head {
  animation: m-wiggle 0.5s ease-in-out 1 !important;
}

.merlin-owl {
  z-index: 9999;
}