.field { position: absolute; left: 0; top: 0; width: 100%; pointer-events: none; z-index: 0; overflow: visible; will-change: transform; }
.field g { transform-box: view-box; transform-origin: var(--ox) var(--oy); }
.field .grow { opacity: 0; transform: scale(.82); transition: opacity 1.2s cubic-bezier(.2, .7, .2, 1), transform 1.8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(.5s + var(--i) * 85ms); }
.field.on .grow { opacity: 1; transform: none; }
.field .spin { animation: turn calc(90s + var(--i) * 13s) linear infinite; animation-play-state: paused; }
.field .rip:nth-child(even) .spin { animation-direction: reverse; }
.field .pulse { opacity: .6; }
.field.live .spin { animation-play-state: running; }

.field.on.live .pulse { animation: wave 8s cubic-bezier(.3, 0, .3, 1) infinite; animation-delay: calc(2.4s + var(--i) * 120ms); }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes wave { 0%, 100% { opacity: .6; } 4% { opacity: 1; } 15% { opacity: .6; } }

.btn-hand { position: relative; display: inline-block; padding: 19px 38px; font: 500 15.5px/1 var(--font-text); color: var(--ink); transition: color .25s; }
.btn-hand:hover { color: #fff; }
.btn-hand .hand circle { transition: fill .3s, transform .3s; transform-box: fill-box; transform-origin: center; }
.btn-hand:hover .hand circle { fill: var(--ice); transform: scale(1.35); }
.js .hand path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .hand circle { opacity: 0; }
.js .hero .hand path { animation: draw 1s cubic-bezier(.65, .05, .25, 1) .55s forwards; }
.js .hero .hand circle { animation: fade .35s ease 1.4s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }

.talk { position: relative; display: inline-block; padding: 19px 4px; font: 500 15.5px/1 var(--font-text); color: var(--ink); border: 0; transition: color .25s; }
.talk:hover { color: #fff; }
.talk .hand path { transition: stroke .25s; }
.talk:hover .hand path { stroke: var(--ember); }
.talk .hand circle { transition: fill .3s, transform .3s; transform-box: fill-box; transform-origin: center; }
.talk .hand circle:nth-of-type(2) { transition-delay: 60ms; } .talk .hand circle:nth-of-type(3) { transition-delay: 120ms; }
.talk:hover .hand circle { fill: var(--ice); transform: scale(1.35); }
.js .hero .talk .hand path { animation-delay: 1.05s; }
.js .hero .talk .hand circle { animation-delay: 1.9s; }

.hero::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle var(--gr, 320px) at var(--gx, 76%) var(--gy, 50%), rgba(255, 143, 92, .09), transparent 70%); animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .55; } to { opacity: 1; } }

