html {
    background: rgb(var(--background-main));
}

body.sakura-site {
    background: linear-gradient(to bottom, rgb(var(--background-main)), rgb(var(--background-main-dark)) 60%);
    background-attachment: fixed;
    color: rgb(var(--text));
}

.sakura-entry-page {
    min-height: 100vh;
    overflow: hidden;
}

.sakura-entry-flowers {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sakura-entry-flower {
    position: absolute;
    transform-origin: center;
}

.sakura-entry-flower-lower-left {
    top: 80%;
    left: 18%;
    opacity: 0.1;
    transform: translate(-50%, -50%) scale(20) rotate(-8deg);
}

.sakura-entry-flower-upper-right {
    top: 4%;
    left: 90%;
    opacity: 0.06;
    transform: translate(-50%, -50%) scale(12) rotate(26deg);
}

.sakura-entry-content {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
    position: relative;
    z-index: 1;
}

/* The blue --secondary reads as an active control in dark mode, so the pre-ready
   sign in buttons use the muted --info instead. */
@media (prefers-color-scheme: dark) {
    .sakura-entry-page .btn-secondary.disabled {
        --bs-btn-disabled-bg: rgb(var(--info));
        --bs-btn-disabled-border-color: rgb(var(--info));
        --bs-btn-disabled-color: rgb(var(--info-text));
    }
}

.sakura-sign-in-card {
    width: min(100%, 31rem);
}

.sakura-sign-in-lockup {
    margin: 0;
}

.sakura-sign-in-lockup img {
    height: auto;
    width: 100%;
}

.sakura-sign-in-outage-title {
    display: none;
}

.sakura-entry-page[data-sign-in-state="outage"] .sakura-sign-in-outage-title {
    display: block;
}

.sakura-sign-in-row {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 350ms ease;
}

.sakura-sign-in-row > * {
    min-height: 0;
    overflow: hidden;
}

.sakura-sign-in-actions-row {
    grid-template-rows: 0fr;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-status-row {
    grid-template-rows: 0fr;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-actions-row {
    grid-template-rows: 1fr;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-row {
    transition-delay: 150ms;
}

.sakura-sign-in-status {
    transition: opacity 200ms ease;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-status {
    opacity: 0;
}

.sakura-sign-in-actions {
    visibility: hidden;
    transition: visibility 0s 250ms;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-actions {
    visibility: visible;
    transition-delay: 150ms;
}

.sakura-sign-in-actions .btn {
    opacity: 0;
    transition: opacity 300ms ease;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-actions .btn {
    opacity: 1;
    transition-delay: 200ms;
}

.sakura-entry-page[data-sign-in-state="ready"] .sakura-sign-in-actions .btn:last-child {
    transition-delay: 290ms;
}

@media (prefers-reduced-motion: reduce) {
    .sakura-sign-in-row,
    .sakura-sign-in-status,
    .sakura-sign-in-actions,
    .sakura-sign-in-actions .btn {
        transition-delay: 0s;
        transition-duration: 0s;
    }
}

.sakura-client-picker {
    max-width: 70rem;
}

.sakura-client-card {
    background-color: rgb(var(--background-content));
}

.sakura-client-card .client-card-button {
    background-color: transparent;
    border: 0;
    color: rgb(var(--text));
}

.sakura-client-card .client-card-button:hover,
.sakura-client-card .client-card-button:focus {
    background-color: rgba(var(--text), 0.08);
}

.sakura-client-card .client-vendors {
    color: rgba(var(--text), 0.7);
}

/* Shared flower geometry. */
#sakura-flower-defs {
    width: 0;
    height: 0;
    position: absolute;
}

.flower {
    position: relative;
    height: 83px;
    width: 83px;
    transform-origin: center;
}

.petal {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: var(--base-transform);
    transform-origin: center;
}

.petal-top {
    --base-transform: translate(-50%, -50%) translate(0, -21px);
}

.petal-top-left {
    --base-transform: translate(-50%, -50%) translate(-23px, -8px) rotate(-65deg);
}

.petal-top-right {
    --base-transform: translate(-50%, -50%) translate(23px, -8px) rotate(65deg);
}

.petal-bottom-left {
    --base-transform: translate(-50%, -50%) translate(-14px, 17px) rotate(-140deg);
}

.petal-bottom-right {
    --base-transform: translate(-50%, -50%) translate(14px, 17px) rotate(140deg);
}