/*
 * MARINEOS-PUBLIC-SMARTPHONE-RESTORE-OFFICIAL-ANIMATIONS-FLICKER-ONLY-ALPHABET-OVERFLOW-ROOT-FIX-205
 * Stable Ocean Text: the real glyph is always opaque. The animated ocean gradient is a
 * presentation-only overlay. If WebKit drops/re-rasterizes the clipped overlay, the base glyph
 * remains visible, so the title never flashes to transparent.
 */
.mos-home .marineos-ocean-text,
.mos-subpage .marineos-ocean-text {
    position: relative;
    color: #75a7ff !important;
    -webkit-text-fill-color: currentColor !important;
    pointer-events: none;
    isolation: isolate;
}

/* The flowing layer never participates in layout or text measurement. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .mos-home .marineos-ocean-text::after,
    .mos-subpage .marineos-ocean-text::after {
        content: attr(data-mos-ocean-text);
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        overflow: visible;
        white-space: inherit;
        font: inherit;
        font-weight: inherit;
        font-style: inherit;
        line-height: inherit;
        letter-spacing: inherit;
        text-align: inherit;
        text-transform: inherit;
        background-image: linear-gradient(
            90deg,
            var(--mos-cyan, #21d4fd) 0%,
            #75a7ff 32%,
            #d9fbff 50%,
            #75a7ff 68%,
            var(--mos-cyan, #21d4fd) 100%
        );
        background-size: 220% 100%;
        background-position: 0% 50%;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent !important;
        color: transparent !important;
        opacity: .98;
        animation: marineosOceanTextDrift 8s ease-in-out infinite alternate;
        animation-play-state: paused;
        pointer-events: none;
        will-change: auto;
    }

    .mos-home .marineos-ocean-text.is-ocean-active::after,
    .mos-subpage .marineos-ocean-text.is-ocean-active::after {
        animation-play-state: running;
    }
}

@keyframes marineosOceanTextDrift {
    from { background-position: 0% 50%; }
    to { background-position: 100% 50%; }
}

/* Smartphone: keep exactly the same ocean gradient design, but never make the real glyph
 * transparent. The overlay may repaint; the visible base text remains stable underneath. */
@media screen and (max-width: 782px) {
    .mos-home .marineos-ocean-text,
    .mos-subpage .marineos-ocean-text {
        opacity: 1 !important;
        will-change: auto !important;
    }
    .mos-home .marineos-ocean-text::after,
    .mos-subpage .marineos-ocean-text::after {
        will-change: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mos-home .marineos-ocean-text::after,
    .mos-subpage .marineos-ocean-text::after {
        animation: none !important;
        background-position: 50% 50%;
        will-change: auto !important;
    }
}