/* Homepage screen 03: the imperial sun and its forward-cast shadows. */

#revelation-section {
    --revelation-night: #071522;
    --revelation-paper: #eee4cb;
    --revelation-ink: #090a0b;
    --revelation-sun-core: #fff8cf;
    --revelation-sun-edge: #f3d86c;
    isolation: isolate;
    color: #fffdf5;
    background: var(--revelation-night);
}

#revelation-section::before,
#revelation-section::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#revelation-section::before {
    z-index: 0;
    background:
        radial-gradient(circle at 50% 18%, rgba(255, 250, 220, 0.5), transparent 34%),
        linear-gradient(180deg, #f4ecd9 0%, var(--revelation-paper) 64%, #e7d7b6 100%);
    opacity: 0;
    transition: opacity 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

#revelation-section::after {
    z-index: 1;
    opacity: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.17'/%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    transition: opacity 0.8s ease 0.2s;
}

#revelation-section.is-revealed::before {
    opacity: 1;
}

#revelation-section.is-revealed::after {
    opacity: 0.15;
}

.revelation-stage {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.revelation-sun {
    position: absolute;
    z-index: 4;
    top: clamp(74px, 12vh, 138px);
    left: 50%;
    width: clamp(148px, 14vw, 238px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: #020407;
    box-shadow: 0 0 0 rgba(255, 239, 156, 0);
    transform: translateX(-50%) scale(0.96);
    transition:
        background 0.78s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 1s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

#revelation-section.is-revealed .revelation-sun {
    background:
        radial-gradient(circle at 42% 36%, #fffdf0 0 16%, var(--revelation-sun-core) 45%, var(--revelation-sun-edge) 100%);
    box-shadow:
        0 0 0 1px rgba(142, 110, 31, 0.12),
        0 0 52px rgba(255, 231, 134, 0.5),
        0 0 120px rgba(255, 239, 181, 0.2);
    transform: translateX(-50%) scale(1);
}

.revelation-motto {
    position: absolute;
    z-index: 5;
    top: 51.5%;
    left: 50%;
    width: min(88vw, 760px);
    margin: 0;
    color: rgba(255, 255, 255, 0.88);
    font-family: "Segoe UI", "Arial", sans-serif;
    font-size: clamp(0.68rem, 0.78vw, 0.9rem);
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: clamp(0.12em, 0.28vw, 0.3em);
    text-align: center;
    text-transform: uppercase;
    transform: translate(-50%, 8px);
    opacity: 0.72;
    transition:
        color 0.72s ease 0.2s,
        opacity 0.72s ease 0.2s,
        transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

#revelation-section.is-revealed .revelation-motto {
    color: var(--revelation-ink);
    opacity: 0.82;
    transform: translate(-50%, 0);
}

.revelation-emblem {
    position: absolute;
    z-index: 5;
    top: 60.5%;
    left: 50%;
    width: clamp(112px, 10vw, 174px);
    aspect-ratio: 1;
    color: #ffffff;
    transform: translateX(-50%) scale(0.98);
    transform-origin: center bottom;
    transition:
        color 0.76s ease 0.26s,
        transform 0.86s cubic-bezier(0.22, 1, 0.36, 1) 0.26s;
}

.revelation-emblem__mark {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.94;
    transition: opacity 0.76s ease 0.26s;
}

#revelation-section.is-revealed .revelation-emblem {
    color: var(--revelation-ink);
    transform: translateX(-50%) scale(1);
}

#revelation-section.is-revealed .revelation-emblem__mark {
    opacity: 1;
}

.revelation-rays {
    position: absolute;
    z-index: 3;
    top: 72%;
    left: -12vw;
    width: 124vw;
    height: 33%;
    min-height: 220px;
    color: var(--revelation-ink);
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transform: translateY(-8px);
    transform-origin: 50% 0;
    transition:
        clip-path 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.44s,
        opacity 0.52s ease 0.4s,
        transform 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.44s;
}

.revelation-rays polygon {
    fill: currentColor;
}

.revelation-rays polygon:nth-child(2),
.revelation-rays polygon:nth-child(6) {
    opacity: 0.78;
}

.revelation-rays polygon:nth-child(3),
.revelation-rays polygon:nth-child(5) {
    opacity: 0.58;
}

#revelation-section.is-revealed .revelation-rays {
    opacity: 0.94;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
}

