/* Plate 4: speed. The hummingbird, this page's own measured load time, and a race between
   two phones: the typical template site against a web.vi site. Then three facts. */
.sp{--sea:#062F2D;--sea-2:#0A3D3A;--foam:#A9C4BE;padding:40px var(--g) calc(env(safe-area-inset-bottom) + 104px);overflow:hidden;color:var(--marble)}
.plate.sp{background:var(--sea)}

/* the hummingbird hovers while the plate is on screen */
.sp-bird{position:relative;z-index:1;display:block;width:78vw;max-width:440px;margin:0 -4vw 0 auto}
.sp-bird img{width:100%;height:auto;transform-origin:64% 46%}
html.js:not(.calm) .sp.is-live .sp-bird img{animation:sp-hover 2.4s ease-in-out infinite alternate}
@keyframes sp-hover{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(-1.2%,-3.2%,0) rotate(-1deg)}}

/* this page loaded in */
.sp-head{position:relative;z-index:2;margin-top:-2px}
.sp-head h2{font-weight:400}
.sp-lead{display:block;font:italic 400 23px/1.2 var(--garamond);color:var(--foam)}
.sp-num{display:flex;align-items:baseline;gap:.05em;margin:.03em 0 0 -.035em;font:200 min(54vw,300px)/.8 var(--didone);font-stretch:62.5%;letter-spacing:-.02em;color:var(--marble);font-variant-numeric:lining-nums tabular-nums}
.sp-unit{font:italic 300 .3em/1 var(--didone);font-stretch:62.5%;letter-spacing:0;color:var(--lagoon);text-shadow:0 0 .35em rgba(70,232,212,.4)}
.sp-sub{margin-top:24px;font-size:20px;line-height:1.45;color:var(--foam);max-width:31ch;text-wrap:pretty}
.sp-sub b{font-weight:500;color:var(--marble)}

/* the race */
.sp-race{position:relative;z-index:2;margin-top:72px}
.sp-lanes{display:grid;grid-template-columns:1fr 1fr;gap:20px;max-width:560px}
.sp-lane{position:relative;min-width:0;container-type:inline-size}
.sp-slow{z-index:2}
.sp-lane h3{margin-bottom:16px;font:400 18px/1.2 var(--garamond);color:var(--marble)}
.sp-clock{margin-top:22px;font:500 30px/1 var(--mono);color:var(--foam);white-space:nowrap}
.sp-clock b{font-weight:500;color:var(--marble);font-variant-numeric:tabular-nums}
.sp-clock span{margin-left:.22em;font-size:.72em}
.sp-fast .sp-clock b{color:var(--lagoon);text-shadow:0 0 18px rgba(70,232,212,.35)}
.sp-left{margin-top:9px;font-size:17px;line-height:1.3;color:var(--foam)}
.sp-left span{display:block}
.sp-left b{font-weight:600;color:var(--marble);font-variant-numeric:tabular-nums}
.losing .sp-slow .sp-left b{color:var(--flame)}
.sp-again{margin-top:26px;padding:10px 0;border:0;background:none;cursor:pointer;font:italic 500 19px/1 var(--garamond);color:var(--marble);
  text-decoration:underline 1px var(--lagoon);text-underline-offset:6px;-webkit-tap-highlight-color:transparent}
.sp-again:hover{color:var(--lagoon)}
html.calm .sp-again,html:not(.js) .sp-again{display:none}

/* the phones: the same device as the designs plate */
.sp-phone{position:relative;aspect-ratio:9/19.3;border-radius:13cqi;
  box-shadow:0 0 0 3.5cqi var(--sea-2),0 0 0 calc(3.5cqi + 1px) rgba(169,196,190,.26),0 20cqi 40cqi -10cqi rgba(1,16,15,.9),0 0 60cqi rgba(70,232,212,0);transition:box-shadow .6s var(--ease)}
