Template:3DOneFace/styles.css

/* ================================
   Template:3DOneFace/styles.css
   Single-face fake-3D jiggle
   Uses 2D transforms only (CSS2 safe)
   ================================ */


/* === CORE === */

.onef-wrapper {
  display: inline-block;
  vertical-align: middle;
}

.onef-face {
  display: inline-block;
  animation-name: onef-jiggle-normal;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


/* === INTENSITY LEVELS === */

.onef-low    .onef-face { animation-name: onef-jiggle-low; }
.onef-normal .onef-face { animation-name: onef-jiggle-normal; }
.onef-high   .onef-face { animation-name: onef-jiggle-high; }


/* === KEYFRAMES: LOW (±5°) === */

@keyframes onef-jiggle-low {
  0%   { transform: skewY(0deg) scaleX(1); }
  12%  { transform: skewY(3deg) scaleX(0.998); }
  25%  { transform: skewY(-4deg) scaleX(0.997) skewX(1deg); }
  40%  { transform: skewY(2deg) scaleX(0.999) skewX(-1deg); }
  55%  { transform: skewY(-5deg) scaleX(0.996); }
  70%  { transform: skewY(4deg) scaleX(0.997) skewX(2deg); }
  85%  { transform: skewY(-2deg) scaleX(0.999); }
  100% { transform: skewY(0deg) scaleX(1); }
}


/* === KEYFRAMES: NORMAL (±12°) === */

@keyframes onef-jiggle-normal {
  0%   { transform: skewY(0deg) scaleX(1); }
  10%  { transform: skewY(8deg) scaleX(0.986) skewX(2deg); }
  23%  { transform: skewY(-7deg) scaleX(0.991) skewX(-4deg); }
  38%  { transform: skewY(5deg) scaleX(0.994) skewX(3deg); }
  52%  { transform: skewY(-11deg) scaleX(0.978); }
  67%  { transform: skewY(9deg) scaleX(0.983) skewX(-3deg); }
  80%  { transform: skewY(-4deg) scaleX(0.993) skewX(5deg); }
  91%  { transform: skewY(10deg) scaleX(0.981) skewX(-2deg); }
  100% { transform: skewY(0deg) scaleX(1); }
}


/* === KEYFRAMES: HIGH (±22°) === */

@keyframes onef-jiggle-high {
  0%   { transform: skewY(0deg) scaleX(1); }
  9%   { transform: skewY(16deg) scaleX(0.927) skewX(4deg); }
  21%  { transform: skewY(-13deg) scaleX(0.954) skewX(-8deg); }
  35%  { transform: skewY(10deg) scaleX(0.966) skewX(6deg); }
  50%  { transform: skewY(-20deg) scaleX(0.906); }
  64%  { transform: skewY(15deg) scaleX(0.940) skewX(-5deg); }
  78%  { transform: skewY(-8deg) scaleX(0.972) skewX(10deg); }
  90%  { transform: skewY(19deg) scaleX(0.912) skewX(-3deg); }
  100% { transform: skewY(0deg) scaleX(1); }
}


/* === HOVER: SNAP FLAT === */

.onef-wrapper:hover .onef-face {
  animation-play-state: paused;
  transform: skewY(0deg) scaleX(1);
  transition: transform 0.15s ease-out;
}

.onef-nohover:hover .onef-face {
  animation-play-state: running;
  transform: none;
  transition: none;
}


/* === REDUCED MOTION SAFETY === */

@media (prefers-reduced-motion: reduce) {
  .onef-face {
    animation: none;
    transform: none;
  }
  .onef-wrapper:hover .onef-face {
    transform: none;
    transition: none;
  }
}