/* Sign in: the landing page's bright studio, as one screen.
   Everything is scoped to the login view, and the header bar is hidden only
   while that view shows, so nothing here can leak into the panel. */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/instrument-serif-italic.woff2) format('woff2'); }

html[data-state="login"] .bar { display: none !important; }
html[data-state="login"] body { background: #f9fbfb !important; }

.view[data-view="login"] .lg {
  --ink: #15171c; --soft: #5b5f6b; --grey: #8b8b92; --line: rgba(26,33,51,.1); --live: #3ccf7a; --blurple: #5865f2; --sh: 26, 33, 51;
  --sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .8, .2, 1);
  /* Scrolls up and down only: the floating panel and the blurred corner tile
     bleed past the right edge by design and must never add a sideways scroll. */
  position: fixed; inset: 0; z-index: 40; overflow: hidden auto; color: var(--ink); font-family: var(--sans);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 24px;
  padding: max(24px, env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right, 0px)) max(24px, env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  background: radial-gradient(1100px 700px at 75% 20%, #ffffff 0%, #f9fbfb 45%, #f2f3f6 100%);
}
.view[data-view="login"] .lg::before { content: ''; position: fixed; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(var(--sh), .045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--sh), .045) 1px, transparent 1px);
  background-size: 32px 32px; mask-image: radial-gradient(80% 80% at 70% 40%, #000 20%, transparent 80%); }

/* ── the words ───────────────────────────────────────────────────────── */
.lg-copy { position: relative; z-index: 2; justify-self: end; width: min(500px, 100%); display: grid; gap: 22px; justify-items: start; }
.lg-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: #fff; color: var(--ink) !important; text-decoration: none;
  font-weight: 500; font-size: 14px; box-shadow: 0 1px 1px rgba(var(--sh), .06), 0 8px 22px -12px rgba(var(--sh), .35); }
.lg-badge img { width: 22px; height: 22px; border-radius: 7px; }
.lg-badge span { color: var(--grey); font-weight: 400; padding-left: 8px; border-left: 1px solid var(--line); }
.lg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px rgba(60,207,122,.18); animation: lg-breathe 2.4s var(--ease) infinite; }
@keyframes lg-breathe { 50% { box-shadow: 0 0 0 6px rgba(60,207,122,0); } }
.view[data-view="login"] .lg h1 { margin: 0; font: 500 clamp(40px, 5vw, 64px)/1.0 var(--sans) !important; letter-spacing: -.045em !important; color: var(--ink) !important; text-wrap: balance; }
.lg h1 em { display: block; font: italic 400 1.1em/1.05 "Instrument Serif", Georgia, serif; letter-spacing: -.01em; color: var(--grey); }
.lg-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--soft); max-width: 30em; }

/* The Discord button: blurple, a sheen that sweeps across, an arrow that leans in. */
.view[data-view="login"] a.btn.primary.lg-discord {
  position: relative; overflow: hidden; display: inline-flex !important; align-items: center !important; gap: 12px !important;
  height: 58px !important; padding: 0 22px 0 18px !important; border-radius: 16px !important; border: 0 !important;
  background: linear-gradient(180deg, #6b77ff, var(--blurple)) !important; color: #fff !important; font: 600 17px/1 var(--sans) !important; letter-spacing: -.01em;
  box-shadow: 0 18px 34px -16px rgba(88,101,242,.75), inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.12) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease) !important; text-decoration: none !important; width: auto !important;
}
.lg-discord svg { width: 24px; height: 24px; fill: #fff; flex: none; }
.lg-discord .lg-arrow { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s var(--ease); }
.lg-discord::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; transform: skewX(-20deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent); animation: lg-sheen 4.5s var(--ease) infinite 1.2s; }
/* Moved with transform, not left: animating left re-laid out the page every frame, forever. 475% of its own 40% width = the old -60% to 130% sweep. */
@keyframes lg-sheen { 0%, 70% { transform: translateX(0) skewX(-20deg); } 100% { transform: translateX(475%) skewX(-20deg); } }
@media (hover: hover) {
  .view[data-view="login"] a.btn.primary.lg-discord:hover { transform: translateY(-2px); box-shadow: 0 24px 40px -16px rgba(88,101,242,.85), inset 0 1px 0 rgba(255,255,255,.3) !important; }
  .lg-discord:hover .lg-arrow { transform: translateX(4px); }
}
.view[data-view="login"] a.btn.primary.lg-discord:active { transform: translateY(0) scale(.98); }
.view[data-view="login"] a.btn.primary.lg-discord:focus-visible { outline: 3px solid rgba(88,101,242,.45) !important; outline-offset: 3px !important; }

