/* PREVIEW ONLY: per-class header animation. See js/header-anim-classes-preview.js */
.canim .classes_back_wrap { overflow: hidden; }
.canim-plate { position: absolute; z-index: 1; pointer-events: none; display: block; max-width: none; }
.canim-layer {
  position: absolute; z-index: 2; pointer-events: none;
  transform-origin: var(--fo-x, 50%) var(--fo-y, 100%);
  animation: canim-breathe 5s cubic-bezier(.45,.05,.55,.95) infinite;
  will-change: transform; backface-visibility: hidden;
}
.canim-layer > * { position: absolute; pointer-events: none; }
.canim-char { left: 0; top: 0; width: 100%; height: 100%; display: block; max-width: none; }
@keyframes canim-breathe {
  0%, 100% { transform: scale(1); }
  45%, 55% { transform: scale(1.015); }
}

/* metal glint (same technique as Berserker) */
.canim-glint {
  background-repeat: no-repeat;
  filter: brightness(2.1) contrast(1.35) saturate(.55);
  mix-blend-mode: screen; opacity: .6;
  -webkit-mask-image: linear-gradient(var(--ga,115deg), transparent 40%, rgba(0,0,0,.35) 46%, #000 50%, rgba(0,0,0,.35) 54%, transparent 60%), radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: linear-gradient(var(--ga,115deg), transparent 40%, rgba(0,0,0,.35) 46%, #000 50%, rgba(0,0,0,.35) 54%, transparent 60%), radial-gradient(closest-side, #000 55%, transparent 100%);
  -webkit-mask-size: 300% 300%, 100% 100%; mask-size: 300% 300%, 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in; mask-composite: intersect;
  -webkit-mask-position: 100% 100%, 0 0; mask-position: 100% 100%, 0 0;
  animation: canim-glint 7.5s cubic-bezier(.6,0,.3,1) infinite; animation-delay: var(--gdelay,0s);
}
@keyframes canim-glint {
  0%   { -webkit-mask-position: 100% 100%, 0 0; mask-position: 100% 100%, 0 0; }
  22%, 100% { -webkit-mask-position: 0% 0%, 0 0; mask-position: 0% 0%, 0 0; }
}

/* elemental zones */
.canim-fx > * { position: absolute; pointer-events: none; }
.canim-fx-glow, .canim-fx-core { inset: 0; border-radius: 50%; mix-blend-mode: screen; }
.canim-fx-shimmer {
  inset: 0; background-repeat: no-repeat; mix-blend-mode: screen; opacity: .55;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}
.canim-mote { border-radius: 50%; opacity: 0; mix-blend-mode: screen; animation: canim-rise var(--dur,2.4s) cubic-bezier(.3,.1,.6,1) infinite; }
@keyframes canim-rise {
  0%   { opacity: 0; transform: translate(0,0) scale(.6); }
  15%  { opacity: 1; }
  70%  { opacity: .7; }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.2); }
}

/* fire: flickering heat glow, embers, heat-haze on the orb */
.canim-fire .canim-fx-glow { background: radial-gradient(closest-side, rgba(255,170,60,.55), rgba(255,90,20,.25) 45%, rgba(255,60,10,0) 75%); animation: canim-flicker 1.9s steps(1,end) infinite, canim-pulse 3.1s ease-in-out infinite; }
.canim-fire .canim-fx-core { inset: 28%; background: radial-gradient(closest-side, rgba(255,240,200,.55), rgba(255,160,60,.2) 60%, transparent); animation: canim-pulse 1.3s ease-in-out infinite alternate; }
.canim-fire .canim-mote { background: radial-gradient(closest-side, #fff2c8, #ffb040 45%, rgba(255,90,20,0)); box-shadow: 0 0 6px 2px rgba(255,140,40,.6); }
.canim-fire .canim-fx-shimmer { filter: url(#canim-heat) brightness(1.25) saturate(1.2); }
@keyframes canim-flicker { 0%{opacity:.85} 9%{opacity:1} 17%{opacity:.78} 31%{opacity:.95} 44%{opacity:.82} 58%{opacity:1} 71%{opacity:.74} 85%{opacity:.92} }
@keyframes canim-pulse { 0%,100% { transform: scale(.94); } 50% { transform: scale(1.06); } }

/* lightning: canvas arcs + quick flash */
.canim-lightning .canim-fx-glow { inset: 10%; background: radial-gradient(closest-side, rgba(140,210,255,.35), rgba(80,150,255,.12) 55%, transparent); animation: canim-pulse 2.2s ease-in-out infinite; }
.canim-lightning .canim-fx-core { inset: 22%; opacity: 0; background: radial-gradient(closest-side, rgba(235,248,255,.9), rgba(140,210,255,.45) 40%, transparent 75%); transition: opacity .09s ease-out; }
.canim-arcs { inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; }

/* dark magic: swirling violet smoke over the flame, drifting motes, slow throb */
.canim-dark .canim-fx-glow { background: radial-gradient(closest-side, rgba(190,90,255,.45), rgba(120,40,220,.18) 50%, transparent 78%); filter: url(#canim-smoke); animation: canim-throb 4.2s ease-in-out infinite; }
.canim-dark .canim-fx-core { inset: 30% 30% 20% 30%; background: radial-gradient(closest-side, rgba(255,200,255,.4), rgba(200,100,255,.15) 60%, transparent); animation: canim-pulse 2.6s ease-in-out infinite; }
.canim-dark .canim-mote { background: radial-gradient(closest-side, #f6d8ff, #b46bff 50%, rgba(120,40,220,0)); box-shadow: 0 0 6px 2px rgba(170,80,255,.55); }
.canim-dark .canim-fx-shimmer { filter: url(#canim-smoke) brightness(1.3) saturate(1.3); opacity: .5; }
@keyframes canim-throb { 0%,100% { opacity: .65; transform: scale(.95) rotate(0deg); } 50% { opacity: 1; transform: scale(1.07) rotate(8deg); } }

/* light / holy: soft bloom + motes (no pilot header uses it yet) */
.canim-light .canim-fx-glow { background: radial-gradient(closest-side, rgba(255,240,200,.45), rgba(255,220,150,.15) 55%, transparent); animation: canim-throb 5s ease-in-out infinite; }
.canim-light .canim-mote { background: radial-gradient(closest-side, #fffbe8, #ffe39a 50%, transparent); }

@media (max-width: 640px) { .canim .canim-layer, .canim .canim-plate { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .canim .canim-layer, .canim .canim-layer * { animation: none !important; }
  .canim .canim-layer, .canim .canim-plate { display: none; }
}