/* #bridge. Prefix every selector with #bridge. */

/* The finished state, in flow: reduced motion, no JS, or a failed module. Copy on Paper, bay-day under it. The plate's sky
   is flat Paper, so it tucks up under the copy with no visible edge. */
#bridge{--plate:max(100vw,780px)}
#bridge .bridge-stage{display:flow-root}
#bridge .bridge-copy{position:relative;z-index:1;padding-top:clamp(80px,10vw,144px)}
#bridge .bridge-dock{position:relative;z-index:3;margin-top:clamp(24px,3vw,40px)}
/* The subhead sits under the heading. The way in is the form's own button, under the form it submits, at every width. */
#bridge .bridge-sub{max-width:min(26em,calc(100% - clamp(380px,34.7vw,500px) - 48px));margin-top:clamp(16px,2.2svh,28px);font-size:var(--size-body);line-height:1.45;font-weight:500;color:var(--fg-2)}
@media (max-width:900px),(max-height:560px) and (min-width:560px){
  #bridge .bridge-sub{max-width:26em}
}
#bridge .bridge-art{margin-top:calc(var(--plate) * -.17);overflow:hidden}
#bridge .bridge-plate{width:var(--plate);max-width:none;height:auto;margin-left:calc((100% - var(--plate)) / 2)}

/* The finished state on a wide screen keeps the crossing's arrangement: heading at the left, form at the right. In flow the
   form fell under the button that submits it. */
@media (min-width:901px) and (min-height:561px){
  :is(html:not(.js),html.rm) #bridge .bridge-stage{position:relative}
  :is(html:not(.js),html.rm) #bridge .bridge-dock{position:absolute;inset:clamp(80px,10vw,144px) 0 auto;margin-top:0;pointer-events:none}
  :is(html:not(.js),html.rm) #bridge .hf{margin-left:auto}
}

/* The crossing: a tall runway and a sticky stage. */
html.js:not(.rm) #bridge{height:340vh;background:var(--ink);color:var(--paper)}
html.js:not(.rm) #bridge .bridge-edge{display:none}
html.js:not(.rm) #bridge .bridge-stage{position:sticky;top:0;height:100svh}
/* 100lvh, a little taller than the stage on a phone with its toolbar up, so the art never ends above the fold. */
html.js:not(.rm) #bridge .bridge-art{position:absolute;inset:0 0 auto;height:100lvh;margin:0;overflow:hidden}
html.js:not(.rm) #bridge .bridge-plate{position:absolute;top:0;left:0;margin:0;transform-origin:0 0;will-change:transform}
/* The images are only the fallback. display:none also keeps them from being fetched: is-ready comes once the crossfade needs them. */
html.js:not(.rm) #bridge:not(.is-ready) .bridge-plate,html.js:not(.rm) #bridge.is-gl .bridge-plate{display:none}
html.js:not(.rm) #bridge .bridge-day{opacity:0}
html.js:not(.rm) #bridge .bridge-canvas{position:absolute;inset:0;width:100%;height:100%;visibility:hidden;image-rendering:pixelated}
html.js:not(.rm) #bridge.is-gl .bridge-canvas{visibility:visible}
html.js:not(.rm) #bridge .bridge-pearl{position:absolute;top:0;left:0;will-change:transform}
html.js:not(.rm) #bridge .bridge-pearl img{position:absolute;inset:0;width:100%;height:100%;max-width:none;image-rendering:pixelated}

/* The copy sits in the sky. The Paper copy is the real one. bridge.js clones it in Ink, and each is clipped to its side of
   the dawn. In the sky the dissolve has narrowed to almost an edge, so what lies behind a glyph is flat Ink or flat Paper.
   The small margin only tidies the few cells that are left, and on flat ground it is invisible. No blur: it is not a glow. */
html.js:not(.rm) #bridge .bridge-copy{--halo:var(--ink);position:absolute;top:clamp(72px,11svh,112px);left:0;right:0;z-index:1;padding:0;color:var(--paper)}
html.js:not(.rm) #bridge .bridge-copy-day{--halo:var(--paper);z-index:2;color:var(--ink);pointer-events:none;user-select:none;-webkit-user-select:none}
html.js:not(.rm) #bridge .bridge-sub{color:var(--paper-72)}
html.js:not(.rm) #bridge .bridge-copy-day .bridge-sub{color:var(--muted)}
html.js:not(.rm) #bridge .bridge-sub{--r:.05em;--a:calc(var(--r) * .71);text-shadow:var(--r) 0 var(--halo),calc(var(--r) * -1) 0 var(--halo),0 var(--r) var(--halo),0 calc(var(--r) * -1) var(--halo),var(--a) var(--a) var(--halo),calc(var(--a) * -1) var(--a) var(--halo),var(--a) calc(var(--a) * -1) var(--halo),calc(var(--a) * -1) calc(var(--a) * -1) var(--halo)}
html.js:not(.rm) #bridge .bridge-copy h2{
  --a:calc(var(--r) * .71);--h:calc(var(--r) * .5);
  text-shadow:var(--r) 0 var(--halo),calc(var(--r) * -1) 0 var(--halo),0 var(--r) var(--halo),0 calc(var(--r) * -1) var(--halo),
    var(--a) var(--a) var(--halo),calc(var(--a) * -1) var(--a) var(--halo),var(--a) calc(var(--a) * -1) var(--halo),calc(var(--a) * -1) calc(var(--a) * -1) var(--halo),
    var(--h) 0 var(--halo),calc(var(--h) * -1) 0 var(--halo),0 var(--h) var(--halo),0 calc(var(--h) * -1) var(--halo)}