.view[data-view="login"] .lg #login-error { margin: -6px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; line-height: 1.45; max-width: 30em;
  background: rgba(242,63,67,.08); color: #b4232a; box-shadow: inset 0 0 0 1px rgba(242,63,67,.2); }
.view[data-view="login"] .lg #login-error.soft { background: rgba(88,101,242,.08); color: #3b44b8; box-shadow: inset 0 0 0 1px rgba(88,101,242,.2); }
.view[data-view="login"] .lg #login-error[hidden] { display: none; }

.lg-scopes { list-style: none; margin: 0; padding: 14px 16px; display: grid; gap: 10px; border-radius: 16px; background: rgba(255,255,255,.75); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--soft); }
.lg-scopes li { display: flex; align-items: center; gap: 10px; }
.lg-scopes i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; }
.lg-scopes i.ok { background: rgba(60,207,122,.16); } .lg-scopes i.ok::after { content: ''; width: 7px; height: 4px; border: solid #1f9d5a; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.lg-scopes i.no { background: rgba(26,33,51,.07); } .lg-scopes i.no::after { content: ''; width: 8px; height: 2px; border-radius: 2px; background: #8b8b92; }
.view[data-view="login"] .lg .lg-fine { position: static !important; margin: 0 !important; display: flex; gap: 8px; font-size: 13px; color: var(--grey); transform: none !important; }
.view[data-view="login"] .lg .lg-fine a { color: var(--soft) !important; text-decoration: none; }
@media (hover: hover) { .view[data-view="login"] .lg .lg-fine a:hover { color: var(--ink) !important; } }

/* ── the art: a handshake over a floating panel ──────────────────────── */
.lg-art { position: relative; z-index: 1; height: min(640px, 82vh); min-width: 0; }
.lg-shake { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); display: flex; align-items: center; gap: 0; z-index: 3; }
.lg-tile { width: 76px; height: 76px; border-radius: 22px; display: grid; place-items: center; overflow: hidden; flex: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 18px 34px -16px rgba(var(--sh), .55), 0 4px 10px -4px rgba(var(--sh), .25); animation: lg-bob 6s ease-in-out infinite; }
.lg-tile.discord { background: linear-gradient(180deg, #7480ff, var(--blurple)); }
.lg-tile.discord svg { width: 40px; height: 40px; fill: #fff; }
.lg-tile.bot img { width: 100%; height: 100%; object-fit: cover; }
.lg-tile.bot { animation-delay: -3s; }
.lg-wire { width: 200px; height: 70px; overflow: visible; }
.lg-wire path { fill: none; stroke: rgba(var(--sh), .22); stroke-width: 2; stroke-dasharray: 4 7; animation: lg-dash 1.2s linear infinite; }
.lg-wire circle { fill: var(--blurple); filter: drop-shadow(0 0 6px rgba(88,101,242,.8)); }
.lg-wire circle.b { fill: var(--live); filter: drop-shadow(0 0 6px rgba(60,207,122,.8)); }
@keyframes lg-dash { to { stroke-dashoffset: -22; } }
@keyframes lg-bob { 50% { transform: translateY(-8px); } }

.lg-stage { position: absolute; inset: 22% 0 0; perspective: 1300px; perspective-origin: 50% 30%; }
.lg-plane { position: absolute; left: 50%; top: 46%; width: 460px; height: 340px; margin: -170px 0 0 -230px; transform-style: preserve-3d;
  transform: rotateX(52deg) rotateZ(-22deg); animation: lg-turn 14s ease-in-out infinite; }
@keyframes lg-turn { 50% { transform: rotateX(48deg) rotateZ(-16deg); } }
.lg-card { position: absolute; width: 210px; height: 100px; padding: 16px 18px; border-radius: 16px; display: grid; align-content: start; gap: 6px;
  background: linear-gradient(180deg, #16181d, #0c0d10); color: #e9eaee; box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), inset 0 1px 0 rgba(255,255,255,.08);
  --z: 50px; transform: translateZ(var(--z)); animation: lg-hover 6s ease-in-out infinite; transform-style: preserve-3d; }
.lg-card::after { content: ''; position: absolute; inset: 10% 8%; border-radius: 16px; background: rgba(var(--sh), .5); filter: blur(18px); z-index: -1;
  transform: translateZ(calc(var(--z) * -1)) translate(calc(var(--z) * .12), calc(var(--z) * .38)); }
.lg-card b { font: 500 24px/1 var(--mono); color: #f2f3f5; } .lg-card b.live { color: var(--live); }
.lg-card small { font: 500 10px/1 var(--mono); letter-spacing: .14em; color: #7d8190; }
.lg-card.a { left: 0; top: 30px; --z: 80px; } .lg-card.b { left: 240px; top: 0; --z: 40px; animation-delay: -2s; } .lg-card.c { left: 220px; top: 150px; --z: 100px; animation-delay: -4s; }
.lg-chip { position: absolute; left: 30px; top: 210px; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; white-space: nowrap;
  background: #16181d; color: #e9eaee; font: 500 14px/1 var(--sans); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07);
  --z: 140px; transform: translateZ(var(--z)) rotateX(-22deg); animation: lg-hoverchip 5s ease-in-out infinite; }
@keyframes lg-hover { 50% { transform: translateZ(calc(var(--z) + 14px)); } }
@keyframes lg-hoverchip { 0%, 100% { transform: translateZ(var(--z)) rotateX(-22deg); } 50% { transform: translateZ(calc(var(--z) + 16px)) rotateX(-22deg); } }
.lg-float { position: absolute; border-radius: 24%; animation: lg-bob 9s ease-in-out infinite;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 18px 34px -16px rgba(var(--sh), .5); }
.lg-float.f1 { width: 54px; right: 12%; top: 30%; transform: rotate(12deg); animation-delay: -2s; }
.lg-float.f2 { width: 210px; right: -6%; bottom: -8%; filter: blur(14px); opacity: .75; will-change: transform; } /* bobs; its own layer keeps the blur from being redone each frame */

/* Entrances: the copy rises, the art settles in behind it. */
html[data-state="login"] .lg-copy > * { animation: lg-rise .9s var(--ease) both; }
html[data-state="login"] .lg-copy > :nth-child(2) { animation-delay: .06s; } html[data-state="login"] .lg-copy > :nth-child(3) { animation-delay: .12s; }
html[data-state="login"] .lg-copy > :nth-child(4) { animation-delay: .18s; } html[data-state="login"] .lg-copy > :nth-child(6) { animation-delay: .26s; }
html[data-state="login"] .lg-copy > :nth-child(7) { animation-delay: .32s; }
html[data-state="login"] .lg-art { animation: lg-in 1.3s var(--ease) both .15s; }
@keyframes lg-rise { from { opacity: 0; transform: translateY(16px); filter: blur(6px); } }
@keyframes lg-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }

@media (max-width: 880px) {
  .view[data-view="login"] .lg { grid-template-columns: 1fr; align-content: start; padding-top: max(36px, env(safe-area-inset-top, 0px)); }
  .lg-copy { justify-self: center; }
  .lg-art { height: 360px; order: -1; }
  .lg-stage { inset: 30% 0 0; } .lg-plane { transform: scale(.72) rotateX(52deg) rotateZ(-22deg); animation: none; }
  .lg-float { display: none; }
}
@media (max-width: 480px) {
  /* 460px board turned in 3D: at .72 it is ~400px wide, past a phone's edge. */
  .lg-plane { transform: scale(.6) rotateX(52deg) rotateZ(-22deg); }
  .lg-art { height: 320px; }
}
@media (prefers-reduced-motion: reduce) {
  .view[data-view="login"] .lg *, .view[data-view="login"] .lg *::after, html[data-state="login"] .lg-art { animation: none !important; }
}