:root {
    color-scheme: dark;
    --oracle-bg: #02070d;
    --oracle-gold: #d6b477;
    --oracle-gold-bright: #f0d49b;
    --oracle-ink: #f4ead8;
    --oracle-muted: rgba(236, 220, 192, 0.72);
    --oracle-line: rgba(220, 183, 116, 0.38);
}

@property --oracle-border-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--oracle-bg);
}

body.oracle-home {
    color: var(--oracle-ink);
    font-family: Georgia, "Times New Roman", serif;
}

.portal {
    position: relative;
    isolation: isolate;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 32rem;
    overflow: hidden;
    background: var(--oracle-bg);
}

.portal__art {
    position: absolute;
    z-index: -3;
    inset: 0;
    background-color: var(--oracle-bg);
    background-image: var(--oracle-hero-image, url("/assets/images/oracle-hero-canonical.png"));
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: contain;
    filter: saturate(.92) contrast(1.04);
    transform: scale(1.002);
    animation: oracle-breathe 12s ease-in-out infinite alternate;
}

.portal__veil {
    position: absolute;
    z-index: -2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(1, 5, 10, .62) 0, transparent 16%, transparent 50%, rgba(1, 5, 10, .16) 66%, rgba(1, 5, 10, .72) 100%),
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 3, 7, .4) 100%);
}

.top-nav {
    position: absolute;
    top: max(1rem, env(safe-area-inset-top));
    left: 50%;
    width: min(92vw, 58rem);
    transform: translateX(-50%);
}

