:root {
    color-scheme: dark;
    --gold: #d6ac57;
    --gold-bright: #f2d391;
    --ink: #080705;
    --panel: rgba(13, 11, 8, .9);
    --line: rgba(220, 179, 91, .28);
    --muted: #b8ad9b;
}

* { box-sizing: border-box; }

html { min-height: 100%; background: var(--ink); }

body {
    min-height: 100vh;
    margin: 0;
    overflow-x: hidden;
    color: #f4ecdc;
    font-family: Georgia, "Times New Roman", serif;
    background:
        linear-gradient(90deg, rgba(3, 3, 2, .68) 0%, rgba(5, 4, 3, .33) 48%, rgba(3, 3, 2, .72) 100%),
        linear-gradient(0deg, rgba(7, 5, 3, .7), transparent 65%),
        url("/assets/img/west-coming-scene-v2.webp") center/cover fixed;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 28% 38%, rgba(177, 115, 39, .09), transparent 34%), radial-gradient(circle at 78% 64%, rgba(139, 41, 18, .08), transparent 30%);
    box-shadow: inset 0 0 100px rgba(0, 0, 0, .58);
}

.west-gate { position: fixed; inset: 0; overflow: hidden; pointer-events: none; }
.west-gate::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    background: radial-gradient(ellipse at 72% 18%, rgba(213, 226, 251, .26), rgba(151, 177, 210, .06) 34%, transparent 68%);
    mix-blend-mode: screen;
    animation: storm-flash 21s linear infinite;
}
.west-gate__mist { position: absolute; width: 70vw; height: 18vh; border-radius: 50%; filter: blur(48px); background: rgba(183, 152, 97, .06); animation: mist 15s ease-in-out infinite alternate; }
.west-gate__mist--one { left: -15vw; bottom: 12vh; }
.west-gate__mist--two { right: -18vw; top: 18vh; animation-delay: -7s; }
.west-gate__ember { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #ffc56b; box-shadow: 0 0 12px 4px rgba(255, 127, 38, .3); animation: ember 8s linear infinite; }
.west-gate__ember--one { left: 17%; bottom: 4%; }
.west-gate__ember--two { left: 53%; bottom: -2%; animation-delay: -3s; }
.west-gate__ember--three { left: 83%; bottom: 8%; animation-delay: -5.5s; }
.west-gate__lightning {
    position: absolute;
    z-index: 2;
    top: -5vh;
    width: min(31vw, 420px);
    height: min(75vh, 620px);
    opacity: 0;
    background: center / contain no-repeat;
    mix-blend-mode: screen;
    animation: lightning-strike 21s linear infinite;
}
.west-gate__lightning--one { right: 20%; background-image: url("/assets/img/west-lightning-fork-a.svg"); }
.west-gate__lightning--two { left: 8%; top: -3vh; width: min(24vw, 320px); height: min(55vh, 480px); background-image: url("/assets/img/west-lightning-fork-b.svg"); animation-delay: -13s; animation-duration: 29s; }
.west-gate__scene-effects {
    position: absolute;
    z-index: 3;
    left: 50%;
    top: 50%;
    width: max(100vw, 177.5770vh);
    height: max(100vh, 56.3136vw);
    transform: translate(-50%, -50%);
}
.west-gate__moon {
    position: absolute;
    left: 24%;
    top: 20%;
    width: 18%;
    height: 29%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse, rgba(255, 175, 111, .26) 0%, rgba(239, 108, 60, .16) 34%, transparent 70%);
    mix-blend-mode: screen;
    animation: moon-breathe 11s ease-in-out infinite alternate;
}
.west-gate__spire-light {
    position: absolute;
    left: 49.25%;
    top: 6.5%;
    width: clamp(2px, .22vw, 4px);
    height: 21.1%;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent 0%, rgba(98, 202, 231, .015) 18%, rgba(135, 221, 242, .1) 50%, rgba(156, 241, 255, .53) 88%, rgba(227, 253, 255, .9) 100%);
    box-shadow: 0 0 7px rgba(92, 215, 249, .19);
    filter: blur(.65px);
    animation: spire-beacon 5.5s ease-in-out infinite;
}
.west-gate__spire-light::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -4px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(240, 255, 255, .94) 0%, rgba(97, 224, 249, .62) 33%, transparent 76%);
    box-shadow: 0 0 9px rgba(130, 229, 255, .42), 0 0 19px rgba(73, 169, 211, .17);
}
.west-gate__banner {
    position: absolute;
    inset: 0;
    background: url("/assets/img/west-coming-scene-v2.webp") center/100% 100% no-repeat;
    backface-visibility: hidden;
}
.west-gate__banner--left {
    clip-path: polygon(1.5% 23%, 10.5% 24%, 10.5% 44%, 9.6% 73%, 6.2% 76%, 1.4% 59%);
    transform-origin: 6% 25%;
    animation: banner-left-sway 6.8s ease-in-out infinite;
}
.west-gate__banner--right {
    clip-path: polygon(91.5% 23%, 99% 22%, 99% 62%, 97.3% 77%, 94.5% 73%, 91.4% 43%);
    transform-origin: 95.5% 24%;
    animation: banner-right-sway 7.6s ease-in-out infinite;
}
.west-gate__birds { position: absolute; z-index: 2; inset: 0; }
.west-gate__birds i {
    position: absolute;
    top: var(--bird-y);
    left: -90px;
    width: 33px;
    height: 10px;
    opacity: .8;
    transform: scale(var(--bird-size));
    animation: bird-flight var(--bird-speed) linear var(--bird-delay) infinite;
}
.west-gate__birds i::before,
.west-gate__birds i::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 19px;
    height: 8px;
    background: #020201;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .8);
}
.west-gate__birds i::before { right: 50%; border-radius: 90% 10% 15% 70%; transform-origin: right center; animation: left-wing .72s ease-in-out infinite alternate; }
.west-gate__birds i::after { left: 50%; border-radius: 10% 90% 70% 15%; transform-origin: left center; animation: right-wing .72s ease-in-out infinite alternate; }

