/* ═══════════════════════════════════════════════════════════════════════
   SANTY ANIMATIONS — animate.css compatible · Plain-English naming
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Speed helpers ── */
.animation-speed-fastest { animation-duration: 0.3s !important; }
.animation-speed-fast    { animation-duration: 0.5s !important; }
.animation-speed-normal  { animation-duration: 1s   !important; }
.animation-speed-slow    { animation-duration: 1.5s !important; }
.animation-speed-slowest { animation-duration: 2s   !important; }
.animation-speed-glacial { animation-duration: 3s   !important; }

/* ── Delay helpers ── */
.animation-delay-100  { animation-delay: 0.1s; }
.animation-delay-200  { animation-delay: 0.2s; }
.animation-delay-300  { animation-delay: 0.3s; }
.animation-delay-400  { animation-delay: 0.4s; }
.animation-delay-500  { animation-delay: 0.5s; }
.animation-delay-600  { animation-delay: 0.6s; }
.animation-delay-700  { animation-delay: 0.7s; }
.animation-delay-800  { animation-delay: 0.8s; }
.animation-delay-900  { animation-delay: 0.9s; }
.animation-delay-1000 { animation-delay: 1s; }
.animation-delay-1500 { animation-delay: 1.5s; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-3000 { animation-delay: 3s; }

/* ── Iteration helpers ── */
.animation-loop-1       { animation-iteration-count: 1; }
.animation-loop-2       { animation-iteration-count: 2; }
.animation-loop-3       { animation-iteration-count: 3; }
.animation-loop-4       { animation-iteration-count: 4; }
.animation-loop-5       { animation-iteration-count: 5; }
.animation-loop-forever { animation-iteration-count: infinite; }

/* ── Fill-mode helpers ── */
.animation-fill-none      { animation-fill-mode: none; }
.animation-fill-forwards  { animation-fill-mode: forwards; }
.animation-fill-backwards { animation-fill-mode: backwards; }
.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-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-pause-on-hover:hover   { animation-play-state: paused; }

/* ════════════════════════════════════════════════════
   ATTENTION SEEKERS
   Keep looping or use once (add animation-loop-1)
   ════════════════════════════════════════════════════ */
.animate-flash       { animation: santy-flash       1s   ease         both; }
.animate-rubber-band { animation: santy-rubber-band 1s   ease         both; }
.animate-shake-x     { animation: santy-shake-x     1s   ease         both; }
.animate-shake-y     { animation: santy-shake-y     1s   ease         both; }
.animate-shake-head  { animation: santy-shake-head  1s   ease-in-out  both; }
.animate-swing       { animation: santy-swing       1s   ease         both; transform-origin: top center; }
.animate-tada        { animation: santy-tada        1s   ease         both; }
.animate-wobble      { animation: santy-wobble      1s   ease         both; }
.animate-jelly       { animation: santy-jelly       1s   ease         both; }
.animate-heartbeat   { animation: santy-heartbeat   1.3s ease-in-out  both; }

/* ════════════════════════════════════════════════════
   FADING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-fade-in              { animation: santy-fade-in              0.5s ease both; }
.animate-fade-in-from-top     { animation: santy-fade-in-from-top     0.5s ease both; }
.animate-fade-in-from-bottom  { animation: santy-fade-in-from-bottom  0.5s ease both; }
.animate-fade-in-from-left    { animation: santy-fade-in-from-left    0.5s ease both; }
.animate-fade-in-from-right   { animation: santy-fade-in-from-right   0.5s ease both; }
.animate-fade-in-top-left     { animation: santy-fade-in-top-left     0.5s ease both; }
.animate-fade-in-top-right    { animation: santy-fade-in-top-right    0.5s ease both; }
.animate-fade-in-bottom-left  { animation: santy-fade-in-bottom-left  0.5s ease both; }
.animate-fade-in-bottom-right { animation: santy-fade-in-bottom-right 0.5s ease both; }

/* ════════════════════════════════════════════════════
   FADING EXITS
   ════════════════════════════════════════════════════ */
.animate-fade-out              { animation: santy-fade-out              0.5s ease both; }
.animate-fade-out-to-top       { animation: santy-fade-out-to-top       0.5s ease both; }
.animate-fade-out-to-bottom    { animation: santy-fade-out-to-bottom    0.5s ease both; }
.animate-fade-out-to-left      { animation: santy-fade-out-to-left      0.5s ease both; }
.animate-fade-out-to-right     { animation: santy-fade-out-to-right     0.5s ease both; }
.animate-fade-out-top-left     { animation: santy-fade-out-top-left     0.5s ease both; }
.animate-fade-out-top-right    { animation: santy-fade-out-top-right    0.5s ease both; }
.animate-fade-out-bottom-left  { animation: santy-fade-out-bottom-left  0.5s ease both; }
.animate-fade-out-bottom-right { animation: santy-fade-out-bottom-right 0.5s ease both; }

/* ════════════════════════════════════════════════════
   BOUNCING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-bounce-in             { animation: santy-bounce-in             0.75s ease both; }
.animate-bounce-in-from-top    { animation: santy-bounce-in-from-top    0.75s ease both; }
.animate-bounce-in-from-bottom { animation: santy-bounce-in-from-bottom 0.75s ease both; }
.animate-bounce-in-from-left   { animation: santy-bounce-in-from-left   0.75s ease both; }
.animate-bounce-in-from-right  { animation: santy-bounce-in-from-right  0.75s ease both; }

/* ════════════════════════════════════════════════════
   BOUNCING EXITS
   ════════════════════════════════════════════════════ */
.animate-bounce-out             { animation: santy-bounce-out             0.75s ease both; }
.animate-bounce-out-to-top      { animation: santy-bounce-out-to-top      0.75s ease both; }
.animate-bounce-out-to-bottom   { animation: santy-bounce-out-to-bottom   0.75s ease both; }
.animate-bounce-out-to-left     { animation: santy-bounce-out-to-left     0.75s ease both; }
.animate-bounce-out-to-right    { animation: santy-bounce-out-to-right    0.75s ease both; }

/* ════════════════════════════════════════════════════
   SLIDING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-slide-in-from-top    { animation: santy-slide-in-from-top    0.4s ease both; }
.animate-slide-in-from-bottom { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-in-from-left   { animation: santy-slide-in-from-left   0.4s ease both; }
.animate-slide-in-from-right  { animation: santy-slide-in-from-right  0.4s ease both; }

/* ════════════════════════════════════════════════════
   SLIDING EXITS
   ════════════════════════════════════════════════════ */
.animate-slide-out-to-top    { animation: santy-slide-out-to-top    0.4s ease both; }
.animate-slide-out-to-bottom { animation: santy-slide-out-to-bottom 0.4s ease both; }
.animate-slide-out-to-left   { animation: santy-slide-out-to-left   0.4s ease both; }
.animate-slide-out-to-right  { animation: santy-slide-out-to-right  0.4s ease both; }

/* ════════════════════════════════════════════════════
   ZOOMING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-zoom-in             { animation: santy-zoom-in             0.3s ease both; }
.animate-zoom-in-from-top    { animation: santy-zoom-in-from-top    0.5s ease both; }
.animate-zoom-in-from-bottom { animation: santy-zoom-in-from-bottom 0.5s ease both; }
.animate-zoom-in-from-left   { animation: santy-zoom-in-from-left   0.5s ease both; }
.animate-zoom-in-from-right  { animation: santy-zoom-in-from-right  0.5s ease both; }

/* ════════════════════════════════════════════════════
   ZOOMING EXITS
   ════════════════════════════════════════════════════ */
.animate-zoom-out             { animation: santy-zoom-out             0.3s ease both; }
.animate-zoom-out-to-top      { animation: santy-zoom-out-to-top      0.5s ease both; }
.animate-zoom-out-to-bottom   { animation: santy-zoom-out-to-bottom   0.5s ease both; }
.animate-zoom-out-to-left     { animation: santy-zoom-out-to-left     0.5s ease both; }
.animate-zoom-out-to-right    { animation: santy-zoom-out-to-right    0.5s ease both; }

/* ════════════════════════════════════════════════════
   FLIPPING
   ════════════════════════════════════════════════════ */
.animate-flip       { animation: santy-flip       1s   ease both; backface-visibility: visible !important; }
.animate-flip-in-x  { animation: santy-flip-in-x  0.75s ease both; backface-visibility: visible !important; }
.animate-flip-in-y  { animation: santy-flip-in-y  0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-x { animation: santy-flip-out-x 0.75s ease both; backface-visibility: visible !important; }
.animate-flip-out-y { animation: santy-flip-out-y 0.75s ease both; backface-visibility: visible !important; }

/* ════════════════════════════════════════════════════
   ROTATING ENTRANCES
   ════════════════════════════════════════════════════ */
.animate-rotate-in                   { animation: santy-rotate-in                   0.6s ease both; }
.animate-rotate-in-from-top-left     { animation: santy-rotate-in-from-top-left     0.6s ease both; transform-origin: left top;     }
.animate-rotate-in-from-top-right    { animation: santy-rotate-in-from-top-right    0.6s ease both; transform-origin: right top;    }
.animate-rotate-in-from-bottom-left  { animation: santy-rotate-in-from-bottom-left  0.6s ease both; transform-origin: left bottom;  }
.animate-rotate-in-from-bottom-right { animation: santy-rotate-in-from-bottom-right 0.6s ease both; transform-origin: right bottom; }

/* ════════════════════════════════════════════════════
   ROTATING EXITS
   ════════════════════════════════════════════════════ */
.animate-rotate-out                   { animation: santy-rotate-out                   0.6s ease both; }
.animate-rotate-out-to-top-left       { animation: santy-rotate-out-to-top-left       0.6s ease both; transform-origin: left top;     }
.animate-rotate-out-to-top-right      { animation: santy-rotate-out-to-top-right      0.6s ease both; transform-origin: right top;    }
.animate-rotate-out-to-bottom-left    { animation: santy-rotate-out-to-bottom-left    0.6s ease both; transform-origin: left bottom;  }
.animate-rotate-out-to-bottom-right   { animation: santy-rotate-out-to-bottom-right   0.6s ease both; transform-origin: right bottom; }

/* ════════════════════════════════════════════════════
   BACK ENTRANCES (scale from afar)
   ════════════════════════════════════════════════════ */
.animate-back-in-from-top    { animation: santy-back-in-from-top    0.7s ease both; }
.animate-back-in-from-bottom { animation: santy-back-in-from-bottom 0.7s ease both; }
.animate-back-in-from-left   { animation: santy-back-in-from-left   0.7s ease both; }
.animate-back-in-from-right  { animation: santy-back-in-from-right  0.7s ease both; }

/* ════════════════════════════════════════════════════
   BACK EXITS
   ════════════════════════════════════════════════════ */
.animate-back-out-to-top    { animation: santy-back-out-to-top    0.7s ease both; }
.animate-back-out-to-bottom { animation: santy-back-out-to-bottom 0.7s ease both; }
.animate-back-out-to-left   { animation: santy-back-out-to-left   0.7s ease both; }
.animate-back-out-to-right  { animation: santy-back-out-to-right  0.7s ease both; }

/* ════════════════════════════════════════════════════
   LIGHT SPEED (skew + slide)
   ════════════════════════════════════════════════════ */
.animate-speed-in-from-left  { animation: santy-speed-in-from-left  0.5s ease-out both; }
.animate-speed-in-from-right { animation: santy-speed-in-from-right 0.5s ease-out both; }
.animate-speed-out-to-left   { animation: santy-speed-out-to-left   0.5s ease-in  both; }
.animate-speed-out-to-right  { animation: santy-speed-out-to-right  0.5s ease-in  both; }

/* ════════════════════════════════════════════════════
   SPECIALS
   ════════════════════════════════════════════════════ */
.animate-hinge       { animation: santy-hinge       2s   ease both; transform-origin: top left; }
.animate-jack-in-box { animation: santy-jack-in-box 1s   ease both; transform-origin: center bottom; }
.animate-roll-in     { animation: santy-roll-in     0.6s ease both; }
.animate-roll-out    { animation: santy-roll-out    0.6s ease both; }

/* ── Original utilities (kept for backwards compat) ── */
.animate-spin        { animation: santy-spin  1s linear infinite; }
.animate-ping        { animation: santy-ping  1s cubic-bezier(0,0,.2,1) infinite; }
.animate-pulse       { animation: santy-pulse 2s cubic-bezier(.4,0,.6,1) infinite; }
.animate-bounce      { animation: santy-bounce 1s infinite; }
.animate-slide-up    { animation: santy-slide-in-from-bottom 0.4s ease both; }
.animate-slide-down  { animation: santy-slide-in-from-top    0.4s ease both; }
.animate-zoom-in     { animation: santy-zoom-in  0.3s ease both; }
.animate-zoom-out    { animation: santy-zoom-out 0.3s ease both; }

/* ═══════════════════════════════════════════════════════════════════════
   KEYFRAMES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Core ── */
@keyframes santy-spin    { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes santy-ping    { 75%, 100% { transform: scale(2); opacity: 0; } }
@keyframes santy-pulse   { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes santy-bounce  { 0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(.8,0,1,1); } 50% { transform: translateY(0); animation-timing-function: cubic-bezier(0,0,.2,1); } }
@keyframes santy-skeleton{ 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ── Attention Seekers ── */
@keyframes santy-flash {
  from, 50%, to { opacity: 1; }
  25%, 75%      { opacity: 0; }
}
@keyframes santy-rubber-band {
  from { transform: scale3d(1, 1, 1); }
  30%  { transform: scale3d(1.25, .75, 1); }
  40%  { transform: scale3d(.75, 1.25, 1); }
  50%  { transform: scale3d(1.15, .85, 1); }
  65%  { transform: scale3d(.95, 1.05, 1); }
  75%  { transform: scale3d(1.05, .95, 1); }
  to   { transform: scale3d(1, 1, 1); }
}
@keyframes santy-shake-x {
  from, to              { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80%    { transform: translate3d(10px, 0, 0); }
}
@keyframes santy-shake-y {
  from, to              { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(0, -10px, 0); }
  20%, 40%, 60%, 80%    { transform: translate3d(0, 10px, 0); }
}
@keyframes santy-shake-head {
  0%    { transform: rotateY(0deg); }
  6.5%  { transform: rotateY(-9deg); }
  18.5% { transform: rotateY(7deg); }
  31.5% { transform: rotateY(-5deg); }
  43.5% { transform: rotateY(3deg); }
  50%   { transform: rotateY(0deg); }
}
@keyframes santy-swing {
  20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to  { transform: rotate3d(0, 0, 1, 0deg); }
}
@keyframes santy-tada {
  from       { transform: scale3d(1, 1, 1); }
  10%, 20%   { transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80%      { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to  { transform: scale3d(1, 1, 1); }
}
@keyframes santy-wobble {
  from { transform: translate3d(0, 0, 0); }
  15%  { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30%  { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45%  { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60%  { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75%  { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to   { transform: translate3d(0, 0, 0); }
}
@keyframes santy-jelly {
  from, 11.1%, to { transform: translate3d(0, 0, 0); }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg)  skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-.78125deg) skewY(-.78125deg); }
  77.7% { transform: skewX(.390625deg) skewY(.390625deg); }
  88.8% { transform: skewX(-.1953125deg) skewY(-.1953125deg); }
}
@keyframes santy-heartbeat {
  from { transform: scale(1);    animation-timing-function: ease-out; }
  10%  { transform: scale(1.12); animation-timing-function: ease-in; }
  17%  { transform: scale(1.08); animation-timing-function: ease-out; }
  33%  { transform: scale(1.18); animation-timing-function: ease-in; }
  45%  { transform: scale(1);    animation-timing-function: ease-out; }
}

/* ── Fade In ── */
@keyframes santy-fade-in              { from { opacity: 0; } to { opacity: 1; } }
@keyframes santy-fade-in-from-top     { from { opacity: 0; transform: translate3d(0, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-bottom  { from { opacity: 0; transform: translate3d(0,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-left    { from { opacity: 0; transform: translate3d(-30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-from-right   { from { opacity: 0; transform: translate3d( 30px, 0, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-left     { from { opacity: 0; transform: translate3d(-30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-top-right    { from { opacity: 0; transform: translate3d( 30px, -30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-left  { from { opacity: 0; transform: translate3d(-30px,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }
@keyframes santy-fade-in-bottom-right { from { opacity: 0; transform: translate3d( 30px,  30px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } }

/* ── Fade Out ── */
@keyframes santy-fade-out              { from { opacity: 1; } to { opacity: 0; } }
@keyframes santy-fade-out-to-top       { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0, -30px, 0); } }
@keyframes santy-fade-out-to-bottom    { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(0,  30px, 0); } }
@keyframes santy-fade-out-to-left      { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, 0, 0); } }
@keyframes santy-fade-out-to-right     { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, 0, 0); } }
@keyframes santy-fade-out-top-left     { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px, -30px, 0); } }
@keyframes santy-fade-out-top-right    { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px, -30px, 0); } }
@keyframes santy-fade-out-bottom-left  { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d(-30px,  30px, 0); } }
@keyframes santy-fade-out-bottom-right { from { opacity: 1; transform: translate3d(0, 0, 0); } to { opacity: 0; transform: translate3d( 30px,  30px, 0); } }

/* ── Bounce In ── */
@keyframes santy-bounce-in {
  from,20%,40%,60%,80%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: scale3d(.3, .3, .3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(.9, .9, .9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(.97, .97, .97); }
  to  { opacity: 1; transform: scale3d(1, 1, 1); }
}
@keyframes santy-bounce-in-from-top {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(0, -3000px, 0) scaleY(3); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0) scaleY(.9); }
  75% { transform: translate3d(0, -10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, 5px, 0) scaleY(.985); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-bottom {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(0, 3000px, 0) scaleY(5); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
  75% { transform: translate3d(0, 10px, 0) scaleY(.95); }
  90% { transform: translate3d(0, -5px, 0) scaleY(.985); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-left {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(-3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(-10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(5px, 0, 0) scaleX(.995); }
  to  { transform: translate3d(0, 0, 0); }
}
@keyframes santy-bounce-in-from-right {
  from,60%,75%,90%,to { animation-timing-function: cubic-bezier(.215,.61,.355,1); }
  0%  { opacity: 0; transform: translate3d(3000px, 0, 0) scaleX(3); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0) scaleX(1); }
  75% { transform: translate3d(10px, 0, 0) scaleX(.98); }
  90% { transform: translate3d(-5px, 0, 0) scaleX(.995); }
  to  { transform: translate3d(0, 0, 0); }
}

/* ── Bounce Out ── */
@keyframes santy-bounce-out {
  20%     { transform: scale3d(.9, .9, .9); }
  50%,55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  to      { opacity: 0; transform: scale3d(.3, .3, .3); }
}
@keyframes santy-bounce-out-to-top {
  20%     { transform: translate3d(0, -10px, 0) scaleY(.985); }
  40%,45% { opacity: 1; transform: translate3d(0, 20px, 0) scaleY(.9); }
  to      { opacity: 0; transform: translate3d(0, -2000px, 0) scaleY(3); }
}
@keyframes santy-bounce-out-to-bottom {
  20%     { transform: translate3d(0, 10px, 0) scaleY(.985); }
  40%,45% { opacity: 1; transform: translate3d(0, -20px, 0) scaleY(.9); }
  to      { opacity: 0; transform: translate3d(0, 2000px, 0) scaleY(5); }
}
@keyframes santy-bounce-out-to-left {
  20% { opacity: 1; transform: translate3d(20px, 0, 0) scaleX(.9); }
  to  { opacity: 0; transform: translate3d(-2000px, 0, 0) scaleX(2); }
}
@keyframes santy-bounce-out-to-right {
  20% { opacity: 1; transform: translate3d(-20px, 0, 0) scaleX(.9); }
  to  { opacity: 0; transform: translate3d(2000px, 0, 0) scaleX(2); }
}

/* ── Slide In ── */
@keyframes santy-slide-in-from-top    { from { visibility: visible; transform: translate3d(0, -100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-bottom { from { visibility: visible; transform: translate3d(0,  100%, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-left   { from { visibility: visible; transform: translate3d(-100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }
@keyframes santy-slide-in-from-right  { from { visibility: visible; transform: translate3d( 100%, 0, 0); } to { transform: translate3d(0, 0, 0); } }

/* ── Slide Out ── */
@keyframes santy-slide-out-to-top    { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
@keyframes santy-slide-out-to-bottom { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0,  100%, 0); } }
@keyframes santy-slide-out-to-left   { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
@keyframes santy-slide-out-to-right  { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d( 100%, 0, 0); } }

/* ── Zoom In ── */
@keyframes santy-zoom-in { from { opacity: 0; transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } }
@keyframes santy-zoom-in-from-top {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-bottom {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,1000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-left {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}
@keyframes santy-zoom-in-from-right {
  from { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(1000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
  60%  { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-10px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
}

/* ── Zoom Out ── */
@keyframes santy-zoom-out { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(.3,.3,.3); } to { opacity: 0; } }
@keyframes santy-zoom-out-to-top {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,-2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-bottom {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(0,-60px,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(0,2000px,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-left {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(-2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}
@keyframes santy-zoom-out-to-right {
  40% { opacity: 1; transform: scale3d(.475,.475,.475) translate3d(-42px,0,0); animation-timing-function: cubic-bezier(.175,.885,.32,1); }
  to  { opacity: 0; transform: scale3d(.1,.1,.1) translate3d(2000px,0,0); animation-timing-function: cubic-bezier(.55,.055,.675,.19); }
}

/* ── Flip ── */
@keyframes santy-flip {
  from { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,-360deg); animation-timing-function: ease-out; }
  40%  { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-190deg); animation-timing-function: ease-out; }
  50%  { transform: perspective(400px) scale3d(1,1,.5) translate3d(0,0,150px) rotate3d(0,1,0,-170deg); animation-timing-function: ease-in; }
  80%  { transform: perspective(400px) scale3d(.95,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
  to   { transform: perspective(400px) scale3d(1,1,1) rotate3d(0,1,0,0deg); animation-timing-function: ease-in; }
}
@keyframes santy-flip-in-x {
  from { transform: perspective(400px) rotate3d(1,0,0,90deg); animation-timing-function: ease-in; opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(400px) rotate3d(1,0,0,10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(1,0,0,-5deg); }
  to   { transform: perspective(400px); }
}
@keyframes santy-flip-in-y {
  from { transform: perspective(400px) rotate3d(0,1,0,90deg); animation-timing-function: ease-in; opacity: 0; }
  40%  { transform: perspective(400px) rotate3d(0,1,0,-20deg); animation-timing-function: ease-in; }
  60%  { transform: perspective(400px) rotate3d(0,1,0,10deg); opacity: 1; }
  80%  { transform: perspective(400px) rotate3d(0,1,0,-5deg); }
  to   { transform: perspective(400px); }
}
@keyframes santy-flip-out-x {
  from { transform: perspective(400px); }
  30%  { transform: perspective(400px) rotate3d(1,0,0,-20deg); opacity: 1; }
  to   { transform: perspective(400px) rotate3d(1,0,0,90deg); opacity: 0; }
}
@keyframes santy-flip-out-y {
  from { transform: perspective(400px); }
  30%  { transform: perspective(400px) rotate3d(0,1,0,-15deg); opacity: 1; }
  to   { transform: perspective(400px) rotate3d(0,1,0,90deg); opacity: 0; }
}

/* ── Rotate In ── */
@keyframes santy-rotate-in                   { from { transform: rotate3d(0,0,1,-200deg); opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-left     { from { transform: rotate3d(0,0,1,-45deg);  opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-top-right    { from { transform: rotate3d(0,0,1,45deg);   opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-left  { from { transform: rotate3d(0,0,1,45deg);   opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }
@keyframes santy-rotate-in-from-bottom-right { from { transform: rotate3d(0,0,1,-90deg);  opacity: 0; } to { transform: translate3d(0,0,0); opacity: 1; } }

/* ── Rotate Out ── */
@keyframes santy-rotate-out                   { from { opacity: 1; } to { transform: rotate3d(0,0,1,200deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-top-left       { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }
@keyframes santy-rotate-out-to-top-right      { from { opacity: 1; } to { transform: rotate3d(0,0,1,90deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-left    { from { opacity: 1; } to { transform: rotate3d(0,0,1,45deg);  opacity: 0; } }
@keyframes santy-rotate-out-to-bottom-right   { from { opacity: 1; } to { transform: rotate3d(0,0,1,-45deg); opacity: 0; } }

/* ── Back Entrances ── */
@keyframes santy-back-in-from-top    { 0% { transform: translateY(-1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-bottom { 0% { transform: translateY( 1200px) scale(.7); opacity: .7; } 80% { transform: translateY(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-left   { 0% { transform: translateX(-2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }
@keyframes santy-back-in-from-right  { 0% { transform: translateX( 2000px) scale(.7); opacity: .7; } 80% { transform: translateX(0) scale(.7); opacity: .7; } 100% { transform: scale(1); opacity: 1; } }

/* ── Back Exits ── */
@keyframes santy-back-out-to-top    { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0)     scale(.7); opacity: .7; } 100% { transform: translateY(-700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-bottom { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateY(0)     scale(.7); opacity: .7; } 100% { transform: translateY( 700px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-left   { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0)     scale(.7); opacity: .7; } 100% { transform: translateX(-2000px) scale(.7); opacity: .7; } }
@keyframes santy-back-out-to-right  { 0% { transform: scale(1); opacity: 1; } 20% { transform: translateX(0)     scale(.7); opacity: .7; } 100% { transform: translateX( 2000px) scale(.7); opacity: .7; } }

/* ── Light Speed ── */
@keyframes santy-speed-in-from-left  { from { transform: translate3d(-100%,0,0) skewX(30deg); opacity: 0; } 60% { transform: skewX(-20deg); opacity: 1; } 80% { transform: skewX(5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-in-from-right { from { transform: translate3d(100%,0,0) skewX(-30deg); opacity: 0; } 60% { transform: skewX(20deg); opacity: 1; } 80% { transform: skewX(-5deg); } to { transform: translate3d(0,0,0); } }
@keyframes santy-speed-out-to-left   { from { opacity: 1; } to { transform: translate3d(-100%,0,0) skewX(-30deg); opacity: 0; } }
@keyframes santy-speed-out-to-right  { from { opacity: 1; } to { transform: translate3d(100%,0,0) skewX(30deg); opacity: 0; } }

/* ── Specials ── */
@keyframes santy-hinge {
  0%     { animation-timing-function: ease-in-out; }
  20%,60% { transform: rotate3d(0,0,1,80deg); animation-timing-function: ease-in-out; }
  40%,80% { transform: rotate3d(0,0,1,60deg); animation-timing-function: ease-in-out; opacity: 1; }
  to     { transform: translate3d(0,700px,0); opacity: 0; }
}
@keyframes santy-jack-in-box {
  from { opacity: 0; transform: scale(.1) rotate(30deg); }
  50%  { transform: rotate(-10deg); }
  70%  { transform: rotate(3deg); }
  to   { opacity: 1; transform: scale(1); }
}
@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> */


/* ═════════════════════════════════════════════════════════════════════════
   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;
  }
}