/*
 * The frame shared by the pages a signed-out visitor sees: landing, sign-in
 * and sign-up. The signed-in shell (shell.css) is never loaded on them.
 */

/* The flame breathes. Slowly: this is a lamp, not a notification. */
.f-lantern__flame {
    transform-origin: 16px 21px;
    animation: f-flame 3.2s var(--ease) infinite;
}

@keyframes f-flame {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(0.9, 1.06); opacity: 0.82; }
}

/* The public header: the same flat strip as the signed-in one. */
.f-pub {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    min-height: var(--header-height);
    padding-inline: max(var(--space-4), calc((100% - var(--content-width)) / 2));
    background: color-mix(in srgb, var(--bg-body) 92%, transparent);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(1.2) blur(8px);
    -webkit-backdrop-filter: saturate(1.2) blur(8px);
    box-sizing: border-box;
}

.f-pub__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-strong);
}

.f-pub__brand .f-lantern {
    width: 28px;
    height: 28px;
}

.f-pub__brand:hover {
    text-decoration: none;
}

.f-pub__spacer {
    flex: 1;
}

.f-pub .f-pub__link {
    min-height: 36px;
    padding: 0 var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
}

.f-btn--lg {
    min-height: 50px;
    padding-inline: var(--space-6);
    font-size: var(--text-lg);
    border-radius: var(--radius-md);
}

/* A button that sits on an accent-coloured band. */
.f-btn--light {
    background: var(--surface);
    color: var(--accent-strong);
    border-color: transparent;
    box-shadow: var(--shadow-soft);
}

.f-btn--light:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--shadow-strong);
    text-decoration: none;
}

.f-section-title {
    text-align: center;
    font-size: var(--text-2xl);
    margin-bottom: var(--space-5);
}

/* Things arrive rather than appear. One short rise, staggered by order. */
.f-rise {
    animation: f-rise 520ms var(--ease) both;
}

@keyframes f-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .f-pub__link {
        padding-inline: var(--space-3);
    }
}