/* Charter — DJ Octopus mascot, self-contained for Cardboard Analogue
   Extracted from MusicOrgan mo.css. Warm brown/amber palette for light theme. */

/* ── Palette -- on :root so <stop> elements inside the defs SVG inherit them ── */
:root {
  --charter-shade:  #5a3218;   /* deep brown */
  --charter-body:   #c87941;   /* warm amber */
  --charter-accent: #e8b86d;   /* gold highlight */
  --charter-arm:    #d4956a;   /* sandy tan */
  --charter-eye:    #ffffff;
  --charter-pupil:  #2b3b47;
}

/* ── Fill classes ── */
.charter-body        { fill: url(#charter-skin-grad); }
.charter-arm         { fill: var(--charter-arm); }
.charter-eye         { fill: var(--charter-eye); }
.charter-pupil-fill  { fill: var(--charter-pupil); }

/* ── Chromatophore skin: 4 stops drift between body tones and accent ── */
.charter-stop--1 { stop-color: var(--charter-shade);  animation: charter-skin-1  9s  ease-in-out infinite; }
.charter-stop--2 { stop-color: var(--charter-body);   animation: charter-skin-2 11s  ease-in-out infinite; }
.charter-stop--3 { stop-color: var(--charter-accent); animation: charter-skin-3  8s  ease-in-out infinite; }
.charter-stop--4 { stop-color: var(--charter-arm);    animation: charter-skin-4  6.5s ease-in-out infinite; }

@keyframes charter-skin-1 { 0%,100% { stop-color: var(--charter-shade); }  50% { stop-color: var(--charter-accent); } }
@keyframes charter-skin-2 { 0%,100% { stop-color: var(--charter-body); }   50% { stop-color: var(--charter-arm); } }
@keyframes charter-skin-3 { 0%,100% { stop-color: var(--charter-accent); } 50% { stop-color: var(--charter-body); } }
@keyframes charter-skin-4 { 0%,100% { stop-color: var(--charter-arm); }    50% { stop-color: var(--charter-shade); } }

/* ── Whole-mascot sway ── */
.charter-arms {
  transform-box: fill-box;
  transform-origin: 50% 35%;
  animation: charter-sway 6s ease-in-out infinite;
}
@keyframes charter-sway {
  0%   { transform: rotate(-2.6deg) translateY(0); }
  50%  { transform: rotate(2.6deg)  translateY(-12px); }
  100% { transform: rotate(-2.6deg) translateY(0); }
}

/* ── Independent pupil dart ── */
.charter-pupil { transform-box: fill-box; }
.charter-pupil--l { animation: charter-dart-l 5.3s ease-in-out infinite; }
.charter-pupil--r { animation: charter-dart-r 7.1s ease-in-out infinite; }

@keyframes charter-dart-l {
  0%,18%   { transform: translate(0,0); }
  26%,40%  { transform: translate(8px,-4px); }
  52%,66%  { transform: translate(-6px,5px); }
  78%,100% { transform: translate(5px,1px); }
}
@keyframes charter-dart-r {
  0%,12%   { transform: translate(-5px,3px); }
  30%,44%  { transform: translate(7px,4px); }
  58%,72%  { transform: translate(3px,-5px); }
  84%,100% { transform: translate(-4px,0); }
}

/* ── Conductor's baton wave ── */
.charter-baton-shaft-edge { fill: none; stroke: rgba(35,24,12,.55); stroke-width: 4.4; stroke-linecap: round; }
.charter-baton-shaft      { fill: none; stroke: #fbfaf5;            stroke-width: 3.0; stroke-linecap: round; }
.charter-baton-grip       { fill: #241d15; stroke: rgba(15,10,5,.55); stroke-width: 1; }

.charter-baton {
  transform-box: fill-box;
  transform-origin: 16% 90%;
  animation: charter-baton-wave 2.8s cubic-bezier(0.4,0,0.2,1) infinite;
}
@keyframes charter-baton-wave {
  0%   { transform: rotate(-13deg); }
  50%  { transform: rotate(13deg); }
  100% { transform: rotate(-13deg); }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .charter-arms,
  .charter-pupil--l, .charter-pupil--r,
  .charter-baton,
  .charter-stop--1, .charter-stop--2, .charter-stop--3, .charter-stop--4 {
    animation: none !important;
  }
}

/* ── Site placement ── */
.charter-wrap {
  display: flex;
  align-items: center;
  gap: 1rem;
}