/* ankle-flicker.css — All-of-the-Lights per-letter flicker loader.
   Each letter span animates through a hard-cut keyframe cycle (step-end)
   that toggles font-family, background, color, outline. JS desyncs the
   letters with per-letter durations + negative delays.

   Namespace: .ankle-flicker / .ankle-flicker__letter
   Drop the matching ankle-flicker.js below this file. */

@keyframes ankleLetterFlicker {
  0%   { font-family:"Arial Black",sans-serif;     background:#FFD700; color:#000;    outline:1px solid #000;    outline-offset:0 }
  14%  { font-family:Impact,sans-serif;            background:#FF1493; color:#fff;    outline:1px solid #FFD700; outline-offset:0 }
  28%  { font-family:Georgia,serif;                background:#000;    color:#FFD700; outline:1px solid #FFD700; outline-offset:0 }
  42%  { font-family:"Times New Roman",serif;      background:#00FFFF; color:#000;    outline:1px dashed #FF0000; outline-offset:0 }
  57%  { font-family:"Courier New",monospace;      background:#FF0000; color:#fff;    outline:1px solid #000;    outline-offset:0 }
  71%  { font-family:Verdana,sans-serif;           background:#fff;    color:#000;    outline:2px solid #FF1493; outline-offset:0 }
  85%  { font-family:"Comic Sans MS",cursive;      background:#ADFF2F; color:#000;    outline:1px solid #000;    outline-offset:0 }
  100% { font-family:"Arial Black",sans-serif;     background:#FFD700; color:#000;    outline:1px solid #000;    outline-offset:0 }
}

@keyframes ankleLetterFlickerMono {
  0%   { font-family:"Courier New",monospace;      background:#000; color:#0f0; outline:1px solid #0f0 }
  20%  { font-family:Impact,sans-serif;            background:#0f0; color:#000; outline:1px solid #000 }
  40%  { font-family:"Times New Roman",serif;      background:#fff; color:#000; outline:1px solid #0f0 }
  60%  { font-family:Verdana,sans-serif;           background:#000; color:#fff; outline:1px dashed #0f0 }
  80%  { font-family:Georgia,serif;                background:#0a0; color:#fff; outline:1px solid #fff }
  100% { font-family:"Courier New",monospace;      background:#000; color:#0f0; outline:1px solid #0f0 }
}

@keyframes ankleLetterFlickerCyber {
  0%   { font-family:Impact,sans-serif;            background:#000; color:#0ff; outline:1px solid #f0f }
  18%  { font-family:"Courier New",monospace;      background:#f0f; color:#000; outline:1px solid #0ff }
  36%  { font-family:Verdana,sans-serif;           background:#ff0; color:#000; outline:1px dashed #000 }
  54%  { font-family:Georgia,serif;                background:#000; color:#0f0; outline:1px solid #ff0 }
  72%  { font-family:"Times New Roman",serif;      background:#0ff; color:#f0f; outline:1px solid #000 }
  100% { font-family:Impact,sans-serif;            background:#000; color:#0ff; outline:1px solid #f0f }
}

.ankle-flicker {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  /* Default = small preset; JS sets explicit font-size on letters. */
  vertical-align: middle;
}

.ankle-flicker__letter {
  display: inline-block;
  padding: 1px 3px;
  margin: 0 1px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.04em;
  font-size: 10px;
  animation-name: ankleLetterFlicker;
  animation-timing-function: step-end;
  animation-iteration-count: infinite;
  /* JS sets per-letter animation-duration + animation-delay inline */
}

/* Size presets — JS adds these classes via opts.preset */
.ankle-flicker--tiny   .ankle-flicker__letter { font-size: 9px;  padding: 0 2px }
.ankle-flicker--small  .ankle-flicker__letter { font-size: 10px; padding: 1px 3px }
.ankle-flicker--label  .ankle-flicker__letter { font-size: 14px; padding: 2px 5px }
.ankle-flicker--hero   .ankle-flicker__letter { font-size: 20px; padding: 3px 7px }
.ankle-flicker--xl     .ankle-flicker__letter { font-size: 30px; padding: 4px 10px }

/* Palette switches — JS sets these to swap the keyframe name */
.ankle-flicker--palette-default .ankle-flicker__letter { animation-name: ankleLetterFlicker }
.ankle-flicker--palette-mono    .ankle-flicker__letter { animation-name: ankleLetterFlickerMono }
.ankle-flicker--palette-cyber   .ankle-flicker__letter { animation-name: ankleLetterFlickerCyber }

/* Accessibility — respect users who don't want motion */
@media (prefers-reduced-motion: reduce) {
  .ankle-flicker__letter {
    animation: none !important;
    background: #c0c0c0;
    color: #000;
    outline: 1px solid #000;
    font-family: "Courier New", monospace;
  }
}