@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Outfit:wght@400;500;600;700&display=swap');

/* O céu, a paisagem e a tipografia pertencem ao mesmo componente nos dois temas. */
.feed-sky-transition {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: clamp(180px, 18vw, 300px);
    flex-shrink: 0;
    overflow: hidden;
    background: linear-gradient(to bottom, transparent, #081323 55%, #0b1d2e);
}
.feed-sky-transition .feed-sky-stars { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.feed-sky-transition .feed-sky-star,
.site-footer .feed-sky-star {
    position: absolute;
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: var(--star-color);
    box-shadow: 0 0 var(--star-glow) var(--star-color);
}
.feed-sky-transition + .site-footer { margin-top: 0; }
.site-footer {
    --footer-edge: clamp(24px, 8vw, 160px);
    --footer-accent: #f0c84f;
    --footer-text: #fff8ed;
    --footer-muted: #bbc8d8;
    --footer-line: rgba(179, 194, 210, .25);
    --footer-bottom: #000c1e;
    --footer-bottom-height: 78px;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    margin-top: 72px;
    color: var(--footer-text);
    background: linear-gradient(to bottom, #0b1d2e, #000c1e 65%);
    font-family: 'Outfit', 'Segoe UI', sans-serif;
}
.site-footer--landing { margin-top: 0; }
/* Páginas com layout originalmente fixo também precisam acomodar o rodapé. */
body.footer-auth-page.has-site-footer,
body.footer-coming-soon-page.has-site-footer,
body.onboarding-body.has-site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}
body.footer-auth-page > .login-container,
body.footer-coming-soon-page > .card { margin: 48px auto; }
body.onboarding-body.has-site-footer { padding: 0; }
body.onboarding-body > .onboarding-container { margin: clamp(8px, 2vh, 18px) auto; }
body.footer-auth-page > .site-footer,
body.footer-coming-soon-page > .site-footer,
body.onboarding-body > .site-footer { width: 100%; flex-shrink: 0; align-self: stretch; }

.site-footer .feed-footer-stars {
    position: absolute;
    inset: 0 0 auto;
    height: 440px;
    opacity: .65;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, #000 52%, transparent);
}
/* Lua no escuro; a mesma posição recebe o sol no claro. */
.site-footer::after {
    content: '';
    position: absolute;
    top: clamp(60px, 7.5vw, 145px);
    right: var(--footer-edge);
    z-index: 2;
    width: clamp(42px, 3.6vw, 68px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,249,224,.7);
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,.8), transparent 38%),
        radial-gradient(circle at 68% 61%, rgba(146,139,130,.18) 0 4px, transparent 5px),
        radial-gradient(circle at 35% 62%, rgba(146,139,130,.16) 0 2px, transparent 4px), #f2e8d0;
    box-shadow: 0 0 24px #f0c84f47, 0 0 58px #f0c84f1f;
    pointer-events: none;
}
.site-footer .site-footer-shell {
    position: relative;
    z-index: 1;
    display: grid;
    width: calc(100% - var(--footer-edge) * 2);
    min-height: clamp(700px, 50vw, 1100px);
    grid-template-rows: clamp(72px, 6.2vw, 130px) auto minmax(220px, 1fr) var(--footer-bottom-height);
    margin: 0 auto;
}
.site-footer-main {
    display: grid;
    grid-row: 2;
    grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(28px, 4vw, 80px);
}
.site-footer-identity { min-width: 0; }
.site-footer .site-footer-brand {
    display: inline-flex;
    color: var(--footer-accent);
    font-family: 'DM Serif Display', Georgia, serif;
    line-height: .95;
    text-decoration: none;
}
.site-footer-brand img { display: none; }
.site-footer-brand span { font-size: clamp(76px, 7.7vw, 160px); font-weight: 400; letter-spacing: -.04em; }
.site-footer .site-footer-title {
    margin: 10px 0 10px;
    color: var(--footer-text);
    font-family: 'DM Serif Display', Georgia, serif;
    font-size: clamp(28px, 3.25vw, 68px);
    font-weight: 400;
    letter-spacing: -.025em;
    line-height: 1.12;
}
.site-footer .site-footer-subtitle { margin: 0; color: var(--footer-muted); font-size: clamp(16px, 1.35vw, 27px); line-height: 1.4; }
.site-footer .site-footer-cta {
    display: inline-flex;
    min-height: clamp(48px, 3.3vw, 62px);
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding: 10px 28px;
    color: var(--footer-accent);
    background: transparent;
    border: 1.5px solid currentColor;
    border-radius: 999px;
    font-size: clamp(16px, 1.2vw, 23px);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .16s, transform .16s;
}
.site-footer .site-footer-cta:hover { background: #f0c84f18; transform: translateY(-2px); }
.site-footer-cta .site-footer-arrow { transition: transform .16s; }
.site-footer-cta:hover .site-footer-arrow { transform: translateX(3px); }
.site-footer-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; padding-top: clamp(112px, 9.2vw, 195px); }
.site-footer-groups > div { min-width: 0; }
.site-footer .site-footer-group-title { display: block; margin-bottom: 20px; color: var(--footer-text); font-size: clamp(17px, 1.25vw, 25px); font-weight: 600; line-height: 1.2; }
.site-footer-group { display: grid; gap: 16px; }
.site-footer .site-footer-group a { color: var(--footer-muted); font-size: clamp(16px, 1.25vw, 25px); line-height: 1.25; text-decoration: none; }
.site-footer .site-footer-group a:hover,
.site-footer .site-footer-legal a:hover { color: var(--footer-accent); text-decoration: underline; text-underline-offset: 5px; }

