/* ==========================================================================
   POLY BITS - Vanilla JS + CSS Ports of React Bits Components
   For Poly Impulse (Flask + Jinja2 architecture)
   Components: GradualBlur, ShinyText, BlurText, StrokeText
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GradualBlur
   -------------------------------------------------------------------------- */
.gradual-blur {
    pointer-events: none;
    transition: opacity 0.35s ease-out;
    isolation: isolate;
}

.gradual-blur-parent {
    overflow: hidden;
}

.gradual-blur-page {
    position: fixed !important;
    left: 0;
    right: 0;
    pointer-events: none;
}

.gradual-blur-inner {
    position: relative;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.gradual-blur-inner > div {
    -webkit-backdrop-filter: inherit;
    backdrop-filter: inherit;
    will-change: backdrop-filter;
}

@supports not (backdrop-filter: blur(1px)) {
    .gradual-blur-inner > div {
        background: rgba(10, 15, 12, 0.45);
        opacity: 0.5;
    }
}

/* --------------------------------------------------------------------------
   2. ShinyText
   -------------------------------------------------------------------------- */
.shiny-text {
    --shiny-base: rgba(255, 255, 255, 0.82);
    --shiny-color: #26ff5d;
    --shiny-speed: 2.8s;
    --shiny-spread: 120deg;
    display: inline-block;
    color: var(--shiny-base);
    background: linear-gradient(
        var(--shiny-spread),
        var(--shiny-base) 0%,
        var(--shiny-base) 35%,
        var(--shiny-color) 50%,
        var(--shiny-base) 65%,
        var(--shiny-base) 100%
    );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: polyShinyShimmer var(--shiny-speed) linear infinite;
    text-shadow: none;
}

.shiny-text--green {
    --shiny-base: #ffffff;
    --shiny-color: #26ff5d;
}

.shiny-text--gold {
    --shiny-base: #fffbeb;
    --shiny-color: #ffd700;
}

.shiny-text--cyan {
    --shiny-base: #f0fdf4;
    --shiny-color: #38bdf8;
}

.shiny-text--purple {
    --shiny-base: #fdf4ff;
    --shiny-color: #c084fc;
}

.shiny-text--hover-pause:hover {
    animation-play-state: paused;
}

.shiny-text--disabled {
    animation: none !important;
    background: none !important;
    -webkit-text-fill-color: initial !important;
    color: var(--shiny-base) !important;
}

@keyframes polyShinyShimmer {
    0% {
        background-position: 140% 0;
    }
    100% {
        background-position: -140% 0;
    }
}

/* --------------------------------------------------------------------------
   3. BlurText
   -------------------------------------------------------------------------- */
.blur-text {
    display: inline-block;
    opacity: 1;
}

.blur-text__element {
    display: inline-block;
    opacity: 0;
    filter: blur(12px);
    will-change: transform, filter, opacity;
    transition-property: opacity, filter, transform;
    transition-duration: var(--blur-duration, 0.45s);
    transition-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
    transition-delay: var(--blur-delay, 0s);
}

.blur-text__element--from-top {
    transform: translateY(-22px);
}

.blur-text__element--from-bottom {
    transform: translateY(22px);
}

.blur-text.is-visible .blur-text__element {
    opacity: 1;
    filter: blur(0px);
    transform: translateY(0);
}

.blur-text__space {
    display: inline-block;
    width: 0.28em;
}

/* --------------------------------------------------------------------------
   4. StrokeText
   -------------------------------------------------------------------------- */
.stroke-text {
    display: block;
    width: 100%;
    line-height: 0;
    position: relative;
}

.stroke-text--hover {
    cursor: pointer;
}

.stroke-text__svg {
    display: block;
    width: 100%;
    height: var(--stroke-text-height, 140px);
    overflow: visible;
}

.stroke-text__stroke,
.stroke-text__fill {
    user-select: none;
    font-family: inherit;
    font-weight: 800;
}