/* ══════════════════════════════════════════════════════════════════
   Nealy the Wolverine — Animations & Styles
   ══════════════════════════════════════════════════════════════════ */

/* ── Container ──────────────────────────────────────────────────── */

#nealy-container {
  position: fixed;
  bottom: 10px;
  right: 20px;
  z-index: 900;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#nealy-container.hidden { opacity: 0; pointer-events: none; }
#nealy-container.visible { opacity: 1; pointer-events: auto; }

#nealy-container.pos-bottom-left   { right: auto; left: 20px; }
#nealy-container.pos-bottom-center { right: auto; left: 50%; transform: translateX(-50%); }

/* ── Mute Button ────────────────────────────────────────────────── */

#nealy-mute {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #4A7FA3;
  background: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 28px;
  text-align: center;
  pointer-events: auto;
  z-index: 901;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: transform 0.15s;
  padding: 0;
}
#nealy-mute:hover { transform: scale(1.1); }
#nealy-mute:active { transform: scale(0.95); }

/* ── Skip Button ────────────────────────────────────────────────── */

#nealy-skip {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 1001;
  padding: 8px 20px;
  border-radius: 20px;
  border: 2px solid #4A7FA3;
  background: rgba(255,255,255,0.92);
  color: #4A7FA3;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
  display: none;
}
#nealy-skip:hover { background: #4A7FA3; color: #fff; }

/* ── SVG Character ──────────────────────────────────────────────── */

#nealy-svg {
  width: auto;
  height: 180px;
  display: block;
  pointer-events: auto;
  cursor: pointer;
}

/* ── Speech Bubble ──────────────────────────────────────────────── */

#nealy-bubble {
  position: absolute;
  bottom: 100%;
  right: 10px;
  margin-bottom: 8px;
  background: #fff;
  border: 3px solid #4A7FA3;
  border-radius: 18px;
  padding: 10px 16px;
  max-width: 220px;
  min-width: 100px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #333;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  opacity: 0;
  transform: scale(0.7) translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
  line-height: 1.3;
}

#nealy-bubble.show {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Bubble tail */
#nealy-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  right: 30px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #4A7FA3;
}
#nealy-bubble::before {
  content: '';
  position: absolute;
  bottom: -8px;
  right: 32px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #fff;
  z-index: 1;
}

/* Word-by-word pop effect */
#nealy-bubble .word {
  display: inline-block;
  opacity: 0;
  transform: scale(0.3) translateY(8px);
  animation: wordPop 0.35s ease forwards;
}

@keyframes wordPop {
  0%   { opacity: 0; transform: scale(0.3) translateY(8px); }
  60%  { opacity: 1; transform: scale(1.15) translateY(-2px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

/* ── Intro Overlay ──────────────────────────────────────────────── */

#nealy-intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 60px;
  background: rgba(0,0,0,0.08);
}
#nealy-intro-overlay.active { display: flex; }

#nealy-intro-stage {
  position: relative;
  width: 300px;
  height: 300px;
}

#nealy-intro-stage #nealy-intro-svg {
  height: 220px;
  position: absolute;
  bottom: 0;
}

#nealy-intro-bubble {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) scale(0.7);
  background: #fff;
  border: 3px solid #4A7FA3;
  border-radius: 18px;
  padding: 12px 20px;
  max-width: 260px;
  font-family: 'Nunito', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #333;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity 0.3s ease, transform 0.3s ease;
  line-height: 1.3;
}
#nealy-intro-bubble.show {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
#nealy-intro-bubble::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 50%;
  margin-left: -10px;
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 12px solid #4A7FA3;
}
#nealy-intro-bubble::before {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 9px solid #fff;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════════
   CHARACTER PART ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

/* ── Idle: Breathing ────────────────────────────────────────────── */

.nealy-body.idle {
  animation: breathe 3s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}

/* ── Idle: Blinking ─────────────────────────────────────────────── */

.nealy-eyes.idle {
  animation: blink 4s ease-in-out infinite;
}

