/* tora PRO chrome (look 17). Loaded after site.css. */

/* every lockup: heavier caps and a cleaner polished steel fall */
.tpro .tpro-p{font-weight:800;
  background-image:linear-gradient(180deg,#dae7f0 0%,#a9c6d9 34%,#7298b3 49%,#e2eff7 51.5%,#a8c5d8 64%,#d0e1ec 100%);
  background-size:100% 100%;background-position:0 0}

/* The big lockups: PRO drawn as a polished chrome object. The text stays in place underneath,
   so the lockup keeps its exact geometry and cap height; the drawings sit over its line box in em
   (their viewBox is that box in font units, with 40 units of bleed on every side).
   ::before  the reflected environment (pro-chrome-face.svg) seen through the letters
             (pro-chrome-mask.svg), plus a light that crosses now and then;
   ::after   what stays fixed to the metal: edge highlights, soft edge shading, colour fringes.
   In #pro the reflection rises into place as tora PRO forms (--pb 0..1), like a phone
   tilted towards the light. The text underneath is plain steel-blue (it gives the glow), so PRO
   still reads if the drawings fail to load. */
.pro-title .tpro-p,.tpro-chrome .tpro-p{position:relative;font-weight:900;background:none;animation:none;
  color:#8fb3cb;-webkit-text-fill-color:#8fb3cb;text-shadow:0 0 .16em rgb(143 179 203 / .24)}
.pro-title .tpro-p::before,.pro-title .tpro-p::after,.tpro-chrome .tpro-p::before,.tpro-chrome .tpro-p::after{
  content:"";position:absolute;left:-.04em;top:-.04em;width:2.704em;height:.8em;pointer-events:none}
.pro-title .tpro-p::before,.tpro-chrome .tpro-p::before{
  -webkit-mask:url(pro-chrome-mask.svg?v=1) 0 0/100% 100% no-repeat;mask:url(pro-chrome-mask.svg?v=1) 0 0/100% 100% no-repeat;
  background-image:linear-gradient(104deg,transparent 41%,rgb(255 214 190 / .2) 46%,rgb(255 255 255 / .62) 50%,rgb(190 235 255 / .2) 54%,transparent 59%),
    url(pro-chrome-face.svg?v=1);
  background-repeat:no-repeat;background-size:300% 100%,100% 1.1em;
  background-position-x:130%,0;background-position-y:0,calc((1 - var(--pb,1)) * .15em - .15em);
  animation:proChromeSweep 7s cubic-bezier(.45,0,.2,1) 1.2s infinite}
.pro-title .tpro-p::after,.tpro-chrome .tpro-p::after{background:url(pro-chrome.svg?v=1) 0 0/100% 100% no-repeat}
@keyframes proChromeSweep{0%,62%{background-position-x:130%,0}100%{background-position-x:-30%,0}}
/* phone sizes: a lighter cut of the same letters (optical sizing) so the counters stay open */
@media(max-width:820px){
  .pro-title .tpro-p::before,.tpro-chrome .tpro-p::before{-webkit-mask-image:url(pro-chrome-s-mask.svg?v=1);mask-image:url(pro-chrome-s-mask.svg?v=1)}
  .pro-title .tpro-p::after,.tpro-chrome .tpro-p::after{background-image:url(pro-chrome-s.svg?v=1)}
}

/* look 22 (captain): in the big lockups PRO stands exactly as tall as the o-r-a letters and on
   their baseline, only heavier. The chrome drawing ran .023em taller than the letters and sat
   .03em low; scale it about its bottom-left corner and lift it, in em so it holds at every size. */
.pro-title .tpro-p,.tpro-chrome .tpro-p{transform:translateY(var(--pro-dy,-.03em)) scale(calc(1.16 * var(--pro-k,.99)),var(--pro-k,.99))}