/* ============================================================================
   Salutare – styles.css (consolidated)
   ----------------------------------------------------------------------------
   Design goals:
   - Minimal, premium typography (system font stack, no external CSS libraries)
   - Soft sunrise background with deterministic daily theming (set by JS)
   - Works well on mobile/PWA (safe-area aware)
   - Subtle motion (respects prefers-reduced-motion)

   Theming (set via JS):
   - --accent-muted     Used for quotes + language label
   - --bg-gradients     Current background gradients
   - --bg-next          Next background gradients (overlay layer)
   - --bg-transition    0/1 controls overlay visibility (opacity)
   ========================================================================== */

/* --- Base reset ---------------------------------------------------------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
    background: transparent; /* avoids Safari/iOS "white strip" behavior */
}

/* --- Theme variables ----------------------------------------------------- */
:root {
    --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

    /* Fallback accent (used until JS overrides it) */
    --accent-muted: rgba(225, 145, 85, 0.78);

    /* Fallback background gradients (used until JS overrides them) */
    --bg-gradients:
            radial-gradient(1000px 600px at 20% 18%, rgba(255, 200, 120, 0.55), transparent 60%),
            radial-gradient(900px 520px at 80% 20%, rgba(255, 160, 90, 0.45), transparent 60%),
            radial-gradient(1100px 650px at 50% 85%, rgba(170, 230, 200, 0.30), transparent 65%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 245, 235, 0.82));

    /* Next background for crossfade transitions */
    --bg-next: var(--bg-gradients);

    /* 0 = overlay hidden, 1 = overlay visible */
    --bg-transition: 0;
}

/* --- Page base ----------------------------------------------------------- */
body {
    margin: 0;

    /* Use both to cover older + newer browsers */
    min-height: 100vh;
    min-height: 100dvh;

    font-family: var(--font-sans);
    color: rgba(12, 15, 20, 0.92);
    background: #f6f7fb; /* base layer behind gradients */
}

/* --- Background layers (fixed, crossfading) ------------------------------ */
/* We use html::before/html::after to ensure full-viewport coverage on iOS. */
html::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-gradients);
    pointer-events: none;
    z-index: -1;
}

html::after {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--bg-next);
    opacity: var(--bg-transition);
    transition: opacity 900ms cubic-bezier(0.2, 0.9, 0.2, 1);
    pointer-events: none;
    z-index: -1;
}

/* If motion is reduced, remove the crossfade transition (instant swap). */
@media (prefers-reduced-motion: reduce) {
    html::after {
        transition: none;
    }
}

/* --- Layout -------------------------------------------------------------- */
.page {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}

/* Center the main content; pad with safe-area insets for iOS notch/home bar. */
.content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding-top: max(6vh, env(safe-area-inset-top));
    padding-bottom: max(4vh, env(safe-area-inset-bottom));
    padding-left: max(6vw, env(safe-area-inset-left));
    padding-right: max(6vw, env(safe-area-inset-right));

    text-align: center;
}

/* Greeting + language behave as a single typographic unit. */
.stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
}

/* --- Typography ---------------------------------------------------------- */
.greeting {
    font-family: var(--font-sans);
    font-style: italic;
    font-weight: 550;

    font-size: clamp(2.2rem, 5vw, 4.2rem);
    line-height: 1.04;
    letter-spacing: -0.01em;

    text-rendering: optimizeLegibility;
    font-feature-settings: "liga" 1, "kern" 1, "calt" 1;

    max-width: 18ch;

    margin: 0;
    padding: 0;
}

/* Typographic quotes inherit the daily accent color. */
.greeting::before,
.greeting::after {
    color: var(--accent-muted);
}

.greeting::before {
    content: "“";
    margin-right: 0.08em;
}

.greeting::after {
    content: "”";
    margin-left: 0.08em;
}

.language {
    font-family: var(--font-sans);
    font-size: clamp(0.95rem, 1.8vw, 1.05rem);
    font-weight: 400;

    color: var(--accent-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;

    margin: 0;
}

/* Error messages: visible, but not aggressive. */
.error {
    margin-top: 1rem;
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: rgba(200, 40, 40, 0.9);
}

/* --- Links (shared) ------------------------------------------------------ */
/* Base styling for all "repo" links (used across pages and footer). */
.repo {
    font-family: var(--font-sans);
    font-size: 0.95rem;
    color: rgba(12, 15, 20, 0.62);
    text-decoration: none;
    border-bottom: 1px solid rgba(12, 15, 20, 0.25);
    padding-bottom: 2px;
}

.repo:hover {
    color: rgba(12, 15, 20, 0.85);
    border-bottom-color: rgba(12, 15, 20, 0.5);
}

.repo:focus {
    outline: 2px solid rgba(12, 15, 20, 0.25);
    outline-offset: 6px;
    border-bottom-color: transparent;
}

/* --- Footer -------------------------------------------------------------- */
/* Footer is intentionally understated to keep focus on the greeting. */
.footer {
    display: flex;
    justify-content: center;

    /* Safe-area aware bottom padding (PWA / iPhone home indicator) */
    padding: 1.5rem 6vw max(1.75rem, env(safe-area-inset-bottom));

    font-size: 0.7rem;
    line-height: 1.1;
}

/* Multi-link footer:
   - Wrap across lines if needed
   - Never break inside one link ("Slack↵Command")
   - Remove the always-on underline to reduce visual noise */
.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.1rem; /* row-gap / column-gap */
}

.footer-links .repo {
    white-space: nowrap;
    letter-spacing: 0.02em;

    /* Make footer links slightly smaller than general .repo links without
       changing the global .repo sizing. */
    font-size: 0.77rem; /* 0.7rem footer * 1.1em ≈ 0.77rem */

    /* Calmer: underline appears on hover only */
    border-bottom-color: transparent;
}

.footer-links .repo:hover {
    border-bottom-color: rgba(12, 15, 20, 0.5);
}

/* --- Entrance animation -------------------------------------------------- */
/* Subtle fade-in on load; purely cosmetic, no JS required. */
.stack,
.footer {
    opacity: 0;
    transform: translateY(6px);
}

@keyframes salutare-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .stack {
        animation: salutare-fade-in 700ms cubic-bezier(0.2, 0.9, 0.2, 1) 80ms forwards;
        will-change: opacity, transform;
    }

    .footer {
        animation: salutare-fade-in 700ms cubic-bezier(0.2, 0.9, 0.2, 1) 160ms forwards;
        will-change: opacity, transform;
    }
}

@media (prefers-reduced-motion: reduce) {
    .stack,
    .footer {
        opacity: 1;
        transform: none;
    }
}