/* Aio mascot — shared layered-PNG rig.
   Drives off two CSS custom properties on :root:
     --aio-px / --aio-py    (-1 .. 1, eased pointer position)
   Plus a per-instance --aio-strength (default 1) to scale parallax. */

.aio {
  position: relative;
  width: 100%;
  aspect-ratio: 1223 / 1286;
  pointer-events: auto;
  --aio-strength: 1;
  --aio-eye-x: calc(var(--aio-px, 0) * var(--aio-strength));
  --aio-eye-y: calc(var(--aio-py, 0) * var(--aio-strength));
  filter: drop-shadow(0 24px 30px rgba(46, 24, 18, 0.18));
  user-select: none;
  -webkit-user-drag: none;
}

.aio-rig,
.aio-tilt,
.aio-bob {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* Rig: subtle whole-body sway with the pointer */
.aio-rig {
  transform:
    translate3d(
      calc(var(--aio-eye-x) * 14px),
      calc(var(--aio-eye-y) * 10px),
      0
    );
  transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Tilt: head leans toward cursor */
.aio-tilt {
  transform: rotate(calc(var(--aio-eye-x) * 4deg));
  transform-origin: 50% 70%;
  transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* Bob: idle float loop on Y */
.aio-bob {
  animation: aioBob 4.8s ease-in-out infinite;
}
@keyframes aioBob {
  0%, 100% { transform: translateY(-0.6%); }
  50%      { transform: translateY( 0.8%); }
}

.aio-part {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}

/* Ears perk up toward the cursor. The two ears mirror, giving Aio a
   curious "did you say something?" look. */
.aio-ear {
  transform-origin: 50% 58%;
  transition: transform 320ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.aio-ear-l {
  transform:
    rotate(calc(var(--aio-eye-x) *  6deg + var(--aio-eye-y) * -3deg))
    translateX(calc(var(--aio-eye-x) * -4px));
}
.aio-ear-r {
  transform:
    rotate(calc(var(--aio-eye-x) *  6deg + var(--aio-eye-y) *  3deg))
    translateX(calc(var(--aio-eye-x) * -4px));
}

/* Mouth — default visible by default, cheer hidden behind it.
   On hover/click parents flip them. */
.aio-mouth { transition: opacity 200ms ease; }
.aio-mouth-default { opacity: 1; }
.aio-mouth-cheer   { opacity: 0; }

.aio.aio-peeking .aio-mouth-default { opacity: 0.4; }
.aio.aio-peeking .aio-mouth-cheer   { opacity: 1; }

.aio.aio-cheering .aio-mouth-default { opacity: 0; }
.aio.aio-cheering .aio-mouth-cheer   { opacity: 1; }
.aio.aio-cheering .aio-bob {
  animation: aioJump 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes aioJump {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-6%) scale(1.04); }
  100% { transform: translateY(0); }
}

/* Variant: stronger parallax (whole body really drifts after cursor) */
.aio.aio--drift .aio-rig {
  transform:
    translate3d(
      calc(var(--aio-eye-x) * 60px),
      calc(var(--aio-eye-y) * 40px),
      0
    );
  transition: transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}
.aio.aio--drift .aio-tilt {
  transform: rotate(calc(var(--aio-eye-x) * 8deg));
}

/* Variant: locked in place (only ears/tilt animate). Used in editorial layout. */
.aio.aio--anchor .aio-rig { transform: none; transition: none; }

/* Compact mode used in small badges */
.aio.aio--mini { aspect-ratio: 1 / 1; }