/*
 * Copyright (c) 2026 Wink.
 *
 * Login backdrop (backdrop.html). Kept out of the Tailwind build: it is loaded only on the pages
 * that show a backdrop. Each canvas carries a CSS gradient that stays visible until the first
 * frame, and for good when JavaScript or WebGL is unavailable.
 */
.wink-backdrop {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    display: block;
    pointer-events: none;
}

.wink-backdrop ~ main {
    position: relative;
    z-index: 1;
}

.wink-backdrop[data-wink-backdrop="flights"] {
    background: linear-gradient(to bottom, #efe7fb, #fdf6f2);
}

.wink-backdrop[data-wink-backdrop="golden"] {
    background: linear-gradient(to bottom, #6a4bc4, #d97aa8 58%, #ffc07c);
}

.wink-backdrop[data-wink-backdrop="stars"] {
    background: radial-gradient(circle at 50% 45%, #fbf8ff, #ebe1fa 75%);
}

/* The card and the register line sit on a moving image, so they need their own ground. */
.wink-backdrop-card {
    box-shadow: 0 1px 2px rgb(29 21 48 / 0.06), 0 18px 48px -12px rgb(59 10 99 / 0.28);
}

.wink-backdrop-note {
    width: fit-content;
    margin-inline: auto;
    padding: 0.375rem 0.875rem;
    border-radius: 9999px;
    background: rgb(255 255 255 / 0.85);
}

@media (prefers-color-scheme: dark) {
    .wink-backdrop[data-wink-backdrop="flights"] {
        background: linear-gradient(to bottom, #0d071e, #24123f);
    }

    .wink-backdrop[data-wink-backdrop="golden"] {
        background: linear-gradient(to bottom, #150b3c, #3b1c7a 58%, #7a3aa8);
    }

    .wink-backdrop[data-wink-backdrop="stars"] {
        background: radial-gradient(circle at 50% 45%, #160c2c, #07040f 75%);
    }

    /* The card's dark fill is translucent (bg-gray-800/50); blur what shows through it. */
    .wink-backdrop-card {
        background-color: rgb(17 24 39 / 0.78);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
    }

    .wink-backdrop-note {
        background: rgb(17 24 39 / 0.75);
    }
}