/*
 * keyframes.css - shared ambient + page animations.
 *
 * Two groups, both extracted from inline <style> blocks:
 *
 *   1. Ambient background - @keyframes gwbDrift and .gwb-blob, the three
 *      drifting colour blobs behind every page. Was duplicated
 *      byte-for-byte across 12 pages.
 *
 *   2. Per-page keyframes - one bespoke animation per feature page.
 *      Class names are page-scoped, so co-locating them is safe.
 */

/* ============ 1. Ambient background blobs ============ */
            @keyframes gwbDrift {

                0%,
                100% {
                    transform: translate3d(0, 0, 0) scale(1)
                }

                33% {
                    transform: translate3d(6%, -4%, 0) scale(1.12)
                }

                66% {
                    transform: translate3d(-5%, 5%, 0) scale(.94)
                }
            }

            .gwb-blob {
                animation: gwbDrift 20s ease-in-out infinite;
                will-change: transform;
            }

            @media (prefers-reduced-motion: reduce) {
                .gwb-blob {
                    animation: none !important;
                }
            }

/* ============ 2. Per-page keyframes ============ */

/* from api-docs.html  (gwbDrift) */
        @keyframes gwbDrift {

            0%,
            100% {
                transform: translate3d(0, 0, 0) scale(1)
            }

            33% {
                transform: translate3d(6%, -4%, 0) scale(1.12)
            }

            66% {
                transform: translate3d(-5%, 5%, 0) scale(.94)
            }
        }

        .gwb-blob {
            animation: gwbDrift 20s ease-in-out infinite;
            will-change: transform;
        }

        /* compact horizontal workflow wire */
        .mini-wire {
            background-image: repeating-linear-gradient(90deg, rgba(6, 182, 212, .8) 0 6px, transparent 6px 12px);
            background-size: 48px 2px;
            background-position-x: 0;
            background-repeat: no-repeat;
        }

        .mini-wire.run {
            animation: miniDash 1s linear infinite;
        }

        @keyframes miniDash {
            to {
                background-position-x: 48px;
            }
        }

        .eng-bar {
            background: linear-gradient(90deg, #06B6D4, #8B5CF6);
            animation: engFill 7s ease-in-out infinite alternate;
        }

        @keyframes engFill {
            from { width: 12%; }
            to { width: 100%; }
        }

        /* GSMWhale signature glow system */
        .whale-glow {
            box-shadow: 0 0 20px rgba(6, 182, 212, 0.18), 0 0 50px rgba(6, 182, 212, 0.08);
        }
        .ai-glow {
            box-shadow: 0 0 25px rgba(99, 102, 241, 0.18), 0 0 60px rgba(99, 102, 241, 0.08);
        }
        .whale-button {
            background: linear-gradient(135deg, #0284C7, #06B6D4);
            box-shadow: 0 8px 30px rgba(6, 182, 212, 0.20);
        }

        /* ── section water texture background + readability veil + faint grid ── */
        .gw-sec-water { position: relative; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
        .gw-sec-water::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -10;
            background-image:
                linear-gradient(180deg, rgba(248,250,252,.90) 0%, rgba(248,250,252,.55) 45%, rgba(248,250,252,.88) 100%),
                repeating-linear-gradient(0deg, rgba(148,163,184,.05) 0, rgba(148,163,184,.05) 1px, transparent 1px, transparent 56px),
                repeating-linear-gradient(90deg, rgba(148,163,184,.05) 0, rgba(148,163,184,.05) 1px, transparent 1px, transparent 56px),
                url('../images/bg.png');
            background-size: cover, auto, auto, cover;
            background-position: center;
            background-attachment: scroll, scroll, scroll, fixed;
            filter: saturate(1.15) hue-rotate(-6deg);
            pointer-events: none;
        }
        .dark .gw-sec-water::before {
            background-image:
                linear-gradient(180deg, rgba(5,9,20,.90) 0%, rgba(5,9,20,.58) 45%, rgba(5,9,20,.85) 100%),
                repeating-linear-gradient(0deg, rgba(148,163,184,.04) 0, rgba(148,163,184,.04) 1px, transparent 1px, transparent 56px),
                repeating-linear-gradient(90deg, rgba(148,163,184,.04) 0, rgba(148,163,184,.04) 1px, transparent 1px, transparent 56px),
                url('../images/darkbg.png');
            background-size: cover, auto, auto, cover;
            background-position: center;
            background-attachment: scroll, scroll, scroll, fixed;
            filter: saturate(1.15) hue-rotate(-6deg);
        }

        /* ── whale corner deco — light / dark, masked fade ── */
        .gw-whale::after {
            content: "";
            position: absolute;
            top: 50%;
            z-index: -10;
            width: min(30vw, 420px);
            aspect-ratio: 3 / 2;
            background-image: url('../images/whalelight.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: .32;
            pointer-events: none;
            transform: translateY(-50%);
            -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%);
                    mask-image: linear-gradient(90deg, transparent, #000 32%);
        }
        .dark .gw-whale::after {
            background-image: url('../images/whaledark.webp');
        }
        .gw-whale-right::after {
            right: 0;
        }
        .gw-whale-left::after {
            left: 0;
            transform: translateY(-50%) scaleX(-1);
            -webkit-mask-image: linear-gradient(270deg, transparent, #000 32%);
                    mask-image: linear-gradient(270deg, transparent, #000 32%);
        }

        @media (prefers-reduced-motion: reduce) {
            .gwb-blob,
            .mini-wire.run,
            .eng-bar {
                animation: none !important;
            }
            .gw-sec-water::before {
                background-attachment: scroll;
            }
        }

/* from auto-backup.html  (gabBar) */
                                @keyframes gabBar {
                                    0% {
                                        width: 0%;
                                    }

                                    72% {
                                        width: 100%;
                                    }

                                    100% {
                                        width: 100%;
                                    }
                                }

                                @keyframes gabTick {

                                    0%,
                                    40% {
                                        opacity: 0;
                                        transform: scale(.6);
                                    }

                                    55% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }

                                    100% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }
                                }

                                @keyframes gabRow {

                                    0%,
                                    30% {
                                        opacity: .35;
                                    }

                                    45%,
                                    100% {
                                        opacity: 1;
                                    }
                                }

                                @keyframes gabLift {

                                    0%,
                                    100% {
                                        transform: translateY(0);
                                        opacity: .55;
                                    }

                                    50% {
                                        transform: translateY(-5px);
                                        opacity: 1;
                                    }
                                }

                                @keyframes gabPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                .gab-bar {
                                    animation: gabBar 6s cubic-bezier(.4, 0, .3, 1) infinite;
                                }

                                .gab-tick {
                                    animation: gabTick 6s ease-out infinite;
                                }

                                .gab-row {
                                    animation: gabRow 6s ease-out infinite;
                                }

                                .gab-lift {
                                    animation: gabLift 2.4s ease-in-out infinite;
                                }

                                .gab-pulse {
                                    animation: gabPulse 1.6s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .gab-bar,
                                    .gab-tick,
                                    .gab-row,
                                    .gab-lift,
                                    .gab-pulse {
                                        animation: none !important;
                                    }

                                    .gab-bar {
                                        width: 100%;
                                    }

                                    .gab-tick {
                                        opacity: 1;
                                        transform: none;
                                    }
                                }

/* from file-pass.html  (gfpRow) */
                                @keyframes gfpRow {

                                    0%,
                                    18% {
                                        opacity: .3;
                                        transform: translateY(3px);
                                    }

                                    35%,
                                    100% {
                                        opacity: 1;
                                        transform: translateY(0);
                                    }
                                }

                                @keyframes gfpCopy {

                                    0%,
                                    42% {
                                        opacity: 0;
                                        transform: scale(.6);
                                    }

                                    55% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }

                                    78% {
                                        opacity: 1;
                                    }

                                    92%,
                                    100% {
                                        opacity: 0;
                                        transform: scale(1);
                                    }
                                }

                                @keyframes gfpMask {

                                    0%,
                                    30% {
                                        opacity: 1;
                                    }

                                    50%,
                                    100% {
                                        opacity: 0;
                                    }
                                }

                                @keyframes gfpReveal {

                                    0%,
                                    30% {
                                        opacity: 0;
                                    }

                                    50%,
                                    88% {
                                        opacity: 1;
                                    }

                                    100% {
                                        opacity: 0;
                                    }
                                }

                                @keyframes gfpPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                @keyframes gfpVault {

                                    0%,
                                    100% {
                                        transform: rotate(0deg);
                                    }

                                    50% {
                                        transform: rotate(-8deg);
                                    }
                                }

                                .gfp-row {
                                    animation: gfpRow 4.6s ease-out infinite;
                                }

                                .gfp-copy {
                                    animation: gfpCopy 4.6s ease-out infinite;
                                }

                                .gfp-mask {
                                    animation: gfpMask 4.6s ease-out infinite;
                                }

                                .gfp-reveal {
                                    animation: gfpReveal 4.6s ease-out infinite;
                                }

                                .gfp-pulse {
                                    animation: gfpPulse 1.6s ease-in-out infinite;
                                }

                                .gfp-vault {
                                    animation: gfpVault 3s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .gfp-row,
                                    .gfp-copy,
                                    .gfp-mask,
                                    .gfp-reveal,
                                    .gfp-pulse,
                                    .gfp-vault {
                                        animation: none !important;
                                    }

                                    .gfp-copy,
                                    .gfp-reveal {
                                        opacity: 1;
                                    }

                                    .gfp-mask {
                                        opacity: 0;
                                    }
                                }

/* from file-server.html  (gfsUpload) */
                                @keyframes gfsUpload {

                                    0% {
                                        transform: translateY(6px);
                                        opacity: 0;
                                    }

                                    18% {
                                        transform: translateY(0);
                                        opacity: 1;
                                    }

                                    82% {
                                        transform: translateY(0);
                                        opacity: 1;
                                    }

                                    100% {
                                        transform: translateY(-6px);
                                        opacity: 0;
                                    }
                                }

                                @keyframes gfsBar {
                                    0% {
                                        width: 0%
                                    }

                                    55%,
                                    100% {
                                        width: 92%
                                    }
                                }

                                @keyframes gfsRow {

                                    0%,
                                    25% {
                                        opacity: .35;
                                    }

                                    50%,
                                    100% {
                                        opacity: 1;
                                    }
                                }

                                @keyframes gfsPop {

                                    0%,
                                    60% {
                                        opacity: 0;
                                        transform: scale(.6);
                                    }

                                    75% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }

                                    100% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }
                                }

                                @keyframes gfsPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                .gfs-up {
                                    animation: gfsUpload 3.8s ease-in-out infinite;
                                }

                                .gfs-bar {
                                    animation: gfsBar 3.8s cubic-bezier(.4, 0, .3, 1) infinite;
                                }

                                .gfs-row {
                                    animation: gfsRow 3.8s ease-out infinite;
                                }

                                .gfs-pop {
                                    animation: gfsPop 3.8s ease-out infinite;
                                }

                                .gfs-pulse {
                                    animation: gfsPulse 1.6s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .gfs-up,
                                    .gfs-bar,
                                    .gfs-row,
                                    .gfs-pop,
                                    .gfs-pulse {
                                        animation: none !important;
                                    }

                                    .gfs-bar {
                                        width: 92%;
                                    }

                                    .gfs-pop {
                                        opacity: 1;
                                        transform: none;
                                    }
                                }

