zenkit-css 1.0.0

package/scss/utilities/_text.scss

@@ -0,0 +1,237 @@
+// ========================================
+// ZenKit - Text Utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+@use '../abstracts/mixins' as *;
+
+// ----------------------------------------
+// Font Family
+// ----------------------------------------
+.font-sans { font-family: var(--font-sans); }
+.font-mono { font-family: var(--font-mono); }
+
+// ----------------------------------------
+// Font Size
+// ----------------------------------------
+.text-xs { font-size: var(--text-xs); line-height: 1rem; }
+.text-sm { font-size: var(--text-sm); line-height: 1.25rem; }
+.text-base { font-size: var(--text-base); line-height: 1.5rem; }
+.text-lg { font-size: var(--text-lg); line-height: 1.75rem; }
+.text-xl { font-size: var(--text-xl); line-height: 1.75rem; }
+.text-2xl { font-size: var(--text-2xl); line-height: 2rem; }
+.text-3xl { font-size: var(--text-3xl); line-height: 2.25rem; }
+.text-4xl { font-size: var(--text-4xl); line-height: 2.5rem; }
+.text-5xl { font-size: var(--text-5xl); line-height: 1; }
+
+// ----------------------------------------
+// Font Weight
+// ----------------------------------------
+.font-light { font-weight: $font-weight-light; }
+.font-normal { font-weight: $font-weight-normal; }
+.font-medium { font-weight: $font-weight-medium; }
+.font-semibold { font-weight: $font-weight-semibold; }
+.font-bold { font-weight: $font-weight-bold; }
+
+// ----------------------------------------
+// Font Style
+// ----------------------------------------
+.italic { font-style: italic; }
+.not-italic { font-style: normal; }
+
+// ----------------------------------------
+// Text Alignment
+// ----------------------------------------
+.text-left { text-align: left; }
+.text-center { text-align: center; }
+.text-right { text-align: right; }
+.text-justify { text-align: justify; }
+.text-start { text-align: start; }
+.text-end { text-align: end; }
+
+// ----------------------------------------
+// Text Decoration
+// ----------------------------------------
+.underline { text-decoration-line: underline; }
+.overline { text-decoration-line: overline; }
+.line-through { text-decoration-line: line-through; }
+.no-underline { text-decoration-line: none; }
+
+.decoration-solid { text-decoration-style: solid; }
+.decoration-double { text-decoration-style: double; }
+.decoration-dotted { text-decoration-style: dotted; }
+.decoration-dashed { text-decoration-style: dashed; }
+.decoration-wavy { text-decoration-style: wavy; }
+
+// ----------------------------------------
+// Text Transform
+// ----------------------------------------
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.normal-case { text-transform: none; }
+
+// ----------------------------------------
+// Text Overflow
+// ----------------------------------------
+.truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.text-ellipsis { text-overflow: ellipsis; }
+.text-clip { text-overflow: clip; }
+
+// ----------------------------------------
+// Line Clamp
+// ----------------------------------------
+.line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.line-clamp-none {
+  display: block;
+  -webkit-line-clamp: unset;
+  -webkit-box-orient: unset;
+  overflow: visible;
+}
+
+// ----------------------------------------
+// Line Height
+// ----------------------------------------
+.leading-none { line-height: $line-height-none; }
+.leading-tight { line-height: $line-height-tight; }
+.leading-snug { line-height: $line-height-snug; }
+.leading-normal { line-height: $line-height-normal; }
+.leading-relaxed { line-height: $line-height-relaxed; }
+.leading-loose { line-height: $line-height-loose; }
+
+// ----------------------------------------
+// Letter Spacing
+// ----------------------------------------
+.tracking-tighter { letter-spacing: -0.05em; }
+.tracking-tight { letter-spacing: -0.025em; }
+.tracking-normal { letter-spacing: 0; }
+.tracking-wide { letter-spacing: 0.025em; }
+.tracking-wider { letter-spacing: 0.05em; }
+.tracking-widest { letter-spacing: 0.1em; }
+
+// ----------------------------------------
+// Whitespace
+// ----------------------------------------
+.whitespace-normal { white-space: normal; }
+.whitespace-nowrap { white-space: nowrap; }
+.whitespace-pre { white-space: pre; }
+.whitespace-pre-line { white-space: pre-line; }
+.whitespace-pre-wrap { white-space: pre-wrap; }
+.whitespace-break-spaces { white-space: break-spaces; }
+
+// ----------------------------------------
+// Word Break
+// ----------------------------------------
+.break-normal {
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.break-words {
+  overflow-wrap: break-word;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+.break-keep {
+  word-break: keep-all;
+}
+
+// ----------------------------------------
+// Vertical Alignment
+// ----------------------------------------
+.align-baseline { vertical-align: baseline; }
+.align-top { vertical-align: top; }
+.align-middle { vertical-align: middle; }
+.align-bottom { vertical-align: bottom; }
+.align-text-top { vertical-align: text-top; }
+.align-text-bottom { vertical-align: text-bottom; }
+.align-sub { vertical-align: sub; }
+.align-super { vertical-align: super; }
+
+// ----------------------------------------
+// List Style
+// ----------------------------------------
+.list-none { list-style-type: none; }
+.list-disc { list-style-type: disc; }
+.list-decimal { list-style-type: decimal; }
+.list-inside { list-style-position: inside; }
+.list-outside { list-style-position: outside; }
+
+// ----------------------------------------
+// Responsive Text
+// ----------------------------------------
+@include sm {
+  .sm\:text-xs { font-size: var(--text-xs); }
+  .sm\:text-sm { font-size: var(--text-sm); }
+  .sm\:text-base { font-size: var(--text-base); }
+  .sm\:text-lg { font-size: var(--text-lg); }
+  .sm\:text-xl { font-size: var(--text-xl); }
+  .sm\:text-2xl { font-size: var(--text-2xl); }
+  .sm\:text-left { text-align: left; }
+  .sm\:text-center { text-align: center; }
+  .sm\:text-right { text-align: right; }
+}
+
+@include md {
+  .md\:text-xs { font-size: var(--text-xs); }
+  .md\:text-sm { font-size: var(--text-sm); }
+  .md\:text-base { font-size: var(--text-base); }
+  .md\:text-lg { font-size: var(--text-lg); }
+  .md\:text-xl { font-size: var(--text-xl); }
+  .md\:text-2xl { font-size: var(--text-2xl); }
+  .md\:text-3xl { font-size: var(--text-3xl); }
+  .md\:text-4xl { font-size: var(--text-4xl); }
+  .md\:text-left { text-align: left; }
+  .md\:text-center { text-align: center; }
+  .md\:text-right { text-align: right; }
+}
+
+@include lg {
+  .lg\:text-xs { font-size: var(--text-xs); }
+  .lg\:text-sm { font-size: var(--text-sm); }
+  .lg\:text-base { font-size: var(--text-base); }
+  .lg\:text-lg { font-size: var(--text-lg); }
+  .lg\:text-xl { font-size: var(--text-xl); }
+  .lg\:text-2xl { font-size: var(--text-2xl); }
+  .lg\:text-3xl { font-size: var(--text-3xl); }
+  .lg\:text-4xl { font-size: var(--text-4xl); }
+  .lg\:text-5xl { font-size: var(--text-5xl); }
+  .lg\:text-left { text-align: left; }
+  .lg\:text-center { text-align: center; }
+  .lg\:text-right { text-align: right; }
+}

package/scss/utilities/_transforms.scss

@@ -0,0 +1,368 @@
+// ========================================
+// ZenKit - Transform Utilities
+// Rotate, scale, skew, translate, and transform utilities
+// ========================================
+
+@use '../abstracts/variables' as *;
+
+// ----------------------------------------
+// Transform Origin
+// ----------------------------------------
+.origin-center { transform-origin: center; }
+.origin-top { transform-origin: top; }
+.origin-top-right { transform-origin: top right; }
+.origin-right { transform-origin: right; }
+.origin-bottom-right { transform-origin: bottom right; }
+.origin-bottom { transform-origin: bottom; }
+.origin-bottom-left { transform-origin: bottom left; }
+.origin-left { transform-origin: left; }
+.origin-top-left { transform-origin: top left; }
+
+// ----------------------------------------
+// Rotate
+// ----------------------------------------
+.rotate-0 { transform: rotate(0deg); }
+.rotate-1 { transform: rotate(1deg); }
+.rotate-2 { transform: rotate(2deg); }
+.rotate-3 { transform: rotate(3deg); }
+.rotate-6 { transform: rotate(6deg); }
+.rotate-12 { transform: rotate(12deg); }
+.rotate-45 { transform: rotate(45deg); }
+.rotate-90 { transform: rotate(90deg); }
+.rotate-180 { transform: rotate(180deg); }
+
+// Negative rotations
+.-rotate-1 { transform: rotate(-1deg); }
+.-rotate-2 { transform: rotate(-2deg); }
+.-rotate-3 { transform: rotate(-3deg); }
+.-rotate-6 { transform: rotate(-6deg); }
+.-rotate-12 { transform: rotate(-12deg); }
+.-rotate-45 { transform: rotate(-45deg); }
+.-rotate-90 { transform: rotate(-90deg); }
+.-rotate-180 { transform: rotate(-180deg); }
+
+// ----------------------------------------
+// Scale
+// ----------------------------------------
+.scale-0 { transform: scale(0); }
+.scale-50 { transform: scale(0.5); }
+.scale-75 { transform: scale(0.75); }
+.scale-90 { transform: scale(0.9); }
+.scale-95 { transform: scale(0.95); }
+.scale-100 { transform: scale(1); }
+.scale-105 { transform: scale(1.05); }
+.scale-110 { transform: scale(1.1); }
+.scale-125 { transform: scale(1.25); }
+.scale-150 { transform: scale(1.5); }
+.scale-200 { transform: scale(2); }
+
+// Scale X
+.scale-x-0 { transform: scaleX(0); }
+.scale-x-50 { transform: scaleX(0.5); }
+.scale-x-75 { transform: scaleX(0.75); }
+.scale-x-90 { transform: scaleX(0.9); }
+.scale-x-95 { transform: scaleX(0.95); }
+.scale-x-100 { transform: scaleX(1); }
+.scale-x-105 { transform: scaleX(1.05); }
+.scale-x-110 { transform: scaleX(1.1); }
+.scale-x-125 { transform: scaleX(1.25); }
+.scale-x-150 { transform: scaleX(1.5); }
+
+// Scale Y
+.scale-y-0 { transform: scaleY(0); }
+.scale-y-50 { transform: scaleY(0.5); }
+.scale-y-75 { transform: scaleY(0.75); }
+.scale-y-90 { transform: scaleY(0.9); }
+.scale-y-95 { transform: scaleY(0.95); }
+.scale-y-100 { transform: scaleY(1); }
+.scale-y-105 { transform: scaleY(1.05); }
+.scale-y-110 { transform: scaleY(1.1); }
+.scale-y-125 { transform: scaleY(1.25); }
+.scale-y-150 { transform: scaleY(1.5); }
+
+// ----------------------------------------
+// Skew
+// ----------------------------------------
+// Skew X
+.skew-x-0 { transform: skewX(0deg); }
+.skew-x-1 { transform: skewX(1deg); }
+.skew-x-2 { transform: skewX(2deg); }
+.skew-x-3 { transform: skewX(3deg); }
+.skew-x-6 { transform: skewX(6deg); }
+.skew-x-12 { transform: skewX(12deg); }
+
+.-skew-x-1 { transform: skewX(-1deg); }
+.-skew-x-2 { transform: skewX(-2deg); }
+.-skew-x-3 { transform: skewX(-3deg); }
+.-skew-x-6 { transform: skewX(-6deg); }
+.-skew-x-12 { transform: skewX(-12deg); }
+
+// Skew Y
+.skew-y-0 { transform: skewY(0deg); }
+.skew-y-1 { transform: skewY(1deg); }
+.skew-y-2 { transform: skewY(2deg); }
+.skew-y-3 { transform: skewY(3deg); }
+.skew-y-6 { transform: skewY(6deg); }
+.skew-y-12 { transform: skewY(12deg); }
+
+.-skew-y-1 { transform: skewY(-1deg); }
+.-skew-y-2 { transform: skewY(-2deg); }
+.-skew-y-3 { transform: skewY(-3deg); }
+.-skew-y-6 { transform: skewY(-6deg); }
+.-skew-y-12 { transform: skewY(-12deg); }
+
+// ----------------------------------------
+// Translate
+// ----------------------------------------
+// Translate X
+.translate-x-0 { transform: translateX(0); }
+.translate-x-px { transform: translateX(1px); }
+.translate-x-0\.5 { transform: translateX(0.125rem); }
+.translate-x-1 { transform: translateX(0.25rem); }
+.translate-x-2 { transform: translateX(0.5rem); }
+.translate-x-3 { transform: translateX(0.75rem); }
+.translate-x-4 { transform: translateX(1rem); }
+.translate-x-5 { transform: translateX(1.25rem); }
+.translate-x-6 { transform: translateX(1.5rem); }
+.translate-x-8 { transform: translateX(2rem); }
+.translate-x-10 { transform: translateX(2.5rem); }
+.translate-x-12 { transform: translateX(3rem); }
+.translate-x-16 { transform: translateX(4rem); }
+.translate-x-20 { transform: translateX(5rem); }
+.translate-x-24 { transform: translateX(6rem); }
+.translate-x-32 { transform: translateX(8rem); }
+.translate-x-full { transform: translateX(100%); }
+.translate-x-1\/2 { transform: translateX(50%); }
+.translate-x-1\/3 { transform: translateX(33.333333%); }
+.translate-x-2\/3 { transform: translateX(66.666667%); }
+.translate-x-1\/4 { transform: translateX(25%); }
+.translate-x-3\/4 { transform: translateX(75%); }
+
+// Negative Translate X
+.-translate-x-px { transform: translateX(-1px); }
+.-translate-x-0\.5 { transform: translateX(-0.125rem); }
+.-translate-x-1 { transform: translateX(-0.25rem); }
+.-translate-x-2 { transform: translateX(-0.5rem); }
+.-translate-x-3 { transform: translateX(-0.75rem); }
+.-translate-x-4 { transform: translateX(-1rem); }
+.-translate-x-5 { transform: translateX(-1.25rem); }
+.-translate-x-6 { transform: translateX(-1.5rem); }
+.-translate-x-8 { transform: translateX(-2rem); }
+.-translate-x-10 { transform: translateX(-2.5rem); }
+.-translate-x-12 { transform: translateX(-3rem); }
+.-translate-x-16 { transform: translateX(-4rem); }
+.-translate-x-20 { transform: translateX(-5rem); }
+.-translate-x-24 { transform: translateX(-6rem); }
+.-translate-x-32 { transform: translateX(-8rem); }
+.-translate-x-full { transform: translateX(-100%); }
+.-translate-x-1\/2 { transform: translateX(-50%); }
+.-translate-x-1\/3 { transform: translateX(-33.333333%); }
+.-translate-x-2\/3 { transform: translateX(-66.666667%); }
+.-translate-x-1\/4 { transform: translateX(-25%); }
+.-translate-x-3\/4 { transform: translateX(-75%); }
+
+// Translate Y
+.translate-y-0 { transform: translateY(0); }
+.translate-y-px { transform: translateY(1px); }
+.translate-y-0\.5 { transform: translateY(0.125rem); }
+.translate-y-1 { transform: translateY(0.25rem); }
+.translate-y-2 { transform: translateY(0.5rem); }
+.translate-y-3 { transform: translateY(0.75rem); }
+.translate-y-4 { transform: translateY(1rem); }
+.translate-y-5 { transform: translateY(1.25rem); }
+.translate-y-6 { transform: translateY(1.5rem); }
+.translate-y-8 { transform: translateY(2rem); }
+.translate-y-10 { transform: translateY(2.5rem); }
+.translate-y-12 { transform: translateY(3rem); }
+.translate-y-16 { transform: translateY(4rem); }
+.translate-y-20 { transform: translateY(5rem); }
+.translate-y-24 { transform: translateY(6rem); }
+.translate-y-32 { transform: translateY(8rem); }
+.translate-y-full { transform: translateY(100%); }
+.translate-y-1\/2 { transform: translateY(50%); }
+.translate-y-1\/3 { transform: translateY(33.333333%); }
+.translate-y-2\/3 { transform: translateY(66.666667%); }
+.translate-y-1\/4 { transform: translateY(25%); }
+.translate-y-3\/4 { transform: translateY(75%); }
+
+// Negative Translate Y
+.-translate-y-px { transform: translateY(-1px); }
+.-translate-y-0\.5 { transform: translateY(-0.125rem); }
+.-translate-y-1 { transform: translateY(-0.25rem); }
+.-translate-y-2 { transform: translateY(-0.5rem); }
+.-translate-y-3 { transform: translateY(-0.75rem); }
+.-translate-y-4 { transform: translateY(-1rem); }
+.-translate-y-5 { transform: translateY(-1.25rem); }
+.-translate-y-6 { transform: translateY(-1.5rem); }
+.-translate-y-8 { transform: translateY(-2rem); }
+.-translate-y-10 { transform: translateY(-2.5rem); }
+.-translate-y-12 { transform: translateY(-3rem); }
+.-translate-y-16 { transform: translateY(-4rem); }
+.-translate-y-20 { transform: translateY(-5rem); }
+.-translate-y-24 { transform: translateY(-6rem); }
+.-translate-y-32 { transform: translateY(-8rem); }
+.-translate-y-full { transform: translateY(-100%); }
+.-translate-y-1\/2 { transform: translateY(-50%); }
+.-translate-y-1\/3 { transform: translateY(-33.333333%); }
+.-translate-y-2\/3 { transform: translateY(-66.666667%); }
+.-translate-y-1\/4 { transform: translateY(-25%); }
+.-translate-y-3\/4 { transform: translateY(-75%); }
+
+// ----------------------------------------
+// 3D Transforms
+// ----------------------------------------
+// Perspective
+.perspective-none { perspective: none; }
+.perspective-sm { perspective: 250px; }
+.perspective { perspective: 500px; }
+.perspective-md { perspective: 750px; }
+.perspective-lg { perspective: 1000px; }
+.perspective-xl { perspective: 1500px; }
+
+// Perspective Origin
+.perspective-origin-center { perspective-origin: center; }
+.perspective-origin-top { perspective-origin: top; }
+.perspective-origin-top-right { perspective-origin: top right; }
+.perspective-origin-right { perspective-origin: right; }
+.perspective-origin-bottom-right { perspective-origin: bottom right; }
+.perspective-origin-bottom { perspective-origin: bottom; }
+.perspective-origin-bottom-left { perspective-origin: bottom left; }
+.perspective-origin-left { perspective-origin: left; }
+.perspective-origin-top-left { perspective-origin: top left; }
+
+// Rotate 3D
+.rotate-x-0 { transform: rotateX(0deg); }
+.rotate-x-45 { transform: rotateX(45deg); }
+.rotate-x-90 { transform: rotateX(90deg); }
+.rotate-x-180 { transform: rotateX(180deg); }
+.-rotate-x-45 { transform: rotateX(-45deg); }
+.-rotate-x-90 { transform: rotateX(-90deg); }
+.-rotate-x-180 { transform: rotateX(-180deg); }
+
+.rotate-y-0 { transform: rotateY(0deg); }
+.rotate-y-45 { transform: rotateY(45deg); }
+.rotate-y-90 { transform: rotateY(90deg); }
+.rotate-y-180 { transform: rotateY(180deg); }
+.-rotate-y-45 { transform: rotateY(-45deg); }
+.-rotate-y-90 { transform: rotateY(-90deg); }
+.-rotate-y-180 { transform: rotateY(-180deg); }
+
+// Translate Z
+.translate-z-0 { transform: translateZ(0); }
+.translate-z-1 { transform: translateZ(0.25rem); }
+.translate-z-2 { transform: translateZ(0.5rem); }
+.translate-z-4 { transform: translateZ(1rem); }
+.translate-z-8 { transform: translateZ(2rem); }
+.translate-z-16 { transform: translateZ(4rem); }
+
+.-translate-z-1 { transform: translateZ(-0.25rem); }
+.-translate-z-2 { transform: translateZ(-0.5rem); }
+.-translate-z-4 { transform: translateZ(-1rem); }
+.-translate-z-8 { transform: translateZ(-2rem); }
+.-translate-z-16 { transform: translateZ(-4rem); }
+
+// Transform Style
+.transform-flat { transform-style: flat; }
+.transform-3d { transform-style: preserve-3d; }
+
+// Backface Visibility
+.backface-visible { backface-visibility: visible; }
+.backface-hidden { backface-visibility: hidden; }
+
+// ----------------------------------------
+// Transform Utilities
+// ----------------------------------------
+.transform-none { transform: none; }
+.transform-gpu { transform: translateZ(0); } // GPU acceleration
+
+// ----------------------------------------
+// Flip Utilities
+// ----------------------------------------
+.flip-x { transform: scaleX(-1); }
+.flip-y { transform: scaleY(-1); }
+.flip-both { transform: scale(-1, -1); }
+
+// ----------------------------------------
+// Hover Transform Utilities
+// ----------------------------------------
+.hover\:scale-105:hover { transform: scale(1.05); }
+.hover\:scale-110:hover { transform: scale(1.1); }
+.hover\:scale-125:hover { transform: scale(1.25); }
+.hover\:-translate-y-1:hover { transform: translateY(-0.25rem); }
+.hover\:-translate-y-2:hover { transform: translateY(-0.5rem); }
+.hover\:rotate-3:hover { transform: rotate(3deg); }
+.hover\:rotate-6:hover { transform: rotate(6deg); }
+.hover\:-rotate-3:hover { transform: rotate(-3deg); }
+.hover\:-rotate-6:hover { transform: rotate(-6deg); }
+
+// ----------------------------------------
+// Group Hover Transform
+// ----------------------------------------
+.group:hover .group-hover\:scale-105 { transform: scale(1.05); }
+.group:hover .group-hover\:scale-110 { transform: scale(1.1); }
+.group:hover .group-hover\:-translate-y-1 { transform: translateY(-0.25rem); }
+.group:hover .group-hover\:-translate-y-2 { transform: translateY(-0.5rem); }
+
+// ----------------------------------------
+// Active Transform
+// ----------------------------------------
+.active\:scale-95:active { transform: scale(0.95); }
+.active\:scale-100:active { transform: scale(1); }
+
+// ----------------------------------------
+// Focus Transform
+// ----------------------------------------
+.focus\:scale-105:focus { transform: scale(1.05); }
+.focus\:scale-110:focus { transform: scale(1.1); }
+
+// ----------------------------------------
+// Responsive Transforms
+// ----------------------------------------
+@media (min-width: 576px) {
+  .sm\:rotate-0 { transform: rotate(0deg); }
+  .sm\:rotate-90 { transform: rotate(90deg); }
+  .sm\:rotate-180 { transform: rotate(180deg); }
+  .sm\:scale-100 { transform: scale(1); }
+  .sm\:scale-105 { transform: scale(1.05); }
+  .sm\:translate-x-0 { transform: translateX(0); }
+  .sm\:translate-y-0 { transform: translateY(0); }
+}
+
+@media (min-width: 768px) {
+  .md\:rotate-0 { transform: rotate(0deg); }
+  .md\:rotate-90 { transform: rotate(90deg); }
+  .md\:rotate-180 { transform: rotate(180deg); }
+  .md\:scale-100 { transform: scale(1); }
+  .md\:scale-105 { transform: scale(1.05); }
+  .md\:translate-x-0 { transform: translateX(0); }
+  .md\:translate-y-0 { transform: translateY(0); }
+}
+
+@media (min-width: 992px) {
+  .lg\:rotate-0 { transform: rotate(0deg); }
+  .lg\:rotate-90 { transform: rotate(90deg); }
+  .lg\:rotate-180 { transform: rotate(180deg); }
+  .lg\:scale-100 { transform: scale(1); }
+  .lg\:scale-105 { transform: scale(1.05); }
+  .lg\:translate-x-0 { transform: translateX(0); }
+  .lg\:translate-y-0 { transform: translateY(0); }
+}
+
+@media (min-width: 1200px) {
+  .xl\:rotate-0 { transform: rotate(0deg); }
+  .xl\:rotate-90 { transform: rotate(90deg); }
+  .xl\:rotate-180 { transform: rotate(180deg); }
+  .xl\:scale-100 { transform: scale(1); }
+  .xl\:scale-105 { transform: scale(1.05); }
+  .xl\:translate-x-0 { transform: translateX(0); }
+  .xl\:translate-y-0 { transform: translateY(0); }
+}
+
+// ----------------------------------------
+// Motion Reduce
+// ----------------------------------------
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:transform-none {
+    transform: none !important;
+  }
+}