.top-nav ul, .module-nav ul {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-nav ul { gap: clamp(1rem, 3vw, 3rem); }

.top-nav a {
    color: var(--oracle-muted);
    font: 600 .72rem/1.2 system-ui, sans-serif;
    letter-spacing: .16em;
    text-decoration: none;
    text-transform: uppercase;
    text-shadow: 0 1px 12px #000;
}

.top-nav a:hover, .top-nav a:focus-visible,
.module-nav a:hover, .module-nav a:focus-visible { color: var(--oracle-gold-bright); }

.hero-coordinate-space {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(100vw, calc(100svh * var(--hero-ratio, 1.5)));
    aspect-ratio: var(--hero-ratio, 1.5);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.search-stage {
    position: absolute;
    top: var(--search-zone-top, 76.171875%);
    right: calc(100% - var(--search-zone-right, 76.5625%));
    bottom: calc(100% - var(--search-zone-bottom, 87.890625%));
    left: var(--search-zone-left, 23.4375%);
    display: grid;
    align-items: center;
    pointer-events: auto;
}

.oracle-search {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 3.7rem;
    min-height: 4.3rem;
    overflow: hidden;
    border: 1px solid var(--oracle-line);
    border-radius: 999px;
    background: linear-gradient(110deg, rgba(4, 12, 20, .92), rgba(15, 23, 28, .78));
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .48), inset 0 1px rgba(255, 244, 210, .08), 0 0 2.5rem rgba(191, 145, 65, .08);
    backdrop-filter: blur(13px) saturate(120%);
    -webkit-backdrop-filter: blur(13px) saturate(120%);
}

.oracle-search::before {
    content: "";
    position: absolute;
    z-index: 0;
    inset: -1px;
    padding: 1px;
    border-radius: inherit;
    background: conic-gradient(
        from var(--oracle-border-angle),
        transparent 0deg 292deg,
        rgba(196, 145, 61, .05) 300deg,
        rgba(207, 158, 74, .12) 312deg,
        rgba(220, 174, 91, .25) 324deg,
        rgba(235, 196, 120, .5) 336deg,
        rgba(250, 222, 159, .82) 347deg,
        #fff9dd 353deg 358deg,
        rgba(255, 225, 151, .28) 360deg
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    animation: oracle-border-light 3.4s linear infinite;
}

.oracle-search > * {
    position: relative;
    z-index: 1;
}

.oracle-search:focus-within {
    border-color: rgba(240, 212, 155, .72);
    box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .55), 0 0 0 3px rgba(220, 183, 116, .14), 0 0 3rem rgba(191, 145, 65, .13);
}

.oracle-search input {
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #fff8eb;
    font: 400 clamp(1rem, 1.5vw, 1.22rem)/1.3 Georgia, serif;
    letter-spacing: .025em;
    padding: 0 0 0 clamp(1.25rem, 3vw, 2rem);
}

.oracle-search input::placeholder { color: rgba(238, 226, 205, .58); opacity: 1; }
.oracle-search input::-webkit-search-cancel-button { filter: sepia(1); }

.oracle-search button {
    display: grid;
    place-items: center;
    border: 0;
    border-left: 1px solid rgba(220, 183, 116, .22);
    background: rgba(186, 139, 61, .1);
    color: var(--oracle-gold-bright);
    cursor: pointer;
}

.oracle-search button:hover, .oracle-search button:focus-visible { background: rgba(203, 157, 78, .22); outline: 0; }
.oracle-search svg { width: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.45; }

.module-nav {
    position: absolute;
    right: 0;
    bottom: max(1.75rem, calc(env(safe-area-inset-bottom) + .75rem));
    left: 0;
}

.module-nav ul { gap: clamp(.35rem, 2.6vw, 2.4rem); }

.module-nav a {
    display: grid;
    place-items: center;
    min-width: clamp(4.1rem, 9vw, 7rem);
    min-height: 3.35rem;
    color: var(--oracle-muted);
    font: 600 clamp(.62rem, .85vw, .75rem)/1.2 system-ui, sans-serif;
    letter-spacing: .09em;
    text-decoration: none;
    text-shadow: 0 1px 10px #000;
}

.module-nav__symbol { color: var(--oracle-gold); font: 400 1.15rem/1 Georgia, serif; margin-bottom: .32rem; }

.glint {
    position: absolute;
    z-index: -1;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #ffe2a5;
    box-shadow: 0 0 8px 2px rgba(255, 217, 150, .6);
    opacity: 0;
    animation: oracle-glint 7s ease-in-out infinite;
}
.glint--one { top: 19%; left: 27%; }
.glint--two { top: 31%; right: 24%; animation-delay: 2.6s; }
.glint--three { top: 50%; left: 18%; animation-delay: 4.4s; }

.star-field {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.star-field__star {
    --star-size: 2px;
    --star-delay: 0s;
    --star-duration: 5s;
    --star-rise: -8px;
    --star-peak: .68;
    position: absolute;
    width: var(--star-size);
    height: var(--star-size);
    border-radius: 50%;
    background: #fff0bf;
    box-shadow: 0 0 5px 1px rgba(255, 232, 178, .88), 0 0 15px 4px rgba(210, 168, 91, .38);
    opacity: .08;
    animation: oracle-star-twinkle var(--star-duration) ease-in-out var(--star-delay) infinite;
}

.star-field__star--major { --star-peak: 1; }

.star-field__star::before,
.star-field__star::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background: rgba(255, 235, 188, .56);
    transform: translate(-50%, -50%);
}

.star-field__star::before { width: calc(var(--star-size) * 7); height: 1px; }
.star-field__star::after { width: 1px; height: calc(var(--star-size) * 7); }

.star-field__star--1  { top: 13%; left: 16%; --star-delay: -.8s; --star-duration: 4.7s; }
.star-field__star--2  { top: 22%; left: 29%; --star-size: 1px; --star-delay: -3.1s; --star-duration: 6.2s; }
.star-field__star--3  { top: 17%; left: 73%; --star-delay: -1.7s; --star-duration: 5.4s; }
.star-field__star--4  { top: 34%; left: 87%; --star-size: 3px; --star-delay: -4.3s; --star-duration: 7.1s; }
.star-field__star--5  { top: 42%; left: 8%; --star-size: 1px; --star-delay: -2.4s; --star-duration: 5.9s; }
.star-field__star--6  { top: 54%; left: 21%; --star-delay: -5.2s; --star-duration: 7.8s; }
.star-field__star--7  { top: 49%; left: 79%; --star-size: 1px; --star-delay: -.4s; --star-duration: 4.9s; }
.star-field__star--8  { top: 63%; left: 91%; --star-delay: -3.7s; --star-duration: 6.8s; }
.star-field__star--9  { top: 69%; left: 12%; --star-size: 3px; --star-delay: -1.2s; --star-duration: 8.1s; }
.star-field__star--10 { top: 77%; left: 32%; --star-size: 1px; --star-delay: -6.1s; --star-duration: 7.4s; }
.star-field__star--11 { top: 73%; left: 69%; --star-delay: -2.8s; --star-duration: 5.7s; }
.star-field__star--12 { top: 87%; left: 84%; --star-size: 1px; --star-delay: -4.9s; --star-duration: 6.5s; }
.star-field__star--13 { top: 9%; left: 41%; --star-size: 2px; --star-delay: -2.1s; --star-duration: 5.1s; }
.star-field__star--14 { top: 11%; left: 59%; --star-size: 1px; --star-delay: -4.6s; --star-duration: 6.9s; }
.star-field__star--15 { top: 28%; left: 7%; --star-size: 3px; --star-delay: -1.4s; --star-duration: 7.3s; }
.star-field__star--16 { top: 29%; left: 93%; --star-size: 2px; --star-delay: -5.5s; --star-duration: 6.1s; }
.star-field__star--17 { top: 39%; left: 36%; --star-size: 1px; --star-delay: -3.3s; --star-duration: 4.8s; }
.star-field__star--18 { top: 45%; left: 64%; --star-size: 3px; --star-delay: -.9s; --star-duration: 7.6s; }
.star-field__star--19 { top: 57%; left: 4%; --star-size: 2px; --star-delay: -4.1s; --star-duration: 5.5s; }
.star-field__star--20 { top: 59%; left: 96%; --star-size: 1px; --star-delay: -2.6s; --star-duration: 6.7s; }
.star-field__star--21 { top: 68%; left: 43%; --star-size: 2px; --star-delay: -6.3s; --star-duration: 8.2s; }
.star-field__star--22 { top: 72%; left: 57%; --star-size: 1px; --star-delay: -1.8s; --star-duration: 5.2s; }
.star-field__star--23 { top: 83%; left: 18%; --star-size: 3px; --star-delay: -3.9s; --star-duration: 7.7s; }
.star-field__star--24 { top: 89%; left: 73%; --star-size: 2px; --star-delay: -.2s; --star-duration: 5.8s; }

.skip-link {
    position: fixed;
    z-index: 10;
    top: .5rem;
    left: .5rem;
    transform: translateY(-160%);
    border-radius: .3rem;
    background: #fff5df;
    color: #101010;
    padding: .7rem 1rem;
    font: 700 .9rem/1 system-ui, sans-serif;
}
.skip-link:focus { transform: none; }

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    clip-path: inset(50%) !important;
}

