/* The gated page (spec 0202 D-k, D-l), from the approved design docs/creation-tool/gated.html. Class prefix mg-.
   The tool behind it is drawn by the real modules (make.css); this file only holds it at 65 percent and out
   of reach, and draws the veil, the lock card and the waitlist in front. The `.px` pixel-corner box comes from
   assets/shell.css. */

/* ---- the tool behind: the real rail, bar and chat, held at 65 percent and out of reach ---- */
html[data-make-gate] body { background: #2b2a2e; }
.mg-bg, .mg-bg * { pointer-events: none !important; user-select: none; -webkit-user-select: none; }
.mg-bg .mt-barwrap, .mg-bg .mt-chat, .mg-bg .mt-rail { opacity: var(--dim, .65) !important; transition: none !important; transform: none !important; }
.mg-bg .mt-chat textarea { caret-color: transparent; }
/* Home is the one thing left in reach: the way back is never taken away */
.mg-bg .mt-home { pointer-events: auto !important; }
/* a dark spotlight only behind the card (the tool at the edges is left alone) so the world stands out around the lock */
.mg-veil { position: fixed; left: 50%; top: 50%; width: min(1000px, 130vw); height: 700px; transform: translate(-50%, -50%); z-index: 5; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(248,247,243,.8), rgba(248,247,243,.5) 42%, rgba(248,247,243,0) 70%); }

/* ---- the lock card ---- */
.mg-gate { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; box-sizing: border-box; pointer-events: none; }
.mg-lift { pointer-events: auto; width: min(480px, 100%); }
.mg-card { position: relative; box-sizing: border-box; width: 100%; padding: 40px 40px 38px; text-align: center;
  background: rgba(12,12,14,.84); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff;
  font: 600 15px/1.45 'Nunito', 'Nunito Fallback', system-ui, sans-serif; --px-line: rgba(255,255,255,.2);
  animation: mg-in .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes mg-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.mg-card [hidden] { display: none !important; }

.mg-lock { position: relative; width: 104px; height: 104px; margin: 0 auto 22px; --px-step: 3px; background: rgba(255,255,255,.05); --px-line: rgba(255,255,255,.2); }
.mg-lock::after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: var(--px-clip);
  background: radial-gradient(circle at 50% 56%, rgba(235,62,40,.22), rgba(235,62,40,0) 62%); animation: mg-warm 2.6s ease-in-out infinite; }
/* the two layers (the white lock without its keyhole, and the red keyhole alone) sit on each other and float together */
.mg-lockart { position: absolute; inset: 20px; display: block; animation: mg-float 4.8s steps(8, end) infinite; }
.mg-lockart svg { display: block; position: absolute; left: 0; top: 0; width: 64px; height: 64px; image-rendering: pixelated; }
.mg-lock-body { color: #fff; }
.mg-lock-body path { fill: #fff; }
.mg-lock-key { fill: #EB3E28; animation: mg-key 2.6s ease-in-out infinite; }
.mg-lock-key path { fill: #EB3E28; }
.mg-lock.hop { animation: mg-hop .7s cubic-bezier(.3,.7,.4,1) 1; }
@keyframes mg-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes mg-key { 0%, 100% { opacity: .8; filter: drop-shadow(0 0 3px rgba(235,62,40,.6)); } 50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(235,62,40,1)); } }
@keyframes mg-warm { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes mg-hop { 0% { transform: none; } 30% { transform: translateY(-12px); } 55% { transform: translateY(0) scaleY(.94); } 75% { transform: translateY(-3px); } 100% { transform: none; } }
/* the lock is listening: the keyhole breathes faster while a number is being typed */
.mg-card:has(.mg-phone:focus) .mg-lock-key, .mg-card:has(.mg-phone:focus) .mg-lock::after { animation-duration: 1.3s !important; }
/* done: the lock stays shut, the check sits with the words, not on the lock */
.mg-tick { display: inline-grid; place-items: center; width: 30px; height: 30px; margin-right: 12px; vertical-align: -3px; background: #fff; color: #0c0c0e; --px-line: transparent;
  animation: mg-pop .35s cubic-bezier(.3,1.5,.5,1) both; }
.mg-tick svg { width: 20px; height: 20px; display: block; image-rendering: pixelated; }
@keyframes mg-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }

.mg-card h1 { margin: 0 0 12px; font: 800 30px/1.14 'Nunito', 'Nunito Fallback', system-ui, sans-serif; letter-spacing: -.012em; color: #fff; text-wrap: balance; }
.mg-card p { margin: 0 auto; max-width: 380px; font: 600 17px/1.5 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.7); }
.mg-card p b { color: #fff; font-weight: 700; white-space: nowrap; }

.mg-form { margin: 30px 0 0; }
.mg-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; box-sizing: border-box; min-height: 56px; padding: 8px 8px 8px 18px;
  background: rgba(255,255,255,.08); --px-line: rgba(255,255,255,.34); transition: background-color .15s ease; }
.mg-field:focus-within { --px-line: rgba(255,255,255,.6); background: rgba(255,255,255,.09); }
.mg-field.bad { --px-line: #EB3E28; }
.mg-field input { flex: 1 1 150px; min-width: 0; height: 40px; border: 0; outline: 0; background: transparent; color: #fff; font: 700 17px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif;
  letter-spacing: .01em; caret-color: #EB3E28; padding: 0; }
.mg-field input::placeholder { color: rgba(255,255,255,.58); font-weight: 600; }
.mg-go { flex: none; height: 40px; padding: 0 20px; border: 0; margin: 0; background: #fff; color: #0c0c0e; cursor: pointer; --px-line: transparent;
  font: 800 14.5px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; white-space: nowrap; transition: background-color .15s ease; }
.mg-go:hover { background: #ececee; }
.mg-go:focus-visible { outline: 2px solid #EB3E28; outline-offset: 2px; }
.mg-go:active { background: #dcdce0; }
.mg-go:disabled { cursor: default; background: rgba(255,255,255,.7); }
.mg-card .mg-err { min-height: 0; margin: 0; max-width: none; font: 600 13.5px/20px 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: #ff7a66; text-align: left; }
.mg-card .mg-err:not(:empty) { margin: 8px 0 0; }
.mg-card .mg-fine { margin: 18px auto 0; max-width: none; font: 600 13.5px/1.45 'Nunito', 'Nunito Fallback', system-ui, sans-serif; color: rgba(255,255,255,.62); }
.mg-fine a { color: inherit; text-decoration: underline; text-decoration-color: rgba(255,255,255,.34); text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.mg-fine a:hover { color: #EB3E28; text-decoration-color: #EB3E28; }
.mg-fine a:focus-visible { outline: 2px solid #EB3E28; outline-offset: 3px; }
/* with no waitlist the sentence is followed straight by the Discord line */
.mg-join h1 + .mg-fine { margin-top: 22px; }
.mg-again { display: inline-block; margin: 20px 0 0; padding: 10px 16px; border: 0; background: rgba(255,255,255,.06); color: rgba(255,255,255,.8); cursor: pointer; --px-line: transparent;
  font: 700 13.5px/1 'Nunito', 'Nunito Fallback', system-ui, sans-serif; transition: background-color .15s ease, color .15s ease; }
.mg-again:hover { background: rgba(255,255,255,.08); color: #fff; }
.mg-again:focus-visible { --px-line: #fff; }

@media (prefers-reduced-motion: reduce) {
  .mg-card, .mg-lockart, .mg-lock-key, .mg-lock::after, .mg-lock.hop, .mg-tick { animation: none !important; }
}