santycss 1.0.0 → 1.2.0

package/dist/santy.css

@@ -11377,16 +11377,43 @@
 .animation-fill-both      { animation-fill-mode: both; }
 
 /* ── Timing-function helpers ── */
-.animation-ease        { animation-timing-function: ease; }
-.animation-ease-in     { animation-timing-function: ease-in; }
-.animation-ease-out    { animation-timing-function: ease-out; }
-.animation-ease-in-out { animation-timing-function: ease-in-out; }
-.animation-linear      { animation-timing-function: linear; }
+.animation-ease           { animation-timing-function: ease; }
+.animation-ease-in        { animation-timing-function: ease-in; }
+.animation-ease-out       { animation-timing-function: ease-out; }
+.animation-ease-in-out    { animation-timing-function: ease-in-out; }
+.animation-linear         { animation-timing-function: linear; }
+.animation-ease-bounce    { animation-timing-function: cubic-bezier(0.34,1.56,0.64,1); }
+.animation-ease-elastic   { animation-timing-function: cubic-bezier(0.68,-0.55,0.265,1.55); }
+.animation-ease-spring    { animation-timing-function: cubic-bezier(0.175,0.885,0.32,1.275); }
+
+/* ── Direction helpers ── */
+.animation-direction-normal            { animation-direction: normal; }
+.animation-direction-reverse           { animation-direction: reverse; }
+.animation-direction-alternate         { animation-direction: alternate; }
+.animation-direction-alternate-reverse { animation-direction: alternate-reverse; }
+
+/* ── Extra delay helpers ── */
+.animation-delay-750  { animation-delay: 0.75s; }
+.animation-delay-1250 { animation-delay: 1.25s; }
+.animation-delay-1500 { animation-delay: 1.5s; }
+.animation-delay-2500 { animation-delay: 2.5s; }
+.animation-delay-3000 { animation-delay: 3s; }
+.animation-delay-4000 { animation-delay: 4s; }
+.animation-delay-5000 { animation-delay: 5s; }
+
+/* ── Extra speed helpers ── */
+.animation-speed-ultra-fast { animation-duration: 0.15s !important; }
+
+/* ── Extra iteration helpers ── */
+.animation-iteration-2 { animation-iteration-count: 2; }
+.animation-iteration-4 { animation-iteration-count: 4; }
+.animation-iteration-5 { animation-iteration-count: 5; }
 
 /* ── Pause / play ── */
