/* Old way: combined transform property */
.old-style {
  transform: translateX(50px) translateY(20px) rotate(45deg) scale(1.5);
  /* All transforms in one property */
}

/* New way: individual properties */
.new-style {
  translate: 50px 20px;
  /* Or: translate: 50px 20px 0; for 3D */
  rotate: 45deg;
  scale: 1.5;
  /* Each on separate line, much clearer! */
}

/* Individual translate */
.translate-only {
  translate: 100px 50px;
  /* X: 100px, Y: 50px */
}

.translate-3d {
  translate: 50px 20px 30px;
  /* X, Y, Z in one property */
}

/* Individual rotate */
.rotate-z {
  rotate: 45deg;
  /* Default: rotate around Z axis */
}

.rotate-x {
  rotate: 1 0 0 45deg;
  /* Vector (1,0,0) = X axis, angle */
}

.rotate-y {
  rotate: 0 1 0 45deg;
  /* Vector (0,1,0) = Y axis */
}

/* Individual scale */
.scale-uniform {
  scale: 1.5;
  /* Scale both X and Y by 1.5 */
}

.scale-xy {
  scale: 1.5 2;
  /* X: 1.5, Y: 2 */
}

.scale-3d {
  scale: 1.5 2 1.2;
  /* X, Y, Z */
}

/* Benefit 1: Easier to read and understand */

/* Combined (harder to parse) */
.element {
  transform: translateX(50px) translateY(20px) rotate(45deg) scale(1.5) skewX(10deg);
}

/* Individual (very clear what each does) */
.element {
  translate: 50px 20px;
  rotate: 45deg;
  scale: 1.5;
  /* skewX stays in transform since no individual property */
  transform: skewX(10deg);
}

/* Benefit 2: Easier to override in media queries */

@media (max-width: 768px) {
  /* Only change what needs to change */
  .element {
    translate: 25px 10px;
    /* rotate and scale remain unchanged */
  }
}

/* Benefit 3: Easier to animate individual transforms */

@keyframes move {
  from { translate: 0 0; }
  to { translate: 100px 50px; }
}

@keyframes spin {
  from { rotate: 0deg; }
  to { rotate: 360deg; }
}

.element {
  animation: move 2s, spin 3s;
  /* Independent animations on individual properties */
}

/* Benefit 4: Easier to toggle with CSS classes */

.element {
  scale: 1;
  translate: 0 0;
  transition: all 0.3s ease;
}

.element.active {
  scale: 1.1;
  translate: 10px 10px;
  /* Only override what changed */
}

/* Benefit 5: Works well with CSS custom properties */

:root {
  --scale: 1;
  --rotate: 0deg;
  --translate-x: 0px;
  --translate-y: 0px;
}

.element {
  scale: var(--scale);
  rotate: var(--rotate);
  translate: var(--translate-x) var(--translate-y);
}

/* You can mix individual properties with transform */

.element {
  translate: 50px 20px;
  rotate: 45deg;
  scale: 1.5;
  /* transform can still be used for functions without individual property */
  transform: skewX(10deg);
  /* Final transform = translate + rotate + scale + skewX */
}

/* Order of transforms (important!) */

/* When individual properties are used, they apply in this order: */
/* 1. translate */
/* 2. rotate */
/* 3. scale */
/* Regardless of CSS rule order */

.example {
  scale: 2;
  translate: 50px;
  rotate: 45deg;
}

/* Applied as: translate(50px) rotate(45deg) scale(2) */
/* NOT as written in CSS */

/* Be aware: order is fixed, not CSS declaration order */

.element-1 {
  rotate: 45deg;
  translate: 50px;
  scale: 2;
  /* Applied: translate -> rotate -> scale */
}

.element-2 {
  scale: 2;
  translate: 50px;
  rotate: 45deg;
  /* Still applied: translate -> rotate -> scale */
  /* Same result as element-1 */
}

/* If order matters, use transform property instead */

