/* Ciscotype v1 - hand-drawn pixel font that boils.
   Drop this file next to the fonts/ folder and link it:
     <link rel="stylesheet" href="ciscotype.css">
*/

@font-face {
  font-family: "Ciscotype v1";
  src: url("fonts/CiscotypeV1Punctuation.woff") format("woff"),
       url("fonts/CiscotypeV1Punctuation.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block; /* don't flash a fallback font for 1 frame */
}

/* ---------- the font ---------- */
.ciscotype {
  font-family: "Ciscotype v1", "Comic Sans MS", cursive;
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;            /* never fake-bold / fake-italic the pixels */
  /* 1 drawing pixel = font-size / 100. 100px, 200px, 300px... = perfectly square pixels */
  font-size: calc(var(--ciscotype-scale, 1) * 100px);
  line-height: 1.35;
  letter-spacing: 0;
}

/* ---------- boil ----------
   The font holds 5 drawings of every letter. ss01-ss04 rotate every letter forward
   1-4 drawings. Stepping normal -> ss01 -> ss02 -> ss03 -> ss04 is one full cycle.
   steps(1, end) makes each keyframe snap (no in-betweens - it's a flipbook).        */
@keyframes ciscotype-boil {
  0%   { font-feature-settings: normal; }
  20%  { font-feature-settings: "ss01"; }
  40%  { font-feature-settings: "ss02"; }
  60%  { font-feature-settings: "ss03"; }
  80%  { font-feature-settings: "ss04"; }
  100% { font-feature-settings: "ss04"; }
}

.ciscotype-boil {
  /* --boil-fps = drawing swaps per second. 8 is the classic hand-drawn boil. */
  animation: ciscotype-boil calc(5s / var(--boil-fps, 8)) steps(1, end) infinite;
}

/* Every letter swaps on the same beat (the default staggers letters so neighbours
   are always on different drawings). */
.ciscotype-sync {
  font-variant-ligatures: no-contextual;   /* turns off the font's calt stagger */
}

/* Frozen on one drawing (still images, print, screenshots). */
.ciscotype-still-1 { animation: none; font-feature-settings: normal; }
.ciscotype-still-2 { animation: none; font-feature-settings: "ss01"; }
.ciscotype-still-3 { animation: none; font-feature-settings: "ss02"; }
.ciscotype-still-4 { animation: none; font-feature-settings: "ss03"; }
.ciscotype-still-5 { animation: none; font-feature-settings: "ss04"; }

/* Hard pixel edges on macOS at any size (other systems ignore this). */
.ciscotype-crisp {
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: unset;
}

/* Respect people who turn animation off in their OS settings. */
@media (prefers-reduced-motion: reduce) {
  .ciscotype-boil { animation: none; }
}