-.animation-paused { animation-play-state: paused; }
-.animation-running{ animation-play-state: running; }
-.animation-none   { animation: none; }
+.animation-paused                 { animation-play-state: paused; }
+.animation-running                { animation-play-state: running; }
+.animation-none                   { animation: none; }
+.animation-pause-on-hover:hover   { animation-play-state: paused; }
 
 /* ════════════════════════════════════════════════════
    ATTENTION SEEKERS
@@ -11855,6 +11882,289 @@
 @keyframes santy-roll-in  { from { opacity: 0; transform: translate3d(-100%,0,0) rotate3d(0,0,1,-120deg); } to { opacity: 1; transform: translate3d(0,0,0); } }
 @keyframes santy-roll-out { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%,0,0) rotate3d(0,0,1,120deg); } }
 
+/* ═══════════════════════════════════════════════════════════════════════
+   SCROLL-TRIGGERED ANIMATIONS
+   Uses Intersection Observer via tiny JS snippet OR animation-timeline.
+   Add class + JS observer, or use with animate-on-scroll-* pattern.
+   Pure CSS fallback: elements start invisible, JS adds .is-visible.
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* Base: elements are hidden until .is-visible is toggled by JS */
+.animate-on-scroll-fade-in    { opacity: 0; transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-slide-up   { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-slide-down { opacity: 0; transform: translateY(-40px); transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-zoom-in    { opacity: 0; transform: scale(0.85); transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-from-left  { opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-from-right { opacity: 0; transform: translateX(60px);  transition: opacity 0.6s ease, transform 0.6s ease; }
+.animate-on-scroll-flip-up    { opacity: 0; transform: rotateX(30deg); transition: opacity 0.6s ease, transform 0.6s ease; }
+
+/* Triggered state — add .is-visible via IntersectionObserver */
+.animate-on-scroll-fade-in.is-visible,
+.animate-on-scroll-slide-up.is-visible,
+.animate-on-scroll-slide-down.is-visible,
+.animate-on-scroll-zoom-in.is-visible,
+.animate-on-scroll-from-left.is-visible,
+.animate-on-scroll-from-right.is-visible,
+.animate-on-scroll-flip-up.is-visible { opacity: 1; transform: none; }
+
+/* scroll-reveal-once / scroll-reveal-repeat — same trigger, different JS behaviour */
+.scroll-reveal-once,
+.scroll-reveal-repeat { opacity: 0; transform: translateY(30px); transition: opacity 0.55s ease, transform 0.55s ease; }
+.scroll-reveal-once.is-visible,
+.scroll-reveal-repeat.is-visible      { opacity: 1; transform: none; }
+
+/* Delay modifiers for scroll reveals */
+.scroll-reveal-delay-100  { transition-delay: 0.1s; }
+.scroll-reveal-delay-200  { transition-delay: 0.2s; }
+.scroll-reveal-delay-300  { transition-delay: 0.3s; }
+.scroll-reveal-delay-400  { transition-delay: 0.4s; }
+.scroll-reveal-delay-500  { transition-delay: 0.5s; }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   HOVER-TRIGGERED ANIMATIONS
+   These override animation only on :hover so they fire on mouse-over.
+   ═══════════════════════════════════════════════════════════════════════ */
+.on-hover:animate-bounce:hover        { animation: santy-bounce      0.8s ease both; }
+.on-hover:animate-pulse:hover         { animation: santy-pulse        1s   ease both; }
+.on-hover:animate-shake-x:hover       { animation: santy-shake-x      0.6s ease both; }
+.on-hover:animate-rubber-band:hover   { animation: santy-rubber-band  0.8s ease both; }
+.on-hover:animate-tada:hover          { animation: santy-tada         0.8s ease both; }
+.on-hover:animate-wobble:hover        { animation: santy-wobble       0.8s ease both; }
+.on-hover:animate-swing:hover         { animation: santy-swing        0.8s ease both; transform-origin: top center; }
+.on-hover:animate-heartbeat:hover     { animation: santy-heartbeat    1s   ease-in-out both; }
+.on-hover:animate-spin-once:hover     { animation: santy-spin         0.5s linear both; }
+.on-hover:animate-flip-once:hover     { animation: santy-flip-in-y    0.6s ease both; }
+.on-hover:animate-jello:hover         { animation: santy-jelly        0.9s ease both; }
+.on-hover:animate-zoom-in:hover       { animation: santy-zoom-in      0.3s ease both; }
+.on-hover:animate-fade-in:hover       { animation: santy-fade-in      0.4s ease both; }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   TEXT ANIMATIONS
+   ═══════════════════════════════════════════════════════════════════════ */
+
+/* Typewriter — pure CSS using steps() */
+.animate-typewriter {
+  overflow: hidden;
+  white-space: nowrap;
+  border-right: 2px solid currentColor;
+  width: 0;
+  animation: santy-typewriter 2.5s steps(30,end) forwards, santy-blink-caret 0.75s step-end infinite;
+}
+/* Blur-in entrance */
+.animate-text-blur-in   { animation: santy-text-blur-in  0.8s ease both; }
+/* Slide up per-word (apply to the text container) */
+.animate-text-slide-up  { animation: santy-slide-up      0.5s ease both; }
+/* Gradient flow — animated gradient on text */
+.animate-text-gradient-flow {
+  background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
+  background-size: 300% 100%;
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  animation: santy-gradient-shift 3s linear infinite;
+}
+/* Letter wave — each letter must be wrapped in a span via JS */
+.animate-text-wave span { display: inline-block; animation: santy-text-wave 1s ease infinite; }
+.animate-text-wave span:nth-child(1)  { animation-delay: 0s; }
+.animate-text-wave span:nth-child(2)  { animation-delay: 0.08s; }
+.animate-text-wave span:nth-child(3)  { animation-delay: 0.16s; }
+.animate-text-wave span:nth-child(4)  { animation-delay: 0.24s; }
+.animate-text-wave span:nth-child(5)  { animation-delay: 0.32s; }
+.animate-text-wave span:nth-child(6)  { animation-delay: 0.40s; }
+.animate-text-wave span:nth-child(7)  { animation-delay: 0.48s; }
+.animate-text-wave span:nth-child(8)  { animation-delay: 0.56s; }
+/* Glitch */
+.animate-text-glitch { animation: santy-text-glitch 0.5s linear infinite; }
+/* Neon pulse */
+.animate-text-neon-pulse { animation: santy-neon-pulse 1.5s ease-in-out infinite alternate; }
+
+@keyframes santy-typewriter      { to { width: 100%; } }
+@keyframes santy-blink-caret     { 50% { border-color: transparent; } }
+@keyframes santy-text-blur-in    { from { filter: blur(12px); opacity: 0; } to { filter: blur(0); opacity: 1; } }
+@keyframes santy-text-wave       { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
+@keyframes santy-text-glitch {
+  0%,100% { text-shadow: none; transform: none; }
+  20%     { text-shadow: -2px 0 #ff00c1, 2px 0 #00fff9; transform: skewX(-2deg); }
+  40%     { text-shadow: 2px 0 #ff00c1, -2px 0 #00fff9; transform: skewX(2deg); }
+  60%     { text-shadow: -2px 0 #00fff9; transform: skewX(0deg); }
+  80%     { text-shadow: 2px 0 #ff00c1; }
+}
+@keyframes santy-neon-pulse {
+  from { text-shadow: 0 0 4px currentColor, 0 0 10px currentColor; }
+  to   { text-shadow: 0 0 8px currentColor, 0 0 20px currentColor, 0 0 40px currentColor; }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   STAGGERED ENTRANCE SEQUENCES
+   Apply parent class; children get incremental delays via nth-child.
+   ═══════════════════════════════════════════════════════════════════════ */
+.animate-stagger-fade-in    > * { animation: santy-fade-in  0.5s ease both; }
+.animate-stagger-slide-up   > * { animation: santy-slide-up 0.5s ease both; }
+.animate-stagger-zoom-in    > * { animation: santy-zoom-in  0.4s ease both; }
+.animate-stagger-from-left  > * { animation: santy-fade-in-from-left  0.5s ease both; }
+.animate-stagger-from-right > * { animation: santy-fade-in-from-right 0.5s ease both; }
+
+/* Delay each child — 100ms steps */
+.animate-stagger-children-100 > *:nth-child(1)  { animation-delay: 0.0s; }
+.animate-stagger-children-100 > *:nth-child(2)  { animation-delay: 0.1s; }
+.animate-stagger-children-100 > *:nth-child(3)  { animation-delay: 0.2s; }
+.animate-stagger-children-100 > *:nth-child(4)  { animation-delay: 0.3s; }
+.animate-stagger-children-100 > *:nth-child(5)  { animation-delay: 0.4s; }
+.animate-stagger-children-100 > *:nth-child(6)  { animation-delay: 0.5s; }
+.animate-stagger-children-100 > *:nth-child(7)  { animation-delay: 0.6s; }
+.animate-stagger-children-100 > *:nth-child(8)  { animation-delay: 0.7s; }
+.animate-stagger-children-100 > *:nth-child(9)  { animation-delay: 0.8s; }
+.animate-stagger-children-100 > *:nth-child(10) { animation-delay: 0.9s; }
+/* 200ms steps */
+.animate-stagger-children-200 > *:nth-child(1)  { animation-delay: 0.0s; }
+.animate-stagger-children-200 > *:nth-child(2)  { animation-delay: 0.2s; }
+.animate-stagger-children-200 > *:nth-child(3)  { animation-delay: 0.4s; }
+.animate-stagger-children-200 > *:nth-child(4)  { animation-delay: 0.6s; }
+.animate-stagger-children-200 > *:nth-child(5)  { animation-delay: 0.8s; }
+.animate-stagger-children-200 > *:nth-child(6)  { animation-delay: 1.0s; }
+.animate-stagger-children-200 > *:nth-child(7)  { animation-delay: 1.2s; }
+.animate-stagger-children-200 > *:nth-child(8)  { animation-delay: 1.4s; }
+/* 300ms steps */
+.animate-stagger-children-300 > *:nth-child(1)  { animation-delay: 0.0s; }
+.animate-stagger-children-300 > *:nth-child(2)  { animation-delay: 0.3s; }
+.animate-stagger-children-300 > *:nth-child(3)  { animation-delay: 0.6s; }
+.animate-stagger-children-300 > *:nth-child(4)  { animation-delay: 0.9s; }
+.animate-stagger-children-300 > *:nth-child(5)  { animation-delay: 1.2s; }
+.animate-stagger-children-300 > *:nth-child(6)  { animation-delay: 1.5s; }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   MORPHING & SHAPE ANIMATIONS
+   ═══════════════════════════════════════════════════════════════════════ */
+.animate-morph-blob       { animation: santy-morph-blob      6s ease-in-out infinite; }
+.animate-border-spin      { animation: santy-border-spin     2s linear infinite; background: conic-gradient(from 0deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6); }
+.animate-shimmer          { overflow: hidden; position: relative; background: #f0f0f0; }
+.animate-shimmer::after   {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
+  animation: santy-shimmer 1.5s ease-in-out infinite;
+}
+.animate-gradient-shift   { background-size: 200% 200%; animation: santy-gradient-shift 3s ease infinite; }
+.animate-morph-circle-to-square { animation: santy-morph-circle-to-square 1.5s ease-in-out infinite alternate; }
+.animate-liquid           { animation: santy-liquid 3s ease-in-out infinite; }
+
+@keyframes santy-morph-blob {
+  0%,100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
+  25%     { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; }
+  50%     { border-radius: 50% 60% 30% 60% / 40% 50% 60% 50%; }
+  75%     { border-radius: 40% 70% 60% 30% / 60% 40% 50% 70%; }
+}
+@keyframes santy-border-spin   { to { transform: rotate(360deg); } }
+@keyframes santy-shimmer       { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+@keyframes santy-gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
+@keyframes santy-morph-circle-to-square { from { border-radius: 50%; } to { border-radius: 0%; } }
+@keyframes santy-liquid {
+  0%,100% { border-radius: 40% 60% 60% 40% / 60% 30% 70% 40%; transform: rotate(0deg); }
+  50%     { border-radius: 60% 40% 30% 70% / 40% 60% 30% 60%; transform: rotate(5deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   3D ANIMATIONS
+   ═══════════════════════════════════════════════════════════════════════ */
+.animate-flip-3d-x    { animation: santy-flip-3d-x    0.7s ease both; }
+.animate-flip-3d-y    { animation: santy-flip-3d-y    0.7s ease both; }
+.animate-rotate-3d    { animation: santy-rotate-3d    1.2s linear infinite; }
+.animate-tilt-left    { animation: santy-tilt-left    0.4s ease both; }
+.animate-tilt-right   { animation: santy-tilt-right   0.4s ease both; }
+.animate-depth-in     { animation: santy-depth-in     0.5s ease both; }
+.animate-depth-out    { animation: santy-depth-out    0.5s ease both; }
+.animate-swing-3d     { animation: santy-swing-3d     1s ease-in-out infinite; transform-origin: top center; perspective: 400px; }
+
+@keyframes santy-flip-3d-x    { from { transform: perspective(400px) rotateX(90deg); opacity: 0; } to { transform: perspective(400px) rotateX(0deg); opacity: 1; } }
+@keyframes santy-flip-3d-y    { from { transform: perspective(400px) rotateY(90deg); opacity: 0; } to { transform: perspective(400px) rotateY(0deg); opacity: 1; } }
+@keyframes santy-rotate-3d    { from { transform: perspective(400px) rotate3d(1,1,0,0deg); } to { transform: perspective(400px) rotate3d(1,1,0,360deg); } }
+@keyframes santy-tilt-left    { from { transform: rotate(0deg); } to { transform: rotate(-6deg); } }
+@keyframes santy-tilt-right   { from { transform: rotate(0deg); } to { transform: rotate(6deg); } }
+@keyframes santy-depth-in     { from { transform: perspective(600px) translateZ(-80px); opacity: 0; } to { transform: perspective(600px) translateZ(0); opacity: 1; } }
+@keyframes santy-depth-out    { from { transform: perspective(600px) translateZ(0); opacity: 1; } to { transform: perspective(600px) translateZ(-80px); opacity: 0; } }
+@keyframes santy-swing-3d {
+  0%,100% { transform: perspective(400px) rotateY(0deg); }
+  25%     { transform: perspective(400px) rotateY(15deg); }
+  75%     { transform: perspective(400px) rotateY(-15deg); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════
+   EXIT + PAGE TRANSITION ANIMATIONS
+   ═══════════════════════════════════════════════════════════════════════ */
+.animate-exit-fade-out    { animation: santy-fade-out    0.4s ease both; }
+.animate-exit-slide-left  { animation: santy-exit-slide-left  0.4s ease both; }
+.animate-exit-slide-right { animation: santy-exit-slide-right 0.4s ease both; }
+.animate-exit-scale-down  { animation: santy-exit-scale-down  0.35s ease both; }
+.animate-exit-flip-out    { animation: santy-flip-out    0.5s ease both; }
+.animate-page-in-from-right { animation: santy-page-in-right  0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-page-in-from-left  { animation: santy-page-in-left   0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-page-out-to-left   { animation: santy-page-out-left  0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-page-out-to-right  { animation: santy-page-out-right 0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+
+@keyframes santy-exit-slide-left  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-60px); } }
+@keyframes santy-exit-slide-right { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }
+@keyframes santy-exit-scale-down  { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.85); } }
+@keyframes santy-page-in-right    { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
+@keyframes santy-page-in-left     { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } }
+@keyframes santy-page-out-left    { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } }
+@keyframes santy-page-out-right   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } }
+
+/* View Transitions API */
+.view-transition-fade  { view-transition-name: fade-transition; }
+.view-transition-slide { view-transition-name: slide-transition; }
+@keyframes santy-vt-fade-in  { from { opacity: 0; } }
+@keyframes santy-vt-fade-out { to   { opacity: 0; } }
+::view-transition-old(fade-transition)  { animation: santy-vt-fade-out 0.3s ease; }
+::view-transition-new(fade-transition)  { animation: santy-vt-fade-in  0.3s ease; }
+::view-transition-old(slide-transition) { animation: santy-page-out-left  0.35s ease; }
+::view-transition-new(slide-transition) { animation: santy-page-in-right  0.35s ease; }
+
+/* ═══════════════════════════════════════════════════════════════════════
+   NOTIFICATION & UI FEEDBACK ANIMATIONS
+   ═══════════════════════════════════════════════════════════════════════ */
+.animate-toast-in         { animation: santy-toast-in        0.4s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-toast-out        { animation: santy-toast-out       0.3s ease both; }
+.animate-modal-in         { animation: santy-modal-in        0.3s cubic-bezier(0.34,1.56,0.64,1) both; }
+.animate-modal-out        { animation: santy-modal-out       0.25s ease both; }
+.animate-drawer-in-right  { animation: santy-drawer-in-right  0.35s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-drawer-out-right { animation: santy-drawer-out-right 0.3s ease both; }
+.animate-drawer-in-bottom { animation: santy-drawer-in-bottom 0.35s cubic-bezier(0.25,0.46,0.45,0.94) both; }
+.animate-dropdown-in      { animation: santy-dropdown-in     0.2s cubic-bezier(0.34,1.56,0.64,1) both; transform-origin: top center; }
+.animate-dropdown-out     { animation: santy-dropdown-out    0.15s ease both; transform-origin: top center; }
+.animate-tooltip-in       { animation: santy-zoom-in         0.15s ease both; }
+.animate-badge-pop        { animation: santy-badge-pop       0.4s cubic-bezier(0.34,1.56,0.64,1) both; }
+.animate-success-checkmark { animation: santy-checkmark      0.6s ease both; stroke-dasharray: 50; stroke-dashoffset: 50; }
+.animate-error-shake      { animation: santy-shake-x         0.5s ease both; }
+
+@keyframes santy-toast-in         { from { opacity: 0; transform: translateY(100%) scale(0.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
+@keyframes santy-toast-out        { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } }
+@keyframes santy-modal-in         { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
+@keyframes santy-modal-out        { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.9); } }
+@keyframes santy-drawer-in-right  { from { transform: translateX(100%); } to { transform: translateX(0); } }
+@keyframes santy-drawer-out-right { from { transform: translateX(0); } to { transform: translateX(100%); } }
+@keyframes santy-drawer-in-bottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes santy-dropdown-in      { from { opacity: 0; transform: scaleY(0.8); } to { opacity: 1; transform: scaleY(1); } }
+@keyframes santy-dropdown-out     { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0.8); } }
+@keyframes santy-badge-pop        { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
+@keyframes santy-checkmark        { to { stroke-dashoffset: 0; } }
+
+/* ── Scroll-reveal observer snippet (embed in your HTML) ── */
+/* <script>
+  new IntersectionObserver((entries) => {
+    entries.forEach(e => {
+      if(e.isIntersecting) {
+        e.target.classList.add('is-visible');
+        if(e.target.classList.contains('scroll-reveal-once'))
+          observer.unobserve(e.target);
+      } else {
+        if(e.target.classList.contains('scroll-reveal-repeat'))
+          e.target.classList.remove('is-visible');
+      }
+    });
+  }, { threshold: 0.15 }).observe(...document.querySelectorAll('[class*="animate-on-scroll"],[class*="scroll-reveal"]'));
+</script> */
+
 
 /* ═══ SANTY COMPONENTS ═══ */
 
@@ -12448,6 +12758,226 @@
 .dropdown-divider { height: 1px; background-color: #e5e7eb; margin: 4px 0; }
 .dropdown-header { padding: 6px 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #9ca3af; }
 
+/* ── Component Variant System ──────────────────────────────────────────── */
+/* Usage: make-button style-success size-large shape-pill */
+
+/* make-button */
+.make-button {
+  display:inline-flex; align-items:center; justify-content:center;
+  gap:8px; padding:9px 20px; font-size:14px; font-weight:600;
+  border-radius:8px; border:2px solid transparent; cursor:pointer;
+  text-decoration:none; transition:all 0.2s; line-height:1.25; white-space:nowrap;
+}
+.make-button:disabled { opacity:.5; cursor:not-allowed; }
+.make-button.style-primary   { background:#3b82f6; color:#fff; border-color:#3b82f6; }
+.make-button.style-primary:hover { background:#2563eb; border-color:#2563eb; }
+.make-button.style-secondary { background:#6b7280; color:#fff; border-color:#6b7280; }
+.make-button.style-secondary:hover { background:#4b5563; border-color:#4b5563; }
+.make-button.style-success   { background:#22c55e; color:#fff; border-color:#22c55e; }
+.make-button.style-success:hover { background:#16a34a; border-color:#16a34a; }
+.make-button.style-danger    { background:#ef4444; color:#fff; border-color:#ef4444; }
+.make-button.style-danger:hover  { background:#dc2626; border-color:#dc2626; }
+.make-button.style-warning   { background:#f59e0b; color:#fff; border-color:#f59e0b; }
+.make-button.style-warning:hover { background:#d97706; border-color:#d97706; }
+.make-button.style-info      { background:#06b6d4; color:#fff; border-color:#06b6d4; }
+.make-button.style-info:hover { background:#0891b2; border-color:#0891b2; }
+.make-button.style-outline   { background:transparent; border-color:currentColor; }
+.make-button.style-outline:hover { background:rgba(0,0,0,.05); }
+.make-button.style-ghost     { background:transparent; border-color:transparent; }
+.make-button.style-ghost:hover { background:rgba(0,0,0,.05); }
+.make-button.style-dark      { background:#1e293b; color:#f1f5f9; border-color:#1e293b; }
+.make-button.style-dark:hover { background:#0f172a; border-color:#0f172a; }
+.make-button.style-light     { background:#f3f4f6; color:#374151; border-color:#e5e7eb; }
+.make-button.style-light:hover { background:#e5e7eb; }
+.make-button.size-tiny   { padding:2px 8px;   font-size:11px; border-radius:4px; }
+.make-button.size-small  { padding:5px 14px;  font-size:12px; border-radius:6px; }
+.make-button.size-large  { padding:12px 28px; font-size:16px; border-radius:10px; }
+.make-button.size-xl     { padding:16px 36px; font-size:18px; border-radius:12px; }
+.make-button.size-full   { width:100%; justify-content:center; }
+.make-button.shape-pill   { border-radius:9999px; }
+.make-button.shape-square { border-radius:0; }
+.make-button.shape-rounded { border-radius:14px; }
+
+/* make-card */
+.make-card { background:#fff; border-radius:12px; box-shadow:var(--santy-shadow); overflow:hidden; }
+.make-card.style-bordered  { border:1px solid #e5e7eb; box-shadow:none; }
+.make-card.style-elevated  { box-shadow:0 10px 40px -8px rgba(0,0,0,.15); }
+.make-card.style-flat      { box-shadow:none; }
+.make-card.style-dark      { background:#1e293b; color:#f1f5f9; }
+.make-card.shape-pill      { border-radius:9999px; }
+.make-card.shape-square    { border-radius:0; }
+.make-card.shape-rounded   { border-radius:20px; }
+.make-card.size-small      { border-radius:8px; }
+.make-card.size-large      { border-radius:20px; }
+
+/* make-badge */
+.make-badge { display:inline-flex; align-items:center; gap:4px; padding:3px 10px; font-size:12px; font-weight:600; border-radius:9999px; line-height:1.4; }
+.make-badge.style-primary   { background:#dbeafe; color:#1d4ed8; }
+.make-badge.style-secondary { background:#f3f4f6; color:#374151; }
+.make-badge.style-success   { background:#dcfce7; color:#15803d; }
+.make-badge.style-danger    { background:#fee2e2; color:#b91c1c; }
+.make-badge.style-warning   { background:#fef3c7; color:#b45309; }
+.make-badge.style-info      { background:#cffafe; color:#0e7490; }
+.make-badge.style-dark      { background:#1e293b; color:#f1f5f9; }
+.make-badge.style-outline   { background:transparent; border:1.5px solid currentColor; }
+.make-badge.size-small      { padding:1px 7px; font-size:10px; }
+.make-badge.size-large      { padding:5px 14px; font-size:14px; }
+.make-badge.shape-square    { border-radius:4px; }
+.make-badge.shape-rounded   { border-radius:6px; }
+
+/* make-alert */
+.make-alert { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:10px; font-size:14px; border:1px solid transparent; line-height:1.5; }
+.make-alert.style-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
+.make-alert.style-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
+.make-alert.style-warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
+.make-alert.style-danger  { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
+.make-alert.style-dark    { background:#1e293b; border-color:#334155; color:#f1f5f9; }
+.make-alert.size-small    { padding:10px 12px; font-size:13px; border-radius:8px; }
+.make-alert.size-large    { padding:20px; font-size:16px; border-radius:12px; }
+.make-alert.shape-square  { border-radius:0; }
+.make-alert.shape-pill    { border-radius:9999px; padding-left:24px; }
+
+/* make-input */
+.make-input { display:block; width:100%; padding:9px 12px; font-size:14px; font-family:inherit; color:#111827; background:#fff; border:1.5px solid #d1d5db; border-radius:8px; transition:border-color .15s,box-shadow .15s; outline:none; line-height:1.5; }
+.make-input:focus { border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.2); }
+.make-input.style-error   { border-color:#ef4444; }
+.make-input.style-error:focus { box-shadow:0 0 0 3px rgba(239,68,68,.2); }
+.make-input.style-success { border-color:#22c55e; }
+.make-input.size-small    { padding:4px 8px;   font-size:12px; border-radius:6px; }
+.make-input.size-large    { padding:12px 16px; font-size:16px; border-radius:10px; }
+.make-input.shape-pill    { border-radius:9999px; padding-left:20px; }
+.make-input.shape-square  { border-radius:0; }
+
+/* make-avatar */
+.make-avatar { display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:#e5e7eb; color:#374151; font-weight:600; font-size:14px; overflow:hidden; flex-shrink:0; }
+.make-avatar img { width:100%; height:100%; object-fit:cover; }
+.make-avatar.size-tiny   { width:24px;  height:24px;  font-size:10px; }
+.make-avatar.size-small  { width:32px;  height:32px;  font-size:12px; }
+.make-avatar.size-large  { width:56px;  height:56px;  font-size:18px; }
+.make-avatar.size-xl     { width:80px;  height:80px;  font-size:24px; }
+.make-avatar.shape-square  { border-radius:8px; }
+.make-avatar.shape-rounded { border-radius:12px; }
+.make-avatar.style-primary { background:#dbeafe; color:#1d4ed8; }
+.make-avatar.style-success { background:#dcfce7; color:#15803d; }
+.make-avatar.style-danger  { background:#fee2e2; color:#b91c1c; }
+.make-avatar.style-warning { background:#fef3c7; color:#b45309; }
+.make-avatar.style-dark    { background:#1e293b; color:#f1f5f9; }
+
+/* make-spinner */
+.make-spinner { display:inline-block; width:24px; height:24px; border:3px solid #e5e7eb; border-top-color:#3b82f6; border-radius:50%; animation:santy-spin .75s linear infinite; }
+.make-spinner.size-tiny   { width:14px; height:14px; border-width:2px; }
+.make-spinner.size-small  { width:18px; height:18px; border-width:2px; }
+.make-spinner.size-large  { width:40px; height:40px; border-width:4px; }
+.make-spinner.size-xl     { width:56px; height:56px; border-width:5px; }
+.make-spinner.style-success { border-top-color:#22c55e; }
+.make-spinner.style-danger  { border-top-color:#ef4444; }
+.make-spinner.style-warning { border-top-color:#f59e0b; }
+.make-spinner.style-dark    { border-color:#334155; border-top-color:#f1f5f9; }
+
+/* make-skeleton */
+.make-skeleton { background:linear-gradient(90deg,#f0f0f0 25%,#e0e0e0 50%,#f0f0f0 75%); background-size:200% 100%; animation:santy-shimmer 1.5s infinite; border-radius:6px; }
+.make-skeleton.shape-circle  { border-radius:50%; }
+.make-skeleton.shape-pill    { border-radius:9999px; }
+.make-skeleton.shape-square  { border-radius:0; }
+.make-skeleton.size-small { height:12px; }
+.make-skeleton.size-large { height:24px; }
+
+/* make-progress */
+.make-progress { width:100%; background:#e5e7eb; border-radius:9999px; overflow:hidden; }
+.make-progress > .bar { height:8px; background:#3b82f6; border-radius:9999px; transition:width .4s ease; }
+.make-progress.style-success > .bar { background:#22c55e; }
+.make-progress.style-danger  > .bar { background:#ef4444; }
+.make-progress.style-warning > .bar { background:#f59e0b; }
+.make-progress.style-dark    > .bar { background:#1e293b; }
+.make-progress.size-small > .bar    { height:4px; }
+.make-progress.size-large > .bar    { height:14px; }
+.make-progress.shape-square { border-radius:0; }
+.make-progress.shape-square > .bar  { border-radius:0; }
+
+/* make-table */
+.make-table { width:100%; border-collapse:collapse; font-size:14px; }
+.make-table th,.make-table td { padding:10px 12px; text-align:left; border-bottom:1px solid #e5e7eb; }
+.make-table thead tr { background:#f9fafb; }
+.make-table thead th { font-weight:600; color:#374151; font-size:12px; text-transform:uppercase; letter-spacing:.05em; }
+.make-table.style-striped tbody tr:nth-child(even) { background:#f9fafb; }
+.make-table.style-bordered { border:1px solid #e5e7eb; }
+.make-table.style-bordered th,.make-table.style-bordered td { border:1px solid #e5e7eb; }
+.make-table.style-hover tbody tr:hover { background:#f3f4f6; cursor:pointer; }
+.make-table.style-dark { background:#1e293b; color:#f1f5f9; }
+.make-table.style-dark th,.make-table.style-dark td { border-color:#334155; }
+.make-table.style-dark thead tr { background:#0f172a; }
+.make-table.size-small th,.make-table.size-small td { padding:6px 10px; font-size:13px; }
+.make-table.size-large th,.make-table.size-large td { padding:14px 16px; font-size:15px; }
+
+/* make-navbar */
+.make-navbar { display:flex; align-items:center; justify-content:space-between; padding:12px 24px; background:#fff; border-bottom:1px solid #e5e7eb; gap:16px; }
+.make-navbar.style-dark        { background:#1e293b; border-color:#334155; color:#f1f5f9; }
+.make-navbar.style-glass       { background:rgba(255,255,255,.8); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
+.make-navbar.style-transparent { background:transparent; border-color:transparent; }
+.make-navbar.style-dark.style-glass { background:rgba(15,23,42,.85); }
+.make-navbar.size-small        { padding:8px 16px; }
+.make-navbar.size-large        { padding:20px 32px; }
+.make-navbar.shape-sticky      { position:sticky; top:0; z-index:50; }
+
+/* make-tooltip */
+.make-tooltip { position:relative; display:inline-block; }
+.make-tooltip .tip { visibility:hidden; opacity:0; position:absolute; z-index:100; background:#1f2937; color:#f9fafb; font-size:12px; padding:5px 10px; border-radius:6px; white-space:nowrap; pointer-events:none; transition:opacity .15s; line-height:1.4; }
+.make-tooltip:hover .tip { visibility:visible; opacity:1; }
+.make-tooltip.style-top    .tip { bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); }
+.make-tooltip.style-bottom .tip { top:calc(100% + 8px);    left:50%; transform:translateX(-50%); }
+.make-tooltip.style-left   .tip { right:calc(100% + 8px);  top:50%;  transform:translateY(-50%); }
+.make-tooltip.style-right  .tip { left:calc(100% + 8px);   top:50%;  transform:translateY(-50%); }
+.make-tooltip.style-light  .tip { background:#fff; color:#111827; box-shadow:0 4px 12px rgba(0,0,0,.15); }
+
+/* make-notification */
+.make-notification { display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:10px; font-size:14px; border:1px solid transparent; line-height:1.4; }
+.make-notification.style-info    { background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }
+.make-notification.style-success { background:#f0fdf4; border-color:#bbf7d0; color:#15803d; }
+.make-notification.style-warning { background:#fffbeb; border-color:#fde68a; color:#b45309; }
+.make-notification.style-danger  { background:#fef2f2; border-color:#fecaca; color:#b91c1c; }
+.make-notification.style-dark    { background:#1e293b; border-color:#334155; color:#f1f5f9; }
+.make-notification.size-small    { padding:10px 12px; font-size:13px; }
+.make-notification.size-large    { padding:20px; font-size:15px; }
+
+/* make-modal */
+.make-modal { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; align-items:center; justify-content:center; padding:16px; }
+.make-modal:target { display:flex; }
+.make-modal > .box { background:#fff; border-radius:16px; box-shadow:0 25px 50px -12px rgba(0,0,0,.25); max-width:560px; width:100%; max-height:90vh; overflow-y:auto; animation:santy-zoom-in .25s ease; }
+.make-modal.size-small > .box { max-width:400px; }
+.make-modal.size-large > .box { max-width:768px; }
+.make-modal.size-xl    > .box { max-width:1024px; }
+.make-modal.size-full  > .box { max-width:100%; height:100vh; border-radius:0; max-height:100vh; }
+.make-modal.shape-square > .box { border-radius:0; }
+.make-modal.style-dark > .box { background:#1e293b; color:#f1f5f9; }
+
+/* make-drawer */
+.make-drawer { position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:200; display:none; }
+.make-drawer:target { display:block; }
+.make-drawer > .panel { position:fixed; top:0; bottom:0; left:0; width:300px; background:#fff; z-index:201; overflow-y:auto; box-shadow:4px 0 24px rgba(0,0,0,.12); transform:translateX(-100%); transition:transform .3s ease; }
+.make-drawer:target > .panel { transform:translateX(0); }
+.make-drawer.style-right > .panel { left:auto; right:0; transform:translateX(100%); box-shadow:-4px 0 24px rgba(0,0,0,.12); }
+.make-drawer:target.style-right > .panel { transform:translateX(0); }
+.make-drawer.style-dark > .panel { background:#1e293b; color:#f1f5f9; }
+.make-drawer.size-small > .panel { width:220px; }
+.make-drawer.size-large > .panel { width:420px; }
+
+/* make-accordion */
+.make-accordion { border:1px solid #e5e7eb; border-radius:10px; overflow:hidden; }
+.make-accordion.style-flush  { border:none; border-radius:0; }
+.make-accordion.style-dark   { background:#1e293b; border-color:#334155; color:#f1f5f9; }
+.make-accordion.shape-square { border-radius:0; }
+.make-accordion.shape-rounded { border-radius:16px; }
+
+/* make-dropdown */
+.make-dropdown { position:relative; display:inline-block; }
+.make-dropdown > .menu { display:none; position:absolute; top:calc(100% + 4px); left:0; min-width:180px; background:#fff; border:1px solid #e5e7eb; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,.1); z-index:100; overflow:hidden; padding:4px; }
+.make-dropdown.open > .menu { display:block; }
+.make-dropdown.style-right > .menu { left:auto; right:0; }
+.make-dropdown.style-top   > .menu { top:auto; bottom:calc(100% + 4px); }
+.make-dropdown.style-dark  > .menu { background:#1e293b; border-color:#334155; }
+.make-dropdown.size-small  > .menu { min-width:140px; font-size:13px; }
+.make-dropdown.size-large  > .menu { min-width:240px; font-size:15px; }
+
 /* ── Dark Mode Component Variants ── */
 @media (prefers-color-scheme: dark) {
   .dark-auto .card         { background-color: #1e293b; }