/* sheet-gate.css. The sheet behind the form (072, sheet_gate.py). Site tokens only (site.css :root): the page is the site's
   own, and the intro is Premier Fencing's portal (build_prospect_page.py) drawn with the site's mask wordmark. */
.sg{padding-bottom:clamp(3rem,8vh,5rem)}
.sg-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.sg h1{font-size:clamp(1.9rem,4.4vw,3.15rem);max-width:15ch;letter-spacing:.1em;line-height:1.08}
.sg .lede{margin-top:1.7rem;max-width:44ch}
.sg-peek{margin:2.6rem 0 0;max-width:400px;border-radius:12px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(228,233,234,.06) inset,0 40px 90px -40px rgba(0,0,0,.9);
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,0) 100%);
  max-height:420px}
.sg-peek img{display:block;width:100%;height:auto}
.sg-panel{position:relative;margin-top:.4rem;padding:clamp(1.4rem,3vw,2.3rem);border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(180deg,rgba(228,233,234,.045),rgba(228,233,234,.015));
  -webkit-backdrop-filter:blur(16px) saturate(120%);backdrop-filter:blur(16px) saturate(120%);
  box-shadow:inset 0 1px 0 rgba(228,233,234,.07),0 30px 70px -40px rgba(0,0,0,.85)}
.sg-l{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:var(--muted);margin:0}
.sg-panel .gin{margin-bottom:1.3rem}
.sg-kind{border:0;margin:.2rem 0 1.3rem;padding:0;min-width:0}
.sg-pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.75rem}
.sg-pills input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.sg-pills label{display:inline-flex;align-items:center;min-height:44px;padding:0 1.05rem;border:1px solid var(--line);border-radius:999px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);cursor:pointer;
  transition:border-color .3s,color .3s,background-color .3s}
.sg-pills label:hover{color:var(--ink)}
.sg-pills input:checked+label{border-color:var(--silver);color:var(--ink);background:rgba(228,233,234,.07)}
.sg-pills input:focus-visible+label{outline:1px solid var(--accent);outline-offset:3px}
#sg-send{width:100%;justify-content:center;margin-top:.2rem}
.sg-under{margin-top:.85rem;font-size:.86rem;color:var(--muted)}
.sg-note{margin-top:1.5rem;padding-top:1.15rem;border-top:1px solid var(--line-2);font-size:.82rem;line-height:1.6;color:var(--muted)}
.sg-talk{margin-top:.75rem;font-size:.86rem;color:var(--muted)}
.sg-note a,.sg-talk a{color:var(--ink);text-underline-offset:3px}
@media (max-width:860px){
  .sg-grid{grid-template-columns:1fr}
  .sg-peek{display:none}
  .sg-panel{margin-top:0}
}

/* the intro: the wordmark fades in, a rule draws, "Verifying" blinks until the server says yes, "Secured" types in, the
   welcome rises, and the page goes to the sheet, which fades in on its own. The second half waits on .ok, so "Secured" is
   never shown before the link exists. */
.sg-portal{position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;padding:24px;
  background:var(--bg);color:var(--ink);opacity:0;transition:opacity .45s ease}
html.sg-on .sg-portal{display:flex}
html.sg-on.sg-shown .sg-portal{opacity:1}
html.sg-on body{overflow:hidden}
.sg-grid-bg{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;
  -webkit-mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%);mask-image:radial-gradient(ellipse at center,#000 10%,transparent 70%)}
.sg-scan{position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:0}
.sg-stage{position:relative;width:100%;max-width:520px;text-align:center;transition:opacity .4s ease,transform .4s ease}
.sg-wm{display:block;width:220px;height:30px;margin:0 auto;color:var(--ink);opacity:0}
.sg-rule{height:1px;width:220px;margin:26px auto 18px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%}
.sg-status{height:16px;position:relative;font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase}
.sg-status span{position:absolute;left:0;right:0}
.sg-verify{color:var(--muted);opacity:0}
.sg-secured{color:var(--accent);clip-path:inset(0 100% 0 0)}
.sg-welcome{font-family:var(--mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin:42px 0 10px;opacity:0}
.sg-name{font-size:clamp(34px,9vw,54px);line-height:1;font-weight:200;letter-spacing:.06em;text-transform:uppercase;opacity:0;overflow-wrap:anywhere}
.sg-co{font-family:var(--mono);font-size:12px;letter-spacing:.34em;text-transform:uppercase;color:var(--accent);margin:16px 0 0;opacity:0;overflow-wrap:anywhere}
.sg-portal.go .sg-wm{animation:sgFade .9s cubic-bezier(.2,.7,.2,1) .15s both}
.sg-portal.go .sg-scan{animation:sgScan 1.6s cubic-bezier(.2,.7,.2,1) .55s both}
.sg-portal.go .sg-rule{animation:sgRule .62s cubic-bezier(.2,.7,.2,1) 1s both}
.sg-portal.go .sg-verify{animation:sgPulse .9s ease-in-out 1.05s infinite alternate both}
.sg-portal.ok .sg-verify{animation:sgOut .2s ease both}
.sg-portal.ok .sg-secured{animation:sgType .5s steps(7,end) .15s both}
.sg-portal.ok .sg-welcome{animation:sgRise .6s cubic-bezier(.2,.7,.2,1) .75s both}
.sg-portal.ok .sg-name{animation:sgName .9s cubic-bezier(.2,.7,.2,1) .9s both}
.sg-portal.ok .sg-co{animation:sgRise .6s cubic-bezier(.2,.7,.2,1) 1.25s both}
.sg-portal.out .sg-stage{opacity:0;transform:scale(.985)}
.sg-portal.out .sg-grid-bg{opacity:0;transition:opacity .4s ease}
@keyframes sgFade{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:blur(0)}}
@keyframes sgScan{0%{opacity:0;transform:translateY(0)}15%{opacity:.9}100%{opacity:0;transform:translateY(100vh)}}
@keyframes sgRule{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes sgPulse{from{opacity:.25}to{opacity:1}}
@keyframes sgOut{to{opacity:0}}
@keyframes sgType{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes sgRise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes sgName{from{opacity:0;letter-spacing:.32em;filter:blur(6px)}to{opacity:1;letter-spacing:.06em;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){
  .sg-portal,.sg-stage{transition:none}
  .sg-portal.go .sg-wm,.sg-portal.go .sg-rule{animation:none;opacity:1;transform:none}
  .sg-portal.go .sg-scan{animation:none}
  .sg-portal.go .sg-verify{animation:none;opacity:1}
  .sg-portal.ok .sg-verify{animation:none;opacity:0}
  .sg-portal.ok .sg-secured,.sg-portal.ok .sg-welcome,.sg-portal.ok .sg-name,.sg-portal.ok .sg-co{animation:none;opacity:1;clip-path:none}
}