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

/* ================================
   Template:3DOneFace/styles.css
   Flat card rocking left-to-right
   ================================ */


/* === CORE === */

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

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


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

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


/* === KEYFRAMES: LOW === */

@keyframes onef-rock-low {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(0.80); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(0.80); }
  100% { transform: scaleX(1); }
}


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

@keyframes onef-rock-normal {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(0.45); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(0.45); }
  100% { transform: scaleX(1); }
}


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

@keyframes onef-rock-high {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(0.15); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(0.15); }
  100% { transform: scaleX(1); }
}


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

.onef-wrapper:hover .onef-face {
  animation-play-state: paused;
  transform: 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;
  }
}