/*
  Settings-applied cue on the welcome route. A copy of the kiosk's own
  (kiosk-settings-ripple.component.scss); change one, change the other.

  Sits over the whole page, wall and kiosk alike, and never takes a pointer. One wide, raised wave
  travelling outward. Inside out: a shallow trough behind it, a long lit back slope, a bright crest,
  then a shadowed front face. The content under the swell is lifted (brighter and richer, through
  backdrop-filter). It leaves the centre quickly, slows as it spreads, and fades at the corners.
*/
.gk-ripple {
    position: fixed;
    inset: 0;
    /* The wall is a fixed layer with no z-index of its own, so any positive value clears all of it. */
    z-index: 100;
    pointer-events: none;
    overflow: hidden;
    contain: strict;
}

.gk-ripple-pulse {
    position: absolute;
    inset: 0;
}

/* Centred by position rather than by layout: the wave is far larger than the screen. */
.gk-ripple-bloom,
.gk-ripple-wave {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    will-change: transform, opacity;
}

/* A faint pearl glow where the wave starts, as if the screen were pressed up from below. */
.gk-ripple-bloom {
    width: 50vmin;
    height: 50vmin;
    background: radial-gradient(closest-side, rgb(240 245 255 / 16%), rgb(214 226 255 / 6%) 55%, transparent);
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: gk-ripple-bloom 1100ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 140vmax across: at full size the crest lands just past the corners of a 16:9 or 9:16 screen. */
.gk-ripple-wave {
    width: 140vmax;
    height: 140vmax;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.04);
    /* Travel and fade run as two animations so the travel keeps one unbroken ease-out. */
    animation:
        gk-ripple-travel 3200ms cubic-bezier(0.2, 0.75, 0.35, 1) forwards,
        gk-ripple-fade 3200ms linear forwards;
}

/* The lift: content under the swell, brighter and more saturated, most at the crest. */
.gk-ripple-wave::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-backdrop-filter: brightness(1.14) saturate(1.2) contrast(1.03);
    backdrop-filter: brightness(1.14) saturate(1.2) contrast(1.03);
    -webkit-mask-image: radial-gradient(closest-side, transparent 64%, rgb(0 0 0 / 45%) 74%, #000 84%, #000 88%, transparent 95%);
    mask-image: radial-gradient(closest-side, transparent 64%, rgb(0 0 0 / 45%) 74%, #000 84%, #000 88%, transparent 95%);
}

/* The swell's light and shadow, inside out: trough, lit back slope, crest, shadowed front face. */
.gk-ripple-wave::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(
        closest-side,
        transparent 54%,
        rgb(10 16 34 / 7%) 63%,
        rgb(10 16 34 / 0%) 69%,
        rgb(255 255 255 / 6%) 74%,
        rgb(255 255 255 / 16%) 81%,
        rgb(255 255 255 / 32%) 85.5%,
        rgb(255 255 255 / 10%) 88.5%,
        rgb(10 16 34 / 18%) 91.5%,
        rgb(10 16 34 / 6%) 95.5%,
        transparent 99%
    );
}

@keyframes gk-ripple-travel {
    from { transform: translate(-50%, -50%) scale(0.04); }
    to { transform: translate(-50%, -50%) scale(1); }
}

@keyframes gk-ripple-fade {
    0% {
        opacity: 0;
        animation-timing-function: ease-out;
    }
    8% {
        opacity: 1;
    }
    40% {
        opacity: 1;
        animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
    }
    100% {
        opacity: 0;
    }
}

@keyframes gk-ripple-bloom {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.7);
    }
    35% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.2);
    }
}

@media (prefers-reduced-motion: reduce) {
    .gk-ripple-wave {
        display: none;
    }

    .gk-ripple-bloom {
        animation: gk-ripple-still 700ms ease-out forwards;
    }

    @keyframes gk-ripple-still {
        0%, 100% {
            opacity: 0;
            transform: translate(-50%, -50%);
        }
        40% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }
}

.gk-ripple-announce {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}