.pula-banner {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    place-items: center;
    min-height: 112px;
    padding: 28px 24px;
    background: radial-gradient(ellipse 65% 350% at 50% 150%,
        #dddedc 0%, #d1d6d0 24%, #a4b9a8 57%, #70937c 100%);
    color: #303a32;
    text-decoration: none;
}

.pula-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #55775f;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 550ms cubic-bezier(.22, 1, .36, 1);
}

.pula-banner:is(:hover, :focus-visible)::after { transform: scaleX(1); }
.pula-banner:focus-visible { outline: 3px solid #303a32; outline-offset: -3px; }
.pula-banner:is(:hover, :focus-visible) .pula-banner-pulses span { animation-play-state: paused; }

.pula-banner-meet { opacity: 0; color: #f7faf5; }
.pula-banner p > span {
    grid-area: 1 / 1;
    transition: opacity 220ms ease;
}
.pula-banner:is(:hover, :focus-visible) .pula-banner-teaser { opacity: 0; }
.pula-banner:is(:hover, :focus-visible) .pula-banner-meet {
    opacity: 1;
    transition-delay: 120ms;
}

.pula-banner p {
    display: grid;
    position: relative;
    z-index: 1;
    margin: 0;
    font: 600 clamp(23px, 3vw, 32px)/1.25 'Inter', sans-serif;
    letter-spacing: -.065em;
    text-align: center;
    text-wrap: balance;
}

.pula-banner-pulses {
    position: absolute;
    left: 50%;
    top: calc(100% + 64px);
    width: 180px;
    height: 180px;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.pula-banner-pulses span {
    position: absolute;
    inset: 0;
    border: 1px solid #fa9b2b;
    border-radius: 50%;
    background: #ffa1270c;
    animation: pula-banner-pulse 8.4s linear infinite;
}

.pula-banner-pulses span:nth-child(2) { animation-delay: -2.8s; }
.pula-banner-pulses span:nth-child(3) { animation-delay: -5.6s; }

@keyframes pula-banner-pulse {
    from { transform: scale(.5); opacity: .5; }
    to { transform: scale(5); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .pula-banner::after, .pula-banner p > span { transition: none; }
    .pula-banner-pulses span { animation: none; transform: scale(1.8); opacity: .15; }
    .pula-banner-pulses span:nth-child(2) { transform: scale(2.8); opacity: .1; }
    .pula-banner-pulses span:nth-child(3) { transform: scale(3.8); opacity: .05; }
}