/* Static styles ported from svelte component <style> blocks (BrainrotMascot). */

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  background: var(--color-gv2-bg-base, #e3f1fa); /* 青空 base — full gradient lives in aozora.css */
  -webkit-font-smoothing: antialiased;
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-6px); }
}
@keyframes mascot-bounce-kf {
  0% { transform: scale(1) translateY(0); }
  20% { transform: scale(1.15, 0.9) translateY(0); }
  40% { transform: scale(0.9, 1.1) translateY(-12px); }
  60% { transform: scale(1.05, 0.95) translateY(0); }
  80% { transform: scale(0.98, 1.02) translateY(-4px); }
  100% { transform: scale(1) translateY(0); }
}
@keyframes fadein-up {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* KamiYoroMascot (svelte/src/lib/KamiYoroMascot.svelte <style>) */
.yoro-svg {
  animation: yoro-float 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 12px rgba(88, 204, 2, 0.2));
  cursor: pointer;
}
.yoro-svg:hover { filter: drop-shadow(0 8px 20px rgba(88, 204, 2, 0.3)); }
.yoro-tap { animation: yoro-bounce 0.4s ease-out !important; }
.yoro-shadow { animation: yoro-shadow-pulse 3s ease-in-out infinite; }
.yoro-arm-l { transform-origin: 54px 152px; animation: yoro-wave-l 4s ease-in-out infinite; }
.yoro-arm-r { transform-origin: 146px 152px; animation: yoro-wave-r 4s ease-in-out 2s infinite; }

@keyframes yoro-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes yoro-bounce { 0% { transform: scale(1); } 20% { transform: scale(0.9); } 50% { transform: scale(1.08); } 70% { transform: scale(0.97); } 100% { transform: scale(1); } }
@keyframes yoro-shadow-pulse { 0%, 100% { rx: 38; } 50% { rx: 34; } }
@keyframes yoro-wave-l { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(5deg); } }
@keyframes yoro-wave-r { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(8deg); } 75% { transform: rotate(-5deg); } }
@media (prefers-reduced-motion: reduce) {
  .yoro-svg, .yoro-shadow, .yoro-arm-l, .yoro-arm-r { animation: none; }
  .yoro-tap { animation: none !important; }
}

/* Splash screen keyframes */
@keyframes splash-dot {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.4); }
}
@keyframes splash-yoro-float {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-10px) rotate(3deg); }
}

.mascot-float { animation: float 3s ease-in-out infinite; }
.mascot-bounce { animation: mascot-bounce-kf 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards; }
.speech-bubble { animation: fadein-up 0.25s ease-out; }
.speech-bubble::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #facc15;
}

/* HeaderYoroAnimation (svelte/src/lib/components/HeaderYoroAnimation.svelte <style>) */
.header-yoro-wrap {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
}
.yoro-mini {
  width: 22px;
  height: auto;
  filter: drop-shadow(0 1px 2px rgba(88, 204, 2, 0.3));
  transition: filter 0.2s;
}
.yoro-mini:hover { filter: drop-shadow(0 2px 6px rgba(88, 204, 2, 0.5)); }

.yoro-peek-left { animation: peek-in-left 0.5s ease-out forwards, gentle-bob 2.5s ease-in-out 0.5s infinite; }
@keyframes peek-in-left {
  from { transform: translateX(-8px) scale(0.6); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
.yoro-peek-right { animation: peek-in-right 0.5s ease-out forwards, gentle-bob 2.5s ease-in-out 0.5s infinite; }
@keyframes peek-in-right {
  from { transform: translateX(8px) scale(0.6); opacity: 0; }
  to { transform: translateX(0) scale(1); opacity: 1; }
}
@keyframes gentle-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-2px); }
}
.wave-arm { transform-origin: 3px 16px; animation: wave 0.8s ease-in-out 0.6s infinite alternate; }
@keyframes wave { from { transform: rotate(0deg); } to { transform: rotate(-25deg); } }
.wave-arm-r { transform-origin: 25px 16px; animation: wave-r 0.8s ease-in-out 0.6s infinite alternate; }
@keyframes wave-r { from { transform: rotate(0deg); } to { transform: rotate(25deg); } }
.yoro-swing { transform-origin: 14px 2px; animation: swing-pendulum 2s ease-in-out infinite; }
@keyframes swing-pendulum {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}
.dangle-l { animation: dangle-foot 1.5s ease-in-out infinite; }
.dangle-r { animation: dangle-foot 1.5s ease-in-out 0.4s infinite; }
@keyframes dangle-foot {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-2px); }
}
.yoro-sleep { animation: sleep-breathe 3s ease-in-out infinite; }
@keyframes sleep-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
.zzz { opacity: 0; }
.zzz-1 { animation: zzz-float 2.5s ease-in-out infinite; }
.zzz-2 { animation: zzz-float 2.5s ease-in-out 0.5s infinite; }
.zzz-3 { animation: zzz-float 2.5s ease-in-out 1s infinite; }
@keyframes zzz-float {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 0.8; }
  70% { opacity: 0.8; }
  100% { opacity: 0; transform: translateY(-6px); }
}
.yoro-bounce-anim { animation: yoro-header-bounce 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite; }
@keyframes yoro-header-bounce {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30% { transform: translateY(-6px) scaleY(1.05); }
  50% { transform: translateY(0) scaleY(0.92) scaleX(1.05); }
  70% { transform: translateY(-3px) scaleY(1.02); }
}
.yoro-roll { animation: roll-across 3s linear infinite; }
.roll-body { transform-origin: 14px 14px; animation: roll-spin 1s linear infinite; }
@keyframes roll-across {
  0% { transform: translateX(-12px); }
  50% { transform: translateX(12px); }
  100% { transform: translateX(-12px); }
}
@keyframes roll-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
.yoro-dance { animation: dance-sway 0.5s ease-in-out infinite alternate; }
@keyframes dance-sway {
  from { transform: rotate(-5deg) translateY(0); }
  to { transform: rotate(5deg) translateY(-2px); }
}
.dance-arm-l { transform-origin: 6px 14px; animation: dance-arm-left 0.4s ease-in-out infinite alternate; }
.dance-arm-r { transform-origin: 26px 14px; animation: dance-arm-right 0.4s ease-in-out 0.2s infinite alternate; }
@keyframes dance-arm-left { from { transform: rotate(0deg); } to { transform: rotate(-20deg); } }
@keyframes dance-arm-right { from { transform: rotate(0deg); } to { transform: rotate(20deg); } }
.dance-foot-l { animation: dance-step-l 0.5s ease-in-out infinite alternate; }
.dance-foot-r { animation: dance-step-r 0.5s ease-in-out 0.25s infinite alternate; }
@keyframes dance-step-l { from { transform: translateX(0); } to { transform: translateX(-2px) translateY(-1px); } }
@keyframes dance-step-r { from { transform: translateX(0); } to { transform: translateX(2px) translateY(-1px); } }
.music-note { opacity: 0; }
.note-1 { animation: note-float 1.5s ease-out infinite; }
.note-2 { animation: note-float 1.5s ease-out 0.7s infinite; }
@keyframes note-float {
  0% { opacity: 0; transform: translateY(0); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px) translateX(3px); }
}
.yoro-hang { animation: hang-sway 2.5s ease-in-out infinite; }
@keyframes hang-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
  .yoro-mini,
  .wave-arm, .wave-arm-r,
  .dangle-l, .dangle-r,
  .zzz, .roll-body,
  .dance-arm-l, .dance-arm-r,
  .dance-foot-l, .dance-foot-r,
  .music-note {
    animation: none !important;
  }
}