@keyframes oracle-breathe { from { opacity: .95; transform: scale(1.002); } to { opacity: 1; transform: scale(1.008); } }
@keyframes oracle-glint { 0%, 78%, 100% { opacity: 0; transform: scale(.4); } 84% { opacity: .85; transform: scale(1.25); } 91% { opacity: .12; transform: scale(.7); } }
@keyframes oracle-border-light { to { --oracle-border-angle: 360deg; } }
@keyframes oracle-star-twinkle {
    0%, 100% { opacity: .05; transform: translateY(4px) scale(.55); }
    28% { opacity: .42; }
    48% { opacity: var(--star-peak); transform: translateY(var(--star-rise)) scale(1.35); }
    67% { opacity: .28; }
}

@media (max-aspect-ratio: 4/3) {
    .portal__art { background-size: cover; }
    .portal__veil { background-color: rgba(0, 4, 9, .18); }
}

@media (max-width: 42rem) {
    .top-nav ul { gap: .8rem 1.2rem; flex-wrap: wrap; }
    .top-nav a { font-size: .62rem; letter-spacing: .1em; }
    .oracle-search { grid-template-columns: 1fr 3.35rem; min-height: 3.75rem; }
    .module-nav ul { gap: 0; justify-content: space-around; }
    .module-nav a { min-width: 0; width: 19vw; font-size: .56rem; letter-spacing: .04em; }
}

@media (max-height: 39rem) {
    .top-nav { top: .55rem; }
    .oracle-search { min-height: 3.45rem; }
    .module-nav { bottom: .65rem; }
    .module-nav a { min-height: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .portal__art, .glint, .star-field__star, .oracle-search::before { animation: none; }
}