/* Eight Shores — 8shores.com */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/josefin-sans-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:italic;font-weight:400;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/source-serif-4-latin-600-normal.woff2) format('woff2')}
body{margin:0;background:#0B2B36}
html{scroll-behavior:smooth}
a{color:#0B2B36}a:hover{color:#C63F24}
a:focus-visible,button:focus-visible{outline:2px solid #E2573B;outline-offset:4px}

/* 1. Opening sequence: chart fades in, rhumb lines draw from the three core markets, the route is traced and each shore appears as the pen reaches it. */
/* At 5 s the background is wiped (chart lines, rhumb lines, Beyond and its arrow), then redrawn with a square grid. */
/* The chart breathes: lines draw in, hold, fade out and draw again, every 18 s. Grid lines join 5 s after the rays. */
.grat{opacity:0;animation:es-grat 18s ease-in-out .2s infinite}
@keyframes es-grat{0%{opacity:0}14%{opacity:1}72%{opacity:1}80%{opacity:0}100%{opacity:0}}
.ray{fill:none;stroke:#2A5D6E;stroke-width:1;stroke-dasharray:1;stroke-dashoffset:1;animation:es-rayloop 18s linear .8s infinite}
.k1{animation-delay:1.4s}.k2{animation-delay:2s}
@keyframes es-rayloop{0%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.45,0,.25,1)}20%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:0}80.01%{stroke-dashoffset:1;opacity:0}100%{stroke-dashoffset:1;opacity:0}}
.gl{fill:none;stroke-dasharray:1;stroke-dashoffset:1;animation:es-glloop 18s linear infinite}
@keyframes es-glloop{0%,28%{stroke-dashoffset:1;opacity:1;animation-timing-function:cubic-bezier(.5,0,.3,1)}36%{stroke-dashoffset:0;opacity:1}72%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:0}80.01%{stroke-dashoffset:1;opacity:0}100%{stroke-dashoffset:1;opacity:0}}