/* from mail-server.html  (gmsFly) */
                                @keyframes gmsFly {
                                    0% {
                                        transform: translateX(0);
                                        opacity: 0;
                                    }

                                    12% {
                                        opacity: 1;
                                    }

                                    78% {
                                        transform: translateX(178px);
                                        opacity: 1;
                                    }

                                    92%,
                                    100% {
                                        transform: translateX(178px);
                                        opacity: 0;
                                    }
                                }

                                @keyframes gmsRow {

                                    0%,
                                    20% {
                                        opacity: .35;
                                    }

                                    40%,
                                    100% {
                                        opacity: 1;
                                    }
                                }

                                @keyframes gmsLand {

                                    0%,
                                    55% {
                                        opacity: 0;
                                        transform: scale(.6);
                                    }

                                    70% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }

                                    100% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }
                                }

                                @keyframes gmsBar {
                                    0% {
                                        width: 0%;
                                    }

                                    70%,
                                    100% {
                                        width: 98%;
                                    }
                                }

                                @keyframes gmsPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                .gms-fly {
                                    animation: gmsFly 3.4s ease-in-out infinite;
                                }

                                .gms-row {
                                    animation: gmsRow 3.4s ease-out infinite;
                                }

                                .gms-land {
                                    animation: gmsLand 3.4s ease-out infinite;
                                }

                                .gms-bar {
                                    animation: gmsBar 3.4s cubic-bezier(.4, 0, .3, 1) infinite;
                                }

                                .gms-pulse {
                                    animation: gmsPulse 1.6s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .gms-fly,
                                    .gms-row,
                                    .gms-land,
                                    .gms-bar,
                                    .gms-pulse {
                                        animation: none !important;
                                    }

                                    .gms-fly {
                                        opacity: 0;
                                    }

                                    .gms-land {
                                        opacity: 1;
                                        transform: none;
                                    }

                                    .gms-bar {
                                        width: 98%;
                                    }
                                }

