:root { --sfx-distance-sm: 16px;
--sfx-distance-md: 32px;
--sfx-distance-lg: 64px; --sfx-scale-sm: 0.9;
--sfx-scale-md: 0.8;
--sfx-scale-lg: 0.5; --sfx-rotate-sm: 5deg;
--sfx-rotate-md: 10deg;
--sfx-rotate-lg: 25deg; --sfx-blur-sm: 8px;
--sfx-blur-md: 20px;
--sfx-blur-lg: 40px; --sfx-ease-bounce:   cubic-bezier(0.68, -0.55, 0.265, 1.55);
--sfx-ease-back:     cubic-bezier(0.34, 1.56, 0.64, 1);
--sfx-ease-elastic:  cubic-bezier(0.5, -0.5, 0.1, 1.5);
--sfx-ease-out-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
} .sfx-scroll { animation-timeline: view(); --sfx-range-start: entry 0%;
--sfx-range-end:   cover 50%;
animation-range: var(--sfx-range-start) var(--sfx-range-end); animation-fill-mode: both;
animation-timing-function: linear; animation-duration: 1ms; --sfx-distance: var(--sfx-distance-md);
--sfx-scale:    var(--sfx-scale-md);
--sfx-rotate:   var(--sfx-rotate-md);
--sfx-blur:     var(--sfx-blur-md);
} @supports not (animation-timeline: view()) {
.sfx-scroll {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
} @media (prefers-reduced-motion: reduce) {
.sfx-scroll {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
} .sfx-reveal { animation-play-state: paused;
animation-fill-mode: both;
animation-duration: var(--sfx-duration, var(--sfx-duration-default, 300ms));
animation-delay: var(--sfx-delay, 0ms);
animation-timing-function: var(--sfx-ease-default, var(--sfx-ease-out-soft));
--sfx-trigger: var(--sfx-trigger-default, 75%); --sfx-distance: var(--sfx-distance-md);
--sfx-scale:    var(--sfx-scale-md);
--sfx-rotate:   var(--sfx-rotate-md);
--sfx-blur:     var(--sfx-blur-md); } .sfx-reveal.sfx-revealed {
animation-play-state: running;
} @media (prefers-reduced-motion: reduce) {
.sfx-reveal {
animation: none !important;
opacity: 1 !important;
transform: none !important;
filter: none !important;
}
} .sfx-fade-in    { animation-name: sfx-fade-in; }
.sfx-fade-up    { animation-name: sfx-fade-up; }
.sfx-fade-down  { animation-name: sfx-fade-down; }
.sfx-fade-left  { animation-name: sfx-fade-left; }
.sfx-fade-right { animation-name: sfx-fade-right; }
@keyframes sfx-fade-in {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes sfx-fade-up {
from { opacity: 0; transform: translateY(var(--sfx-distance)); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-fade-down {
from { opacity: 0; transform: translateY(calc(var(--sfx-distance) * -1)); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-fade-left {
from { opacity: 0; transform: translateX(var(--sfx-distance)); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-fade-right {
from { opacity: 0; transform: translateX(calc(var(--sfx-distance) * -1)); }
to   { opacity: 1; transform: none; }
} .sfx-slide-up    { animation-name: sfx-slide-up; }
.sfx-slide-down  { animation-name: sfx-slide-down; }
.sfx-slide-left  { animation-name: sfx-slide-left; }
.sfx-slide-right { animation-name: sfx-slide-right; }
@keyframes sfx-slide-up {
from { transform: translateY(var(--sfx-distance)); }
to   { transform: none; }
}
@keyframes sfx-slide-down {
from { transform: translateY(calc(var(--sfx-distance) * -1)); }
to   { transform: none; }
}
@keyframes sfx-slide-left {
from { transform: translateX(var(--sfx-distance)); }
to   { transform: none; }
}
@keyframes sfx-slide-right {
from { transform: translateX(calc(var(--sfx-distance) * -1)); }
to   { transform: none; }
} .sfx-scale-in  { animation-name: sfx-scale-in; }
.sfx-scale-out { animation-name: sfx-scale-out; }
.sfx-zoom-in   { animation-name: sfx-zoom-in; }
@keyframes sfx-scale-in {
from { opacity: 0; transform: scale(var(--sfx-scale)); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-scale-out {
from { opacity: 0; transform: scale(1.2); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-zoom-in {
from { opacity: 0; transform: scale(var(--sfx-scale-lg)); }
to   { opacity: 1; transform: none; }
} .sfx-rotate { animation-name: sfx-rotate; }
.sfx-flip-x { animation-name: sfx-flip-x; }
.sfx-flip-y { animation-name: sfx-flip-y; }
@keyframes sfx-rotate {
from { opacity: 0; transform: rotate(calc(var(--sfx-rotate) * -1)); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-flip-x {
from { opacity: 0; transform: perspective(1000px) rotateX(90deg); }
to   { opacity: 1; transform: none; }
}
@keyframes sfx-flip-y {
from { opacity: 0; transform: perspective(1000px) rotateY(90deg); }
to   { opacity: 1; transform: none; }
} .sfx-blur-in { animation-name: sfx-blur-in; }
@keyframes sfx-blur-in {
from { opacity: 0; filter: blur(var(--sfx-blur)); }
to   { opacity: 1; filter: none; }
} .sfx-ease-linear    { animation-timing-function: linear; }
.sfx-ease-in        { animation-timing-function: ease-in; }
.sfx-ease-out       { animation-timing-function: ease-out; }
.sfx-ease-in-out    { animation-timing-function: ease-in-out; }
.sfx-ease-bounce    { animation-timing-function: var(--sfx-ease-bounce); }
.sfx-ease-back      { animation-timing-function: var(--sfx-ease-back); }
.sfx-ease-elastic   { animation-timing-function: var(--sfx-ease-elastic); }
.sfx-ease-out-soft  { animation-timing-function: var(--sfx-ease-out-soft); }  .sfx-start-0   { --sfx-range-start: entry 0%;   }
.sfx-start-10  { --sfx-range-start: entry 10%;  }
.sfx-start-20  { --sfx-range-start: entry 20%;  }
.sfx-start-30  { --sfx-range-start: entry 30%;  }
.sfx-start-40  { --sfx-range-start: entry 40%;  }
.sfx-start-50  { --sfx-range-start: entry 50%;  }
.sfx-start-60  { --sfx-range-start: entry 60%;  }
.sfx-start-70  { --sfx-range-start: entry 70%;  }
.sfx-start-80  { --sfx-range-start: entry 80%;  }
.sfx-start-90  { --sfx-range-start: entry 90%;  }
.sfx-start-100 { --sfx-range-start: entry 100%; } .sfx-end-0   { --sfx-range-end: cover 0%;   }
.sfx-end-10  { --sfx-range-end: cover 10%;  }
.sfx-end-20  { --sfx-range-end: cover 20%;  }
.sfx-end-30  { --sfx-range-end: cover 30%;  }
.sfx-end-40  { --sfx-range-end: cover 40%;  }
.sfx-end-50  { --sfx-range-end: cover 50%;  }
.sfx-end-60  { --sfx-range-end: cover 60%;  }
.sfx-end-70  { --sfx-range-end: cover 70%;  }
.sfx-end-80  { --sfx-range-end: cover 80%;  }
.sfx-end-90  { --sfx-range-end: cover 90%;  }
.sfx-end-100 { --sfx-range-end: cover 100%; } .sfx-dur-100  { --sfx-duration: 100ms;  }
.sfx-dur-150  { --sfx-duration: 150ms;  }
.sfx-dur-300  { --sfx-duration: 300ms;  }
.sfx-dur-500  { --sfx-duration: 500ms;  }
.sfx-dur-700  { --sfx-duration: 700ms;  }
.sfx-dur-800  { --sfx-duration: 800ms;  }
.sfx-dur-1000 { --sfx-duration: 1000ms; }
.sfx-dur-1200 { --sfx-duration: 1200ms; }
.sfx-dur-1500 { --sfx-duration: 1500ms; }
.sfx-dur-2000 { --sfx-duration: 2000ms; }
.sfx-dur-3000 { --sfx-duration: 3000ms; }
.sfx-dur-4000 { --sfx-duration: 4000ms; }
.sfx-dur-5000 { --sfx-duration: 5000ms; }
.sfx-dur-6000 { --sfx-duration: 6000ms; } .sfx-delay-0    { --sfx-delay: 0ms;    }
.sfx-delay-100  { --sfx-delay: 100ms;  }
.sfx-delay-200  { --sfx-delay: 200ms;  }
.sfx-delay-300  { --sfx-delay: 300ms;  }
.sfx-delay-400  { --sfx-delay: 400ms;  }
.sfx-delay-500  { --sfx-delay: 500ms;  }
.sfx-delay-700  { --sfx-delay: 700ms;  }
.sfx-delay-1000 { --sfx-delay: 1000ms; }
.sfx-delay-1500 { --sfx-delay: 1500ms; }
.sfx-delay-2000 { --sfx-delay: 2000ms; } .sfx-scroll.sfx-amount-sm,
.sfx-reveal.sfx-amount-sm {
--sfx-distance: var(--sfx-distance-sm);
--sfx-scale:    var(--sfx-scale-sm);
--sfx-rotate:   var(--sfx-rotate-sm);
--sfx-blur:     var(--sfx-blur-sm);
}
.sfx-scroll.sfx-amount-lg,
.sfx-reveal.sfx-amount-lg {
--sfx-distance: var(--sfx-distance-lg);
--sfx-scale:    var(--sfx-scale-lg);
--sfx-rotate:   var(--sfx-rotate-lg);
--sfx-blur:     var(--sfx-blur-lg);
} .sfx-stagger        { --sfx-stagger-step: var(--sfx-stagger-step-default, 80ms);  }
.sfx-stagger-fast   { --sfx-stagger-step: 40ms;  }
.sfx-stagger-slow   { --sfx-stagger-step: 160ms; }
.sfx-stagger-xslow  { --sfx-stagger-step: 240ms; } :is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(1)  { --sfx-delay: calc(var(--sfx-stagger-step) * 0);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(2)  { --sfx-delay: calc(var(--sfx-stagger-step) * 1);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(3)  { --sfx-delay: calc(var(--sfx-stagger-step) * 2);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(4)  { --sfx-delay: calc(var(--sfx-stagger-step) * 3);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(5)  { --sfx-delay: calc(var(--sfx-stagger-step) * 4);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(6)  { --sfx-delay: calc(var(--sfx-stagger-step) * 5);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(7)  { --sfx-delay: calc(var(--sfx-stagger-step) * 6);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(8)  { --sfx-delay: calc(var(--sfx-stagger-step) * 7);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(9)  { --sfx-delay: calc(var(--sfx-stagger-step) * 8);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(10) { --sfx-delay: calc(var(--sfx-stagger-step) * 9);  }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(11) { --sfx-delay: calc(var(--sfx-stagger-step) * 10); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(12) { --sfx-delay: calc(var(--sfx-stagger-step) * 11); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(13) { --sfx-delay: calc(var(--sfx-stagger-step) * 12); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(14) { --sfx-delay: calc(var(--sfx-stagger-step) * 13); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(15) { --sfx-delay: calc(var(--sfx-stagger-step) * 14); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(16) { --sfx-delay: calc(var(--sfx-stagger-step) * 15); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(17) { --sfx-delay: calc(var(--sfx-stagger-step) * 16); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(18) { --sfx-delay: calc(var(--sfx-stagger-step) * 17); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(19) { --sfx-delay: calc(var(--sfx-stagger-step) * 18); }
:is(.sfx-stagger, .sfx-stagger-fast, .sfx-stagger-slow, .sfx-stagger-xslow) > .sfx-reveal:nth-child(20) { --sfx-delay: calc(var(--sfx-stagger-step) * 19); } .sfx-trigger-50 { --sfx-trigger: 50%; }
.sfx-trigger-60 { --sfx-trigger: 60%; }
.sfx-trigger-65 { --sfx-trigger: 65%; }
.sfx-trigger-70 { --sfx-trigger: 70%; }
.sfx-trigger-75 { --sfx-trigger: 75%; }
.sfx-trigger-80 { --sfx-trigger: 80%; }
.sfx-trigger-85 { --sfx-trigger: 85%; }
.sfx-trigger-90 { --sfx-trigger: 90%; }  :root {
--sfx-parallax-sm: 40px;
--sfx-parallax-md: 80px;
--sfx-parallax-lg: 160px;
}
.sfx-parallax {
animation-timeline: view();
animation-fill-mode: both;
animation-duration: 1ms;
will-change: transform;
}
.sfx-parallax-up-sm { animation-name: sfx-parallax-up; --sfx-parallax: var(--sfx-parallax-sm); }
.sfx-parallax-up-md { animation-name: sfx-parallax-up; --sfx-parallax: var(--sfx-parallax-md); }
.sfx-parallax-up-lg { animation-name: sfx-parallax-up; --sfx-parallax: var(--sfx-parallax-lg); }
.sfx-parallax-down-sm { animation-name: sfx-parallax-down; --sfx-parallax: var(--sfx-parallax-sm); }
.sfx-parallax-down-md { animation-name: sfx-parallax-down; --sfx-parallax: var(--sfx-parallax-md); }
.sfx-parallax-down-lg { animation-name: sfx-parallax-down; --sfx-parallax: var(--sfx-parallax-lg); }
@keyframes sfx-parallax-up {
from { transform: translateY(var(--sfx-parallax)); }
to   { transform: translateY(calc(var(--sfx-parallax) * -1)); }
}
@keyframes sfx-parallax-down {
from { transform: translateY(calc(var(--sfx-parallax) * -1)); }
to   { transform: translateY(var(--sfx-parallax)); }
}
@media (prefers-reduced-motion: reduce) {
.sfx-parallax {
animation: none !important;
transform: none !important;
}
}