santycss 2.0.1 → 2.2.0

package/dist/santy.css

@@ -1,5 +1,5 @@
 /* ============================================================
-   SantyCSS v2.0.0  —  Plain-English Utility CSS Framework
+   SantyCSS v2.2.0  —  Plain-English Utility CSS Framework
    https://github.com/santybad/santy_css
    ============================================================ */
 
@@ -5281,6 +5281,8 @@
   .on-desktop\:set-height-64 { height:64px; }
 }
 
+/* ═══ VARIANTS_BLOCK_START ═══ */
+
 @media (min-width: 1280px) {
   .on-wide\:make-block { display:block; }
   .on-wide\:make-inline { display:inline; }
@@ -5430,6 +5432,9 @@
   .on-wide\:set-width-64 { width:64px; }
   .on-wide\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 @media (min-width: 1536px) {
   .on-ultra\:make-block { display:block; }
@@ -5580,6 +5585,9 @@
   .on-ultra\:set-width-64 { width:64px; }
   .on-ultra\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 @media (min-width: 640px) {
   .sm\:make-block { display:block; }
@@ -5730,6 +5738,7 @@
   .sm\:set-width-64 { width:64px; }
   .sm\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
 
 @media (min-width: 768px) {
   .md\:make-block { display:block; }
@@ -5881,6 +5890,8 @@
   .md\:set-height-64 { height:64px; }
 }
 
+/* ═══ VARIANTS_BLOCK_START ═══ */
+
 @media (min-width: 1024px) {
   .lg\:make-block { display:block; }
   .lg\:make-inline { display:inline; }
@@ -6030,6 +6041,9 @@
   .lg\:set-width-64 { width:64px; }
   .lg\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 @media (min-width: 1280px) {
   .xl\:make-block { display:block; }
@@ -6180,6 +6194,9 @@
   .xl\:set-width-64 { width:64px; }
   .xl\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 @media (min-width: 1536px) {
   .xxl\:make-block { display:block; }
@@ -6330,6 +6347,7 @@
   .xxl\:set-width-64 { width:64px; }
   .xxl\:set-height-64 { height:64px; }
 }
+/* ═══ VARIANTS_BLOCK_END ═══ */
 
 /* ═══════════════════════════════════════════════════════════════
    DARK MODE VARIANTS
@@ -7489,6 +7507,8 @@
 .on-focus\:add-border-2:focus { border:2px solid; }
 .on-focus\:add-border-4:focus { border:4px solid; }
 
+/* ═══ VARIANTS_BLOCK_START ═══ */
+
 /* on-active */
 .on-active\:background-red-300:active { background-color:#fca5a5; }
 .on-active\:color-red-300:active { color:#fca5a5; }
@@ -7789,6 +7809,9 @@
 .on-active\:add-border-1:active { border:1px solid; }
 .on-active\:add-border-2:active { border:2px solid; }
 .on-active\:add-border-4:active { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-disabled */
 .on-disabled\:background-red-300:disabled { background-color:#fca5a5; }
@@ -8090,6 +8113,9 @@
 .on-disabled\:add-border-1:disabled { border:1px solid; }
 .on-disabled\:add-border-2:disabled { border:2px solid; }
 .on-disabled\:add-border-4:disabled { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-checked */
 .on-checked\:background-red-300:checked { background-color:#fca5a5; }
@@ -8391,6 +8417,9 @@
 .on-checked\:add-border-1:checked { border:1px solid; }
 .on-checked\:add-border-2:checked { border:2px solid; }
 .on-checked\:add-border-4:checked { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-first */
 .on-first\:background-red-300:first-child { background-color:#fca5a5; }
@@ -8692,6 +8721,9 @@
 .on-first\:add-border-1:first-child { border:1px solid; }
 .on-first\:add-border-2:first-child { border:2px solid; }
 .on-first\:add-border-4:first-child { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-last */
 .on-last\:background-red-300:last-child { background-color:#fca5a5; }
@@ -8993,6 +9025,9 @@
 .on-last\:add-border-1:last-child { border:1px solid; }
 .on-last\:add-border-2:last-child { border:2px solid; }
 .on-last\:add-border-4:last-child { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-odd */
 .on-odd\:background-red-300:nth-child(odd) { background-color:#fca5a5; }
@@ -9294,6 +9329,9 @@
 .on-odd\:add-border-1:nth-child(odd) { border:1px solid; }
 .on-odd\:add-border-2:nth-child(odd) { border:2px solid; }
 .on-odd\:add-border-4:nth-child(odd) { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-even */
 .on-even\:background-red-300:nth-child(even) { background-color:#fca5a5; }
@@ -9595,6 +9633,9 @@
 .on-even\:add-border-1:nth-child(even) { border:1px solid; }
 .on-even\:add-border-2:nth-child(even) { border:2px solid; }
 .on-even\:add-border-4:nth-child(even) { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-placeholder */
 .on-placeholder\:background-red-300::placeholder { background-color:#fca5a5; }
@@ -9896,6 +9937,9 @@
 .on-placeholder\:add-border-1::placeholder { border:1px solid; }
 .on-placeholder\:add-border-2::placeholder { border:2px solid; }
 .on-placeholder\:add-border-4::placeholder { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-focus-within */
 .on-focus-within\:background-red-300:focus-within { background-color:#fca5a5; }
@@ -10197,6 +10241,9 @@
 .on-focus-within\:add-border-1:focus-within { border:1px solid; }
 .on-focus-within\:add-border-2:focus-within { border:2px solid; }
 .on-focus-within\:add-border-4:focus-within { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* on-focus-visible */
 .on-focus-visible\:background-red-300:focus-visible { background-color:#fca5a5; }
@@ -10498,6 +10545,9 @@
 .on-focus-visible\:add-border-1:focus-visible { border:1px solid; }
 .on-focus-visible\:add-border-2:focus-visible { border:2px solid; }
 .on-focus-visible\:add-border-4:focus-visible { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* ── Group Hover ── */
 /* Add class="group" to parent, then use group-hover: on children */
@@ -10800,6 +10850,9 @@
 .group:hover .group-hover\:add-border-1 { border:1px solid; }
 .group:hover .group-hover\:add-border-2 { border:2px solid; }
 .group:hover .group-hover\:add-border-4 { border:4px solid; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* ── Print Utilities ── */
 @media print {
@@ -10808,6 +10861,7 @@
   .print\:no-shadow { box-shadow: none !important; }
 }
 
+/* ═══ VARIANTS_BLOCK_END ═══ */
 
 /* ── Backdrop Filter ── */
 .backdrop-blur-none { backdrop-filter: blur(0); -webkit-backdrop-filter: blur(0); }
@@ -10976,6 +11030,10 @@
   background-clip: text;
 }
 
+
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
+
 /* ── RTL / Logical Properties ── */
 .ps-0  { padding-inline-start: 0; }
 .ps-4  { padding-inline-start: 4px; }
@@ -11006,6 +11064,9 @@
 .start-auto { inset-inline-start: auto; }
 .end-auto   { inset-inline-end: auto; }
 
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* ── Peer Variants ── */
 /* Usage: add class="peer" to input, then class="peer-checked:make-block" to sibling */
@@ -11072,6 +11133,9 @@
   * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
 }
 
+/* ═══ VARIANTS_BLOCK_END ═══ */
+
+/* ═══ VARIANTS_BLOCK_START ═══ */
 
 /* ── Extra State Variants ── */
 
@@ -11334,6 +11398,7 @@
 .on-read-write\:ring-green:read-write { box-shadow:0 0 0 3px rgba(34,197,94,.4); }
 .on-read-write\:make-block:read-write { display:block; }
 .on-read-write\:make-hidden:read-write { display:none; }
+/* ═══ VARIANTS_BLOCK_END ═══ */
 
 /* ═══════════════════════════════════════════════════════════════════════
    SANTY ANIMATIONS — animate.css compatible · Plain-English naming
@@ -12166,6 +12231,184 @@
 </script> */
 
 
+/* ═════════════════════════════════════════════════════════════════════════
+   SCROLL ANIMATIONS
+   Family 1: when-visible:  — one-shot viewport-entry (+ santy-scroll.js)
+   Family 2: on-scroll:     — scroll-progress (animation-timeline: scroll())
+   Family 3: scroll-{prop}  — scroll-linked property utilities
+   Stagger:  stagger-children / stagger-{n}
+   ═════════════════════════════════════════════════════════════════════════ */
+
+/* ── Keyframes for when-visible: ── */
+@keyframes wv-fade-in { from{opacity:0} to{opacity:1} }
+@keyframes wv-slide-up { from{transform:translateY(24px);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes wv-slide-in-left { from{transform:translateX(-32px);opacity:0} to{transform:translateX(0);opacity:1} }
+@keyframes wv-slide-in-right { from{transform:translateX(32px);opacity:0} to{transform:translateX(0);opacity:1} }
+@keyframes wv-slide-in-bottom { from{transform:translateY(32px);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes wv-zoom-in { from{transform:scale(0.85);opacity:0} to{transform:scale(1);opacity:1} }
+@keyframes wv-zoom-in-up { from{transform:scale(0.8) translateY(20px);opacity:0} to{transform:scale(1) translateY(0);opacity:1} }
+@keyframes wv-zoom-bounce { from{transform:scale(0.7);opacity:0} to{transform:scale(1);opacity:1} }
+@keyframes wv-bounce-in-bottom {
+  0%  {transform:translateY(40px);opacity:0}
+  60% {transform:translateY(-8px);opacity:1}
+  80% {transform:translateY(4px)}
+  100%{transform:translateY(0)}
+}
+@keyframes wv-flip-in {
+  from{transform:perspective(600px) rotateX(-80deg);opacity:0}
+  to  {transform:perspective(600px) rotateX(0);opacity:1}
+}
+
+
+/* ── when-visible: — viewport-entry animations ── */
+/* Requires santy-scroll.js observer. Classes activate via .is-visible. */
+.when-visible\:animate-fade-in { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-fade-in.is-visible { animation-name:wv-fade-in; animation-duration:0.6s; animation-timing-function:ease-out; }
+.when-visible\:animate-slide-up { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-slide-up.is-visible { animation-name:wv-slide-up; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-slide-in-from-left { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-slide-in-from-left.is-visible { animation-name:wv-slide-in-left; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-slide-in-from-right { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-slide-in-from-right.is-visible { animation-name:wv-slide-in-right; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-slide-in-from-bottom { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-slide-in-from-bottom.is-visible { animation-name:wv-slide-in-bottom; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-zoom-in { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-zoom-in.is-visible { animation-name:wv-zoom-in; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-zoom-in-up { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-zoom-in-up.is-visible { animation-name:wv-zoom-in-up; animation-duration:0.5s; animation-timing-function:ease-out; }
+.when-visible\:animate-zoom-bounce { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-zoom-bounce.is-visible { animation-name:wv-zoom-bounce; animation-duration:0.5s; animation-timing-function:cubic-bezier(0.34,1.56,0.64,1); }
+.when-visible\:animate-bounce-in-from-bottom { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-bounce-in-from-bottom.is-visible { animation-name:wv-bounce-in-bottom; animation-duration:0.7s; animation-timing-function:ease-out; }
+.when-visible\:animate-flip-in { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-flip-in.is-visible { animation-name:wv-flip-in; animation-duration:0.6s; animation-timing-function:ease-out; }
+.when-visible\:animate-bounce { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-bounce.is-visible { animation-name:santy-bounce; animation-duration:1s; animation-timing-function:ease; }
+.when-visible\:animate-pulse { animation:none; animation-fill-mode:both; }
+.when-visible\:animate-pulse.is-visible { animation-name:santy-pulse; animation-duration:2s; animation-timing-function:cubic-bezier(0.4,0,0.6,1); }
+
+/* ── enter-at-{n} — how much of element must be visible before triggering ── */
+.enter-at-15 { --santy-enter-threshold:0.15; }
+.enter-at-25 { --santy-enter-threshold:0.25; }
+.enter-at-50 { --santy-enter-threshold:0.5; }
+.enter-at-75 { --santy-enter-threshold:0.75; }
+.enter-repeat { --santy-enter-repeat:1; }
+
+/* ── on-scroll: — animations linked to scroll position ── */
+@keyframes os-width-full        { from{width:0%}       to{width:100%} }
+@keyframes os-rotate-180        { from{transform:rotate(0)}       to{transform:rotate(180deg)} }
+@keyframes os-rotate-360        { from{transform:rotate(0)}       to{transform:rotate(360deg)} }
+@keyframes os-fade-in           { from{opacity:0}      to{opacity:1} }
+@keyframes os-fade-out          { from{opacity:1}      to{opacity:0} }
+@keyframes os-scale-up          { from{transform:scale(0.8)}      to{transform:scale(1)} }
+@keyframes os-slide-down        { from{transform:translateY(-20px);opacity:0} to{transform:translateY(0);opacity:1} }
+@keyframes os-translate-y-half  { from{transform:translateY(0)}   to{transform:translateY(-50%)} }
+
+.on-scroll\:animate-width-full { animation:os-width-full linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:rotate-180 { animation:os-rotate-180 linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:rotate-360 { animation:os-rotate-360 linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:fade-in { animation:os-fade-in linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:fade-out { animation:os-fade-out linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:scale-up { animation:os-scale-up linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:slide-down { animation:os-slide-down linear; animation-timeline:scroll(); animation-fill-mode:both; }
+.on-scroll\:translate-y-half { animation:os-translate-y-half linear; animation-timeline:scroll(); animation-fill-mode:both; }
+
+/* ── scroll-{prop} — scroll-linked CSS property utilities ── */
+@keyframes scroll-grow-width    { from{width:0}            to{width:100%} }
+@keyframes scroll-opacity-out   { from{opacity:1}          to{opacity:0} }
+@keyframes scroll-scale-down    { from{transform:scale(1)} to{transform:scale(0.8)} }
+@keyframes scroll-parallax-slow { from{transform:translateY(0)} to{transform:translateY(-30%)} }
+@keyframes scroll-parallax-fast { from{transform:translateY(0)} to{transform:translateY(-60%)} }
+
+.scroll-width         { animation:scroll-grow-width    linear both; animation-timeline:scroll(root); }
+.scroll-opacity-out   { animation:scroll-opacity-out   linear both; animation-timeline:scroll(root); }
+.scroll-scale-down    { animation:scroll-scale-down    linear both; animation-timeline:scroll(root); }
+.scroll-parallax-slow { animation:scroll-parallax-slow linear both; animation-timeline:scroll(nearest); }
+.scroll-parallax-fast { animation:scroll-parallax-fast linear both; animation-timeline:scroll(nearest); }
+
+
+/* ── stagger-children — auto-delay nth-child for list animations ── */
+.stagger-children > *:nth-child(1) { animation-delay:0ms; }
+.stagger-children > *:nth-child(2) { animation-delay:100ms; }
+.stagger-children > *:nth-child(3) { animation-delay:200ms; }
+.stagger-children > *:nth-child(4) { animation-delay:300ms; }
+.stagger-children > *:nth-child(5) { animation-delay:400ms; }
+.stagger-children > *:nth-child(6) { animation-delay:500ms; }
+.stagger-children > *:nth-child(7) { animation-delay:600ms; }
+.stagger-children > *:nth-child(8) { animation-delay:700ms; }
+.stagger-children > *:nth-child(9) { animation-delay:800ms; }
+.stagger-children > *:nth-child(10) { animation-delay:900ms; }
+.stagger-children > *:nth-child(11) { animation-delay:1000ms; }
+.stagger-children > *:nth-child(12) { animation-delay:1100ms; }
+
+/* stagger-50 */
+.stagger-50 > *:nth-child(1) { animation-delay:0ms; }
+.stagger-50 > *:nth-child(2) { animation-delay:50ms; }
+.stagger-50 > *:nth-child(3) { animation-delay:100ms; }
+.stagger-50 > *:nth-child(4) { animation-delay:150ms; }
+.stagger-50 > *:nth-child(5) { animation-delay:200ms; }
+.stagger-50 > *:nth-child(6) { animation-delay:250ms; }
+.stagger-50 > *:nth-child(7) { animation-delay:300ms; }
+.stagger-50 > *:nth-child(8) { animation-delay:350ms; }
+.stagger-50 > *:nth-child(9) { animation-delay:400ms; }
+.stagger-50 > *:nth-child(10) { animation-delay:450ms; }
+.stagger-50 > *:nth-child(11) { animation-delay:500ms; }
+.stagger-50 > *:nth-child(12) { animation-delay:550ms; }
+
+/* stagger-150 */
+.stagger-150 > *:nth-child(1) { animation-delay:0ms; }
+.stagger-150 > *:nth-child(2) { animation-delay:150ms; }
+.stagger-150 > *:nth-child(3) { animation-delay:300ms; }
+.stagger-150 > *:nth-child(4) { animation-delay:450ms; }
+.stagger-150 > *:nth-child(5) { animation-delay:600ms; }
+.stagger-150 > *:nth-child(6) { animation-delay:750ms; }
+.stagger-150 > *:nth-child(7) { animation-delay:900ms; }
+.stagger-150 > *:nth-child(8) { animation-delay:1050ms; }
+.stagger-150 > *:nth-child(9) { animation-delay:1200ms; }
+.stagger-150 > *:nth-child(10) { animation-delay:1350ms; }
+.stagger-150 > *:nth-child(11) { animation-delay:1500ms; }
+.stagger-150 > *:nth-child(12) { animation-delay:1650ms; }
+
+/* stagger-200 */
+.stagger-200 > *:nth-child(1) { animation-delay:0ms; }
+.stagger-200 > *:nth-child(2) { animation-delay:200ms; }
+.stagger-200 > *:nth-child(3) { animation-delay:400ms; }
+.stagger-200 > *:nth-child(4) { animation-delay:600ms; }
+.stagger-200 > *:nth-child(5) { animation-delay:800ms; }
+.stagger-200 > *:nth-child(6) { animation-delay:1000ms; }
+.stagger-200 > *:nth-child(7) { animation-delay:1200ms; }
+.stagger-200 > *:nth-child(8) { animation-delay:1400ms; }
+.stagger-200 > *:nth-child(9) { animation-delay:1600ms; }
+.stagger-200 > *:nth-child(10) { animation-delay:1800ms; }
+.stagger-200 > *:nth-child(11) { animation-delay:2000ms; }
+.stagger-200 > *:nth-child(12) { animation-delay:2200ms; }
+
+/* stagger-300 */
+.stagger-300 > *:nth-child(1) { animation-delay:0ms; }
+.stagger-300 > *:nth-child(2) { animation-delay:300ms; }
+.stagger-300 > *:nth-child(3) { animation-delay:600ms; }
+.stagger-300 > *:nth-child(4) { animation-delay:900ms; }
+.stagger-300 > *:nth-child(5) { animation-delay:1200ms; }
+.stagger-300 > *:nth-child(6) { animation-delay:1500ms; }
+.stagger-300 > *:nth-child(7) { animation-delay:1800ms; }
+.stagger-300 > *:nth-child(8) { animation-delay:2100ms; }
+.stagger-300 > *:nth-child(9) { animation-delay:2400ms; }
+.stagger-300 > *:nth-child(10) { animation-delay:2700ms; }
+.stagger-300 > *:nth-child(11) { animation-delay:3000ms; }
+.stagger-300 > *:nth-child(12) { animation-delay:3300ms; }
+
+/* ── Scroll animations — prefers-reduced-motion ── */
+@media (prefers-reduced-motion: reduce) {
+  [class*="when-visible:"],
+  [class*="on-scroll:"],
+  .scroll-width, .scroll-opacity-out, .scroll-scale-down,
+  .scroll-parallax-slow, .scroll-parallax-fast {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+
 /* ═══ SANTY COMPONENTS ═══ */
 
 /* ═══════════════════════════════════════════════════════════════