/* from repair-booking.html  (grbFill) */
                                @keyframes grbFill {

                                    0%,
                                    30% {
                                        background: rgba(232, 13, 51, 0);
                                        box-shadow: none;
                                        /* the fill is transparent here, so the label must not
                                           stay text-white or it vanishes on the white card */
                                        color: var(--grb-slot-idle, #71717a);
                                    }

                                    45%,
                                    100% {
                                        background: rgba(232, 13, 51, 1);
                                        box-shadow: 0 0 10px rgba(232, 13, 51, 0.55);
                                        color: #fff;
                                    }
                                }

                                @keyframes grbRow {

                                    0%,
                                    20% {
                                        opacity: .35;
                                    }

                                    40%,
                                    100% {
                                        opacity: 1;
                                    }
                                }

                                @keyframes grbPop {

                                    0%,
                                    55% {
                                        opacity: 0;
                                        transform: scale(.6);
                                    }

                                    70% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }

                                    100% {
                                        opacity: 1;
                                        transform: scale(1);
                                    }
                                }

                                @keyframes grbPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                .grb-fill {
                                    animation: grbFill 4.2s ease-in-out infinite;
                                }

                                .grb-row {
                                    animation: grbRow 4.2s ease-out infinite;
                                }

                                .grb-pop {
                                    animation: grbPop 4.2s ease-out infinite;
                                }

                                .grb-pulse {
                                    animation: grbPulse 1.6s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .grb-fill,
                                    .grb-row,
                                    .grb-pop,
                                    .grb-pulse {
                                        animation: none !important;
                                    }

                                    .grb-fill {
                                        background: rgba(232, 13, 51, 1);
                                        color: #fff;
                                    }

                                    .grb-pop {
                                        opacity: 1;
                                        transform: none;
                                    }
                                }

