/* Homepage IV: constructivist presentation, isolated from archive views. */
#future-section {
    --future-paper: #f0efe9;
    --future-ink: #181a17;
    --future-muted: #62655b;
    --future-line: #c8cbc0;
    --future-red: #d93429;
    --future-accent: #b82920;
    --future-beam: #181a17;
    --future-beam-edge: transparent;
    --future-gutter: clamp(22px, 3.9vw, 72px);
    --future-ease: cubic-bezier(.2, .75, .2, 1);
    isolation: isolate;
    background: var(--future-paper);
    color: var(--future-ink);
    font-family: Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
    transition: background-color .25s ease, color .25s ease;
}

:root[data-theme="dark"] #future-section {
    --future-paper: #171916;
    --future-ink: #efeee8;
    --future-muted: #afb2a7;
    --future-line: #3b3f36;
    --future-red: #db3b2e;
    --future-accent: #f15343;
    --future-beam: #070907;
    --future-beam-edge: #42463d;
}

#future-section *,
#future-section *::before,
#future-section *::after { box-sizing: border-box; }
#future-section :where(p, h2) { margin: 0; }

.future-stage {
    display: grid;
    grid-template-rows: clamp(84px, 13.1dvh, 134px) minmax(0, 1fr) clamp(62px, 8.5dvh, 86px);
    width: calc(100% - var(--future-gutter) * 2);
    max-width: 1680px;
    height: 100%;
    margin: 0 auto;
}

.future-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-right: 128px;
    border-bottom: 1px solid var(--future-line);
}

.future-brand { display: flex; align-items: center; gap: 20px; }
.future-brand-mark { width: 44px; height: 54px; object-fit: contain; mix-blend-mode: multiply; }
:root[data-theme="dark"] .future-brand-mark { filter: invert(1); mix-blend-mode: screen; }
.future-brand strong { display: block; font-size: clamp(19px, 1.7vw, 27px); font-weight: 700; letter-spacing: .12em; }
.future-brand div > span { display: block; font-size: 12px; letter-spacing: .14em; margin-top: 9px; }
.future-header-index { font-size: 13px; letter-spacing: .13em; white-space: nowrap; color: var(--future-muted); }

.future-poster { min-height: 0; display: grid; grid-template-columns: clamp(28px, 3.6vw, 57px) minmax(0, 1fr); }
.future-margin { display: flex; align-items: flex-start; justify-content: space-between; writing-mode: vertical-rl; padding: clamp(28px, 5dvh, 54px) 0 clamp(28px, 6dvh, 66px); border-right: 1px solid var(--future-line); font-size: 12px; letter-spacing: .13em; }
.future-margin > span { white-space: nowrap; }
.future-main { position: relative; min-height: 0; padding: clamp(27px, 6dvh, 66px) 0 clamp(28px, 5dvh, 60px) clamp(24px, 2.7vw, 44px); overflow: hidden; }
.future-copy { position: relative; z-index: 3; width: 51%; pointer-events: none; }
.future-eyebrow { display: flex; gap: 17px; align-items: center; font-size: clamp(12px, 1.18vw, 18px); letter-spacing: .1em; white-space: nowrap; }
.future-eyebrow > span { width: 8px; height: 8px; background: var(--future-accent); flex: 0 0 auto; }
#future-title { margin-top: clamp(20px, 4.6dvh, 48px); font-size: clamp(68px, min(9.1vw, 15.6dvh), 157px); font-weight: 900; letter-spacing: -.085em; line-height: 1.03; }
.future-title-line { display: block; }
.future-title-line + .future-title-line { margin-left: 1.02em; }
.future-title-period { color: var(--future-accent); padding-left: .06em; }
#future-section .future-latin { margin-top: clamp(20px, 3.3dvh, 37px); font-size: clamp(12px, 1.2vw, 18px); line-height: 1.55; letter-spacing: .14em; }
.future-quote { position: absolute; z-index: 4; left: clamp(24px, 2.7vw, 44px); bottom: clamp(28px, 5dvh, 60px); width: 52%; color: var(--future-muted); font-size: clamp(14px, 1.22vw, 19px); line-height: 1.95; }
.future-quote > span { display: block; }

.future-art { --future-sphere-size: min(32vw, 49dvh, 520px); --future-arm-width: clamp(44px, 7.7dvh, 86px); position: absolute; z-index: 2; width: 52%; height: 88%; top: 6%; right: 0; pointer-events: none; }
.future-satellite { position: absolute; isolation: isolate; left: 62%; top: 43%; width: var(--future-sphere-size); aspect-ratio: 1; transform: translate(-50%, -50%); }
.future-disc { position: absolute; z-index: 2; inset: 0; width: 100%; aspect-ratio: 1; border-radius: 50%; background: var(--future-red); display: grid; place-items: center; }
.future-disc img { display: block; width: 48%; height: auto; mix-blend-mode: multiply; transform: rotate(-15deg); }
.future-beam { position: absolute; height: var(--future-arm-width); width: 109%; transform-origin: 0 50%; }
.future-beam > span { display: block; width: 100%; height: 100%; background: var(--future-beam); box-shadow: inset 0 0 0 1px var(--future-beam-edge); transform-origin: 0 50%; }
.future-beam-main { z-index: 1; left: 50%; top: calc(50% - var(--future-arm-width) / 2); transform: rotate(166deg); }
/* Photo-based perspective: three separate attachment points on the globe,
   with the upper and left roots occluded, and the lower front root exposed. */