.line .tip { transition: opacity .4s; }
.line .halo { animation: glow 2.4s ease-in-out infinite; }
@keyframes glow { 50% { r: 19px; opacity: .55; } }
.line .ping { opacity: 0; transform: scale(.15); }
.line .arrived .ping { animation: ping 5.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.line .arrived .ping:nth-child(2) { animation-delay: 1.8s; }
.line .arrived .ping:nth-child(3) { animation-delay: 3.6s; }
@keyframes ping { 0% { opacity: 0; transform: scale(.15); } 10% { opacity: .85; } 100% { opacity: 0; transform: scale(1); } }

.prod .stage { position: relative; display: block; height: 210px; margin: -36px -34px 28px; overflow: hidden; border-bottom: 1px solid var(--rule); border-radius: 18px 18px 0 0;
  background: radial-gradient(ellipse 70% 90% at 50% 100%, color-mix(in oklab, var(--c) 7%, transparent), transparent 70%); }
.prod .stage .motif { position: absolute; pointer-events: none; transition: opacity .5s, transform .9s cubic-bezier(.16, 1, .3, 1); }

.js .family .prod.in:hover { transform: translateY(-4px); }

.m-sheet { inset: 8px 0 6px; width: 100%; height: calc(100% - 14px); overflow: visible; }
.m-sheet .ax { stroke: #2b3644; stroke-width: 1; stroke-dasharray: 10 4 2 4; }
.m-sheet .bub circle { fill: var(--card); stroke: #4d6077; stroke-width: 1.1; }
.m-sheet .bub text { fill: #8ea3bb; font: 500 10px/1 var(--font-label); text-anchor: middle; }
.m-sheet .wall { fill: none; stroke: #b9cfe6; stroke-width: 1.3; stroke-linejoin: round; opacity: .72; }
.m-sheet .door { fill: none; stroke: #7f95ad; stroke-width: 1; stroke-dasharray: 3 3; }
.m-sheet .dim path { fill: none; stroke: #6f87a3; stroke-width: 1; }
.m-sheet .dim text { fill: #8ea3bb; font: 500 10px/1 var(--font-label); letter-spacing: .06em; text-anchor: middle; }
.js .m-sheet .wall, .js .m-sheet .dim path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.8s cubic-bezier(.5, 0, .2, 1) .3s; }
.js .m-sheet .door { opacity: 0; transition: opacity .6s 1.6s; }
.js .m-sheet .dim text { opacity: 0; transition: opacity .6s 1.9s; }
.js .p-eng.in .m-sheet .wall, .js .p-eng.in .m-sheet .dim path[pathLength] { stroke-dashoffset: 0; }
.js .p-eng.in .m-sheet .door, .js .p-eng.in .m-sheet .dim text { opacity: 1; }

.m-sheet .thread { fill: none; stroke: #ef5a4c; stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .8; }
.m-sheet .step > g { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.m-sheet .step circle { fill: #ef5a4c; }
.m-sheet .step text { fill: #fff; font: 600 10.5px/1 var(--font-label); text-anchor: middle; }
.live.in .m-sheet .step > g { animation: step 8s cubic-bezier(.3, 1.6, .5, 1) infinite; animation-delay: calc(2.4s + var(--i) * .55s); }
.live.in .m-sheet .thread { animation: thread 8s cubic-bezier(.5, 0, .3, 1) 2.6s infinite; }
@keyframes step { 0% { transform: scale(0); } 6%, 74% { transform: scale(1); } 82%, 100% { transform: scale(0); } }
@keyframes thread { 0% { stroke-dashoffset: 1; opacity: .8; } 16%, 70% { stroke-dashoffset: 0; opacity: .8; } 80%, 100% { stroke-dashoffset: 0; opacity: 0; } }

.m-sheet .cross line { stroke: var(--sky); stroke-width: .8; opacity: .38; }
.m-sheet .cross rect { fill: none; stroke: var(--sky); stroke-width: 1.1; }
.m-sheet .cross text { fill: var(--sky); font: 500 9.5px/1 var(--font-label); letter-spacing: .04em; }
.m-sheet .cross { opacity: .55; transition: opacity .4s; }
.p-eng:hover .m-sheet .cross { opacity: 1; }

.m-agent { left: 50%; top: 50%; width: 360px; height: 360px; margin: -180px 0 0 -180px; display: grid; place-items: center; }
.m-agent .m-rip { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .75; transition: opacity .5s, transform .9s cubic-bezier(.16, 1, .3, 1); }
.m-rip g { transform-box: view-box; transform-origin: 210px 210px; animation: turn calc(60s + var(--i) * 9s) linear infinite; animation-play-state: paused; }
.m-rip g:nth-child(even) { animation-direction: reverse; }
.live .m-rip g { animation-play-state: running; }
.p-dev:hover .m-rip { opacity: 1; transform: scale(1.05); }
.m-ball { position: relative; width: 128px; height: 128px; margin-top: -14px; will-change: transform; }
.m-ball::before { content: ''; position: absolute; inset: -38%; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, var(--agent, #ff8f5c) 42%, transparent), transparent 62%); opacity: calc(.35 + var(--lv, 0) * .65); transition: background .6s; }
.m-ball svg { position: relative; display: block; }
.m-name { position: absolute; left: 50%; top: calc(50% + 62px); transform: translateX(-50%); font: 500 10.5px/1 var(--font-label); letter-spacing: .16em; text-transform: uppercase; color: var(--agent, var(--ember)); opacity: .85; transition: color .6s; }
.p-dev { --c: var(--agent, var(--ember)); }

.m-next { left: 50%; top: 50%; width: 190px; height: 190px; margin: -95px 0 0 -95px; opacity: .75; }
.m-next path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.m-next circle { opacity: 0; }
.live .m-next path { animation: sketch 6.5s cubic-bezier(.5, 0, .3, 1) infinite; }
.live .m-next circle { animation: dot 6.5s ease infinite; }
.live .m-next circle:nth-of-type(2) { animation-delay: .18s; }
.live .m-next circle:nth-of-type(3) { animation-delay: .36s; }
@keyframes sketch { 0% { stroke-dashoffset: var(--len); opacity: 1; } 45%, 82% { stroke-dashoffset: 0; opacity: 1; } 96%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes dot { 0%, 46% { opacity: 0; } 52%, 82% { opacity: 1; } 96%, 100% { opacity: 0; } }

.principles b { position: relative; display: inline-grid; place-items: center; width: 58px; height: 58px; margin-left: -6px; }
.principles .stamp { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform .8s cubic-bezier(.16, 1, .3, 1); }
.principles .stamp path { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s cubic-bezier(.4, 0, .2, 1) .25s; }
.principles .stamp circle { opacity: 0; transition: opacity .4s 1.5s; }
.principles li.in .stamp path { stroke-dashoffset: 0; }
.principles li.in .stamp circle { opacity: 1; }
.principles li:hover .stamp { transform: rotate(-24deg); }
.principles h3 { margin-top: 14px; }

@media (max-width: 860px) {
  .prod .stage { height: 190px; }
  .prod .go { position: relative; z-index: 1; }
}

.still .field .grow { opacity: 1 !important; transform: none !important; }
.still .hand path { stroke-dashoffset: 0 !important; animation: none !important; }
.still .hand circle { opacity: 1 !important; animation: none !important; }
.still .principles .stamp path, .still .m-next path, .still .m-sheet .wall, .still .m-sheet .dim path[pathLength], .still .m-sheet .thread { stroke-dashoffset: 0 !important; }
.still .principles .stamp circle, .still .m-next circle, .still .m-sheet .door, .still .m-sheet .dim text { opacity: 1 !important; }
.still .m-sheet .step > g { transform: none !important; animation: none !important; }
.still .line .arrived .ping:first-child { opacity: .35 !important; transform: scale(.6) !important; }
@media (prefers-reduced-motion: reduce) {
  .field .grow { opacity: 1; transform: none; transition: none; }
  .m-sheet .wall, .m-sheet .dim path[pathLength], .m-sheet .thread { stroke-dashoffset: 0 !important; transition: none !important; animation: none !important; }
  .m-sheet .door, .m-sheet .dim text { opacity: 1 !important; transition: none !important; }
  .m-sheet .step > g { transform: none !important; animation: none !important; }
  .js .hand path { animation: none; stroke-dashoffset: 0; }
  .js .hand circle { animation: none; opacity: 1; }
  .field .spin, .field .pulse, .m-rip g, .line .halo, .hero::before { animation: none !important; }
  .m-next path { animation: none !important; stroke-dashoffset: 0; }
  .m-next circle { animation: none !important; opacity: 1; }
  .principles .stamp path { transition: none; stroke-dashoffset: 0; }
  .principles .stamp circle { transition: none; opacity: 1; }
  .line .ping { animation: none !important; }
  .js .family .prod.in:hover { transform: none; }
}