/* from retail-product.html  (grpStep) */
                                @keyframes grpStep {

                                    0%,
                                    22% {
                                        opacity: .3;
                                    }

                                    34%,
                                    100% {
                                        opacity: 1;
                                    }
                                }

                                @keyframes grpChip {

                                    0%,
                                    44% {
                                        transform: scale(1);
                                    }

                                    52% {
                                        transform: scale(1.06);
                                    }

                                    60%,
                                    100% {
                                        transform: scale(1);
                                    }
                                }

                                @keyframes grpCode {

                                    0%,
                                    68% {
                                        opacity: 0;
                                        transform: translateY(6px);
                                    }

                                    80%,
                                    100% {
                                        opacity: 1;
                                        transform: translateY(0);
                                    }
                                }

                                @keyframes grpBar {
                                    0% {
                                        width: 8%;
                                    }

                                    70% {
                                        width: 100%;
                                    }

                                    100% {
                                        width: 100%;
                                    }
                                }

                                @keyframes grpPulse {

                                    0%,
                                    100% {
                                        opacity: 1;
                                    }

                                    50% {
                                        opacity: .35;
                                    }
                                }

                                .grp-step {
                                    animation: grpStep 6s ease-out infinite;
                                }

                                .grp-chip {
                                    animation: grpChip 6s ease-in-out infinite;
                                }

                                .grp-code {
                                    animation: grpCode 6s ease-out infinite;
                                }

                                .grp-bar {
                                    animation: grpBar 6s cubic-bezier(.4, 0, .3, 1) infinite;
                                }

                                .grp-pulse {
                                    animation: grpPulse 1.6s ease-in-out infinite;
                                }

                                @media (prefers-reduced-motion: reduce) {

                                    .grp-step,
                                    .grp-chip,
                                    .grp-code,
                                    .grp-bar,
                                    .grp-pulse {
                                        animation: none !important;
                                    }

                                    .grp-bar {
                                        width: 100%;
                                    }

                                    .grp-code {
                                        opacity: 1;
                                        transform: none;
                                    }
                                }

/* ============ 3. Alpine x-cloak ============ */
/* Identical 3-line block present on 13 pages; kept here so there is one
   canonical definition and the rule can be cached. */
[x-cloak] {
    display: none !important
}