@import url('https://fonts.googleapis.com/css2?family=Zen+Maru+Gothic:wght@400;500;700&display=swap');

:root {
  --color-primary: #7C6FE0;
  --color-secondary: #A5B4FC;
  --color-accent: #FBBF24;
  --color-background: #F5F3FF;
  --font-family: 'Zen Maru Gothic', sans-serif;
}

body {
  font-family: var(--font-family);
}

/* Theme CSS variables override */
[data-theme] {
  --color-primary: var(--theme-primary, #7C6FE0);
  --color-secondary: var(--theme-secondary, #A5B4FC);
  --color-accent: var(--theme-accent, #FBBF24);
  --color-background: var(--theme-background, #F5F3FF);
}

/* Illustration aspect ratio */
.illustration-container img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

/* Mini player transition */
.mini-player-enter {
  transform: translateY(100%);
  opacity: 0;
}
.mini-player-active {
  transform: translateY(0);
  opacity: 1;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Illustration transitions */
.illustration-container {
  position: relative;
  overflow: hidden;
}

/* Fade */
.transition-fade {
  transition: opacity 0.5s ease-in-out;
}
.transition-fade.out {
  opacity: 0;
}
.transition-fade.in {
  opacity: 1;
}

/* Slide */
.transition-slide {
  transition: transform 0.5s ease-in-out, opacity 0.3s ease-in-out;
}
.transition-slide.out {
  transform: translateX(-100%);
  opacity: 0;
}
.transition-slide.in {
  transform: translateX(0);
  opacity: 1;
}
.transition-slide.prepare {
  transform: translateX(100%);
  opacity: 0;
}

/* Lift (kamishibai-style: current slides up to reveal next underneath) */
.illustration-container .lift-next {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 0;
}
.illustration-container .transition-lift {
  position: relative;
  z-index: 1;
  transition: transform 0.6s ease-in-out;
}
.illustration-container .transition-lift.out {
  transform: translateY(-100%);
}
.illustration-container .transition-lift.in {
  transform: translateY(0);
}

/* Zoom */
.transition-zoom {
  transition: transform 0.5s ease-in-out, opacity 0.4s ease-in-out;
}
.transition-zoom.out {
  transform: scale(1.3);
  opacity: 0;
}
.transition-zoom.in {
  transform: scale(1);
  opacity: 1;
}
.transition-zoom.prepare {
  transform: scale(0.7);
  opacity: 0;
}

/* None */
.transition-none.out {
  opacity: 0;
}
.transition-none.in {
  opacity: 1;
}

/* Legacy compat */
.illustration-fade {
  transition: opacity 0.5s ease-in-out;
}
.illustration-fade-out {
  opacity: 0;
}
.illustration-fade-in {
  opacity: 1;
}