/* Fine material studies surround CFX and Groom without replacing the real text. */
.ability-cfx .ability-parallax,
.ability-groom .ability-parallax { position: relative; }
.ability-cloth {
  position: absolute;
  width: 84px;
  height: 66px;
  left: 55%;
  right: auto;
  top: 50%;
  transform: translate(-50%,-50%);
  overflow: hidden;
  contain: paint;
  z-index: -1;
  color: var(--skill-character);
}
.ability-cloth svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.ability-cloth-surface,
.ability-cloth-thread {
  animation: ability-cloth-ripple 3.8s ease-in-out -.8s infinite alternate;
  stroke: currentColor;
}
.ability-cloth-surface { fill: currentColor; fill-opacity: .055; stroke-width: .8; stroke-opacity: .65; }
.ability-cloth-thread { fill: none; stroke-width: .7; stroke-opacity: .4; }
.ability-cloth-warp { stroke-opacity: .23; }
.ability-cloth-pin { fill: currentColor; opacity: .78; }
@keyframes ability-cloth-ripple {
  from { d: var(--cloth-form-a); }
  to { d: var(--cloth-form-b); }
}
.ability-hair {
  position: absolute;
  width: 146px;
  height: 154px;
  right: -2px;
  top: -49px;
  overflow: hidden;
  contain: paint;
  z-index: -1;
  color: var(--skill-character);
}
.ability-hair svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.ability-hair-fall {
  transform-origin: 0 0;
  animation: ability-hair-gravity var(--hair-cycle) linear var(--hair-delay) infinite;
}
.ability-hair-strand {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: var(--hair-alpha,.7);
  animation: ability-hair-grow var(--hair-cycle) ease-out var(--hair-delay) infinite;
}
.ability-hair-highlight { color: var(--skill-code); }
@keyframes ability-hair-grow {
  0%, 7% { stroke-dashoffset: 1; }
  39%, 100% { stroke-dashoffset: 0; }
}
/* The strand grows at its root, loosens, then covers more distance each interval. */
@keyframes ability-hair-gravity {
  0% { opacity: 0; transform: translate(0,0) rotate(0); }
  12%, 43% { opacity: 1; transform: translate(0,0) rotate(0); }
  56% { opacity: .95; transform: translate(-1px,3px) rotate(calc(var(--hair-turn) * .12)); }
  69% { opacity: .85; transform: translate(calc(var(--hair-drift) * .25),12px) rotate(calc(var(--hair-turn) * .3)); }
  82% { opacity: .65; transform: translate(calc(var(--hair-drift) * .6),33px) rotate(calc(var(--hair-turn) * .66)); }
  97%, 100% { opacity: 0; transform: translate(var(--hair-drift),78px) rotate(var(--hair-turn)); }
}
[data-theme="light"] .ability-cloth-surface { fill-opacity: .065; stroke-opacity: .67; }
[data-theme="light"] .ability-cloth-thread { stroke-opacity: .37; }
[data-theme="light"] .ability-cloth-warp { stroke-opacity: .24; }
@media (min-width: 761px) and (max-width: 1100px) {
  .ability-cloth { width: 76px; height: 60px; }
  .ability-hair { width: 126px; height: 133px; top: -42px; }
}
@media (max-width: 760px) {
  .ability-cloth { width: 60px; height: 47px; left: 50%; }
  .ability-hair { width: 128px; height: 135px; top: -43px; }
}
@media (max-width: 360px) {
  .ability-cloth { width: 56px; height: 44px; }
  .ability-hair { width: 116px; height: 122px; top: -39px; }
}
@media print { .ability-cloth, .ability-hair { display: none !important; } }