/* Yard 14 sign-in: the seam. The debossed linked-Y wall is the ground; one molten seam runs under
   whatever you type; each digit of the code heats its own length of it; the right code cuts the
   seam open (THE CUT) and the page goes through. Fire palette, steel mark, Clash / General Sans,
   Geist Mono digits. Motion names and curves follow the identity. */
@font-face{font-family:"Clash Display";src:url(/f/clash-600.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"General Sans";src:url(/f/general-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"General Sans";src:url(/f/general-500.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Yard Digits";src:url(/f/geist-digits.woff2) format("woff2");font-display:block}
:root{--ink:#0B0A09;--plate:#151210;--steel:#B9B8B4;--paper:#F3F2EE;--ash:#8F8B85;--melt:#FFA24B;--coral:#FF6F61;--ember:#B23A28;
  --reveal:cubic-bezier(.2,.6,.2,1);--cut:cubic-bezier(.55,0,.25,1);--wipe:cubic-bezier(.65,0,.2,1);--heat:.62;--cy:62vh}
*{box-sizing:border-box}[hidden]{display:none!important}
html{background:var(--ink);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;min-height:100svh;display:grid;grid-template-rows:auto 1fr auto;overflow-x:hidden;color:var(--paper);
  font:400 16px/1.5 "General Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  background:
    radial-gradient(110% 46% at 50% var(--cy),rgba(255,162,75,calc(var(--heat)*.16)),rgba(255,111,97,calc(var(--heat)*.05)) 48%,transparent 74%),
    linear-gradient(180deg,rgba(11,10,9,.25),rgba(11,10,9,.5) 45%,rgba(11,10,9,.9)),
    var(--wall) 0 0/118px auto repeat,var(--ink);
  transition:background-color .3s}

.top{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:max(22px,env(safe-area-inset-top)) 24px 0}
.top svg{display:block;color:#F3F3F0;fill:currentColor}
.top .word{height:20px;width:auto}
.top .client{max-height:30px;max-width:140px;object-fit:contain;filter:brightness(0) invert(.76)}

main{align-self:center;width:100%;max-width:620px;margin:0 auto;padding:7vh 24px 5vh}
h1{margin:0;font:600 clamp(36px,10vw,60px)/.97 "Clash Display",system-ui,sans-serif;letter-spacing:.002em;text-wrap:balance}
.for{margin:16px 0 0;font-size:17px;line-height:1.4;color:var(--steel)}
.stage{margin-top:clamp(52px,11vh,104px)}

/* the seam: full-bleed under the active control, heat = brightness */
.bar{position:relative;isolation:isolate;display:flex;align-items:center;gap:12px;min-height:66px;padding-bottom:18px;--sh:clamp(84px,9vw,128px)}
.bar::after{content:"";position:absolute;z-index:-1;left:50%;width:100vw;transform:translateX(-50%);bottom:calc(var(--sh)/-2);height:var(--sh);
  background:url(/s/seam.jpg) center/100% clamp(84px,12vw,176px) no-repeat;
  -webkit-mask:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);mask:linear-gradient(180deg,transparent,#000 40%,#000 60%,transparent);
  filter:brightness(var(--heat)) saturate(calc(.55 + var(--heat) * .55));transition:filter .3s ease;animation:ignite 1.15s var(--wipe) .15s both}
@keyframes ignite{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.err .bar::after{filter:brightness(.5) saturate(1.5) hue-rotate(-16deg)}
.err .bar{animation:shake .36s var(--reveal)}
@keyframes shake{20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.f{display:contents}
.bar input[type=email]{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--paper);caret-color:var(--melt);
  font:500 22px/1.2 "General Sans",system-ui,sans-serif;padding:14px 0;text-shadow:0 1px 16px rgba(11,10,9,.95)}
.bar input::placeholder{color:rgba(243,242,238,.44)}
.go{flex:none;width:54px;height:54px;border-radius:50%;border:1px solid rgba(185,184,180,.3);background:rgba(11,10,9,.74);color:var(--paper);
  display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  transition:transform .2s var(--reveal),border-color .3s,color .3s}
.go:hover,.go:focus-visible,.me:hover .go,.me:focus-visible .go{border-color:var(--melt);color:var(--melt);outline:none}
.go:active,.me:active .go{transform:scale(.94)}
button.go[disabled]{opacity:.45;pointer-events:none}
.go svg{width:20px;height:20px}

/* one tap for the person the link was made for */
.me{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;align-items:center;gap:14px;min-height:66px;cursor:pointer}
.me .who{min-width:0;display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 16px rgba(11,10,9,.95)}
.me b{font:500 22px/1.15 "General Sans",system-ui,sans-serif;color:var(--paper)}
.me small{font-size:15px;color:var(--steel);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.me .go{margin-left:auto}

/* six cells on the seam; each digit lands molten and cools to paper */
.cells{position:relative;flex:1;display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(6px,2.4vw,14px);max-width:430px}
.cells span{position:relative;height:66px;display:grid;place-items:center;color:var(--paper);
  font:400 clamp(30px,8.4vw,42px)/1 "Yard Digits","Geist Mono",ui-monospace,monospace;text-shadow:0 1px 16px rgba(11,10,9,.9)}
.cells span::after{content:"";position:absolute;left:14%;right:14%;bottom:7px;height:2px;border-radius:2px;background:rgba(185,184,180,.3);transition:background .3s,box-shadow .3s}
.cells span.on{animation:cool .9s var(--reveal) both}
.cells span.on::after{background:var(--melt);box-shadow:0 0 16px 2px rgba(255,162,75,.6)}
.cells span.at::before{content:"";width:2px;height:38%;background:var(--melt);border-radius:1px;animation:blink 1s steps(1) infinite}
@keyframes cool{0%{color:#fff4e2;text-shadow:0 0 22px rgba(255,162,75,.95),0 0 6px #fff}100%{color:var(--paper);text-shadow:0 1px 16px rgba(11,10,9,.9)}}
@keyframes blink{50%{opacity:0}}
.cells input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;padding:0;border:0;outline:0;background:none;opacity:.001;
  color:transparent;caret-color:transparent;font-size:16px;letter-spacing:0;cursor:text}

.under{display:flex;align-items:center;gap:12px;margin-top:62px;min-height:38px}
#st{flex:1;min-width:0;margin:0;font-size:14.5px;line-height:1.4;color:var(--steel)}
#st.err{color:var(--coral)}
.link{all:unset;cursor:pointer;font-size:15px;color:var(--steel);border-bottom:1px solid rgba(185,184,180,.4);padding-bottom:1px;white-space:nowrap}
.link:hover,.link:focus-visible{color:var(--paper);border-color:var(--melt)}
.ic{all:unset;box-sizing:border-box;flex:none;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--steel);border:1px solid rgba(185,184,180,.24);cursor:pointer;transition:color .3s,border-color .3s,opacity .3s}
.ic:hover,.ic:focus-visible{color:var(--melt);border-color:var(--melt)}
.ic[disabled]{opacity:.3;pointer-events:none}
.ic svg{width:17px;height:17px}

.notice{width:100%;max-width:620px;margin:0 auto;padding:0 24px max(22px,env(safe-area-inset-bottom));font-size:12px;line-height:1.5;color:rgba(143,139,133,.8)}

/* entrance: REVEAL */
.rv{animation:rv .9s var(--reveal) var(--d,0ms) backwards}
@keyframes rv{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* THE CUT: a cutting head runs the seam, the page parts along it, the heat floods and clears */
.head,.flash{position:fixed;pointer-events:none;opacity:0}
.head{z-index:6;left:0;top:var(--cy);width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 12%,#ffe6c2 24%,rgba(255,162,75,.9) 40%,rgba(255,111,97,0) 70%)}
.head::after{content:"";position:absolute;right:50%;top:50%;width:46vw;height:3px;margin-top:-1.5px;border-radius:3px;background:linear-gradient(90deg,rgba(255,162,75,0),rgba(255,214,170,.95))}
.flash{z-index:5;inset:0;transform-origin:50% var(--cy);
  background:linear-gradient(180deg,rgba(11,10,9,0) calc(var(--cy) - 34vh),rgba(255,111,97,.22) calc(var(--cy) - 12vh),rgba(255,196,140,.8) calc(var(--cy) - 2vh),rgba(255,240,220,.98) var(--cy),rgba(255,196,140,.8) calc(var(--cy) + 2vh),rgba(255,111,97,.22) calc(var(--cy) + 12vh),rgba(11,10,9,0) calc(var(--cy) + 34vh))}
.cut .head{animation:head .72s var(--cut) forwards}
.cut .flash{animation:flash 1.05s var(--cut) .34s forwards}
.cut .lift{transition:transform .7s var(--cut) .3s,opacity .45s ease .3s;transform:translateY(-40px);opacity:0}
.cut .fall{transition:transform .7s var(--cut) .3s,opacity .45s ease .3s;transform:translateY(40px);opacity:0}
.cut .seamrow{transition:opacity .4s ease .7s;opacity:0}
@keyframes head{0%{opacity:1;transform:translateX(-50px)}100%{opacity:1;transform:translateX(calc(100vw + 50px))}}
@keyframes flash{0%{opacity:0;transform:scaleY(.04)}45%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.7)}}

@media (min-width:760px){main{padding-top:9vh}.top{padding-left:40px;padding-right:40px}.top .client{max-height:38px;max-width:180px}.bar{padding-bottom:24px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}