/* gate.css -- the memorygate.org landing v2, direction A "Through the gate": Memory Matrix identity values as literals; the hall is drawn by tools/make-gate.js. All motion is CSS, off under prefers-reduced-motion. */
:root{--ground:#15130F;--ink:#FBF7F0;--soft:#DCD3C5;--dim:#BDB4A6;--accent:#E2B970;--accent-ink:#15130F;
  --display:"Iowan Old Style","Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif;
  --text:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--text);line-height:1.5;min-height:100vh;overflow-x:hidden}
.scene{position:fixed;inset:0;overflow:hidden}
.hall{position:absolute;inset:0;width:100%;height:100%}
.scene::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,19,15,0) 45%,rgba(21,19,15,.55) 72%,rgba(21,19,15,.92) 100%)}
.gate{position:relative;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;
  padding:0 16px calc(64px + 4vh);max-width:46rem;margin:0 auto}
h1{font-family:var(--display);font-weight:500;font-size:clamp(2.6rem,7.5vw,6rem);letter-spacing:.01em;margin:0 0 .25em;line-height:1.05;
  text-shadow:0 2px 30px rgba(0,0,0,.6)}
h1 span{color:var(--accent)}
.lead{font-family:var(--display);font-size:clamp(1.2rem,2.6vw,2rem);margin:0 0 .6em;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.soft{color:var(--soft);font-size:clamp(.98rem,1.2vw,1.25rem);margin:0 0 1.8em;max-width:36rem}
.enter{display:inline-block;background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:600;
  font-size:clamp(1.05rem,1.1vw,1.35rem);letter-spacing:.08em;padding:.85em 2.8em;border-radius:999px;
  box-shadow:0 0 0 1px rgba(255,248,234,.25),0 10px 40px rgba(226,185,112,.25);transition:background .2s,box-shadow .2s,transform .2s}
.enter:hover{background:#EFCB8A;box-shadow:0 0 0 1px rgba(255,248,234,.4),0 12px 50px rgba(226,185,112,.45);transform:translateY(-1px)}
.enter:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
footer{position:fixed;left:0;right:0;bottom:0;text-align:center;color:var(--dim);font-size:.85rem;padding:14px;letter-spacing:.1em}
/* motes in the light */
.motes i{position:absolute;left:50%;top:44%;width:3px;height:3px;border-radius:50%;background:#F3D9A4;opacity:0;filter:blur(.5px)}
/* the reveal: far arches first, then the near ones; the light breathes */
@media (prefers-reduced-motion:no-preference){
  .a{opacity:0;animation:rise 1.6s ease-out forwards;animation-delay:var(--d)}
  .light{animation:breathe 9s ease-in-out 1.8s infinite}
  .streak{animation:breathe 9s ease-in-out 1.8s infinite}
  .gate>*{opacity:0;animation:up 1.2s ease-out forwards}
  .gate h1{animation-delay:1.3s}.gate .lead{animation-delay:1.6s}.gate .soft{animation-delay:1.9s}.gate .enter{animation-delay:2.2s}
  .motes i{animation:drift 14s linear infinite}
  .motes i:nth-child(1){--x:-120px;animation-delay:0s}.motes i:nth-child(2){--x:90px;animation-delay:1.7s}
  .motes i:nth-child(3){--x:-40px;animation-delay:3.4s}.motes i:nth-child(4){--x:160px;animation-delay:5.1s}
  .motes i:nth-child(5){--x:-190px;animation-delay:6.8s}.motes i:nth-child(6){--x:30px;animation-delay:8.5s}
  .motes i:nth-child(7){--x:120px;animation-delay:10.2s}.motes i:nth-child(8){--x:-80px;animation-delay:11.9s}
}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes breathe{0%,100%{opacity:1}50%{opacity:.78}}
@keyframes drift{0%{opacity:0;transform:translate(0,0) scale(.6)}15%{opacity:.7}100%{opacity:0;transform:translate(var(--x),-180px) scale(1.4)}}
@media (max-width:600px){.gate{padding-bottom:72px}}
/* the door page: the same hall, calmer -- no reveal; the visitor's address large, easy to read aloud or select */
.door{justify-content:center;padding-top:48px}
.kicker{font-family:var(--display);font-size:clamp(1.1rem,1.6vw,1.5rem);letter-spacing:.04em;margin:0 0 .8em;color:var(--soft)}
.kicker span{color:var(--accent)}
.door h1{font-size:clamp(2rem,5vw,3.6rem);margin-bottom:.6em}
.door .soft{margin:0 0 .8em}
.addr{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,"Liberation Mono",monospace;font-size:clamp(1.5rem,5.5vw,3rem);font-weight:600;
  color:var(--ink);background:rgba(21,19,15,.72);border:1px solid rgba(226,185,112,.55);border-radius:.6rem;padding:.45em .9em;margin:.2em 0 .9em;
  letter-spacing:.04em;user-select:all;-webkit-user-select:all;overflow-wrap:anywhere;max-width:100%;box-shadow:0 0 40px rgba(226,185,112,.18)}
.back{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(226,185,112,.5);padding-bottom:2px;margin-top:1.2em;font-size:1rem;letter-spacing:.04em}
.back:hover{color:#EFCB8A;border-bottom-color:#EFCB8A}
.back:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
@media (prefers-reduced-motion:no-preference){.calm .a,.calm .gate>*{opacity:1;animation:none}}
/* 4K and large screens: the whole type scale grows with the screen, so the words keep their weight over the hall */
@media (min-width:2200px){html{font-size:150%}}
@media (min-width:3200px){html{font-size:200%}}