.coming-shell {
    position: relative;
    z-index: 1;
    width: min(1180px, calc(100% - 48px));
    min-height: calc(100vh - 86px);
    margin: 0 auto;
    padding: 64px 0 48px;
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
    align-items: center;
    gap: clamp(60px, 8vw, 120px);
}

.coming-story { max-width: 720px; text-shadow: 0 3px 25px #000; transform: translateY(18px); }
.coming-brand { display: flex; align-items: center; gap: 10px; margin: 42px 0 clamp(32px, 6vh, 60px); }
.coming-brand img { width: 82px; height: 82px; object-fit: contain; filter: drop-shadow(0 8px 18px #000); }
.coming-brand div { display: grid; letter-spacing: .18em; }
.coming-brand strong { font-size: 1.45rem; color: var(--gold-bright); }
.coming-brand span { font: 600 .64rem/1.5 Arial, sans-serif; color: #d1c1a4; letter-spacing: .27em; }
.coming-kicker { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; color: var(--gold-bright); font: 700 .72rem/1.4 Arial, sans-serif; letter-spacing: .3em; }
.coming-kicker span { width: 54px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.coming-story h1 { margin: 0; font-size: clamp(3.15rem, 7.4vw, 7.1rem); line-height: .87; font-weight: 500; letter-spacing: -.045em; }
.coming-story h1 em { display: inline-block; margin-top: .16em; color: var(--gold-bright); font-style: normal; font-size: .54em; letter-spacing: .045em; text-shadow: 0 0 36px rgba(215, 158, 69, .27), 0 3px 25px #000; }
.coming-lead { max-width: 600px; margin: 32px 0 28px; color: #d2c7b5; font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.75; }
.coming-seal { display: flex; align-items: center; gap: 14px; color: #948873; font: 600 .7rem/1.4 Arial, sans-serif; text-transform: uppercase; letter-spacing: .22em; }
.coming-seal i { width: 28px; height: 1px; background: rgba(214, 172, 87, .45); }
.coming-sound { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 10px 13px; border: 1px solid rgba(218, 176, 93, .37); color: #e8ce9b; background: rgba(11, 9, 7, .5); font: 700 .64rem Arial, sans-serif; letter-spacing: .16em; cursor: pointer; transition: border-color .2s, background-color .2s; }
.coming-sound:hover { border-color: rgba(242, 211, 145, .78); background: rgba(48, 32, 17, .6); }
.coming-sound:focus-visible { outline: 2px solid #f2d391; outline-offset: 3px; }
.coming-sound[aria-pressed="true"] { color: #f9e6be; background: rgba(90, 61, 24, .42); }
.coming-sound__icon { font-size: 1rem; line-height: 1; }

.staff-entry {
    position: relative;
    padding: 46px 38px 38px;
    background: linear-gradient(145deg, rgba(23, 19, 13, .93), rgba(8, 7, 5, .96));
    border: 1px solid var(--line);
    box-shadow: 0 28px 80px rgba(0, 0, 0, .62), inset 0 1px rgba(255, 229, 171, .05);
}
.staff-entry::before, .staff-entry::after { content: ""; position: absolute; width: 28px; height: 28px; border-color: var(--gold); opacity: .65; }
.staff-entry::before { left: 10px; top: 10px; border-left: 1px solid; border-top: 1px solid; }
.staff-entry::after { right: 10px; bottom: 10px; border-right: 1px solid; border-bottom: 1px solid; }
.staff-entry__crest { width: 52px; height: 52px; margin: -72px auto 20px; display: grid; place-items: center; transform: rotate(45deg); border: 1px solid var(--gold); background: #100d08; color: var(--gold-bright); box-shadow: 0 0 0 7px rgba(10, 8, 5, .8), 0 0 28px rgba(214, 172, 87, .18); font-size: 1.1rem; }
.staff-entry__crest span { display: block; transform: rotate(-45deg); }
.staff-entry__eyebrow { margin: 0 0 8px; text-align: center; color: var(--gold); font: 700 .66rem Arial, sans-serif; letter-spacing: .28em; }
.staff-entry h2 { margin: 0; text-align: center; font-size: 2rem; font-weight: 500; }
.staff-entry > p:not(.staff-entry__eyebrow) { margin: 12px auto 26px; text-align: center; color: var(--muted); font: .88rem/1.65 Arial, sans-serif; }
.staff-entry__form { display: grid; gap: 10px; }
.staff-entry__form label { margin-top: 5px; color: #d8ccb8; font: 700 .67rem Arial, sans-serif; text-transform: uppercase; letter-spacing: .14em; }
.staff-entry__field { display: flex; align-items: center; border: 1px solid rgba(220, 179, 91, .22); background: rgba(0, 0, 0, .35); transition: border-color .2s, box-shadow .2s; }
.staff-entry__field:focus-within { border-color: rgba(238, 197, 109, .68); box-shadow: 0 0 0 3px rgba(214, 172, 87, .08); }
.staff-entry__field span { width: 45px; text-align: center; color: #80683b; font-size: .58rem; }
.staff-entry__field input { width: 100%; min-height: 50px; padding: 0 15px 0 0; border: 0; outline: 0; color: #fff7e8; background: transparent; font: .92rem Arial, sans-serif; }
.staff-entry__field input::placeholder { color: #71695e; }
.staff-entry button { min-height: 53px; margin-top: 14px; padding: 0 20px; display: flex; align-items: center; justify-content: space-between; border: 1px solid #d2a953; color: #161006; background: linear-gradient(110deg, #b98635, #ebca83 55%, #b98635); cursor: pointer; font: 800 .72rem Arial, sans-serif; letter-spacing: .13em; transition: filter .2s, transform .2s; }
.staff-entry button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.staff-entry button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.staff-entry button b { font-size: 1.2rem; }
.staff-entry > small { display: block; margin-top: 18px; text-align: center; color: #756c5f; font: .68rem/1.5 Arial, sans-serif; }
.gate-alert { margin: 0 0 16px; padding: 11px 13px; border: 1px solid rgba(208, 157, 73, .28); color: #ead6af; background: rgba(107, 69, 20, .18); font: .78rem/1.5 Arial, sans-serif; }
.gate-alert--error { border-color: rgba(201, 83, 63, .38); color: #f2b5a8; background: rgba(109, 27, 18, .2); }

.coming-footer { position: relative; z-index: 1; min-height: 70px; padding: 18px 30px; display: flex; justify-content: center; align-items: center; gap: 18px; border-top: 1px solid rgba(214, 172, 87, .12); color: #776e60; font: 600 .62rem Arial, sans-serif; letter-spacing: .18em; }
.coming-footer__mark { color: #8e7139; font-size: .5rem; }

.west-storm-haze {
    position: absolute;
    z-index: 1;
    inset: -12%;
    pointer-events: none;
    background: radial-gradient(ellipse at 68% 28%, rgba(99, 119, 136, .09), transparent 34%), radial-gradient(ellipse at 28% 42%, rgba(8, 13, 19, .25), transparent 48%);
    animation: storm-drift 24s ease-in-out infinite alternate;
}
@keyframes moon-breathe { from { opacity: .55; transform: translate(-50%, -50%) scale(.9); } to { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes spire-beacon {
    0%, 100% { opacity: 0; clip-path: inset(100% 0 0 0); }
    12% { opacity: .32; clip-path: inset(80% 0 0 0); }
    37% { opacity: .8; clip-path: inset(28% 0 0 0); }
    55%, 64% { opacity: 1; clip-path: inset(0 0 0 0); }
    80% { opacity: .5; clip-path: inset(0 0 65% 0); }
    92% { opacity: .12; clip-path: inset(0 0 94% 0); }
}
@keyframes banner-left-sway {
    0%, 100% { transform: translateX(0) skewY(0); filter: brightness(1); }
    27% { transform: translateX(5px) skewY(.65deg); filter: brightness(1.06); }
    56% { transform: translateX(8px) skewY(1deg); filter: brightness(1.1); }
    78% { transform: translateX(3px) skewY(.3deg); filter: brightness(1.04); }
}
@keyframes banner-right-sway {
    0%, 100% { transform: translateX(0) skewY(0); filter: brightness(1); }
    23% { transform: translateX(-4px) skewY(-.45deg); filter: brightness(1.04); }
    52% { transform: translateX(-8px) skewY(-.95deg); filter: brightness(1.1); }
    76% { transform: translateX(-5px) skewY(-.6deg); filter: brightness(1.06); }
}
@keyframes storm-drift {
    from { transform: translate3d(-3%, 0, 0); opacity: .65; }
    to { transform: translate3d(3%, -3%, 0); opacity: 1; }
}
@keyframes mist { to { transform: translate3d(18vw, -3vh, 0) scale(1.12); } }
@keyframes ember { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .8; } 100% { transform: translateY(-75vh) translateX(45px); opacity: 0; } }
@keyframes bird-flight {
    0% { left: -90px; translate: 0 0; }
    22% { translate: 0 -16px; }
    48% { translate: 0 12px; }
    73% { translate: 0 -8px; }
    100% { left: calc(100% + 90px); translate: 0 5px; }
}
@keyframes left-wing { from { transform: rotate(13deg) skewX(-12deg); } to { transform: rotate(-34deg) skewX(9deg); } }
@keyframes right-wing { from { transform: rotate(-13deg) skewX(12deg); } to { transform: rotate(34deg) skewX(-9deg); } }
@keyframes storm-flash {
    0%, 57.2%, 59%, 100% { opacity: 0; }
    57.42% { opacity: .38; }
    57.67% { opacity: .03; }
    57.9% { opacity: .26; }
    58.4% { opacity: .06; }
}
@keyframes lightning-strike {
    0%, 57.2%, 58.7%, 100% { opacity: 0; }
    57.42% { opacity: .9; }
    57.65% { opacity: .06; }
    57.91% { opacity: .72; }
    58.34% { opacity: .13; }
}

@media (max-width: 840px) {
    .coming-shell { width: min(620px, calc(100% - 32px)); padding: 36px 0 64px; grid-template-columns: 1fr; gap: 74px; }
    .coming-brand { margin-bottom: 48px; }
    .coming-story { text-align: center; transform: none; }
    .coming-kicker, .coming-seal { justify-content: center; }
    .coming-lead { margin-left: auto; margin-right: auto; }
    .staff-entry { margin: 0 auto; width: min(100%, 430px); }
}

@media (max-width: 480px) {
    body {
        background-position: center, center, 25% top;
        background-size: cover, cover, auto 100vh;
        background-attachment: scroll;
        background-repeat: no-repeat;
    }
    .west-gate__scene-effects {
        top: 0;
        left: 25%;
        width: 177.577vh;
        height: 100vh;
        transform: translateX(-25%);
    }
    .coming-shell { width: min(100% - 24px, 430px); padding-top: 24px; }
    .coming-brand { justify-content: center; margin-bottom: 36px; }
    .coming-brand img { width: 66px; height: 66px; }
    .coming-story h1 { font-size: clamp(2.85rem, 16vw, 4rem); }
    .coming-lead { font-size: .98rem; }
    .staff-entry { padding: 44px 22px 30px; }
    .coming-footer { flex-wrap: wrap; gap: 9px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; scroll-behavior: auto !important; }
}