/* Ages Below, the Welcome page. One unbroken cross-section of the earth: the colour is a function of depth. The type, colours, cut stone, gate and foot are in ages.css. */

:root {
    --shaft-w: min(36vw, 480px);
    --shaft-r: max(2vw, 16px);
}

body { overflow-x: hidden; }

/* the bar */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; gap: 16px; padding: 12px clamp(16px, 2vw, 28px); pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar::before { content: ""; position: absolute; inset: 0 0 -26px 0; z-index: -1; background: linear-gradient(to bottom, rgba(4, 4, 6, .8), transparent); pointer-events: none; transition: opacity .3s; }
.in-light .bar::before { opacity: 0; }
.in-light .sound, .in-light .sound[aria-pressed="true"] { color: var(--ink); text-shadow: none; }
.bar .bar-mark { margin-right: auto; }
.bar .bar-floor { pointer-events: none; opacity: 0; transition: opacity .3s; text-shadow: 0 1px 6px #000; }
.bar .bar-floor.on { opacity: .9; }
.sound { padding: .35em .1em; border: 0; background: none; color: var(--bone); font: 400 1.05rem/1 var(--text); cursor: pointer; text-shadow: 0 1px 6px #000; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.sound[aria-pressed="true"] { color: var(--gold); }
.bar .enter { opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.past-gate .bar .enter { opacity: 1; visibility: visible; }
.at-ember .bar .enter { opacity: 0; visibility: hidden; }

/* who goes down */
.who { position: relative; padding: clamp(70px, 11vh, 130px) var(--gutter) 90px; background: #14141c; text-align: center; }
.who-lede { margin: 16px auto 0; max-width: 32em; color: var(--ash); }
.ledge { display: flex; justify-content: center; flex-wrap: wrap; gap: 0 clamp(0px, .8vw, 12px); margin: 44px auto 0; max-width: 1080px; }
.pick { position: relative; width: 164px; padding: 0 0 12px; border: 0; background: none; color: var(--ash); font: 400 1.1rem/1.2 var(--display); cursor: pointer; }
.pick canvas { width: 196px; height: 196px; max-width: none; margin: -30px -16px -10px; }
.pick span { display: block; padding-top: 10px; border-top: 2px solid #34343f; transition: color .15s, border-color .15s; }
.pick:hover span { color: var(--bone); }
.pick[aria-pressed="true"] span { color: var(--gold); border-color: var(--gold); }
.who-tag { min-height: 3.2em; margin: 22px auto 0; max-width: 34em; font-style: italic; color: var(--bone); }

/* the descent */
.descent { position: relative; overflow-x: clip; }
.shaft { position: absolute; top: 0; bottom: 0; right: var(--shaft-r); width: var(--shaft-w); z-index: 2; pointer-events: none; }
.shaft::before, .shaft::after { content: ""; position: absolute; inset: 0; -webkit-mask-size: 100% 1040px; mask-size: 100% 1040px; -webkit-mask-repeat: repeat-y; mask-repeat: repeat-y; }
.shaft::before { -webkit-mask-image: url("stair-cut.svg"); mask-image: url("stair-cut.svg"); background: #050507; opacity: .86; }
.shaft::after { -webkit-mask-image: url("stair-steps.svg"); mask-image: url("stair-steps.svg"); background: linear-gradient(to bottom, #aeb4c2 0, #aeb4c2 23%, #d6cf6a 27%, #d6cf6a 48%, #5fd0d8 52%, #5fd0d8 73%, #ff8a3a 77%, #ffc06a 100%); }

.age { position: relative; min-height: 175vh; padding: 0 calc(var(--shaft-w) + var(--shaft-r) + 24px) 0 var(--gutter); background: #06070a; }
.age-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.age::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(5, 6, 9, .72), rgba(5, 6, 9, .3) 46%, transparent 62%); }
.age-copy { position: sticky; top: 24vh; z-index: 3; padding: 170px 0 26vh; max-width: 36rem; }
.age-copy p { margin-top: 18px; max-width: 30em; text-shadow: 0 1px 10px rgba(0, 0, 0, .75); }
.age-copy h2 { text-shadow: 0 2px 14px rgba(0, 0, 0, .8); }
.halls .age-copy { top: 9vh; padding-top: 100px; }
.inferno { padding-bottom: 56vh; }
.inferno .age-copy { padding-bottom: 0; }

.tiers { display: flex; flex-direction: column; gap: 3px; margin-top: 26px; }
.tiers li { display: flex; align-items: center; gap: 14px; padding: 3px 14px 3px 4px; background: rgba(8, 12, 16, .62); border-left: 3px solid var(--c); color: var(--c); font: 400 1.15rem/1 var(--display); }
.tiers li:nth-child(1) { width: 56%; } .tiers li:nth-child(2) { width: 64%; } .tiers li:nth-child(3) { width: 72%; }
.tiers li:nth-child(4) { width: 80%; } .tiers li:nth-child(5) { width: 90%; } .tiers li:nth-child(6) { width: 100%; }
.tiers img { width: 44px; height: 44px; }

/* a foe on the stairs, and what it drops */
.foe { position: absolute; z-index: 4; pointer-events: none; }
.find { position: fixed; right: clamp(16px, 2vw, 28px); bottom: 18px; z-index: 21; width: 300px; padding: 12px 16px 14px; background: rgba(8, 7, 9, .92); border-top: 2px solid var(--c, var(--gold)); font-size: 1.05rem; line-height: 1.3; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .25s, transform .25s, visibility .25s; pointer-events: none; }
.find.on { opacity: 1; visibility: visible; transform: none; }
.find strong { display: block; color: var(--c); font: 400 1.3rem/1.2 var(--display); }
.find span { color: var(--ash); }
.find em { display: block; margin-top: 6px; color: var(--bone); }

/* the walker and the bag */
.walker-clip { position: fixed; inset: 0; z-index: 6; overflow: hidden; pointer-events: none; }
.walker { position: absolute; left: 0; top: 0; visibility: hidden; will-change: transform; filter: drop-shadow(0 0 7px rgba(255, 226, 170, .42)); }
.bag { position: fixed; left: clamp(16px, 2vw, 28px); bottom: 18px; z-index: 20; display: flex; align-items: center; gap: 12px; opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.in-descent .bag { opacity: 1; visibility: visible; }
.bag-name { font: 400 1.05rem/1 var(--display); color: var(--bone); text-shadow: 0 1px 6px #000; }
.bag-slots { display: flex; gap: 4px; }
.bag-slots li { width: 46px; height: 46px; background: rgba(8, 7, 9, .72); border: 1px solid rgba(236, 229, 213, .22); }
.bag-slots li.full { border-color: var(--c); }
.bag-slots img { width: 44px; height: 44px; }

.gauge { position: fixed; left: clamp(16px, 2vw, 28px); top: 50%; z-index: 20; display: flex; flex-direction: column; gap: 14px; transform: translateY(-50%); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
.in-descent .gauge { opacity: 1; visibility: visible; }
.gauge a { padding-left: 14px; border-left: 2px solid rgba(236, 229, 213, .3); color: var(--bone); font: 400 1rem/1.5 var(--display); text-decoration: none; text-shadow: 0 1px 6px #000; opacity: .72; }
.gauge a:hover { opacity: 1; }
.gauge a.here { border-color: var(--gold); color: var(--gold); opacity: 1; }

/* the ember: the page's one blaze */
.ember { position: relative; z-index: 7; margin-top: -46vh; padding: 62vh var(--gutter) 20vh; text-align: center; color: #1a0d05; background: linear-gradient(to bottom, transparent 0, rgba(190, 66, 20, .55) 16%, #e0641e 36%, #ff9a3c 64%, #ffd27a 100%); }
.ember h2 { font-size: clamp(3rem, 7.4vw, 7rem); }
.ember p { margin: 20px auto 34px; max-width: 30em; font-size: 1.4rem; font-weight: 500; }
.end-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px auto 0; max-width: 56rem; }
.end-items li { display: flex; align-items: center; gap: 10px; padding: 5px 16px 5px 5px; background: #1a0d05; color: var(--c); font: 400 1.15rem/1.1 var(--display); }
.end-items img { width: 40px; height: 40px; }

/* out in the daylight */
.surface { position: relative; z-index: 3; padding: clamp(80px, 13vh, 150px) var(--gutter) 90px; background: linear-gradient(to bottom, #ffd27a 0, var(--daylight) 200px); color: var(--ink); }
.surface h2 { max-width: 12em; }
.places { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 42px clamp(32px, 6vw, 96px); margin-top: 56px; max-width: 980px; }
.places dt { font: 400 1.75rem/1.2 var(--display); }
.places dt a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.places dt a:hover { color: #8a3a0c; }
.places dd { margin-top: 8px; max-width: 26em; color: #443c32; }

/* Playtest 1 lane J1 (L-9): 44 px to press, on a phone. The desktop's stays as it is */
@media (max-width: 760px), (pointer: coarse) {
    .sound { min-width: 44px; min-height: 44px; padding-inline: .4em; }
    .bar .bar-mark { display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
    .bar .enter-small { display: inline-flex; align-items: center; min-height: 44px; }
    .places dt a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (max-width: 1180px) {
    .gauge { display: none; }
}

@media (max-width: 760px) {
    :root { --shaft-w: 34vw; --shaft-r: 0px; }

    .bar { padding: 10px 16px; gap: 12px; }
    .bar-floor { display: none; }
    .bar .enter { display: none; }

    .ledge { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 4px; }
    .pick { width: auto; font-size: 1rem; }
    .pick canvas { width: 118px; height: 118px; margin: -14px auto -8px; }

    .age { min-height: 160vh; padding-right: calc(var(--shaft-w) + 6px); }
    .age::after { background: linear-gradient(to right, rgba(5, 6, 9, .82), rgba(5, 6, 9, .55) 60%, rgba(5, 6, 9, .1) 100%); }
    .age-copy { padding-top: 104px; top: 12vh; }
    .halls .age-copy { top: 7vh; padding-top: 70px; }
    .tiers li { width: 100% !important; gap: 8px; padding-right: 6px; font-size: 1rem; }
    .tiers img { width: 34px; height: 34px; }

    .find { left: 16px; right: 16px; width: auto; bottom: calc(66px + env(safe-area-inset-bottom)); }
    .bag { left: 16px; bottom: calc(12px + env(safe-area-inset-bottom)); }
    .bag-slots li { width: 40px; height: 40px; }
    .bag-slots img { width: 38px; height: 38px; }

    .ember { margin-top: -30vh; padding: 44vh 16px 14vh; }
    .ember .enter { display: block; }
    .places { grid-template-columns: 1fr; gap: 30px; margin-top: 38px; }
}

@media (max-height: 560px) {
    .age { min-height: 240vh; }
    .age-copy, .halls .age-copy { position: static; padding-bottom: 10vh; }
    .who { padding-top: 60px; }
}

@media (prefers-reduced-motion: reduce) {
    .find, .bag, .gauge, .bar .enter, .bar .bar-floor { transition: none; }
    .age-copy { position: static; }
}