html.js:not(.rm) #bridge .bridge-copy h2{--r:.016em}

/* The header's Ink copy, for the crossing only. bridge.js adds it. The real header stays Paper under it, and keeps the links. */
.site-header .bridge-masthead-day{--fg:var(--ink);--r:.05em;--a:calc(var(--r) * .71);position:absolute;inset:0 0 auto;color:var(--ink);text-shadow:var(--r) 0 var(--paper),calc(var(--r) * -1) 0 var(--paper),0 var(--r) var(--paper),0 calc(var(--r) * -1) var(--paper),var(--a) var(--a) var(--paper),calc(var(--a) * -1) var(--a) var(--paper),var(--a) calc(var(--a) * -1) var(--paper),calc(var(--a) * -1) calc(var(--a) * -1) var(--paper)}
.site-header .bridge-masthead-day :is(a,button){pointer-events:none}
.site-header .bridge-masthead-day .menu-toggle span{box-shadow:0 0 0 2px var(--paper)}
body.menu-open .site-header .bridge-masthead-day{display:none}
/* A focus ring that reads on either side of the dawn. */
.site-header:has(.bridge-masthead-day:not([hidden])) .masthead :focus-visible{outline:2px solid var(--paper);outline-offset:2px;box-shadow:0 0 0 2px var(--ink)}

/* The crossing: the heading in the sky at the left, the form at the right. */
html.js:not(.rm) #bridge .bridge-dock{position:absolute;top:clamp(72px,11svh,112px);left:0;right:0;margin-top:0;pointer-events:none}

/* The form is the bridge site's: words on the ground, one line under the amount, no surface. Night and day are the same form in
   different inks, so every colour here goes through these. Without JS or with reduced motion it stays on Paper. */
#bridge .hf{--f:var(--fg);--f2:var(--fg-2);--f3:var(--bg);--mark:var(--ink);--go-hover:var(--ink-soft);--amount-h:clamp(52px,8svh,68px);--amount-size:min(clamp(40px,3.9vw,56px),var(--amount-h) * .9);--token-size:clamp(22px,1.8vw,26px);width:min(100%,clamp(380px,34.7vw,500px));color:var(--f);pointer-events:auto}
html.js:not(.rm) #bridge .hf{--f:var(--paper);--f2:var(--paper-72);--f3:var(--ink);--mark:var(--mineral);--go-hover:var(--paper-soft);margin-left:auto}
html.js:not(.rm) #bridge :is(.hf.is-day,.bridge-dock-day .hf){--f:var(--ink);--f2:var(--muted);--f3:var(--paper);--mark:var(--ink);--go-hover:var(--ink-soft)}
/* The same small margin as the heading's, for the few cells of dissolve the words can land on. It is invisible on flat ground. */
html.js:not(.rm) #bridge .hf{--halo:var(--ink)}
html.js:not(.rm) #bridge :is(.hf.is-day,.bridge-dock-day .hf){--halo:var(--paper)}
html.js:not(.rm) #bridge :is(.hf-top,.hf-amount,.hf-token,.hf-rate){--r:.05em;--a:calc(var(--r) * .71);text-shadow:var(--r) 0 var(--halo),calc(var(--r) * -1) 0 var(--halo),0 var(--r) var(--halo),0 calc(var(--r) * -1) var(--halo),var(--a) var(--a) var(--halo),calc(var(--a) * -1) var(--a) var(--halo),var(--a) calc(var(--a) * -1) var(--halo),calc(var(--a) * -1) calc(var(--a) * -1) var(--halo)}
html.js:not(.rm) #bridge :is(.hf-amount,.hf-token){--r:.016em}
/* The Ink copy lies over the real form and takes no presses. The real form is masked where the copy shows, and a mask, unlike a clip, still takes presses. */
html.js:not(.rm) #bridge .bridge-dock-day{z-index:4}
html.js:not(.rm) #bridge .bridge-dock-day .hf{pointer-events:none}
#bridge .hf-top{display:flex;align-items:center;gap:10px;min-height:24px;font-size:15px;line-height:24px;color:var(--f2)}
#bridge .hf-label{min-width:40px;font-weight:500}
#bridge .hf-chain{display:inline-flex;align-items:center;gap:7px;color:var(--f);font-weight:600}
#bridge .hf-mark{flex:none;width:calc(.86em * 318 / 250);height:.86em;fill:var(--mark)}
#bridge .hf-eth{flex:none;width:auto;height:1.04em}
#bridge .hf-wp{flex:none;width:1.08em;height:1.08em;align-self:center}
#bridge .hf-row{position:relative;display:flex;align-items:baseline;gap:14px;margin-top:2px}
/* The line is 4px, drawn at half until the field has focus. is-typing carries that to the Ink copy. */
#bridge .hf-row-in::after{content:'';position:absolute;inset:auto 0 0;height:4px;background:var(--f);transform:scaleY(.5);transform-origin:bottom;transition:transform var(--hover-out) var(--ease-out);pointer-events:none}
#bridge .hf-row-in:focus-within::after,#bridge.is-typing .hf-row-in::after{transform:none;transition-duration:var(--hover-in)}
#bridge .hf-amount{flex:1;display:block;min-width:0;width:100%;height:var(--amount-h);padding:0;border:0;border-radius:0;background:none;color:var(--f);caret-color:var(--f);font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--amount-size);font-weight:400;line-height:var(--amount-h);letter-spacing:-.025em;font-variant-numeric:lining-nums;outline:none;appearance:none;-webkit-appearance:none}
#bridge .hf-amount::placeholder{color:var(--f2);opacity:1}
#bridge output.hf-amount{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#bridge .hf-amount.is-zero{color:var(--f2)}
#bridge .hf-token{flex:none;display:inline-flex;align-items:baseline;gap:8px;font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--token-size);line-height:1;letter-spacing:-.02em}
#bridge .hf-side+.hf-side{margin-top:clamp(8px,1.6svh,16px)}
#bridge .hf-rate{display:flex;align-items:center;min-height:clamp(32px,4.8svh,44px);font-size:15px;line-height:24px;color:var(--f2)}
/* Colour changes at once: the form changes ink under the dawn, where a fade would show. */
#bridge .hf-go{width:100%;background:var(--f);color:var(--f3);transition:transform var(--press) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  #bridge .hf-go:hover{background:var(--go-hover)}
}

