/* Custom aesthetic flourishes for Mochi's scrapbook corkboard */

@keyframes breath {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-2px) scale(1.008);
  }
}

@keyframes earTwitchL {
  0%, 88%, 100% { transform: rotate(-18deg); }
  92% { transform: rotate(-26deg); }
  96% { transform: rotate(-14deg); }
}

@keyframes earTwitchR {
  0%, 85%, 100% { transform: rotate(18deg); }
  90% { transform: rotate(26deg); }
  95% { transform: rotate(15deg); }
}

@keyframes gentlePulse {
  0%, 100% { transform: scale(0.96) rotate(0deg); opacity: 0.3; }
  50% { transform: scale(1.1) rotate(4deg); opacity: 0.8; }
}

@keyframes floatEmote {
  0% { transform: translateY(0px) rotate(0deg); opacity: 0; }
  25% { transform: translateY(-8px) rotate(-12deg); opacity: 1; }
  75% { transform: translateY(-18px) rotate(12deg); opacity: 1; }
  100% { transform: translateY(-28px) rotate(0deg); opacity: 0; }
}

@keyframes chaosWiggle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25% { transform: rotate(-3deg) scale(1.02); }
  75% { transform: rotate(3deg) scale(1.02); }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.animate-fadeIn {
  animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scaleIn {
  animation: scaleIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Mascot SVG Keyframe Bindings */
.mochi-body, .mochi-head {
  animation: breath 4.5s ease-in-out infinite;
}

.ear-twitch-left {
  animation: earTwitchL 6s ease-in-out infinite;
}

.ear-twitch-right {
  animation: earTwitchR 7s ease-in-out infinite 0.5s;
}

.voice-pulsing {
  animation: gentlePulse 1.2s ease-in-out infinite;
}

/* Corkboard texture simulation */
.cork-pattern {
  background-color: #E6D4BD;
  background-image: 
    radial-gradient(#D5BD9F 15%, transparent 16%),
    radial-gradient(#CEB291 15%, transparent 16%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
}

/* Pinned Note Styles */
.sticky-note {
  position: relative;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease;
  box-shadow: 2px 5px 12px rgba(78, 52, 42, 0.14), 0 1px 3px rgba(78, 52, 42, 0.08);
}

.sticky-note:hover {
  transform: translateY(-3px) scale(1.03) !important;
  box-shadow: 6px 12px 22px rgba(78, 52, 42, 0.22);
  z-index: 10;
}

.sticky-note-pin {
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFD700, #D97706);
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 1.5px solid rgba(255,255,255,0.6);
}

/* Chat bubble aesthetics */
.bubble-user {
  background: #8C483E;
  color: #FFFFFF;
  border-radius: 20px 20px 4px 20px;
}

.bubble-mochi {
  background: #FAF6EE;
  color: #3E3432;
  border: 1px solid #E5D9C4;
  border-radius: 20px 20px 20px 4px;
  box-shadow: 0 2px 8px rgba(140, 72, 62, 0.04);
}

/* Custom subtle scrollbars */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #DFD2BC;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #C4B59C;
}

/* Touch usability */
button {
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}