@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(0.08); }
}

/* ── Idle: Tail Sway ────────────────────────────────────────────── */

.nealy-tail.idle {
  animation: tailIdle 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}

@keyframes tailIdle {
  0%, 100% { transform: rotate(-3deg); }
  50%      { transform: rotate(3deg); }
}

/* ══════════════════════════════════════════════════════════════════
   INTRO ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

/* Bounce-in entrance from left */
.nealy-anim-entrance {
  animation: nealyEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes nealyEntrance {
  0%   { transform: translateX(-400px) translateY(0) scaleY(1); opacity: 0; }
  15%  { opacity: 1; transform: translateX(-300px) translateY(-12px) scaleY(0.92) scaleX(1.04); }
  30%  { transform: translateX(-200px) translateY(0) scaleY(1.04) scaleX(0.97); }
  45%  { transform: translateX(-120px) translateY(-10px) scaleY(0.93) scaleX(1.03); }
  60%  { transform: translateX(-50px) translateY(0) scaleY(1.03) scaleX(0.98); }
  75%  { transform: translateX(-10px) translateY(-6px) scaleY(0.95); }
  90%  { transform: translateX(5px) translateY(0) scaleY(1.02); }
  100% { transform: translateX(0) translateY(0) scaleY(1); }
}

/* Happy dance */
.nealy-anim-dance {
  animation: nealyDance 0.5s ease-in-out 4;
}

@keyframes nealyDance {
  0%, 100% { transform: translateX(0) rotate(0deg); }
  25%      { transform: translateX(-8px) rotate(-5deg); }
  75%      { transform: translateX(8px) rotate(5deg); }
}

/* Arms pump during dance */
.nealy-arms.dancing {
  animation: armPump 0.25s ease-in-out 8;
}

@keyframes armPump {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(-8deg); }
}

/* Backflip */
.nealy-anim-backflip {
  animation: nealyBackflip 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes nealyBackflip {
  0%   { transform: translateY(0) rotate(0deg) scale(1); }
  20%  { transform: translateY(10px) rotate(0deg) scale(0.9); }
  50%  { transform: translateY(-80px) rotate(-180deg) scale(1.05); }
  80%  { transform: translateY(-20px) rotate(-340deg) scale(1.02); }
  92%  { transform: translateY(5px) rotate(-360deg) scale(0.95, 1.05); }
  100% { transform: translateY(0) rotate(-360deg) scale(1); }
}

/* Landing dust puff */
.nealy-dust {
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
}

.nealy-dust.puff {
  animation: dustPuff 0.6s ease-out forwards;
}

@keyframes dustPuff {
  0%   { opacity: 0.6; transform: translateX(-50%) scale(0.3); }
  100% { opacity: 0; transform: translateX(-50%) scale(1.8); }
}


/* ══════════════════════════════════════════════════════════════════
   CELEBRATE ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

.nealy-anim-celebrate {
  animation: nealyCelebrate 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes nealyCelebrate {
  0%   { transform: translateY(0) scale(1); }
  40%  { transform: translateY(-30px) scale(1.08); }
  60%  { transform: translateY(-25px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

/* Arms raised */
.nealy-arms.celebrate {
  animation: armsUp 0.4s ease-out forwards;
}

@keyframes armsUp {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-30deg) translateY(-8px); }
}

/* Wide sparkly eyes */
.nealy-eyes.celebrate {
  animation: eyesWide 0.3s ease-out forwards;
}

@keyframes eyesWide {
  0%   { transform: scale(1); }
  100% { transform: scale(1.25); }
}

/* Confetti / star burst */
.nealy-confetti {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 120px;
  pointer-events: none;
  overflow: visible;
}

.nealy-confetti .particle {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  opacity: 0;
}

.nealy-confetti.burst .particle {
  animation: confettiBurst 1s ease-out forwards;
}

@keyframes confettiBurst {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); }
  100% { opacity: 0; transform: var(--confetti-end) rotate(720deg) scale(0.3); }
}