/* Stacked: the heading, then the form under it, both above the hills. */
@media (max-width:900px){
  html.js:not(.rm) #bridge .bridge-dock{top:calc(clamp(72px,11svh,112px) + var(--copy-h,var(--size-section) * 2.2) + 16px)}
  html.js:not(.rm) #bridge .hf{margin-left:0}
  #bridge .hf{width:min(100%,560px);--amount-h:clamp(52px,7svh,64px);--amount-size:min(clamp(40px,12vw,52px),var(--amount-h) * .9);--token-size:clamp(22px,5.6vw,26px)}
  #bridge .hf-rate{min-height:32px}
}

/* Under this width the second line no longer fits at the 44px minimum. The two lines are the design, so the size gives way. */
@media (max-width:373px){
  #bridge h2{font-size:calc((100vw - 2 * var(--gutter)) / 8.1)}
}

/* A short window: the form tightens to stay above the bridge. */
@media (max-height:720px){
  #bridge .hf{--amount-h:44px;--amount-size:38px;--token-size:22px}
  #bridge .hf-rate{display:none}
  #bridge .hf-side+.hf-side{margin-top:6px}
  #bridge .hf-go{margin-top:12px}
}

/* A phone on its side has no height to stack in: the heading, then From and To in a row, and the button at the end. */
@media (max-height:560px) and (min-width:560px){
  html.js:not(.rm) #bridge .bridge-copy{top:60px}
  html.js:not(.rm) #bridge .bridge-copy h2 br{display:none}
  html.js:not(.rm) #bridge .bridge-copy h2{font-size:min(var(--size-section),7vw,36px)}
  html.js:not(.rm) #bridge .bridge-dock{top:calc(60px + var(--copy-h,40px) + 10px)}
  html.js:not(.rm) #bridge .bridge-sub{margin-top:4px;font-size:15px;line-height:20px}
  html.js:not(.rm) #bridge .hf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;column-gap:24px;width:100%;margin:0;--amount-h:36px;--amount-size:28px;--token-size:17px}
  html.js:not(.rm) #bridge .hf-side+.hf-side{margin-top:0}
  html.js:not(.rm) #bridge .hf-go{width:auto;margin:0;min-height:44px;padding:6px 14px;font-size:15px}
  html.js:not(.rm) #bridge .hf-top{min-height:18px;font-size:13px;line-height:18px}
}
@media (min-width:2400px){
  #bridge .hf{--amount-h:clamp(68px,2.9vw,120px);--amount-size:min(clamp(56px,2.4vw,96px),var(--amount-h) * .9);--token-size:clamp(26px,1.1vw,42px);width:clamp(620px,26vw,1000px)}
  #bridge .hf-top,#bridge .hf-rate{font-size:clamp(15px,.7vw,24px);line-height:1.5}
  #bridge .bridge-sub{max-width:min(26em,calc(100% - clamp(620px,26vw,1000px) - 96px))}
}