/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }

/* Animation Keyframes */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

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

/* Wind Animation */
.wind-line {
  position: absolute;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  animation: wind-move linear infinite;
}

@keyframes wind-move {
  0% { transform: translateX(100vw); opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { transform: translateX(-100vw); opacity: 0; }
}

/* Character Animations */
.char-bob { animation: charBob 1s ease-in-out infinite; }
.char-run { animation: charRun 0.6s cubic-bezier(0.4, 0, 0.2, 1) infinite; }
.scarf-blow { animation: scarfBlow 1s ease-in-out infinite alternate; }
.scarf-run { animation: scarfRun 0.2s linear infinite alternate; }
.hand-wave { animation: wave 1s infinite ease-in-out; transform-origin: 50px 50px; }
.leg-run { animation: legRun 0.6s infinite linear; }

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

@keyframes charRun {
  0% { transform: translateY(0) rotate(5deg); }
  50% { transform: translateY(-10px) rotate(10deg); }
  100% { transform: translateY(0) rotate(5deg); }
}

@keyframes scarfBlow {
  0% { d: path("M45 35 Q 60 35, 70 30"); }
  100% { d: path("M45 35 Q 60 40, 75 25"); }
}

@keyframes scarfRun {
  0% { d: path("M45 45 Q 10 40, 0 45"); }
  100% { d: path("M45 45 Q 10 42, 0 48"); }
}

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

/* Utility classes for layout transitions */
.layout-home #character-pane {
    height: 60%;
}
.layout-detail #character-pane {
    height: 30%;
}
@media (min-width: 768px) {
    .layout-home #character-pane { height: 70%; }
    .layout-detail #character-pane { height: 100%; width: 33.333%; }
    
    .layout-home #content-pane { height: 30%; }
    .layout-detail #content-pane { height: 100%; width: 66.666%; }
}