Template:3DOneFace/styles.css: Difference between revisions

/* ================================
   Template:3DOneFace/styles.css
   Fake-3D via scale + rotate mix
   ================================ */


/* === 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 === */

@keyframes onef-jiggle-low {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
  14%  { transform: scaleX(0.82) scaleY(0.97) rotate(-2deg); }
  30%  { transform: scaleX(0.95) scaleY(0.80) rotate(1deg); }
  47%  { transform: scaleX(0.75) scaleY(0.93) rotate(2deg); }
  61%  { transform: scaleX(0.92) scaleY(0.78) rotate(-1deg); }
  78%  { transform: scaleX(0.78) scaleY(0.96) rotate(3deg); }
  90%  { transform: scaleX(0.90) scaleY(0.84) rotate(-2deg); }
  100% { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
}


/* === KEYFRAMES: NORMAL === */

@keyframes onef-jiggle-normal {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
  11%  { transform: scaleX(0.55) scaleY(0.94) rotate(-4deg); }
  26%  { transform: scaleX(0.90) scaleY(0.50) rotate(3deg); }
  39%  { transform: scaleX(0.42) scaleY(0.88) rotate(5deg); }
  54%  { transform: scaleX(0.86) scaleY(0.45) rotate(-3deg); }
  67%  { transform: scaleX(0.48) scaleY(0.91) rotate(-5deg); }
  81%  { transform: scaleX(0.80) scaleY(0.55) rotate(4deg); }
  93%  { transform: scaleX(0.38) scaleY(0.85) rotate(-2deg); }
  100% { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
}


/* === KEYFRAMES: HIGH === */

@keyframes onef-jiggle-high {
  0%   { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
  9%   { transform: scaleX(0.28) scaleY(0.92) rotate(-7deg); }
  22%  { transform: scaleX(0.88) scaleY(0.22) rotate(6deg); }
  36%  { transform: scaleX(0.18) scaleY(0.85) rotate(9deg); }
  51%  { transform: scaleX(0.82) scaleY(0.20) rotate(-6deg); }
  63%  { transform: scaleX(0.24) scaleY(0.90) rotate(-9deg); }
  77%  { transform: scaleX(0.85) scaleY(0.26) rotate(7deg); }
  89%  { transform: scaleX(0.20) scaleY(0.82) rotate(-4deg); }
  100% { transform: scaleX(1)    scaleY(1)    rotate(0deg); }
}


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

.onef-wrapper:hover .onef-face {
  animation-play-state: paused;
  transform: scaleX(1) scaleY(1) rotate(0deg);
  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;
  }
}