.future-beam-antenna-one { z-index: 1; left: 65%; top: calc(5% - var(--future-arm-width) / 2); width: 142%; transform: rotate(182deg) skewX(-5deg); }
.future-beam-antenna-two { z-index: 3; left: 66%; top: calc(86% - var(--future-arm-width) / 2); width: 88%; transform: rotate(122deg) skewX(-9deg); }
.future-beam-antenna-one > span { clip-path: polygon(0 0, 100% 9%, 100% 91%, 0 100%); }
.future-beam-antenna-two > span { clip-path: polygon(0 0, 100% 14%, 100% 86%, 0 100%); }
.future-art-cross { position: absolute; z-index: 5; right: 0; top: 3%; font: 300 35px/1 Arial, sans-serif; }
.future-art-motto { position: absolute; z-index: 5; top: 69%; right: 14%; writing-mode: vertical-rl; white-space: nowrap; font-size: clamp(12px, 1.15vw, 18px); letter-spacing: .28em; color: #080a07; }
.future-art-index { position: absolute; z-index: 5; right: 3%; top: 92%; font-size: 12px; letter-spacing: .18em; }

.future-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--future-line); font-size: 13px; letter-spacing: .06em; }
.future-back { display: inline-flex; align-items: center; justify-content: center; gap: 28px; min-height: 44px; padding: 8px 10px; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.future-back span:last-child { display: inline-block; transition: transform .2s ease; }
.future-back:hover span:last-child { transform: translateY(-4px); }
.future-back:focus-visible { outline: 2px solid var(--future-accent); outline-offset: 4px; }

/* Entrance waits until the full-page transition finishes; leaving resets it. */
.future-header,
.future-margin,
.future-eyebrow,
.future-title-line,
.future-latin,
.future-quote,
.future-art-cross,
.future-art-motto,
.future-art-index,
.future-footer { opacity: 0; transform: translateY(18px); }
.future-disc { opacity: 0; transform: translate(18px, 14px) scale(.91); }
.future-beam > span { opacity: 0; transform: scaleX(0); }
#future-section.is-revealed .future-header,
#future-section.is-revealed .future-margin,
#future-section.is-revealed .future-eyebrow,
#future-section.is-revealed .future-title-line,
#future-section.is-revealed .future-latin,
#future-section.is-revealed .future-quote,
#future-section.is-revealed .future-art-cross,
#future-section.is-revealed .future-art-motto,
#future-section.is-revealed .future-art-index,
#future-section.is-revealed .future-footer { opacity: 1; transform: none; transition: opacity .62s var(--future-ease), transform .72s var(--future-ease); }
#future-section.is-revealed .future-title-line { transition-delay: .08s; }
#future-section.is-revealed .future-title-line + .future-title-line { transition-delay: .16s; }
#future-section.is-revealed .future-latin { transition-delay: .24s; }
#future-section.is-revealed .future-quote,
#future-section.is-revealed .future-footer { transition-delay: .36s; }
#future-section.is-revealed .future-art-motto,
#future-section.is-revealed .future-art-index { transition-delay: .42s; }
#future-section.is-revealed .future-disc { opacity: 1; transform: none; transition: opacity .7s var(--future-ease) .1s, transform .85s var(--future-ease) .1s; }
#future-section.is-revealed .future-beam > span { opacity: 1; transform: scaleX(1); transition: transform .8s var(--future-ease) .2s, opacity .3s ease .2s; }
#future-section.is-revealed .future-beam-antenna-one > span { transition-delay: .29s; }
#future-section.is-revealed .future-beam-antenna-two > span { transition-delay: .38s; }

.revelation-next { position: absolute; z-index: 7; left: 50%; bottom: clamp(18px, 3dvh, 34px); transform: translateX(-50%); display: flex; align-items: center; gap: 20px; min-height: 44px; padding: 8px 14px; border: 0; background: transparent; color: rgba(255,255,255,.8); font: 500 12px/1.5 Arial, "Microsoft YaHei", sans-serif; letter-spacing: .1em; cursor: pointer; transition: color .72s ease .24s; }
#revelation-section.is-revealed .revelation-next { color: #33362c; }
.revelation-next { background: rgba(7,21,34,.82); border: 1px solid rgba(255,255,255,.22); }
#revelation-section.is-revealed .revelation-next { background: #eee4cb; border-color: rgba(9,10,11,.2); }
:root[data-theme="dark"] .future-art-motto { color: var(--future-ink); }
.revelation-next:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.revelation-next span:last-child { font-size: 19px; }

body.future-page-active #ai-fab,
body.future-page-active #ai-chat-window,
body.future-page-active #author-message-entry,
body.future-page-active #background-toggle,
body.future-page-active .event-splash-settings,
body.future-page-active .changelog-widget { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
body.future-page-active #theme-toggle { top: clamp(22px, 4.4dvh, 46px); right: clamp(22px, 3.9vw, 72px); }

@media (max-width: 1000px) and (min-width: 701px) {
    .future-header { padding-right: 110px; }
    .future-brand { gap: 13px; }
    .future-brand div > span { font-size: 10px; }
    .future-header-index { font-size: 11px; }
    .future-eyebrow { font-size: 12px; gap: 11px; }
    .future-quote { font-size: 14px; width: 59%; }
    .future-art { width: 50%; top: 11%; height: 74%; }
    .future-art-index { top: 91%; }
    .future-title-line + .future-title-line { margin-left: .6em; }
}

@media (max-width: 700px) {
    .future-stage { grid-template-rows: 91px minmax(0, 1fr) 65px; }
    .future-header { padding-right: 82px; gap: 8px; }
    .future-header-index { display: none; }
    .future-brand { gap: 11px; }
    .future-brand-mark { width: 30px; height: 41px; }
    .future-brand strong { font-size: 18px; }
    .future-brand div > span { font-size: 8px; letter-spacing: .07em; margin-top: 7px; }
    .future-poster { grid-template-columns: 21px minmax(0, 1fr); }
    .future-margin { font-size: 10px; padding: 29px 0 38px; }
    .future-main { padding: 30px 0 28px 18px; }
    .future-copy { width: 100%; }
    .future-eyebrow { font-size: 12px; gap: 10px; letter-spacing: .05em; }
    .future-eyebrow > span { width: 6px; height: 6px; }
    #future-title { font-size: clamp(59px, min(19vw, 10.8dvh), 102px); margin-top: 29px; line-height: 1.08; }
    .future-title-line + .future-title-line { margin-left: .63em; }
    #future-section .future-latin { font-size: 12px; margin-top: 23px; letter-spacing: .09em; }
    .future-quote { left: 18px; bottom: 28px; width: calc(100% - 26px); font-size: 15px; line-height: 1.9; }
    .future-art { --future-sphere-size: min(43vw, 23dvh); --future-arm-width: 35px; right: -2%; top: 34%; width: 92%; height: 50%; }
    .future-satellite { left: 61%; top: 50%; }
    .future-beam-antenna-two { width: 78%; }
    .future-art-motto, .future-art-index, .future-art-cross { display: none; }
    .future-footer { font-size: 11px; gap: 8px; }
    .future-back { font-size: 12px; gap: 10px; padding: 8px 0; }
    .future-footer > span:first-child { font-size: 10px; }
    body.future-page-active #theme-toggle { top: 24px; right: var(--future-gutter, 22px); }
    .revelation-next { font-size: 11px; bottom: 16px; gap: 14px; }
}

@media (max-width: 700px) and (max-height: 740px) {
    .future-stage { grid-template-rows: 78px minmax(0, 1fr) 54px; }
    .future-main { padding-top: 23px; }
    #future-title { margin-top: 20px; font-size: min(18vw, 10.4dvh); }
    #future-section .future-latin { margin-top: 16px; font-size: 11px; }
    .future-quote { font-size: 13px; bottom: 24px; }
    .future-art { top: 36%; height: 48%; }
    .future-beam-antenna-two { width: 64%; }
    body.future-page-active #theme-toggle { top: 17px; }
}

@media (max-height: 570px) and (min-width: 701px) {
    .future-margin > span:last-child { display: none; }
    .future-stage { grid-template-rows: 66px minmax(0, 1fr) 45px; }
    .future-header { padding-right: 110px; }
    .future-brand-mark { width: 29px; height: 36px; }
    .future-brand { gap: 12px; }
    .future-brand strong { font-size: 17px; }
    .future-brand div > span { font-size: 9px; margin-top: 4px; }
    .future-main { padding-top: 16px; }
    .future-eyebrow { font-size: 11px; }
    #future-title { font-size: min(8vw, 15dvh); margin-top: 15px; }
    #future-section .future-latin { font-size: 11px; margin-top: 11px; line-height: 1.4; }
    .future-quote { font-size: 12px; bottom: 12px; line-height: 1.65; }
    .future-art { --future-sphere-size: min(27vw, 48dvh); --future-arm-width: 37px; height: 86%; top: 1%; }
    .future-satellite { top: 44%; }
    .future-beam-antenna-two { width: 55%; }
    .future-art-motto { font-size: 11px; }
    .future-art-index { font-size: 10px; }
    .future-art-motto, .future-art-index { display: none; }
    .future-footer { font-size: 11px; }
    .future-back { min-height: 42px; }
    body.future-page-active #theme-toggle { top: 13px; }
}

@media (prefers-reduced-motion: reduce) {
    #future-section *, #future-section *::before, #future-section *::after { transition: none !important; animation: none !important; }
}

@media (forced-colors: active) {
    .future-disc, .future-beam > span { border: 1px solid CanvasText; }
    .future-brand-mark { filter: none; mix-blend-mode: normal; }
}