/* ENA+ENA Official Website — shared base styles
   Only truly cross-page rules live here. Each page keeps its own <style>
   block for its theme colour, focus-ring colour, background and any
   page-specific keyframes. Do not fold page-specific personality values
   into this file. */

html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* chibi character motions — shared by Home / Store / Améthyst / HELLO / Radio.
   Periods are set per-instance inline; these are just the named curves. */
@keyframes chibi-bob {
  0%   { transform: translateY(0) scale(1,1); }
  28%  { transform: translateY(-7px) scale(.99,1.02); }
  55%  { transform: translateY(0) scale(1.02,.98); }
  72%  { transform: translateY(-3px) scale(1,1); }
  100% { transform: translateY(0) scale(1,1); }
}
@keyframes chibi-hop {
  0%   { transform: translateY(0) scale(1,1) rotate(0); }
  22%  { transform: translateY(-22px) scale(1.05,.95) rotate(-4deg); }
  45%  { transform: translateY(0) scale(.96,1.06) rotate(3deg); }
  62%  { transform: translateY(-10px) scale(1.02,.98) rotate(-2deg); }
  80%  { transform: translateY(0) scale(.99,1.01) rotate(1deg); }
  100% { transform: translateY(0) scale(1,1) rotate(0); }
}
@keyframes chibi-tilt {
  0%   { transform: rotate(-5deg); }
  50%  { transform: rotate(5deg); }
  100% { transform: rotate(-5deg); }
}
@keyframes chibi-swing {
  0%   { transform: rotate(0); }
  18%  { transform: rotate(-14deg); }
  42%  { transform: rotate(11deg); }
  64%  { transform: rotate(-7deg); }
  82%  { transform: rotate(3deg); }
  100% { transform: rotate(0); }
}

/* Reduced-motion: stop all decorative animation and smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* Shared custom audio player (Diary + RADIO). Colours come from the
   --ap-accent / --ap-fg variables set per instance so it reads on both the
   dark Diary panel and the light RADIO card. */
.ena-ap { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--ap-fg, #2a2230); font: 500 12px 'Jost', sans-serif; }
.ena-ap audio { display: none; }
.ena-ap button { display: flex; align-items: center; justify-content: center; border: 0; cursor: pointer; flex: none; }
.ena-ap-play { width: 34px; height: 34px; border-radius: 50%; background: var(--ap-accent, #ff6a4d); color: #fff; }
.ena-ap-play:disabled { opacity: .5; cursor: not-allowed; }
.ena-ap-mute { width: 30px; height: 30px; border-radius: 50%; background: transparent; color: var(--ap-fg, #2a2230); }
.ena-ap-time { font-variant-numeric: tabular-nums; font-size: 11px; opacity: .85; min-width: 30px; text-align: center; flex: none; }
.ena-ap-seek { flex: 1 1 90px; min-width: 90px; accent-color: var(--ap-accent, #ff6a4d); cursor: pointer; }
.ena-ap-vol { flex: 0 0 auto; width: 64px; accent-color: var(--ap-accent, #ff6a4d); cursor: pointer; }
.ena-ap-err { flex-basis: 100%; font: 500 12px 'Noto Sans JP', sans-serif; color: #c0304f; background: #fff0f2; border-radius: 6px; padding: 8px 10px; line-height: 1.6; }
@media (max-width: 520px) { .ena-ap-vol { width: 54px; } }

/* Footer "back to top" decorative wave — a <canvas> injected into each
   .ena-totop-wave by common.js composites three sine waves every frame, so the
   shape genuinely changes (not a scrolling image / not a scaleY of a fixed
   shape). This rule only sizes and layers the container + canvas; all motion
   (and the prefers-reduced-motion single static frame) lives in common.js. Sits
   below the round button (z-index:2) and is pointer-events:none so it never
   blocks the control; full-width with overflow hidden → never adds horizontal
   scroll. The blue→purple→cyan gradient is applied to the canvas stroke in JS. */
.ena-totop-wave {
  position: absolute;
  top: 25px;
  left: 0;
  width: 100%;
  height: 40px;
  min-height: 40px;      /* keep a stable measurable height (no clipped wave) */
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  opacity: 1;            /* never fade — no transform/opacity/animation here */
  transform: none;
  animation: none;
}
.ena-totop-wave canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
}