/* Gate / homepage — dark cinematic entry screen */
:root{
  --ink:#1a1a1a;--bone:#d6d5da;--bone-dim:#979798;--ox:#ba8935;--line-2:rgba(214,213,218,0.34);
  --noise-opacity:0.06;
}
body{background:var(--ink);color:var(--bone);overflow:hidden}

/* ---- background loop ---- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:#1a1a1a url("https://images.pexels.com/videos/29733072/pexels-photo-29733072.jpeg?auto=compress&cs=tinysrgb&w=1280") center/cover no-repeat}
.bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.12) brightness(0.5)}
.scrim{position:fixed;inset:0;z-index:1;background:
    radial-gradient(110% 80% at 50% 36%, rgba(186,137,53,0.22), transparent 60%),
    linear-gradient(180deg,rgba(26,26,26,0.55),rgba(26,26,26,0.4) 40%,rgba(26,26,26,0.82))}

/* ---- top + bottom micro labels ---- */
.top,.bot{position:fixed;left:0;right:0;z-index:5;display:flex;justify-content:space-between;padding:20px 30px;font-size:11px;letter-spacing:0.24em;text-transform:uppercase;color:var(--bone-dim)}
.top{top:0}.bot{bottom:0}

/* ---- center ---- */
.center{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px}
.kicker{font-size:12px;letter-spacing:0.34em;text-transform:uppercase;color:var(--ox);margin-bottom:18px}
.word img{width:clamp(280px,42vw,620px);filter:drop-shadow(0 6px 40px rgba(0,0,0,0.6))}
.word sup{font-size:0.16em;vertical-align:super;color:var(--bone-dim)}
.line{font-family:"Roboto Mono",monospace;font-weight:400;font-size:16px;line-height:22px;letter-spacing:-0.3px;color:var(--bone);margin-top:14px;opacity:.9}

/* ---- the two doors ---- */
.doors{display:flex;gap:0;margin-top:48px;border:1px solid var(--line-2)}
.door{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 40px;cursor:pointer;transition:background .25s,color .25s;min-width:230px}
.door + .door{border-left:1px solid var(--line-2)}
.door .dlab{font-family:"Roboto Mono",monospace;font-weight:500;font-size:16px;line-height:22px;letter-spacing:-0.6px;text-transform:uppercase}
.door .dsub{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:var(--bone-dim);transition:color .25s}
.door .arr{margin-top:6px;font-size:15px;color:var(--ox);transition:transform .25s,color .25s}
.door:hover{background:var(--ox);color:var(--ink)}
.door:hover .dsub{color:var(--ink)}
.door:hover .arr{color:var(--ink);transform:translateX(6px);font-weight:700}

@media(max-width:560px){.doors{flex-direction:column}.door + .door{border-left:none;border-top:1px solid var(--line-2)}.door{min-width:240px}}