/** Shopify CDN: Minification failed

Line 58:109 Expected ":"

**/
/* GRADIENT ANIMATIONS */

/* FUNCTIONS */
.gradient-move { animation: gradientMove 8s ease infinite; background-size: 200% 200%; -webkit-background-size: 200% 200%; }
.gradient-animate-hue { background-size: 200% auto; -webkit-background-size: 200% auto; animation: hue 5s infinite linear; -webkit-animation: hue 5s infinite linear; }
.gradient-animate-size { --gradient-bg-size: 400%; background-size: 400% auto; -webkit-background-size: 400% auto; animation: gradient-size 10s infinite linear; -webkit-animation: gradient-size 10s infinite linear; }
.gradient-animate-size-slow { --gradient-bg-size: 200%; background-size: 200% auto; -webkit-background-size: 200% auto; animation: gradient-size 10s infinite linear; -webkit-animation: gradient-size-slow 10s infinite linear; }


/* ANIMATION ACTION  */
.animated-text-background.active { background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }

/* BACKGROUNDS */
.animated-gradient-background { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink));
    background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; color: white; padding: 0 0.5em; }
.animated-gradient-background-auto { background: #d25b73; background: linear-gradient( 90deg,rgba(210, 91, 115, 1) 0%, rgba(255, 111, 97, 1) 19%, rgba(160, 94, 181, 1) 40%, rgba(44, 86, 151, 1) 57%, rgba(0, 171, 132, 1) 79%, rgba(241, 180, 52, 1) 100%);
    background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }

/* UNDERLINES */
.animated-underline-gradient-rainbow.active { background-image: linear-gradient ( transparent 60%, var(--coral), var(--yellow), var(--blue), var(--teal), var(--purple), var(--pink));
    background-repeat: no-repeat; background-size: 0% 100%; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; 
    width: fit-content; background-position: left 100%;}
    
.animated-underline-gradient.active { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink) );
    background-size: 100% max(0.2em, 3px); background-repeat: no-repeat; background-position: 0 100%; animation: gradient-underline-reveal 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }
    
.animated-underline-pink.active { background-image: linear-gradient( transparent 60%, var(--pink) 50%, var(--pink) 100%); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content;}
.animated-underline-purple.active { background-image: linear-gradient( transparent 60%, var(--purple) 50%, var(--purple) 100% ); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; }
.animated-underline-yellow.active { background-image: linear-gradient( transparent 60%, var(--yellow) 50%, var(--yellow) 100% ); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; }
.animated-underline-teal.active { background-image: linear-gradient( transparent 60%, var(--teal) 50%, var(--teal) 100%); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; }
.animated-underline-blue.active { background-image: linear-gradient( transparent 60%, var(--blue) 50%, var(--blue) 100%); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; }
.animated-underline-coral.active { background-image: linear-gradient( transparent 60%, var(--coral) 50%, var(--coral) 100%); background-repeat: no-repeat; background-size: 0% 100%;
    animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; }

/* TEXT HIGHLIGHT  */
.animated-gradient-highlight.active { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink)); 
    background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; color: white; padding: 0 0.5em; }
  
.highlight-gradient-moving { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink) ); 
    background-size: 200% auto; -webkit-background-size: 200% auto; animation: moving-highlight 7s infinite linear; -webkit-animation: moving-highlight 7s infinite linear; color: white; padding: 0 0.5em; }

/* GRADIENT TEXT */
.gradient-text-moving { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; animation: gradientMove 8s ease infinite; 
    background-size: 200% 200%; }

/* TEXT REVEALS */
.stagger-item-opacity-transform {  opacity: 0; transform: translateY(8px); transition: opacity .5s; transform .5s; transition-delay: var(--stagger,0ms); }
.stagger-item-opacity-transform.active { opacity: 1; transform: translateY(0); }

/* SPAN */
.animated-text-background-span.active span { background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }
.animated-underline-gradient-rainbow-span.active span { background-image: linear-gradient( transparent 60%, var(--coral), var(--yellow), var(--blue), var(--teal), var(--purple), var(--pink));
    background-repeat: no-repeat; background-size: 0% 100%; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; width: fit-content; background-position: left 100%; }
.animated-underline-gradient-span.active span { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink));
    background-size: 100% max(0.2em, 3px); background-repeat: no-repeat; background-position: 0 100%; animation: gradient-underline-reveal 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }
.animated-gradient-highlight-span.active span { background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink));
    background-size: 0 100%; background-repeat: no-repeat; animation: animatedBackground 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; color: white; padding: 0 0.5em; }

/* ZOOM */
/* base state */
.zoom-item { transform: scale(0.85); /* start slightly smaller */ opacity: 0; /* hidden initially */ transition: transform 1.5s ease, opacity 1.5s ease; /* 1.5s = nice slow zoom */ }

/* active state when in view */
.zoom-item.active { transform: scale(1.5); /* full size */ opacity: 1; /* fade in */ }

/* ZOOM */
/* base state */
.zoom-div { transform: scale(0.85); /* start slightly smaller */ opacity: 0; /* hidden initially */ transition: transform 1.5s ease, opacity 1.5s ease; /* 1.5s = nice slow zoom */ }

/* active state when in view */
.zoom-div.active { transform: scale(1.2); /* full size */ opacity: 1; /* fade in */ }

@media only screen and (max-width:767px) { .zoom-div.active { transform: scale(1.0); /* full size */ } }
    
/* base state */
.gradient-zoom {
    background-image: -webkit-linear-gradient(180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; display: inline-block; background-size: 100%;
    transform: scale(0.1); /* start slightly smaller */ opacity: 0; /* hidden initially */ transition: transform 2s ease, opacity 1s ease; /* 1.5s = nice slow zoom */
    margin-block-start: 4rem; }
    
/* active state when in view */
.gradient-zoom.active { transform: scale(2.5); /* full size */ opacity: 1; /* fade in */ }
.animate-round-gradient { pointer-events: none; user-select: none; width: 100%; height: 100%; margin: 0 auto; position: absolute; z-index: 1; inset: 0; bottom: 40px; 
    background: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink));
    background-image: -webkit-linear-gradient( 180deg, var(--pink), var(--purple), var(--coral), var(--teal), var(--blue), var(--yellow), var(--pink)); }


/* NEW! */
.underline-move, .underline-reveal { animation: gradient-underline 2s cubic-bezier(0.645, 0.045, 0.355, 1) 0.5s forwards; }