/* PREVIEW ONLY: per-class header animation v2. See js/header-anim-classes-preview.js */
.canim .classes_back_wrap { overflow: hidden; }
.canim-plate, .canim-bgfx { 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 */
.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 canvas (additive) + heat haze over the flame */
.canim-fxc { mix-blend-mode: screen; }
.canim-haze {
  background-repeat: no-repeat; opacity: .55; mix-blend-mode: screen;
  -webkit-mask-image: radial-gradient(closest-side, #000 35%, transparent 100%); mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}

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

/* metal-only glint: third mask layer = per-page metal mask (no skin/face) */
.canim-glint.canim-glint-mm {
  -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%), var(--mm);
          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%), var(--mm);
  -webkit-mask-size: 300% 300%, 100% 100%, var(--ms); mask-size: 300% 300%, 100% 100%, var(--ms);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-composite: source-in, source-in; mask-composite: intersect, intersect;
  -webkit-mask-position: 100% 100%, 0 0, var(--mp); mask-position: 100% 100%, 0 0, var(--mp);
  animation-name: canim-glint-mm;
}
@keyframes canim-glint-mm {
  0%   { -webkit-mask-position: 100% 100%, 0 0, var(--mp); mask-position: 100% 100%, 0 0, var(--mp); }
  22%, 100% { -webkit-mask-position: 0% 0%, 0 0, var(--mp); mask-position: 0% 0%, 0 0, var(--mp); }
}

/* sweep glint: one long band travelling along a shape (blade/shield), clipped to that shape's mask */
.canim-glint.canim-blade {
  opacity: var(--gop,.8);
  -webkit-mask-image: linear-gradient(var(--ga,180deg), transparent 45%, rgba(0,0,0,.45) 47.5%, #000 49.2%, #000 50.8%, rgba(0,0,0,.45) 52.5%, transparent 55%), var(--mm);
          mask-image: linear-gradient(var(--ga,180deg), transparent 45%, rgba(0,0,0,.45) 47.5%, #000 49.2%, #000 50.8%, rgba(0,0,0,.45) 52.5%, transparent 55%), var(--mm);
  -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: 75% 75%, 0 0; mask-position: 75% 75%, 0 0;
  animation: canim-blade var(--gdur,6s) cubic-bezier(.45,0,.4,1) infinite; animation-delay: var(--gdelay,0s);
}
@keyframes canim-blade {
  0%   { -webkit-mask-position: 80% 80%, 0 0; mask-position: 80% 80%, 0 0; }
  32%, 100% { -webkit-mask-position: 20% 20%, 0 0; mask-position: 20% 20%, 0 0; }
}