/* Public heading motion layer. */
:root {
    --dyc-motion-pink: var(--pink-strong, #ff5da3);
    --dyc-motion-pink-soft: var(--pink-soft, #ffd3e8);
    --dyc-motion-blue: var(--blue, #8fd4ff);
    --dyc-motion-violet: var(--violet, #d8cbff);
    --dyc-motion-ink: #5a3b5f;
}

.dyc-text-motion {
    position: relative;
    isolation: isolate;
    color: var(--dyc-motion-ink);
    background:
        linear-gradient(
            92deg,
            var(--dyc-motion-ink) 0%,
            var(--dyc-motion-pink) 22%,
            #ff92c6 36%,
            var(--dyc-motion-blue) 56%,
            var(--dyc-motion-violet) 70%,
            var(--dyc-motion-pink) 88%,
            var(--dyc-motion-ink) 100%
        );
    background-size: 280% 100%;
    -webkit-text-fill-color: currentColor !important;
    filter:
        drop-shadow(0 10px 22px rgba(255, 105, 180, 0.14))
        drop-shadow(0 1px 0 rgba(255, 255, 255, 0.72));
    animation:
        dycTextMotionShine 7.2s ease-in-out infinite,
        dycTextMotionBreath 4.8s ease-in-out infinite;
}

.dyc-text-motion--hero {
    color: #f24f9d;
    background:
        linear-gradient(
            92deg,
            #f24f9d 0%,
            #ff84c2 24%,
            #fff2fb 34%,
            #75c9ff 54%,
            #d9c6ff 70%,
            #ff68ae 100%
        );
    background-size: 320% 100%;
    filter:
        drop-shadow(0 4px 12px rgba(255, 255, 255, 0.9))
        drop-shadow(0 18px 34px rgba(255, 105, 180, 0.22));
}

.dyc-text-motion--letters {
    background: none !important;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.dyc-text-motion::before,
.dyc-text-motion::after {
    content: "";
    position: absolute;
    z-index: -1;
    pointer-events: none;
    border-radius: 999px;
    opacity: 0;
    background:
        radial-gradient(circle, rgba(255, 255, 255, 0.98) 0 18%, rgba(255, 157, 204, 0.74) 19% 36%, transparent 38%),
        radial-gradient(circle, rgba(143, 212, 255, 0.82) 0 20%, transparent 22%);
    filter: blur(0.1px);
}

.dyc-text-motion::before {
    width: 0.38em;
    height: 0.38em;
    top: -0.28em;
    right: 7%;
    animation: dycTextMotionSparkle 3.6s ease-in-out infinite;
}

.dyc-text-motion::after {
    width: 0.28em;
    height: 0.28em;
    left: 4%;
    bottom: -0.12em;
    animation: dycTextMotionSparkle 4.2s ease-in-out 0.8s infinite;
}

.dyc-text-motion--letters .dyc-text-letter {
    display: inline-block;
    white-space: pre;
    background:
        linear-gradient(
            92deg,
            var(--dyc-motion-ink) 0%,
            var(--dyc-motion-pink) 24%,
            #ff92c6 42%,
            var(--dyc-motion-blue) 66%,
            var(--dyc-motion-pink) 100%
        );
    background-size: 240% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
    transform-origin: 50% 72%;
    animation:
        dycTextMotionShine 7.2s ease-in-out infinite,
        dycTextMotionLetter 2.9s ease-in-out infinite;
    will-change: transform;
}

.dyc-text-motion--hero.dyc-text-motion--letters .dyc-text-letter {
    background:
        linear-gradient(
            92deg,
            #f24f9d 0%,
            #ff84c2 26%,
            #75c9ff 58%,
            #d9c6ff 76%,
            #ff68ae 100%
        );
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: inherit !important;
    -webkit-text-fill-color: currentColor !important;
}

.dyc-text-motion--section {
    animation-duration: 8s, 5.2s;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    /* Keep a real text fill so heading effects cannot render as invisible text. */
    .dyc-text-motion:not(.dyc-text-motion--letters) {
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: currentColor !important;
    }

    .dyc-text-motion--letters .dyc-text-letter {
        color: inherit !important;
        -webkit-text-fill-color: currentColor !important;
    }
}

@keyframes dycTextMotionShine {
    0%, 100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

@keyframes dycTextMotionBreath {
    0%, 100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -1px, 0);
    }
}

@keyframes dycTextMotionLetter {
    0%, 100% {
        transform: translate3d(0, 0, 0) rotate(0deg);
    }

    45% {
        transform: translate3d(0, -0.08em, 0) rotate(-1.2deg);
    }

    70% {
        transform: translate3d(0, 0.02em, 0) rotate(0.8deg);
    }
}

@keyframes dycTextMotionSparkle {
    0%, 100% {
        opacity: 0;
        transform: scale(0.64) rotate(0deg);
    }

    36% {
        opacity: 0.95;
        transform: scale(1) rotate(14deg);
    }

    62% {
        opacity: 0.28;
        transform: scale(0.78) rotate(26deg);
    }
}

@media (max-width: 760px) {
    .dyc-text-motion::before {
        right: 3%;
    }

    .dyc-text-motion::after {
        left: 2%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dyc-text-motion,
    .dyc-text-motion--letters .dyc-text-letter,
    .dyc-text-motion::before,
    .dyc-text-motion::after {
        animation: none !important;
    }

    .dyc-text-motion {
        transform: none !important;
    }

    .dyc-text-motion--letters .dyc-text-letter {
        background-position: 50% 50%;
    }

    .dyc-text-motion::before,
    .dyc-text-motion::after {
        display: none;
    }
}