/* ARCHiiE v6 "The Vessel" — prototype styles. Gold on near-black; one accent. */
:root { --gold:#D4AF37; --gold2:#F1D27A; --bg:#050505; --ink:#fff; --mono:"IBM Plex Mono",ui-monospace,monospace; --heb:"Heebo",system-ui,sans-serif; --accent:var(--gold); }
* { box-sizing:border-box; margin:0; padding:0; }
html,body { height:100%; background:var(--bg); color:var(--ink); font-family:var(--heb); overflow:hidden; -webkit-font-smoothing:antialiased; }
a { color:var(--gold); text-decoration:none; } a:hover { color:#fff; }
button { font:inherit; color:inherit; background:none; border:0; cursor:pointer; }
canvas { display:block; }

/* loader */
#loader { position:fixed; inset:0; z-index:40; background:var(--bg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px; transition:opacity .8s ease; }
#loader.out { opacity:0; pointer-events:none; }
#loader-mark { width:min(300px,56vw); opacity:0; animation:markIn 1.6s ease-out .2s forwards; filter:drop-shadow(0 0 24px rgba(212,175,55,.35)); }
@keyframes markIn { to { opacity:1; } }
#loader-bar { width:min(300px,56vw); height:1px; background:rgba(212,175,55,.18); position:relative; overflow:hidden; }
#loader-bar span { position:absolute; left:0; top:0; height:100%; width:0; background:var(--gold); box-shadow:0 0 12px var(--gold); transition:width .3s linear; }

/* gate */
#gate { position:fixed; inset:0; z-index:30; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:radial-gradient(ellipse at 50% 60%, rgba(212,175,55,.08), rgba(5,5,5,0) 60%), var(--bg); transition:opacity 1.1s ease, transform 1.1s ease; }
#gate.out { opacity:0; transform:scale(1.06); pointer-events:none; }
#gate[hidden], #static[hidden], #gl[hidden], #grain[hidden] { display:none !important; }
.gate-mark { width:min(220px,44vw); margin-bottom:34px; filter:drop-shadow(0 0 26px rgba(212,175,55,.35)); animation:breathe 6s ease-in-out infinite; }
@keyframes breathe { 0%,100% { transform:scale(1); } 50% { transform:scale(1.03); } }
.gate-title { font-weight:800; font-size:clamp(30px,5.4vw,66px); line-height:1.02; letter-spacing:-.01em; }
.gate-sub { margin-top:18px; font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:rgba(255,255,255,.55); }
.gate-doors { display:flex; gap:14px; margin-top:42px; flex-wrap:wrap; justify-content:center; }
.door { display:inline-flex; align-items:center; gap:12px; padding:16px 30px; border:1px solid rgba(212,175,55,.8); border-radius:999px; font-size:17px; font-weight:500; background:rgba(212,175,55,.06); transition:background .3s,color .3s,transform .3s; }
.door:hover { background:var(--gold); color:#050505; transform:translateY(-1px); }
.door-quiet { border-color:rgba(255,255,255,.25); background:transparent; color:rgba(255,255,255,.75); }
.door-quiet:hover { background:rgba(255,255,255,.9); color:#050505; }
.door-ico { color:var(--gold); font-size:14px; } .door:hover .door-ico { color:inherit; }
.gate-foot { position:absolute; bottom:22px; font-family:var(--mono); font-size:12px; letter-spacing:.16em; color:rgba(255,255,255,.4); }

/* trip */
#gl { position:fixed; inset:0; z-index:1; }
#grain { position:fixed; inset:-50%; width:200%; height:200%; z-index:5; pointer-events:none; opacity:.08; background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.9 0 0 0 0 0.75 0 0 0 0 0.35 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); animation:grain .5s steps(4) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-1%,-2%)} 100%{transform:translate(3%,1%)} }
body.state-gate #grain { display:none; }

#hud { position:fixed; top:0; left:0; right:0; z-index:8; display:flex; justify-content:space-between; align-items:center; padding:18px 22px; opacity:0; transition:opacity 1s; pointer-events:none; }
body.state-trip #hud, body.state-world #hud { opacity:1; pointer-events:auto; }
.hud-mark img { height:34px; width:auto; display:block; filter:drop-shadow(0 0 10px rgba(212,175,55,.25)); }
#sound { width:38px; height:38px; border:1px solid rgba(212,175,55,.45); border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:border-color .3s, background .3s; }
#sound:hover { border-color:var(--gold); background:rgba(212,175,55,.1); }
.wave { display:inline-flex; gap:2px; align-items:flex-end; height:12px; }
.wave i { display:block; width:2px; height:4px; background:var(--gold); border-radius:1px; transition:height .3s; }
#sound[aria-pressed="true"] .wave i { animation:eq 1s ease-in-out infinite alternate; }
#sound[aria-pressed="true"] .wave i:nth-child(2) { animation-delay:.15s } #sound[aria-pressed="true"] .wave i:nth-child(3) { animation-delay:.3s } #sound[aria-pressed="true"] .wave i:nth-child(4) { animation-delay:.45s }
@keyframes eq { from { height:3px } to { height:12px } }

#dots { position:fixed; right:22px; top:50%; transform:translateY(-50%); z-index:8; display:flex; flex-direction:column; gap:14px; opacity:0; transition:opacity 1s; pointer-events:none; }
body.state-trip #dots { opacity:1; pointer-events:auto; }
#dots button { width:22px; height:22px; display:flex; align-items:center; justify-content:center; }
#dots button::before { content:""; width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.3); transition:transform .3s, background .3s, box-shadow .3s; }
#dots button:hover::before { background:rgba(255,255,255,.7); }
#dots button.on::before { background:var(--accent); transform:scale(1.5); box-shadow:0 0 12px var(--accent); }

#caption { position:fixed; left:6vw; bottom:14vh; z-index:8; max-width:min(520px,80vw); opacity:0; transform:translateY(12px); transition:opacity .7s ease, transform .7s ease; pointer-events:none; }
body.state-trip #caption.on { opacity:1; transform:none; pointer-events:auto; }
.cap-idx { font-family:var(--mono); font-size:12px; letter-spacing:.2em; color:var(--accent); }
.cap-he { font-weight:800; font-size:clamp(54px,9vw,120px); line-height:1; margin:8px 0 6px; text-align:left; }
.cap-en { font-family:var(--mono); font-size:13px; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.55); }
.cap-open { display:inline-flex; align-items:center; gap:10px; margin-top:22px; padding:12px 22px; border:1px solid rgba(212,175,55,.7); border-radius:999px; font-family:var(--mono); font-size:12px; letter-spacing:.14em; color:#fff; transition:background .3s,color .3s; }
.cap-open:hover { background:var(--gold); color:#050505; }
.cap-open span { transition:transform .3s; } .cap-open:hover span { transform:translateX(4px); }

#hint { position:fixed; left:6vw; bottom:24px; z-index:8; font-family:var(--mono); font-size:11px; letter-spacing:.08em; color:rgba(212,175,55,.85); opacity:0; transition:opacity 1s; display:flex; align-items:center; gap:12px; }
.hint-line { display:inline-block; width:1px; height:22px; background:var(--gold); animation:pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:.25} 50%{opacity:1} }
body.state-trip #hint { opacity:1; } body.warping #hint, body.state-world #hint { opacity:0 !important; }
#foot { position:fixed; right:22px; bottom:24px; z-index:8; font-family:var(--mono); font-size:11px; letter-spacing:.16em; color:rgba(255,255,255,.4); opacity:0; transition:opacity 1s; }
body.state-trip #foot, body.state-world #foot { opacity:1; }

/* panel (inside a world) */
#panel { position:fixed; top:0; right:0; height:100%; width:min(560px,100%); z-index:9; background:rgba(5,5,5,.86); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-left:1px solid rgba(212,175,55,.3); transform:translateX(102%); transition:transform .9s cubic-bezier(.2,.8,.2,1); overflow-y:auto; overflow-x:hidden; scrollbar-width:none; padding:76px 52px 56px; }
#panel::-webkit-scrollbar { display:none; }
body.state-world #panel { transform:translateX(0); }
.pane { display:none; } .pane.on { display:block; }
.pane-idx { font-family:var(--mono); font-size:12px; color:var(--accent); letter-spacing:.2em; }
.pane h2 { font-weight:800; font-size:76px; line-height:1; margin:12px 0 26px; text-align:right; }
.tok { font-family:var(--mono); font-size:13px; color:var(--accent); line-height:1.7; text-align:right; direction:rtl; }
.tok.dim { color:rgba(212,175,55,.65); direction:ltr; text-align:right; }
.tok.quote { font-size:18px; line-height:1.5; margin-top:28px; }
.list { margin-top:26px; border-top:1px solid rgba(255,255,255,.12); }
.row { display:flex; justify-content:space-between; gap:20px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); align-items:baseline; direction:rtl; }
.row .num { font-family:var(--mono); font-size:13px; color:#fff; direction:ltr; }
.sc { margin-top:26px; border:1px solid rgba(212,175,55,.35); border-radius:6px; overflow:hidden; background:#0a0906; }
.sc iframe { display:block; width:100%; height:300px; border:0; filter:saturate(.15) sepia(.6) hue-rotate(-8deg) brightness(.92) contrast(1.05); }
form { display:flex; flex-direction:column; gap:14px; margin-top:26px; direction:rtl; }
.f2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
input,textarea { width:100%; font:400 15px var(--heb); color:#fff; background:transparent; border:0; border-bottom:1px solid rgba(255,255,255,.22); padding:12px 0; outline:none; transition:border-color .3s; }
input::placeholder,textarea::placeholder { font-family:var(--mono); font-size:12px; color:rgba(212,175,55,.75); }
input:focus,textarea:focus { border-bottom-color:var(--gold); }
textarea { min-height:110px; resize:vertical; }
.send { margin-top:12px; align-self:flex-start; background:var(--gold); color:#050505; font:500 14px var(--mono); padding:16px 30px; border-radius:999px; transition:transform .25s, filter .25s; }
.send:hover { transform:translateY(-1px); filter:brightness(1.08); }
.sent { display:none; margin-top:18px; }
.back { position:absolute; top:26px; left:52px; font-family:var(--mono); font-size:12px; color:#fff; border-bottom:1px solid var(--gold); padding-bottom:3px; }

/* static fallback */
#static { position:fixed; inset:0; z-index:50; overflow:auto; padding:80px 6vw; text-align:center; background:var(--bg); }
#static .gate-title { font-size:clamp(40px,7vw,90px); }
#static .cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:26px; margin-top:48px; text-align:right; }
#static .card { cursor:pointer; }
#static .gem { aspect-ratio:1; background:#0b0a07 center/cover; clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%); border:0; position:relative; }
#static .gem::after { content:""; position:absolute; inset:0; clip-path:inherit; box-shadow:inset 0 0 0 2px var(--gold); background:radial-gradient(ellipse at 50% 60%, rgba(212,175,55,0) 45%, rgba(212,175,55,.3) 100%); }
#static .word { font-weight:800; font-size:34px; margin-top:12px; }
#static .idx { font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.2em; text-align:right; direction:ltr; }

@media (max-width:767px) {
  #caption { left:20px; right:20px; bottom:96px; max-width:none; text-align:left; }
  .cap-he { font-size:56px; }
  #dots { right:12px; gap:10px; }
  #hint { left:20px; bottom:22px; font-size:10px; max-width:70vw; } #foot { display:none; }
  #panel { padding:72px 22px 40px; } .pane h2 { font-size:56px; } .back { left:22px; }
  .f2 { grid-template-columns:1fr; }
  .gate-doors { flex-direction:column; width:100%; max-width:320px; } .door { justify-content:center; }
}