/* RobinHODL gate page. Palette and type from The Outlaw's Rule Book: Plum is the night in Sherwood, purple is the outlaw,
   gold is the loot (only on $RH and the button). Lilita One headlines, Inter body, JetBrains Mono for the code and labels. */
@font-face { font-family: "Lilita One"; font-style: normal; font-weight: 400; font-display: swap; src: url("/__gate/assets/fonts/lilita-one-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/__gate/assets/fonts/inter-var-latin.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("/__gate/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); }

:root {
  --plum: #1F0F2E; --ink: #140A1C; --outlaw: #5B21A6; --hood: #6D28D9; --deep: #3A1273; --gold: #F6B93B; --cream: #FFF4E4;
  --cream-70: rgba(255, 244, 228, .72); --cream-50: rgba(255, 244, 228, .5);
  --head: "Lilita One", "Inter", system-ui, sans-serif; --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--cream); font-family: var(--body); line-height: 1.5; overflow-x: hidden;
  background: radial-gradient(120% 90% at 50% 30%, #2A1440 0%, var(--plum) 45%, var(--ink) 100%);
  display: grid; place-items: center; padding: 24px 16px; position: relative;
}

/* ---------- toolkit: rays (8-15% opacity), sparks (never in a line), flat gold coins ---------- */
.rays {
  position: fixed; left: 50%; top: 38%; width: 160vmax; height: 160vmax; transform: translate(-50%, -50%); pointer-events: none; z-index: 0;
  background: repeating-conic-gradient(from 0deg, rgba(246, 185, 59, .12) 0deg 6deg, transparent 6deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 28%, transparent 62%); mask: radial-gradient(circle, #000 0%, rgba(0, 0, 0, .55) 28%, transparent 62%);
  animation: spin 110s linear infinite;
}
.sparks, .coins { position: fixed; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; }
.s {
  position: absolute; width: 14px; height: 14px; color: var(--gold); opacity: 0;
  background: conic-gradient(from 0deg, transparent 0 20%, currentColor 25%, transparent 30% 45%, currentColor 50%, transparent 55% 70%, currentColor 75%, transparent 80% 95%, currentColor 100%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: twinkle 4.2s ease-in-out infinite;
}
.s1 { left: 18%; top: 22%; animation-delay: 0s; }
.s2 { left: 76%; top: 17%; width: 10px; height: 10px; animation-delay: 1.1s; }
.s3 { left: 84%; top: 58%; animation-delay: 2.3s; }
.s4 { left: 12%; top: 66%; width: 11px; height: 11px; animation-delay: 3.1s; }
.s5 { left: 61%; top: 80%; width: 9px; height: 9px; animation-delay: .6s; }
.c {
  position: absolute; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--plum);
  font: 700 17px/34px var(--head); text-align: center; box-shadow: inset 0 0 0 3px rgba(31, 15, 46, .35), inset 0 -4px 0 rgba(0, 0, 0, .18);
  opacity: .55; animation: drift 14s ease-in-out infinite;
}
.c1 { left: 8%; top: 40%; }
.c2 { left: 88%; top: 34%; width: 26px; height: 26px; font-size: 13px; line-height: 26px; animation-delay: -5s; }
.c3 { left: 24%; top: 86%; width: 22px; height: 22px; font-size: 11px; line-height: 22px; animation-delay: -9s; }

/* ---------- the gate ---------- */
.gate {
  position: relative; z-index: 2; width: 100%; max-width: 560px; text-align: center;
  animation: rise .9s cubic-bezier(.2, .8, .2, 1) both;
}
.logo { width: 250px; max-width: 62vw; height: auto; display: block; margin: 0 auto 10px; animation: float 7s ease-in-out infinite; }
.title { font-family: var(--head); font-weight: 400; font-size: clamp(2.5rem, 8vw, 4.4rem); line-height: 1; letter-spacing: .01em; margin: 10px 0 14px; color: var(--cream); }
.sub { font-size: clamp(1rem, 2.4vw, 1.125rem); color: var(--cream-70); margin: 0 auto 30px; max-width: 420px; }

.form { margin: 0 auto; max-width: 480px; }
.label { display: block; font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; text-align: left; }
.row { display: flex; gap: 10px; }
input {
  flex: 1; min-width: 0; height: 56px; padding: 0 18px; border-radius: 14px; outline: none;
  font-family: var(--mono); font-size: 1rem; letter-spacing: .06em; color: var(--cream);
  background: rgba(58, 18, 115, .38); border: 2px solid rgba(91, 33, 166, .9);
  transition: border-color .2s, box-shadow .2s, background .2s;
}
input::placeholder { color: var(--cream-50); letter-spacing: .02em; }
input:focus { border-color: var(--hood); box-shadow: 0 0 0 4px rgba(109, 40, 217, .28); background: rgba(58, 18, 115, .5); }
.btn {
  height: 56px; padding: 0 22px; border: 0; border-radius: 14px; cursor: pointer; white-space: nowrap;
  font-family: var(--head); font-size: 1.15rem; letter-spacing: .02em; color: var(--ink); background: var(--gold);
  box-shadow: 0 6px 0 #B87F19, 0 10px 24px rgba(246, 185, 59, .18);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #B87F19, 0 16px 34px rgba(246, 185, 59, .32); filter: brightness(1.04); }
.btn:active { transform: translateY(3px); box-shadow: 0 3px 0 #B87F19, 0 6px 16px rgba(246, 185, 59, .2); }
.form.busy .btn { opacity: .75; pointer-events: none; }
.err { font-family: var(--mono); font-size: .85rem; color: #FF8A80; margin: 12px 0 0; text-align: left; }
.form.shake { animation: shake .5s cubic-bezier(.36, .07, .19, .97) both; }

.links { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin: 34px 0 0; }
.links a {
  display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; text-decoration: none;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--cream);
  border: 1.5px solid rgba(91, 33, 166, .9); background: rgba(58, 18, 115, .25); transition: border-color .2s, background .2s, transform .15s;
}
.links a:hover { border-color: var(--hood); background: rgba(109, 40, 217, .28); transform: translateY(-1px); }
.links svg { width: 15px; height: 15px; fill: currentColor; }
.fine { margin: 22px 0 0; font-size: .78rem; color: var(--cream-50); }
.rh { font-family: var(--mono); font-weight: 700; color: var(--gold); }

.peek {
  position: fixed; right: -8px; bottom: -6px; width: clamp(120px, 18vw, 210px); height: auto; z-index: 1; pointer-events: none;
  /* the asset is a flat-background crop: dissolve its top and left edges into the night so only the peek shows */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 34%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 34%), linear-gradient(to bottom, transparent 0, #000 34%); mask-composite: intersect;
  animation: peek 1.2s cubic-bezier(.2, .8, .2, 1) .5s both;
}

@media (max-width: 520px) {
  .row { flex-direction: column; }
  .btn { height: 54px; }
  .peek { width: 110px; right: -10px; }
  .c2, .s2, .s5 { display: none; }
  .c1 { left: 3%; top: 30%; opacity: .4; }
  .c3 { left: 4%; top: 93%; width: 18px; height: 18px; font-size: 9px; line-height: 18px; opacity: .4; }
  .s3 { left: 90%; top: 46%; }
  .s4 { left: 6%; top: 72%; }
}

/* ---------- motion ---------- */
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5) rotate(0deg); } 40% { opacity: .95; transform: scale(1.05) rotate(20deg); } 60% { opacity: .7; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 33% { transform: translate(10px, -16px) rotate(8deg); } 66% { transform: translate(-8px, -6px) rotate(-6deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-6px); } 40%, 60% { transform: translateX(6px); } }
@keyframes peek { from { transform: translate(40%, 40%) rotate(8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rays, .logo, .s, .c, .gate, .peek { animation: none; }
  .s { opacity: .7; } .peek { opacity: 1; }
}