.revelation-index {
    position: absolute;
    z-index: 5;
    right: clamp(20px, 3.2vw, 58px);
    bottom: clamp(18px, 3vh, 34px);
    color: rgba(255, 255, 255, 0.48);
    font-family: "Segoe UI", sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    transition: color 0.72s ease 0.28s;
}

#revelation-section.is-revealed .revelation-index {
    color: rgba(9, 10, 11, 0.5);
}

.revelation-back {
    position: absolute;
    z-index: 7;
    top: clamp(20px, 3.5vh, 42px);
    left: clamp(20px, 3.2vw, 58px);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 8px 0;
    border: 0;
    color: rgba(255, 255, 255, 0.66);
    background: transparent;
    font: 700 0.68rem/1 "Segoe UI", sans-serif;
    letter-spacing: 0.14em;
    cursor: pointer;
    transition:
        color 0.72s ease 0.24s,
        opacity 0.25s ease,
        transform 0.25s ease;
}

.revelation-back span:first-child {
    font-size: 1.1rem;
    transition: transform 0.25s ease;
}

.revelation-back:hover,
.revelation-back:focus-visible {
    opacity: 1;
    transform: translateY(-2px);
}

.revelation-back:hover span:first-child,
.revelation-back:focus-visible span:first-child {
    transform: translateY(-3px);
}

.revelation-back:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 5px;
}

#revelation-section.is-revealed .revelation-back {
    color: rgba(9, 10, 11, 0.62);
}

#graph-section .graph-next-hint {
    left: auto;
    right: clamp(26px, 4vw, 64px);
    transform: none;
    animation: none;
}

#graph-section .graph-next-hint::after {
    content: "▼";
}

body.revelation-page-active #ai-fab,
body.revelation-page-active #ai-chat-window,
body.revelation-page-active #author-message-entry,
body.revelation-page-active #background-toggle,
body.revelation-page-active #theme-toggle,
body.revelation-page-active .event-splash-settings,
body.revelation-page-active .changelog-widget {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

@media (max-width: 720px) {
    .revelation-sun {
        top: 12.5vh;
        width: clamp(118px, 36vw, 164px);
    }

    .revelation-motto {
        top: 47%;
        width: min(82vw, 460px);
        font-size: clamp(0.6rem, 2.5vw, 0.74rem);
        line-height: 1.75;
        letter-spacing: 0.14em;
    }

    .revelation-emblem {
        top: 59%;
        width: clamp(104px, 31vw, 142px);
    }

    .revelation-rays {
        top: 70%;
        left: -36vw;
        width: 172vw;
        height: 34%;
    }

    .revelation-back span:last-child {
        display: none;
    }

    .revelation-back {
        width: 42px;
        justify-content: center;
        padding: 0;
    }

    #graph-section .graph-next-hint {
        right: 16px;
        bottom: 72px;
        font-size: 0.74rem;
    }
}

@media (max-height: 700px) and (min-width: 721px) {
    .revelation-sun {
        top: 8vh;
        width: clamp(126px, 12vw, 172px);
    }

    .revelation-motto {
        top: 47%;
    }

    .revelation-emblem {
        top: 57%;
        width: clamp(96px, 9vw, 136px);
    }

    .revelation-rays {
        top: 69%;
        height: 36%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #revelation-section::before,
    #revelation-section::after,
    .revelation-sun,
    .revelation-motto,
    .revelation-emblem,
    .revelation-emblem__mark,
    .revelation-rays,
    .revelation-index,
    .revelation-back {
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }
}