.route{fill:none;stroke:#7E9CA7;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;animation:es-draw 4s linear 2.4s forwards}
.xseg{fill:none;stroke:#E2573B;stroke-width:3.5;stroke-linecap:butt;stroke-dasharray:1;stroke-dashoffset:1;animation:es-draw .48s linear forwards}
.nd{opacity:0;animation:es-fade 1.1s ease-out forwards}
.late{opacity:0;animation:es-late 18s ease-in-out .8s infinite}
@keyframes es-late{0%,30%{opacity:0}38%{opacity:1}72%{opacity:1}80%{opacity:0}100%{opacity:0}}
.bey{stroke-dasharray:1;stroke-dashoffset:1;animation:es-bey 18s linear .8s infinite}
@keyframes es-bey{0%,30%{stroke-dashoffset:1}42%{stroke-dashoffset:0}80%{stroke-dashoffset:0}80.01%{stroke-dashoffset:1}100%{stroke-dashoffset:1}}
.beydot{transform-box:fill-box;transform-origin:center;animation:es-beydot 2.4s ease-in-out infinite}
@keyframes es-beydot{0%,100%{transform:scale(1)}50%{transform:scale(1.8)}}
/* 2. Then a vessel laps the route every 28s, lighting each shore, while what lies at the end of a crossing surfaces inside the loops, one message every 3s. */
.vessel{opacity:0;animation:es-fade 1s ease-out 7s forwards}
.trail{fill:none;stroke-linecap:round;animation-duration:28s;animation-timing-function:linear;animation-iteration-count:infinite;animation-delay:7s;animation-fill-mode:both}
.v0{stroke:#FFFFFF;stroke-width:7;stroke-dasharray:.0015 .9985;animation-name:es-v0}
.v1{stroke:#E2573B;stroke-width:3;stroke-dasharray:.03 .97;animation-name:es-v1}
.v2{stroke:#E2573B;stroke-width:1.6;opacity:.5;stroke-dasharray:.08 .92;animation-name:es-v2}
.v3{stroke:#E2573B;stroke-width:1;opacity:.25;stroke-dasharray:.16 .84;animation-name:es-v3}
.ping{fill:none;stroke:#E2573B;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;animation:es-ping 28s cubic-bezier(.2,.7,.3,1) infinite}
.core{fill:#F3F5F4;animation:es-core 28s linear infinite}
.lbl{fill:#8FA9B3;animation:es-lit 28s linear infinite}
/* Each word has its own cycle length, so they surface at seemingly random moments: sometimes two at once, sometimes none. */
.msg{opacity:0;transform-box:fill-box;transform-origin:center;animation:es-wa ease-in-out infinite}
.msg.long{animation-name:es-wb}
@keyframes es-draw{to{stroke-dashoffset:0}}
@keyframes es-fade{to{opacity:1}}
@keyframes es-v0{from{stroke-dashoffset:.0015}to{stroke-dashoffset:-.9985}}
@keyframes es-v1{from{stroke-dashoffset:.03}to{stroke-dashoffset:-.97}}
@keyframes es-v2{from{stroke-dashoffset:.08}to{stroke-dashoffset:-.92}}
@keyframes es-v3{from{stroke-dashoffset:.16}to{stroke-dashoffset:-.84}}
@keyframes es-ping{0%{opacity:1;transform:scale(1)}7%{opacity:0;transform:scale(3.2)}100%{opacity:0;transform:scale(3.2)}}
@keyframes es-core{0%{fill:#E2573B}10%{fill:#F3F5F4}100%{fill:#F3F5F4}}
@keyframes es-lit{0%{fill:#FFFFFF}16%{fill:#8FA9B3}100%{fill:#8FA9B3}}
@keyframes es-wa{0%{opacity:0;transform:translateY(10px) scale(.97)}6%{opacity:1;transform:translateY(4px) scale(1)}16%{opacity:1;transform:translateY(-4px) scale(1)}22%{opacity:0;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(1)}}
@keyframes es-wb{0%{opacity:0;transform:translateY(10px) scale(.97)}3%{opacity:1;transform:translateY(4px) scale(1)}10%{opacity:1;transform:translateY(-4px) scale(1)}14%{opacity:0;transform:translateY(-10px) scale(1)}100%{opacity:0;transform:translateY(-10px) scale(1)}}
@keyframes es-prog{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Roles: one word every 3s in the sentence, the matching line lights up in the list. */
.role{opacity:0;animation:es-role 12s ease-in-out infinite both}
.rli{opacity:.42;animation:es-rli 12s ease-in-out infinite both}
.rln{animation:es-rln 12s ease-in-out infinite both}
.q1{animation-delay:3s}.q2{animation-delay:6s}.q3{animation-delay:9s}
@keyframes es-role{0%{opacity:0;transform:translateY(.3em)}4%{opacity:1;transform:none}22%{opacity:1;transform:none}25%{opacity:0;transform:translateY(-.3em)}100%{opacity:0;transform:translateY(-.3em)}}
@keyframes es-rli{0%{opacity:.42}4%{opacity:1}22%{opacity:1}25%{opacity:.42}100%{opacity:.42}}
@keyframes es-rln{0%{color:#F3F5F4}4%{color:#E2573B}22%{color:#E2573B}25%{color:#F3F5F4}100%{color:#F3F5F4}}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* 3. Convergence diagram: a pulse runs from each technology to the crossing, then out to each industry. */
.vein{fill:none;stroke-linecap:round;animation:es-flow 5.5s linear infinite}
.vh{stroke:#E2573B;stroke-width:1.4;stroke-dasharray:.07 .93}
.vt{stroke:#E2573B;stroke-width:0.8;opacity:.35;stroke-dasharray:.2 .8}
.beat{transform-box:fill-box;transform-origin:center;animation:es-beat 5.5s ease-out infinite}
@keyframes es-flow{from{stroke-dashoffset:.2}to{stroke-dashoffset:-.8}}
@keyframes es-beat{0%,100%{transform:scale(1)}12%{transform:scale(1.12)}30%{transform:scale(1)}}

/* 4. Scrolling: a dashed route runs down the left margin from block to block, and each block rises into view. Progressive: browsers without scroll-driven animations show everything in place. */
@media (max-width: 1359px){.es-thread{display:none !important}}
@media (max-width: 900px){.es-fan{display:none !important}.es-tech{text-align:left !important;padding-right:0 !important}.es-sticky{position:static !important}.es-stages{min-width:0 !important;height:auto !important}.es-stages>li.es-hline,.es-stick{display:none !important}.es-stages::before{content:"";position:absolute;left:23px;top:23px;bottom:40px;border-left:2px dashed #4F7584}.es-stage{position:relative !important;left:auto !important;height:auto !important;width:auto !important;display:flex;align-items:flex-start;gap:20px;padding-bottom:28px}.es-stage .es-stop{position:relative !important;left:auto !important;top:auto !important;flex:none}.es-slabel{position:static !important;width:auto !important;text-align:left !important;padding-top:8px}}
@media (max-width: 640px){.es-navl{display:none !important}}
@keyframes es-rise{from{opacity:0;transform:translateY(48px)}to{opacity:1;transform:none}}
@keyframes es-growy{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes es-growx{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes es-pop{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}

@media (prefers-reduced-motion: reduce){.ray,.route,.xseg,.gl,.bey{animation:none;stroke-dashoffset:0}.beydot{animation:none}.grat,.nd,.late{animation:none;opacity:1}.js .es-rise,.js .es-stop,.js .es-hline{opacity:1 !important;transform:none !important;transition:none !important}.vessel,.ping,.msg,.vein{display:none}.core,.lbl,.beat,.role,.rli,.rln{animation:none}.role.q0,.rli{opacity:1}.turnable,.es-move{transition:none !important}}

/* Static-site additions */
[hidden]{display:none !important}
.js-words .msg{animation:none;opacity:0;transform:translateY(8px);transition:opacity 1.3s ease,transform 1.8s ease}
.js-words .msg.on{opacity:1;transform:none}
.skip{position:absolute;left:-9999px;top:12px;z-index:10;background:#F3F5F4;color:#0B2B36;padding:12px 18px;border-radius:999px;font-family:'Josefin Sans',system-ui,sans-serif}
.skip:focus{left:16px}

/* Scrolling: each block slides over the previous one like a sheet, its content rises into view,
   and a vermilion route is traced down the left margin as you read (positions set by site.js). */
footer.es-sheet{box-shadow:none;border-top:1px solid #23495A}
.es-sheet{margin-top:-44px;border-radius:44px 44px 0 0;box-shadow:0 -22px 48px rgba(4,22,29,.22)}
@media (max-width: 640px){.es-sheet{margin-top:-24px;border-radius:24px 24px 0 0}}
.js .es-rise{opacity:0;transform:translateY(64px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.16,.84,.3,1)}
.js .es-rise.in{opacity:1;transform:none}
.js .es-hline{transform-origin:left;transform:scaleX(0);transition:transform 1.8s cubic-bezier(.5,0,.2,1) .2s}
.js .es-stages.in .es-hline{transform:scaleX(1)}
.js .es-stop{opacity:0;transform:scale(.4);transition:opacity .5s ease,transform .7s cubic-bezier(.3,1.6,.5,1)}
.js .es-stages.in .es-stop{opacity:1;transform:none}
.es-trace{position:absolute;left:11px;top:0;width:1px;height:100%;background:#E2573B;transform-origin:top;transform:scaleY(0)}
.es-tip{position:absolute;left:7.5px;top:-4px;width:8px;height:8px;border-radius:50%;background:#E2573B;box-shadow:0 0 0 4px rgba(226,87,59,.18);opacity:0;transition:opacity .3s}
.js .es-wp{transform:scale(.6);transition:transform .45s cubic-bezier(.3,1.6,.5,1),background-color .3s,border-color .3s}
.js .es-wp.on{transform:scale(1);background:#E2573B !important;border-color:#E2573B !important}
.es-cta{transition:background-color .25s,color .25s}.es-cta:hover,.es-cta:focus-visible{background:#C63F24;color:#FFFFFF !important}

/* Network: one category lights up at a time */
.es-node .es-halo,.es-node .es-ring,.es-node .es-nlabel{transition:fill-opacity .5s,fill .4s,stroke .4s,font-weight .2s}
.es-node.on .es-halo{fill-opacity:.14}
.es-node.on .es-ring{fill:#D9472B;stroke:#D9472B}
.es-node.on .es-core{fill:#F3F5F4}
.es-node.on .es-nlabel{fill:#C63F24}
.es-node:focus-visible .es-ring{stroke:#E2573B;stroke-width:2.5}
.es-ndetail.on{opacity:1 !important;transform:none !important}
/* Language switch: the active flag carries a short vermilion underline, the other is dimmed */
.es-lang{position:relative;transition:opacity .25s}
.es-lang:hover,.es-lang:focus-visible{opacity:1 !important}
.es-lang.on::after{content:"";position:absolute;left:50%;bottom:7px;width:18px;height:1px;margin-left:-9px;background:#E2573B;border-radius:1px}