/* Artes decorativas ficam atrás do conteúdo real e não capturam cliques. */
.site-footer-art {
    position: absolute;
    bottom: var(--footer-bottom-height);
    left: calc(-1 * var(--footer-edge));
    right: calc(-1 * var(--footer-edge));
    z-index: -1;
    display: block;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent, #000 28%);
}
.site-footer-art img { display: block; width: 100%; height: auto; max-width: none; }
.site-footer-day-art {
    display: none;
    position: absolute;
    inset: 0 calc(-1 * var(--footer-edge)) var(--footer-bottom-height);
    z-index: -1;
    width: calc(100% + var(--footer-edge) * 2);
    height: 100%;
    max-width: none;
    object-fit: fill;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent, #000 15%);
}
.site-footer-bottom {
    position: relative;
    display: flex;
    grid-row: 4;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: var(--footer-muted);
    font-size: clamp(14px, .9vw, 18px);
}
.site-footer-bottom::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--footer-edge)); z-index: -1; background: var(--footer-bottom); }
.site-footer-legal { display: flex; align-items: center; gap: 28px; }
.site-footer .site-footer-legal a { color: var(--footer-muted); text-decoration: none; }
.site-footer a:focus-visible { outline: 2px solid var(--footer-accent); outline-offset: 5px; }

/* As duas classes são usadas pelo tema salvo e pelo alternador, respectivamente. */
html.light-theme-early .site-footer,
body.light-theme .site-footer {
    --footer-accent: #91600d;
    --footer-text: #071a32;
    --footer-muted: #3f536b;
    --footer-line: #3f536b33;
    --footer-bottom: #f4f1ea;
    background: #d8edf7;
}
html.light-theme-early .feed-sky-transition,
body.light-theme .feed-sky-transition { background: linear-gradient(to bottom, transparent, #e7f0f3 55%, #d8edf7); }
html.light-theme-early .feed-sky-stars,
body.light-theme .feed-sky-stars,
html.light-theme-early .site-footer .feed-footer-stars,
body.light-theme .site-footer .feed-footer-stars,
html.light-theme-early .site-footer-art,
body.light-theme .site-footer-art { display: none; }
html.light-theme-early .site-footer-day-art,
body.light-theme .site-footer-day-art { display: block; }
html.light-theme-early .site-footer::after,
body.light-theme .site-footer::after {
    border: 0;
    background: #fffde2;
    box-shadow: 0 0 35px 18px #ffe5a488, 0 0 100px 55px #ffdc8d44;
}

@media (max-width: 1000px) {
    .site-footer { --footer-edge: 32px; }
    .site-footer .site-footer-shell { min-height: 0; grid-template-rows: 72px auto 250px var(--footer-bottom-height); }
    .site-footer-main { grid-template-columns: 1fr; gap: 36px; }
    .site-footer-groups { padding-top: 0; width: min(100%, 500px); }
    .site-footer .site-footer-title { font-size: clamp(28px, 4.1vw, 41px); }
    .site-footer .site-footer-subtitle { max-width: 620px; }
    /* O céu fica livre atrás dos links; a cidade é ancorada no pé do rodapé. */
    .site-footer-day-art { top: auto; height: 430px; object-fit: cover; object-position: center bottom; mask-image: linear-gradient(to bottom, transparent, #000 45%); }
}
@media (max-width: 760px) {
    .feed-sky-transition { height: 150px; }
    .site-footer { --footer-edge: 24px; --footer-bottom-height: 130px; margin-top: 50px; }
    .site-footer--landing, .feed-sky-transition + .site-footer { margin-top: 0; }
    body.has-mnav .site-footer { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }
    .site-footer::after { top: 56px; right: 28px; width: 38px; }
    .site-footer .site-footer-shell { grid-template-rows: 56px auto 220px var(--footer-bottom-height); }
    .site-footer-brand span { font-size: clamp(64px, 18vw, 100px); }
    .site-footer .site-footer-title { margin-top: 18px; font-size: clamp(26px, 6.4vw, 36px); }
    .site-footer .site-footer-subtitle { font-size: 16px; }
    .site-footer .site-footer-cta { font-size: 16px; min-height: 50px; padding-inline: 22px; }
    .site-footer-main { gap: 32px; }
    .site-footer-groups { gap: 24px; }
    .site-footer .site-footer-group-title { font-size: 17px; margin-bottom: 8px; }
    .site-footer-group { gap: 0; }
    .site-footer .site-footer-group a { display: flex; align-items: center; min-height: 44px; font-size: 16px; }
    .site-footer-art { height: 270px; overflow: hidden; }
    .site-footer-art img { height: 100%; width: 100%; object-fit: cover; object-position: center bottom; }
    .site-footer-day-art { height: 300px; }
    .site-footer-bottom { flex-direction: column; justify-content: center; gap: 8px; font-size: 14px; }
    .site-footer-legal { gap: 24px; }
    .site-footer .site-footer-legal a { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .site-footer .site-footer-cta, .site-footer-cta .site-footer-arrow { transition: none; }
}