/**
 * Scroll text effect
 *
 * Pôvodne WPCode snippet #49.
 */

.as-word-scroll,
                .as-word-scroll *,
                .as-word-scroll *::before,
                .as-word-scroll *::after {
                    box-sizing: border-box;
                }

                .as-word-scroll {
                    position: relative;
                    width: 100%;
                    background: #000;
                    color: #fff;
                    overflow: clip;
                    isolation: isolate;
                    padding: clamp(100px, 12vw, 180px) 0;
                }

                .as-word-scroll::before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    pointer-events: none;
                    background:
                        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03), transparent 26%),
                        linear-gradient(180deg, rgba(255,255,255,0.015), transparent 18%, transparent 82%, rgba(255,255,255,0.015));
                    z-index: 0;
                }

                .as-word-scroll__inner {
                    position: relative;
                    z-index: 1;
                    width: min(calc(100% - 48px), var(--as-max-width, 1480px));
                    margin: 0 auto;
                    display: grid;
                    grid-template-columns: auto minmax(0, 1fr);
                    align-items: start;
                    gap: clamp(20px, 4vw, 72px);
                }

                .as-word-scroll__heading {
                    position: sticky;
                    top: calc(50vh - 0.51em);
                    margin: 0;
                    align-self: start;
                    height: fit-content;
                    font-family: inherit !important;
                    font-size: clamp(40px, 6vw, 92px) !important;
                    line-height: 1.02 !important;
                    font-weight: 700 !important;
                    letter-spacing: -0.06em !important;
                    white-space: nowrap;
                    background: linear-gradient(
                        180deg,
                        rgba(255,255,255,1) 0%,
                        rgba(255,255,255,0.72) 100%
                    );
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                    filter: drop-shadow(0 0 24px rgba(255,255,255,0.08));
                }

                .as-word-scroll__list {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    min-width: 0;
                }

                .as-word-scroll__item {
                    position: relative;
                    margin: 0;
                    padding: 0;
                    font-family: inherit !important;
                    font-size: clamp(40px, 6vw, 92px);
                    line-height: 1.02;
                    font-weight: 700;
                    letter-spacing: -0.06em;
                    color: var(--item-color, #ff3600);
                    opacity: 0.16;
                    transform: translateY(0) scale(0.98);
                    transition:
                        opacity .28s ease,
                        filter .28s ease,
                        transform .28s ease,
                        color .28s ease,
                        text-shadow .28s ease;
                    will-change: opacity, filter, transform;
                }

                .as-word-scroll__item.is-active {
                    opacity: 1;
                    filter: brightness(1.2);
                    transform: translateY(0) scale(1);
                    text-shadow: 0 0 26px color-mix(in srgb, currentColor 22%, transparent);
                }

                .as-word-scroll__item.is-last {
                    background: linear-gradient(
                        180deg,
                        rgba(255,255,255,1) 0%,
                        rgba(255,255,255,0.72) 100%
                    );
                    -webkit-background-clip: text;
                    background-clip: text;
                    color: transparent;
                }

                @supports (animation-timeline: view()) {
                    .as-word-scroll[data-animate="true"] .as-word-scroll__item {
                        animation-name: asWordBrighten;
                        animation-fill-mode: both;
                        animation-timing-function: linear;
                        animation-range: cover calc(50% - 0.7lh) calc(50% + 0.7lh);
                        animation-timeline: view();
                    }

                    @keyframes asWordBrighten {
                        0% {
                            opacity: 0.16;
                            transform: scale(0.98);
                        }
                        50% {
                            opacity: 1;
                            transform: scale(1);
                            filter: brightness(1.2);
                        }
                        100% {
                            opacity: 0.16;
                            transform: scale(0.98);
                        }
                    }
                }

                .as-word-scroll__sr-only {
                    position: absolute;
                    width: 1px;
                    height: 1px;
                    padding: 0;
                    margin: -1px;
                    overflow: hidden;
                    clip: rect(0, 0, 0, 0);
                    white-space: nowrap;
                    border: 0;
                }

                @media (max-width: 1024px) {
                    .as-word-scroll {
                        padding: clamp(80px, 10vw, 120px) 0;
                    }

                    .as-word-scroll__inner {
                        width: min(calc(100% - 32px), var(--as-max-width, 1480px));
                        gap: 18px;
                    }

                    .as-word-scroll__heading {
                        font-size: clamp(30px, 5vw, 68px) !important;
                    }

                    .as-word-scroll__item {
                        font-size: clamp(30px, 5vw, 68px);
                    }
                }

                @media (max-width: 767px) {
                    .as-word-scroll__inner {
                        grid-template-columns: 1fr;
                        gap: 16px;
                    }

                    .as-word-scroll__heading {
                        position: sticky;
                        top: 18px;
                        z-index: 3;
                        font-size: clamp(28px, 8.2vw, 46px) !important;
                        line-height: 1.02 !important;
                        font-weight: 700 !important;
                        letter-spacing: -0.06em !important;
                        white-space: normal;
                        max-width: 100%;
                        padding-bottom: 8px;
                    }

                    .as-word-scroll__item {
                        font-size: clamp(28px, 8.2vw, 46px);
                    }
                }

                @media (prefers-reduced-motion: reduce) {
                    .as-word-scroll__item {
                        animation: none !important;
                        transition: none !important;
                    }
                }