/* Star sparkles */
.nealy-sparkle {
  position: absolute;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
}

.nealy-sparkle.flash {
  animation: sparkleFlash 0.6s ease-out forwards;
}

@keyframes sparkleFlash {
  0%   { opacity: 0; transform: scale(0) rotate(0deg); }
  50%  { opacity: 1; transform: scale(1.3) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
}


/* ══════════════════════════════════════════════════════════════════
   ENCOURAGE ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

.nealy-anim-encourage {
  animation: nealyTilt 0.8s ease-in-out forwards;
}

@keyframes nealyTilt {
  0%        { transform: rotate(0deg); }
  30%, 70%  { transform: rotate(8deg); }
  100%      { transform: rotate(0deg); }
}

/* Thinking paw */
.nealy-arm-right.thinking {
  animation: pawThink 1.5s ease-in-out forwards;
  transform-origin: bottom center;
}

@keyframes pawThink {
  0%        { transform: rotate(0deg) translateY(0); }
  25%, 75%  { transform: rotate(-40deg) translateY(-15px); }
  100%      { transform: rotate(0deg) translateY(0); }
}


/* ══════════════════════════════════════════════════════════════════
   FIDGET ANIMATIONS
   ══════════════════════════════════════════════════════════════════ */

/* Scratch behind ear */
.nealy-anim-scratch {
  animation: scratchFidget 1.5s ease-in-out;
}

.nealy-arm-right.scratch {
  animation: scratchArm 0.3s ease-in-out 5;
  transform-origin: bottom center;
}

@keyframes scratchFidget {
  0%, 100% { transform: rotate(0deg) translateX(0); }
  20%, 80% { transform: rotate(-5deg) translateX(2px); }
}

@keyframes scratchArm {
  0%, 100% { transform: rotate(-25deg) translateY(-12px); }
  50%      { transform: rotate(-35deg) translateY(-16px); }
}

/* Yawn and stretch */
.nealy-anim-yawn {
  animation: yawnStretch 2s ease-in-out;
}

@keyframes yawnStretch {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  30%      { transform: scaleX(1.06) scaleY(0.95); }
  50%      { transform: scaleX(1.08) scaleY(0.93); }
  70%      { transform: scaleX(1.04) scaleY(0.97); }
}

.nealy-mouth.yawn {
  animation: mouthYawn 2s ease-in-out;
}

@keyframes mouthYawn {
  0%, 100% { transform: scaleY(1); }
  30%, 60% { transform: scaleY(2) translateY(-2px); }
}

/* Look around */
.nealy-anim-lookAround .nealy-head {
  animation: lookLR 2.5s ease-in-out;
}

@keyframes lookLR {
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-12deg) translateX(-3px); }
  75%      { transform: rotate(12deg) translateX(3px); }
}

/* Tail wag */
.nealy-tail.wag {
  animation: tailWag 0.3s ease-in-out 6;
  transform-origin: bottom center;
}

@keyframes tailWag {
  0%, 100% { transform: rotate(-12deg); }
  50%      { transform: rotate(12deg); }
}

/* Claw flex */
.nealy-anim-clawFlex {
  animation: clawLook 2s ease-in-out;
}

.nealy-claws.flex {
  animation: clawSpread 0.6s ease-in-out 2;
}

@keyframes clawLook {
  0%, 100% { transform: rotate(0deg); }
  30%, 70% { transform: rotate(-3deg) translateY(-2px); }
}

@keyframes clawSpread {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  50%      { transform: scaleX(1.2) scaleY(1.1); }
}


/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */

@media (max-width: 480px) {
  #nealy-svg { height: 130px; }
  #nealy-bubble { font-size: 13px; max-width: 170px; padding: 8px 12px; }
  #nealy-container { bottom: 5px; right: 10px; }
}

@media (max-height: 500px) and (orientation: landscape) {
  #nealy-svg { height: 100px; }
  #nealy-bubble { font-size: 12px; max-width: 150px; }
  #nealy-container { bottom: 2px; right: 10px; }
}