:root {
  --gold: #d4a83f;
  --gold-light: #f0ca6e;
  --ink: #07090b;
  --text: #e0e0db;
  --muted: #a5aaab;
  color-scheme: dark;
  font-family: "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { background: var(--ink); scroll-behavior: smooth; }
body { min-width: 320px; min-height: 100vh; margin: 0; overflow: hidden; background: var(--ink); color: var(--text); }
a { color: inherit; }

.skip-link {
  position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px;
  background: #fff; color: #000; transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: translateY(0); }

.brand {
  position: fixed; z-index: 20; top: 50%; left: 50%; width: 210px; min-height: 86px;
  display: flex; align-items: center; gap: 11px; padding: 10px 17px 10px 12px;
  transform: translate(-50%, -50%); pointer-events: none;
  border: 1px solid rgba(214, 174, 78, .58); background: rgba(8, 11, 13, .92);
  box-shadow: 0 18px 60px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(18px); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.brand::after { content: ""; position: absolute; right: 15px; bottom: 8px; width: 38px; height: 1px; background: var(--gold); }
.brand img { width: 48px; height: 57px; object-fit: contain; }
.brand strong { display: block; color: var(--gold-light); font-size: 20px; line-height: 1; letter-spacing: -.02em; white-space: nowrap; }
.brand span { display: block; margin-top: 7px; color: #959b9d; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }

.portal-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; height: 100dvh; padding: 2px; }
.destination {
  --mx: 0px; --my: 0px; position: relative; min-width: 0; min-height: 0; overflow: hidden;
  isolation: isolate; text-decoration: none; outline: 0; background: #121619;
  border: 1px solid rgba(255,255,255,.05); transition: z-index 0s, transform .42s cubic-bezier(.2,.85,.25,1), border-color .3s, box-shadow .42s;
}
.destination::before {
  content: ""; position: absolute; z-index: 3; inset: 0; pointer-events: none;
  border: 1px solid transparent; transition: border-color .3s, inset .3s;
}
.destination::after {
  content: ""; position: absolute; z-index: 4; top: -30%; bottom: -30%; width: 24%; left: -45%;
  pointer-events: none; transform: skewX(-18deg); opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), rgba(241,196,91,.42), transparent);
}
.destination__image {
  position: absolute; z-index: -3; inset: -18px; background-position: center; background-size: cover;
  transform: scale(1.04) translate(calc(var(--mx) * -.25), calc(var(--my) * -.25));
  filter: saturate(.82) contrast(1.07) brightness(.7); transition: transform .7s cubic-bezier(.2,.75,.2,1), filter .5s;
}
.destination--forum .destination__image { background-image: url("assets/forum.webp"); }
.destination--shop .destination__image { background-image: url("assets/shop.webp"); }
.destination--discord .destination__image { background-image: url("assets/discord.webp"); }
.destination--mta .destination__image { background-image: url("assets/mta.webp"); }
.destination__shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(5,7,9,.94) 0%, rgba(7,9,11,.72) 42%, rgba(7,9,11,.16) 100%), linear-gradient(0deg, rgba(5,7,9,.62), transparent 65%); transition: opacity .4s; }
.destination--discord .destination__shade { background: linear-gradient(90deg, rgba(8,8,16,.95), rgba(17,16,35,.66) 46%, rgba(38,31,77,.12)); }
.destination__brandmark { position:absolute; z-index:1; right:clamp(28px,5vw,92px); top:50%; pointer-events:none; transform:translateY(-50%); transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s, filter .4s; }
.destination__brandmark--discord { width:clamp(180px,20vw,350px); height:auto; opacity:.76; filter:drop-shadow(0 12px 28px rgba(28,23,76,.55)); }
.destination__brandmark--mta { display:flex; align-items:center; gap:clamp(10px,1vw,18px); opacity:.78; }
.destination__brandmark--mta img { width:clamp(75px,8vw,132px); height:clamp(75px,8vw,132px); border-radius:22%; filter:drop-shadow(0 12px 25px rgba(0,0,0,.5)); }
.destination__brandmark--mta strong { color:#f0f0ed; font:900 clamp(34px,4vw,66px)/.9 "Arial Black","Segoe UI Black",sans-serif; letter-spacing:-.08em; text-shadow:0 7px 24px #000; }
.destination__content { position: absolute; z-index: 2; left: clamp(25px, 4vw, 72px); bottom: clamp(27px, 5vh, 70px); max-width: min(70%, 470px); transform: translate(var(--mx), var(--my)); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.destination--discord .destination__content, .destination--mta .destination__content { max-width:46%; }
.destination__number { position: absolute; left: -1px; top: -41px; color: rgba(215,218,216,.42); font: 700 12px/1 "Segoe UI", sans-serif; letter-spacing: .2em; }
.destination__eyebrow { display: block; min-height: 17px; margin-bottom: 8px; color: var(--gold-light); font-size: clamp(12px, .9vw, 14px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.destination--discord .destination__eyebrow { color: #a7a9ff; }
.destination h1 { margin: 0; color: #d8d8d3; font-size: clamp(42px, 5.4vw, 78px); line-height: .88; letter-spacing: -.045em; text-transform: uppercase; text-shadow: 0 5px 22px #000; }
.destination p { margin: 11px 0 0; color: var(--muted); font-size: clamp(14px, 1.2vw, 18px); line-height: 1.35; }
.destination__action { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; padding-bottom: 7px; border-bottom: 1px solid rgba(212,168,63,.72); color: #e0c47d; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.destination__action span { transition: transform .3s; }

.destination:hover, .destination:focus-visible { z-index: 10; transform: translateY(-7px) scale(1.012); border-color: rgba(212,168,63,.72); box-shadow: 0 25px 65px rgba(0,0,0,.7); }
.destination:hover::before, .destination:focus-visible::before { inset: 8px; border-color: rgba(233,191,91,.3); }
.destination:hover .destination__image, .destination:focus-visible .destination__image { transform: scale(1.1) translate(calc(var(--mx) * -.4), calc(var(--my) * -.4)); filter: saturate(1) contrast(1.04) brightness(.88); }
.destination:hover .destination__shade, .destination:focus-visible .destination__shade { opacity: .78; }
.destination:hover .destination__brandmark, .destination:focus-visible .destination__brandmark { transform:translateY(-52%) scale(1.045); opacity:1; filter:drop-shadow(0 16px 35px rgba(0,0,0,.6)); }
.destination:hover .destination__action span, .destination:focus-visible .destination__action span { transform: translate(4px,-2px); }
.destination.is-selected::after { opacity: 1; animation: card-flash .46s ease-out both; }
.destination.is-selected { z-index: 30; border-color: var(--gold-light); }

.click-ripple { position: absolute; z-index: 8; width: 22px; height: 22px; margin: -11px; border: 2px solid rgba(255,230,167,.9); border-radius: 50%; pointer-events: none; animation: ripple .52s ease-out forwards; }
.transition { position: fixed; z-index: 90; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; visibility: hidden; opacity: 0; pointer-events: none; background: #080b0d; transition: opacity .32s ease, visibility 0s .32s; }
.transition::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at center, rgba(210,164,55,.26), transparent 24%); transform: scale(.4); opacity: 0; }
.transition img { position: relative; width: 72px; height: 84px; transform: scale(.72); opacity: 0; }
.transition span { position: relative; color: var(--gold-light); font-size: 23px; font-weight: 700; letter-spacing: .02em; opacity: 0; }
.transition__flare { position: absolute; left: -15%; right: -15%; top: 50%; height: 1px; background: linear-gradient(90deg,transparent,#fff6ce,var(--gold),#fff6ce,transparent); transform: scaleX(0); box-shadow: 0 0 35px 12px rgba(240,192,77,.45); }
body.is-leaving .transition { visibility: visible; opacity: 1; transition-delay: 0s; }
body.is-leaving .transition::before { animation: transition-glow .55s ease-out forwards; }
body.is-leaving .transition__flare { animation: transition-flare .5s ease-out forwards; }
body.is-leaving .transition img { animation: brand-in .45s .13s ease-out forwards; }
body.is-leaving .transition span { animation: brand-in .4s .2s ease-out forwards; }
.noscript { position: fixed; z-index: 95; left: 12px; right: 12px; bottom: 12px; margin: 0; padding: 12px; background: #201d15; border: 1px solid var(--gold); text-align: center; }

@keyframes card-flash { 0% { left:-45%; } 15% { opacity:1; } 100% { left:125%; opacity:0; } }
@keyframes ripple { to { width: 320px; height: 320px; margin: -160px; opacity: 0; } }
@keyframes transition-flare { 45% { transform:scaleX(1); opacity:1; } 100% { transform:scaleX(.08); opacity:0; } }
@keyframes transition-glow { 45% { transform:scale(2.5); opacity:1; } 100% { transform:scale(4); opacity:0; } }
@keyframes brand-in { to { transform:scale(1); opacity:1; } }

@media (max-width: 820px) {
  body { overflow: auto; }
  .portal-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(220px, 29vh)); height: auto; min-height: 100dvh; padding-top: 84px; }
  .brand { top: 10px; left: 12px; right: 12px; width: auto; min-height: 64px; transform: none; clip-path: none; border-color: rgba(214,174,78,.35); }
  .brand img { width: 37px; height: 43px; }
  .brand strong { font-size: 19px; }
  .brand span { margin-top: 4px; }
  .brand::after { display:none; }
  .destination__content { left: 27px; bottom: 26px; max-width: 80%; }
  .destination--discord .destination__content, .destination--mta .destination__content { max-width:62%; }
  .destination h1 { font-size: clamp(43px, 14vw, 64px); }
  .destination p { font-size: 15px; }
  .destination__number { top: -30px; }
  .destination__brandmark { right:22px; top:42%; opacity:.55; }
  .destination__brandmark--discord { width:min(45vw,230px); }
  .destination__brandmark--mta img { width:74px; height:74px; }
  .destination__brandmark--mta strong { font-size:38px; }
  .destination:hover, .destination:focus-visible { transform: translateY(-3px) scale(.99); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}