.sp-fast .sp-phone{transition-duration:.25s}
.fast-on .sp-fast .sp-phone{box-shadow:0 0 0 3.5cqi var(--sea-2),0 0 0 calc(3.5cqi + 1px) rgba(169,196,190,.26),0 20cqi 40cqi -10cqi rgba(1,16,15,.9),0 0 60cqi rgba(70,232,212,.16)}
.sp-screen{position:absolute;inset:0;overflow:hidden;border-radius:inherit;background:#fff;isolation:isolate;container-type:inline-size;transition:background-color .12s linear}
.sp-screen::before{content:"";position:absolute;inset:0;z-index:5;background:linear-gradient(118deg,rgba(255,255,255,.16),rgba(255,255,255,0) 32%);pointer-events:none}
.sp-screen::after{content:"";position:absolute;z-index:6;top:4cqi;left:50%;width:30%;height:8.5cqi;transform:translateX(-50%);border-radius:5cqi;background:#000}
/* before the race the screens are off */
.is-off .sp-screen{background:#03201F}
.is-off .tp,.is-off .rf{visibility:hidden}

/* the typical template site arrives in pieces */
.tp{position:absolute;inset:0;background:#fff;color:#222;font-family:Arial,"Liberation Sans",Helvetica,sans-serif}
.tp>*{position:absolute;opacity:0;transition:opacity .2s linear}
.tp-spin{left:50%;top:44%;width:14cqi;height:14cqi;margin:-7cqi 0 0 -7cqi;border-radius:50%;border:2cqi solid #e3e3e3;border-top-color:#1e5aa8}
.is-running:not(.st1) .tp-spin{opacity:1;transition:none;animation:sp-spin .8s linear infinite}
@keyframes sp-spin{to{transform:rotate(1turn)}}
.tp-bar{left:0;right:0;top:0;height:20%;background:#1e5aa8}
.tp-logo{position:absolute;left:7cqi;bottom:6cqi;width:30cqi;height:6cqi;border-radius:1cqi;background:rgba(255,255,255,.88)}
.tp-menu{position:absolute;right:7cqi;bottom:6.4cqi;width:7cqi;height:5cqi;border:solid #fff;border-width:.9cqi 0;background:linear-gradient(#fff,#fff) 0 50%/100% .9cqi no-repeat}
.tp-img{left:0;right:0;top:20%;height:38%;background:#ececec}
.tp-pic{left:0;right:0;top:20%;height:38%;transition-duration:.5s}
.tp-pic img{width:100%;height:100%;object-fit:cover}
.tp-txt{left:8%;right:8%;top:62%;display:grid;gap:4cqi}
.tp-txt b{display:block;max-height:0;overflow:hidden;opacity:0;font:700 7.6cqi/1.08 Arial,"Liberation Sans",Helvetica,sans-serif;color:#1b1b1b;transition:max-height .3s var(--ease),opacity .2s linear}
.tp-txt i{height:4cqi;border-radius:2cqi;background:#e6e6e6}
.tp-txt i:nth-of-type(2){width:80%}
.tp-txt i:nth-of-type(3){width:60%}
.tp-cookie{left:0;right:0;bottom:0;height:22%;padding:4.5cqi 8cqi 0;background:#2b2b2b;color:#d6d6d6;font:3.6cqi/1.35 Arial,"Liberation Sans",Helvetica,sans-serif;transform:translateY(100%);
  transition:transform .45s cubic-bezier(.34,1.5,.5,1),opacity 0s linear .45s}
.tp-cookie span{display:block}
.tp-cookie b{display:inline-block;margin-top:2.6cqi;padding:1.6cqi 4.4cqi;background:#4caf50;color:#fff}
.st1 .tp-bar,.st2 .tp-txt,.st3 .tp-img,.st4 .tp-pic{opacity:1}
.st4 .tp-txt b{max-height:20cqi;opacity:1}
.st5 .tp-cookie{opacity:1;transform:none;transition:transform .45s cubic-bezier(.34,1.5,.5,1)}

/* the web.vi site: Reef Hour, the snorkel design from the designs plate */
.rf{position:absolute;inset:0;isolation:isolate;display:flex;flex-direction:column;padding:17cqi 7.5cqi 9cqi;background:#bfe7e0;color:#04312d;opacity:0;transition:opacity .12s linear}
.rf picture,.rf img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.rf-nav{display:flex;justify-content:space-between;align-items:center;font:900 5cqi/1 var(--didone)}
.rf-nav i{position:relative;width:6.5cqi;height:4cqi;border:solid currentColor;border-width:1.5px 0}
.rf-nav i::after{content:"";position:absolute;left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;background:currentColor}
.rf-h{margin-top:7cqi;font:900 20cqi/.82 var(--didone);letter-spacing:-.03em}
.rf-times{margin-top:auto;display:flex;gap:2cqi}
.rf-times span{flex:1;padding:3cqi 0;border-radius:3cqi;background:rgba(255,255,255,.9);font:500 4cqi/1 var(--mono);text-align:center}
.rf-times span:first-child{background:#04312d;color:#fff}
.rf-cta{margin-top:2.5cqi;padding:3.2cqi 5.5cqi;border-radius:2.2cqi;background:#FFD24A;text-align:center;font:700 4.2cqi/1.3 var(--garamond)}
.fast-on .rf{opacity:1}

/* resetting for another run happens in one frame */
.no-tr,.no-tr *{transition:none!important}

/* three facts */
.sp-facts{position:relative;z-index:2;margin:88px 0 0;padding:0;list-style:none}
.sp-facts li{padding:22px 0 28px;border-top:1px solid rgba(169,196,190,.24)}
.sp-facts b{display:block;margin-bottom:10px;font:300 66px/.9 var(--didone);font-stretch:62.5%;letter-spacing:-.01em;color:var(--marble)}
.sp-facts li:last-child b{color:var(--lagoon)}
.sp-facts span{display:block;max-width:30ch;font-size:19px;line-height:1.45;color:var(--foam)}

@media (min-width:600px){
  .sp-lanes{gap:48px;max-width:600px}
  .sp-left span{display:inline}
}

/* wide screens: the number beside the bird, then the race beside the facts */
@media (min-width:900px) and (orientation:landscape){
  .sp{display:grid;grid-template-columns:minmax(0,1fr) min(38vw,740px);grid-template-areas:"head bird" "race facts";column-gap:6vw;row-gap:17svh;align-items:center;padding:15svh var(--g) 16svh}
  .sp-bird{grid-area:bird;width:100%;max-width:none;margin:0}
  .sp-head{grid-area:head;margin:0}
  .sp-lead{font-size:clamp(26px,1.7vw,34px)}
  .sp-num{font-size:min(50svh,27vw)}
  .sp-sub{margin-top:min(5svh,44px);font-size:clamp(21px,1.3vw,25px);max-width:34ch}
  .sp-race{grid-area:race;margin:0}
  .sp-lanes{grid-template-columns:repeat(2,min(270px,29svh));gap:clamp(40px,3.4vw,64px);max-width:none}
  .sp-lane h3{margin-bottom:22px;font-size:20px}
  .sp-clock{margin-top:28px;font-size:clamp(34px,2.3vw,44px)}
  .sp-left{font-size:18px}
  .sp-left span{display:inline}
  .sp-again{margin-top:22px;font-size:20px}
  .sp-facts{grid-area:facts;margin:0}
  .sp-facts li{padding:24px 0 30px}
  .sp-facts li:last-child{border-bottom:1px solid rgba(169,196,190,.24)}
  .sp-facts b{margin-bottom:12px;font-size:min(10svh,5.6vw)}
  .sp-facts span{font-size:clamp(20px,1.2vw,23px)}
}
/* very wide: the number and the bird get the first screen alone; the second screen reads
   left to right as the claim, the race that proves it, and the facts behind it */
@media (min-width:1700px) and (orientation:landscape){
  .sp{grid-template-columns:minmax(0,1fr) auto min(34vw,680px);grid-template-areas:"num num bird" "sub race facts";column-gap:clamp(56px,4.6vw,96px);row-gap:21svh}
  .sp-head{display:contents}
  .sp-head h2{grid-area:num}
  .sp-bird{width:min(38vw,740px);justify-self:end}
  .sp-num{font-size:min(56svh,30vw)}
  .sp-sub{grid-area:sub;align-self:start;margin:0;padding-top:42px;max-width:none;font-size:24px;line-height:1.5}
  .sp-race,.sp-facts{align-self:start}
  .sp-facts{margin-top:42px}
  .sp-facts li:first-child{padding-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .sp-bird img{animation:none!important}
}