/* Signed-out landing: the screen is an invisible 3x3 grid on dotted paper. One cell at a time, from the
   top left, the live video spreads in; when all nine are filled, the sign-in rises over it. */
body.landing{--l-paper:#fff;--l-dot:#cfcbc4;--l-ink:#141210;--l-mute:#6b665d;--l-line:#e7e2d9;
  --l-ox:#4a120a;--l-ember:#9a3412;--l-amber:#d98a1f;
  color-scheme:light;background:var(--l-paper);color:var(--l-ink);min-height:100vh;overflow:hidden;
  background-image:radial-gradient(var(--l-dot) 1px,transparent 1.2px);background-size:24px 24px}
body.landing>header,body.landing>main{display:none}

/* The full-screen frame: one canvas paints the live video through a soft, growing mask — no seams. */
.ld-frame{position:fixed;inset:0;z-index:1}
.ld-canvas,.ld-video{position:absolute;inset:0;width:100%;height:100%;display:block}
.ld-video{object-fit:cover;opacity:0}
.ld-scrim{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;
  background:radial-gradient(70% 70% at 50% 55%,rgba(10,8,7,.55),rgba(10,8,7,.25) 70%,rgba(10,8,7,.45)),
             linear-gradient(to bottom,rgba(10,8,7,.35),transparent 30%,transparent 70%,rgba(10,8,7,.5))}

.ld.filled .ld-video{opacity:1}
.ld.filled .ld-canvas{visibility:hidden}
.ld.dim .ld-scrim{opacity:1}

/* The sign-in, over the video. */
.ld-over{position:fixed;inset:0;z-index:2;overflow:auto;display:grid;grid-template-rows:auto 1fr;padding:24px 16px;
  pointer-events:none}
.ld.ready .ld-over{pointer-events:auto}
.ld-mark{line-height:0;padding:4px 8px}
.ld-mark img{height:34px;width:auto;filter:drop-shadow(0 1px 12px rgba(0,0,0,.35));opacity:0;transform-origin:50% 50%;
  transition:opacity .9s ease,transform 1.15s cubic-bezier(.65,0,.25,1)}
.ld-mark img.shown{opacity:1}
.ld-copy{align-self:center;justify-self:center;text-align:center;max-width:640px;width:100%;padding:24px 0}
.ld-copy{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.ld-copy>*{opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.ld.ready .ld-copy,.ld.ready .ld-copy>*{opacity:1;transform:none}
.ld.ready .ld-copy>:nth-child(2){transition-delay:.15s}
.ld.ready .ld-copy>:nth-child(3){transition-delay:.3s}

.ld h1{font:400 clamp(42px,6vw,88px)/1.02 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  letter-spacing:-.025em;margin:0 0 18px;color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.ld h1 em{font-style:italic;background:linear-gradient(100deg,#f0b35a,var(--l-amber) 45%,#e0662a);
  -webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em;text-shadow:none}
.ld-sub{font:500 13px/1 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.78);margin:0 0 36px}

.ld-card{background:#fff;border:1px solid var(--l-line);border-radius:18px;padding:8px;max-width:420px;margin:0 auto;text-align:left;
  box-shadow:0 30px 80px -24px rgba(0,0,0,.6)}
.ld-band{position:relative;overflow:hidden;border-radius:12px;padding:28px 24px 24px;color:#fff;
  background:radial-gradient(120% 140% at 100% 0%,var(--l-amber) 0%,transparent 55%),
             linear-gradient(135deg,var(--l-ox) 0%,var(--l-ember) 70%,#b4531a 100%)}
.ld-band::before{content:"";position:absolute;inset:0;opacity:.18;pointer-events:none;
  background-image:radial-gradient(#fff 1px,transparent 1.2px);background-size:12px 12px}
.ld-band>*{position:relative}
.ld-band .k{font:600 11px/1 system-ui,sans-serif;letter-spacing:.26em;text-transform:uppercase;opacity:.8;margin:0 0 10px}
.ld-band .t{font:400 24px/1.2 "Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;margin:0 0 22px}
.ld-google{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;padding:13px 16px;
  border:0;border-radius:10px;background:#fff;color:var(--l-ink);font:600 15px/1 system-ui,sans-serif;
  box-shadow:0 8px 24px -10px rgba(0,0,0,.5);transition:transform .2s ease,box-shadow .2s ease}
.ld-google:hover{transform:translateY(-1px);box-shadow:0 14px 30px -12px rgba(0,0,0,.6)}
.ld-google:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ld-google:disabled{opacity:.75;cursor:progress;transform:none}
.ld-google svg{width:18px;height:18px;flex:none}
.ld-note{font:13px/1.5 system-ui,sans-serif;color:var(--l-mute);margin:14px 16px 8px}
.ld-err{font:13px/1.5 system-ui,sans-serif;color:#a4262c;margin:0 16px 8px}

@media (prefers-reduced-motion:reduce){
  .ld-copy,.ld-copy>*,.ld-scrim,.ld-mark img{transition:none!important}
}