.custom-order {
  transform: scale(2) translate(50px) rotate(45deg);
  /* Scale first, then translate, then rotate */
}

/* Rotate around single axis */

.rotate-z-axis {
  rotate: 45deg;
  /* Shorthand for: rotate: 0 0 1 45deg; */
  /* Z-axis rotation (default) */
}

.rotate-x-axis {
  rotate: 1 0 0 45deg;
  /* Rotate around X-axis (pitch) */
}

.rotate-y-axis {
  rotate: 0 1 0 45deg;
  /* Rotate around Y-axis (yaw) */
}

/* Rotate around arbitrary axis */

.rotate-diagonal {
  rotate: 1 1 1 45deg;
  /* Rotate around (1,1,1) diagonal axis */
}

.rotate-custom {
  rotate: 2 3 1 60deg;
  /* Rotate around normalized (2,3,1) vector */
}

/* Multiple rotations (though less common) */

.multiple-rotates {
  transform: rotateX(30deg) rotateY(45deg);
  /* For multiple rotations, still use transform property */
}

/* Clearer with transform in this case */

/* Floating button */
.floating-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #3498db;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 24px;
  scale: 1;
  translate: 0 0;
  rotate: 0deg;
  transition: all 0.3s ease;
}

.floating-button:hover {
  scale: 1.1;
  translate: 0 -5px;
  /* Grows and floats up */
}

/* Hover scale with rotation */
.card {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
}

.card:hover {
  translate: 0 -10px;
  /* Lift up */
  rotate: 1deg;
  /* Slight rotation for playfulness */
  scale: 1.05;
  /* Slightly larger */
}

/* Dialog opening animation */
.dialog {
  scale: 0;
  rotate: -45deg;
  translate: 0 -20px;
  opacity: 0;
  transition: all 0.3s ease;
}

.dialog.open {
  scale: 1;
  rotate: 0deg;
  translate: 0 0;
  opacity: 1;
}

/* Navigation item underline with scale */
.nav-item {
  position: relative;
  transition: all 0.3s ease;
  scale: 1;
}

.nav-item::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #3498db;
  transition: all 0.3s ease;
  translate: -50% 0;
  scale: 0 1;
}

.nav-item:hover::after {
  width: 100%;
  scale: 1 1;
}

/* Sliding menu items */
.menu-item {
  translate: -30px 0;
  opacity: 0;
  animation: slide-in 0.3s ease forwards;
}

.menu-item:nth-child(2) { animation-delay: 0.1s; }
.menu-item:nth-child(3) { animation-delay: 0.2s; }
.menu-item:nth-child(4) { animation-delay: 0.3s; }

@keyframes slide-in {
  to {
    translate: 0 0;
    opacity: 1;
  }
}

/* Check browser support */
@supports (translate: 0 0) {
  .element {
    translate: 50px 20px;
    rotate: 45deg;
    scale: 1.5;
    /* Uses individual properties */
  }
}

@supports not (translate: 0 0) {
  .element {
    transform: translate(50px, 20px) rotate(45deg) scale(1.5);
    /* Falls back to combined transform */
  }
}

/* Progressive enhancement */
.element {
  /* Fallback for older browsers */
  transform: translate(50px, 20px) rotate(45deg) scale(1.5);

  /* Modern browsers use these instead (they override transform) */
  translate: 50px 20px;
  rotate: 45deg;
  scale: 1.5;
}

/* Individual properties take precedence over transform */
/* So modern browsers ignore the transform and use individual properties */

/* Support timeline */
/* Chrome: 104+ */
/* Firefox: 72+ */
/* Safari: 14.1+ */
/* Edge: 104+ */

/* For older browser support, duplicate declarations */
.smooth-transition {
  /* Fallback */
  transform: translate(0, 0) rotate(0deg) scale(1);
  translate: 0 0;
  rotate: 0deg;
  scale: 1;
  transition: all 0.3s ease;
}