/* PREVIEW ONLY: per-class header animation v2. 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 */
.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 { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .canim .canim-layer, .canim .canim-layer * { animation: none !important; }
  .canim .canim-layer, .canim .canim-plate { display: none; }
}