<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="./support.js"></script>
</head>
<body>
<x-dc>
<helmet data-dc-atomics>
<title>nspire</title>
<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Anton&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap" rel="stylesheet">
<script src="assets/smoke-img.js"></script>
<style>
*{box-sizing:border-box}
.flabel{font-family:'Space Mono',monospace;font-size:13px;letter-spacing:.04em;color:#3a3a3a;margin-bottom:14px;font-weight:700}
.shell{border-radius:7px;overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.34)}
.lf{position:relative;width:100%;height:780px;font-family:'Space Grotesk',sans-serif;background:#0d0e12;color:#e9e9ef;--acc:#9aa0aa;--soft:rgba(255,255,255,.05);--line:rgba(255,255,255,.1);transition:background .6s ease,color .5s ease}
.lf:has(.co:hover){background:radial-gradient(125% 100% at 24% -10%,#eaf2ff 0%,#f4f5f8 60%);color:#1d1d1f;--acc:#0071e3;--soft:rgba(0,0,0,.04);--line:rgba(0,0,0,.1)}
.lf:has(.stu:hover){background:#070708;color:#f4f4f5;--acc:#E1242C;--soft:rgba(255,255,255,.045);--line:rgba(255,255,255,.1)}
.lf:has(.rad:hover){background:radial-gradient(125% 95% at 72% -8%,#3a0a0d 0%,#0a0506 58%);color:#f6eceb;--acc:#E1242C;--soft:rgba(255,255,255,.05);--line:rgba(255,255,255,.12)}
.alf{position:relative;width:100%;height:780px;font-family:'Space Grotesk',sans-serif;background:#060607;color:#f4f4f5;--acc:#E1242C;--soft:rgba(255,255,255,.05);--line:rgba(255,255,255,.1);overflow:hidden;transition:background .6s ease,color .5s ease}
.alf:has(.co:hover){background:radial-gradient(125% 100% at 24% -10%,#eaf2ff 0%,#f4f5f8 60%);color:#1d1d1f;--acc:#0071e3;--soft:rgba(0,0,0,.04);--line:rgba(0,0,0,.1)}
.alf:has(.stu:hover){background:#070708;color:#f4f4f5;--acc:#E1242C;--soft:rgba(255,255,255,.045);--line:rgba(255,255,255,.1)}
.alf:has(.rad:hover){background:radial-gradient(125% 95% at 72% -8%,#3a0a0d 0%,#0a0506 58%);color:#f6eceb;--acc:#E1242C;--soft:rgba(255,255,255,.05);--line:rgba(255,255,255,.12)}
.mono{font-family:'Space Mono',monospace}
a.colp,a.row,a.gtile,a.hcol{text-decoration:none;color:inherit}
a.iroom{text-decoration:none}
.acv{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.acoverbg{position:absolute;inset:0;z-index:19;background:#050506;animation:coverout .85s ease 1.95s forwards}
.ahead{position:absolute;z-index:20;left:0;right:0;top:48px;text-align:center;pointer-events:none}
.alogo{display:inline-block;font-size:66px;font-weight:700;letter-spacing:-.055em;line-height:.9;color:currentColor;transition:color .4s ease;opacity:0;filter:blur(22px);animation:nspin 1.1s ease .4s both,aslide 1s cubic-bezier(.65,0,.2,1) 1.6s both}
.atag{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#E1242C;margin-top:13px;opacity:0;animation:fadein .8s ease 2.55s both}
.acols{padding-top:196px;z-index:2;opacity:0;animation:fadein .9s ease 2.15s both}
.acols .colp{justify-content:center;align-items:center;text-align:center;gap:24px}
.acols .cfoot{justify-content:center;gap:14px}
.adbox{position:absolute;z-index:3;left:0;right:0;top:126px;pointer-events:none}
.cols{position:absolute;inset:0;display:flex;padding-top:78px}
.colp{flex:1;display:flex;flex-direction:column;justify-content:space-between;padding:42px 36px 40px;border-right:1px solid var(--line);transition:flex-grow .45s ease,background .4s ease;position:relative}
.colp:last-child{border-right:0}
.colp:hover{background:var(--soft)}
.cname{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:46px;line-height:.92;margin-bottom:16px}
.cfoot{display:flex;align-items:center;justify-content:space-between;margin-top:30px}
.ctag{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.12em;text-transform:uppercase;padding:7px 13px;border:1px solid var(--line);border-radius:999px;color:var(--acc);transition:color .4s ease,border-color .4s ease}
.carrow{font-size:26px;color:var(--acc);transition:transform .3s ease,color .4s ease}
.colp:hover .carrow{transform:translateX(7px)}
.bcenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 60px;text-align:center}
.wmBig{font-size:88px;font-weight:700;letter-spacing:-.055em;line-height:.9}
.btag{font-size:18px;opacity:.66;margin:16px 0 46px}
.rows{width:100%;max-width:560px;display:flex;flex-direction:column;gap:14px}
.row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 26px;border:1px solid var(--line);border-radius:18px;background:var(--soft);text-align:left;transition:transform .3s ease,border-color .4s ease,background .4s ease}
.row:hover{transform:translateY(-3px);border-color:var(--acc)}
.rname{font-size:24px;font-weight:700;letter-spacing:-.02em}
.rarrow{font-size:24px;color:var(--acc);transition:transform .3s ease,color .4s ease}
.row:hover .rarrow{transform:translateX(6px)}
.bdbox{margin-top:22px}
.cwrap{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1.18fr;gap:0}
.cleft{padding:64px 44px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)}
.ceyebrow{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--acc);margin-bottom:22px;transition:color .4s ease}
.chead{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:62px;line-height:.9;margin-bottom:22px}
.clead{font-size:16px;line-height:1.55;opacity:.72;max-width:30ch}
.cmeta{font-family:'Space Mono',monospace;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--acc);margin-top:30px;transition:color .4s ease}
.cdbox{margin-top:18px;text-align:left;padding:0}
.cgrid{display:flex;flex-direction:column}
.gtile{flex:1;display:flex;align-items:stretch;border-bottom:1px solid var(--line);overflow:hidden;position:relative;transition:background .4s ease}
.gtile:last-child{border-bottom:0}
.gtile:hover{background:var(--soft)}
.gtart{width:230px;flex:none;position:relative;overflow:hidden;background:#15151a}
.gtart img{width:100%;height:100%;object-fit:cover;filter:saturate(.6) brightness(.62);transition:filter .45s ease,transform .6s ease}
.gtile:hover .gtart img{filter:saturate(1.05) brightness(.92);transform:scale(1.05)}
.gco{background:linear-gradient(165deg,#1f3a93,#2f80ed)}
.gcobub{position:absolute;inset:0;padding:30px 22px;display:flex;flex-direction:column;justify-content:center;gap:8px}
.bub{max-width:80%;padding:8px 12px;border-radius:14px;font-size:12px;background:rgba(255,255,255,.94);color:#1d1d1f}
.bub.me{align-self:flex-end;background:#0a7afe;color:#fff}
.gtmid{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 34px}
.gtkick{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--acc);margin-bottom:9px;transition:color .4s ease}
.gtn{font-size:26px;font-weight:700;letter-spacing:-.025em}
.gtarrow{align-self:center;padding-right:30px;font-size:24px;color:var(--acc);transition:transform .3s ease,color .4s ease}
.gtile:hover .gtarrow{transform:translateX(6px)}
.airbadge{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono',monospace;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-top:10px}
.airbadge i{width:7px;height:7px;border-radius:50%;background:#E1242C;box-shadow:0 0 9px #E1242C;animation:pul 1.5s ease-in-out infinite}
.dwrap{position:relative;width:100%;height:780px;background:#070708;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;font-family:'Space Grotesk',sans-serif}
.dcv{position:absolute;inset:0;z-index:0;width:100%;height:100%;display:block}
.dvig{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 82% at 50% 2%,transparent 42%,rgba(7,7,8,.7))}
.dwm{position:relative;z-index:2;font-size:98px;font-weight:700;letter-spacing:-.055em;line-height:.9;color:#f4f4f5}
.dtag{position:relative;z-index:2;font-size:16.5px;color:#b9b9bf;margin:16px 0 38px}
.dchips{position:relative;z-index:2;display:flex;gap:16px}
.dcard{width:232px;padding:18px 22px;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:rgba(255,255,255,.04);text-decoration:none;color:#f4f4f5;text-align:center;transition:transform .3s ease,border-color .3s ease,background .3s ease}
.dcard:hover{border-color:#E1242C;background:rgba(225,36,44,.1);transform:translateY(-3px)}
.dcn{font-size:19px;font-weight:700;letter-spacing:-.01em}
.ddbox{position:relative;z-index:2;margin-top:24px;width:600px;max-width:90%}
.ewrap{position:relative;width:100%;height:780px;background:#f3f2ee;color:#111113;padding:54px 52px;display:flex;flex-direction:column;justify-content:space-between;font-family:'Space Grotesk',sans-serif;overflow:hidden}
.ekick{font-family:'Space Mono',monospace;font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#86857c}
.ebig{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:152px;line-height:.8;letter-spacing:.01em;color:#111113}
.erooms{display:flex;flex-direction:column}
.elink{display:flex;align-items:baseline;justify-content:space-between;padding:18px 2px;border-top:1px solid rgba(0,0,0,.14);font-size:34px;font-weight:700;letter-spacing:-.02em;color:#111113;text-decoration:none;transition:padding-left .3s ease,color .3s ease}
.elast{border-bottom:1px solid rgba(0,0,0,.14)}
.elink:hover{padding-left:16px;color:#E1242C}
.ela{font-size:27px;color:#E1242C}
.edbox{position:absolute;left:52px;right:52px;top:72px;text-align:left;padding:0;pointer-events:none;color:#1a1a1c}
.fwrap{position:relative;width:100%;height:780px;background:#0a0b0d;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Space Mono',monospace;gap:0}
.fpal{width:560px;max-width:84%;background:#121316;border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.ftop{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.08em;color:#8a8c92;padding:8px 10px 14px}
.fdot{width:9px;height:9px;border-radius:50%;background:#E1242C;box-shadow:0 0 10px #E1242C}
.ffield{display:flex;align-items:center;gap:10px;font-size:16px;color:#e6e7ea;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.fph{color:#6a6c72;flex:1}
.fcur2{width:2px;height:18px;background:#E1242C;animation:fblink 1s step-end infinite}
.fopt{display:flex;align-items:center;padding:15px 16px;border-radius:10px;text-decoration:none;color:#e6e7ea;transition:background .2s ease}
.fopt:hover{background:rgba(225,36,44,.14)}
.fon{font-family:'Space Grotesk',sans-serif;font-size:18px;font-weight:700;letter-spacing:-.01em}
.fdbox{margin-top:22px;width:560px;max-width:84%}
.gwrap{position:relative;width:100%;height:780px;background:#0a0a0c;overflow:hidden;font-family:'Space Grotesk',sans-serif}
.ghead{position:absolute;top:48px;left:0;right:0;text-align:center;z-index:2}
.gnsp{font-size:68px;font-weight:700;letter-spacing:-.055em;color:#f4f4f5}
.gcards{position:absolute;bottom:44px;left:0;right:0;display:flex;justify-content:center;gap:22px;padding:0 50px;z-index:2}
.gcard{flex:1;max-width:310px;height:300px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:rgba(255,255,255,.03);padding:30px 28px;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;color:#f4f4f5;transition:transform .4s ease,border-color .4s ease,background .4s ease}
.gcard:hover{transform:translateY(-12px);border-color:rgba(225,36,44,.6);background:rgba(225,36,44,.07)}
.gcn2{font-size:28px;font-weight:700;letter-spacing:-.02em}
.gcar{font-size:28px;color:#E1242C;opacity:0;transition:opacity .3s ease}
.gcard:hover .gcar{opacity:1}
.gdbox{position:absolute;z-index:2;left:0;right:0;top:158px;pointer-events:none}
.hwrap{position:relative;width:100%;height:780px;background:#f2ede4;color:#0d0c09;font-family:'Space Grotesk',sans-serif;overflow:hidden}
.hbar{display:flex;align-items:baseline;justify-content:space-between;padding:22px 48px 20px;border-bottom:2.5px solid #0d0c09}
.hnm{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:68px;line-height:1;color:#0d0c09}
.hmeta{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.12em;color:#7a7a6e;text-transform:uppercase}
.hcols{display:grid;grid-template-columns:1fr 1fr 1fr;height:calc(100% - 116px)}
.hcol{padding:32px 40px;border-right:1px solid rgba(0,0,0,.18);display:flex;flex-direction:column;justify-content:flex-start;transition:background .3s ease}
.hcol:last-child{border-right:0}
.hcol:hover{background:rgba(0,0,0,.04)}
.hcname{font-family:'Anton',sans-serif;font-size:52px;text-transform:uppercase;line-height:.88;margin-bottom:20px}
.hctag{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a8e;margin-top:auto;padding-top:16px}
.hdbox{position:absolute;bottom:36px;left:48px;right:48px;text-align:center;pointer-events:none;color:#0d0c09}
.iwrap{position:relative;width:100%;height:780px;background:#fafafa;color:#111113;font-family:'Space Grotesk',sans-serif;overflow:hidden}
.icenter{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.insp{font-size:100px;font-weight:700;letter-spacing:-.065em;line-height:.9;margin-bottom:44px}
.irooms{display:flex;gap:52px;align-items:center;margin-bottom:30px}
.iroom{font-family:'Space Mono',monospace;font-size:14px;letter-spacing:.08em;text-transform:uppercase;color:#aaa;transition:color .2s ease;cursor:pointer}
.iroom:hover{color:#111}
.isep{color:#ddd;font-size:11px;user-select:none}
.idbox{text-align:center;max-width:44ch;min-height:48px;padding:0;color:#111113}
.descbox{text-align:center;opacity:0;transition:opacity .4s ease;pointer-events:none;padding:0 40px}
.descbox.vis{opacity:1}
.descbox b{display:block;font-weight:700;font-size:16px;margin-bottom:5px}
.descbox span{font-size:13.5px;opacity:.65}
.cover{position:absolute;inset:0;z-index:30;background:#050506;display:flex;align-items:center;justify-content:center;animation:coverout .9s ease 2.0s forwards}
.clogo{font-family:'Space Grotesk',sans-serif;font-size:72px;font-weight:700;letter-spacing:-.055em;color:#f4f4f5;opacity:0;filter:blur(22px);animation:clblur 1.1s ease .45s both,clslide 1s cubic-bezier(.65,0,.2,1) 1.7s both}
@keyframes pul{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}
@keyframes nspin{to{opacity:1;filter:blur(0)}}
@keyframes aslide{from{transform:translateY(300px)}to{transform:translateY(0)}}
@keyframes fadein{to{opacity:1}}
@keyframes coverout{to{opacity:0;visibility:hidden}}
@keyframes clblur{to{opacity:1;filter:blur(0)}}
@keyframes clslide{from{transform:translate(0,0)}to{transform:translate(var(--tx,0px),var(--ty,-150px))}}
@keyframes fblink{50%{opacity:0}}

html,body{margin:0;width:100%;height:100%;background:#050506;overflow:hidden}
html,body{min-height:100%;height:100dvh}
body > x-dc{position:fixed;inset:0;width:100vw;height:100dvh;display:block;overflow:hidden;background:#050506}
body > x-dc > div{display:none!important}
body > x-dc > div:first-of-type{display:block!important;position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;transform:none!important}
.flabel{display:none!important}
x-dc > div[style*="width:1240px"],body > div:first-of-type{position:fixed!important;inset:0!important;width:100vw!important;height:100dvh!important;max-width:100vw!important;overflow:hidden!important}
.shell{width:100vw!important;height:100dvh!important;border-radius:0!important;box-shadow:none!important}
.alf{width:100vw!important;height:100dvh!important}
.acv,.acoverbg{width:100vw!important;height:100dvh!important}
.acols{width:100vw!important;height:100dvh!important;padding-top:clamp(170px,25vh,250px)!important}
.colp{min-width:0}
@media (max-width:700px){.atag{font-size:13px}.cname{font-size:44px}.colp{padding-left:28px;padding-right:28px}}
@media (max-width:820px){
  html,body{overflow:hidden}
  .alf{min-height:100dvh}
  .ahead{top:calc(env(safe-area-inset-top,0px) + 24px);padding:0 18px}
  .alogo{font-size:clamp(48px,16vw,64px)}
  .atag{max-width:27ch;margin:12px auto 0;font-size:11px;line-height:1.35;letter-spacing:.14em}
  .adbox{display:none}
  .acols{height:100dvh!important;padding:clamp(150px,28vh,196px) 14px calc(env(safe-area-inset-bottom,0px) + 16px)!important}
  .cols{display:flex;flex-direction:column;gap:10px}
  .acols .colp,.colp{width:100%;min-height:0;flex:1 1 0;align-items:stretch;justify-content:center;text-align:left;gap:10px;padding:18px 18px;border-right:0;border-bottom:1px solid var(--line);border-radius:8px;background:rgba(255,255,255,.035)}
  .colp:last-child{border-bottom:0}
  .colp:hover{background:rgba(255,255,255,.055)}
  .acols .cfoot,.cfoot{margin-top:10px;justify-content:space-between;gap:12px}
  .cname{font-size:clamp(34px,11vw,48px);line-height:.9;margin-bottom:0}
  .ctag{font-size:10px;letter-spacing:.1em;padding:7px 10px;white-space:nowrap}
  .carrow{font-size:24px}
}
@media (max-width:380px),(max-height:680px){
  .ahead{top:calc(env(safe-area-inset-top,0px) + 18px)}
  .alogo{font-size:46px}
  .atag{font-size:10px;margin-top:8px}
  .acols{padding-top:132px!important;gap:8px}
  .acols .colp,.colp{padding:14px 16px}
  .cname{font-size:34px}
  .ctag{font-size:9.5px;padding:6px 9px}
}
</style>
</helmet>
<div style="position:absolute;left:0;top:0;width:1240px">
<div class="flabel" data-drags-parent="1">Option A — Switchboard · bold triptych</div>
<div class="shell"><div class="alf">
<canvas class="acv" ref="{{ setAcv }}"></canvas>
<div class="acoverbg"></div>
<div class="ahead"><div class="alogo">nspire</div><div class="atag">A new way to listen, engage and create</div></div>
<div class="descbox adbox {{ aVis }}"><b>{{ aLead }}</b><span>{{ aDetail }}</span></div>
<div class="cols acols">
<a class="colp co" href="https://producer.nspire.studio/" onMouseEnter="{{ aOnCo }}" onMouseLeave="{{ aOffCo }}"><div><div class="cname">Co-<br>Producer</div></div><div class="cfoot"><span class="ctag">Open chat</span><span class="carrow">→</span></div></a>
<a class="colp stu" href="/studio/" onMouseEnter="{{ aOnStu }}" onMouseLeave="{{ aOffStu }}"><div><div class="cname">Studio</div></div><div class="cfoot"><span class="ctag">Closed beta</span><span class="carrow">→</span></div></a>
<a class="colp rad" href="https://radio.nspire.studio/" onMouseEnter="{{ aOnRad }}" onMouseLeave="{{ aOffRad }}"><div><div class="cname">Radio</div></div><div class="cfoot"><span class="ctag">On air</span><span class="carrow">→</span></div></a>
</div>
</div></div>
</div>
</x-dc>
<script type="text/x-dc" data-dc-script data-props="{&quot;showSmoke&quot;:{&quot;editor&quot;:&quot;boolean&quot;,&quot;default&quot;:true,&quot;tsType&quot;:&quot;boolean&quot;,&quot;section&quot;:&quot;Smoke (Options A &amp; D)&quot;},&quot;smokeColor&quot;:{&quot;editor&quot;:&quot;enum&quot;,&quot;options&quot;:[&quot;White&quot;,&quot;Crimson&quot;,&quot;Ice&quot;],&quot;default&quot;:&quot;White&quot;,&quot;tsType&quot;:&quot;string&quot;,&quot;section&quot;:&quot;Smoke (Options A &amp; D)&quot;},&quot;smokeIntensity&quot;:{&quot;editor&quot;:&quot;range&quot;,&quot;default&quot;:0.5,&quot;min&quot;:0.15,&quot;max&quot;:1,&quot;step&quot;:0.05,&quot;unit&quot;:&quot;&quot;,&quot;tsType&quot;:&quot;number&quot;,&quot;section&quot;:&quot;Smoke (Options A &amp; D)&quot;}}">
class Component extends DCLogic {
  state = { hA:null, hB:null, hC:null, hD:null, hE:null, hF:null, hG:null, hH:null, hI:null };
  renderVals(){
    const s=this.state;
    const COPY={
      co:{lead:'DM your music concierge',detail:'For beat ideas, sounds, inspiration and momentum.'},
      stu:{lead:'Your playground for inspiration.',detail:'Talk to the studio. Shape the sound. Make the record.'},
      rad:{lead:'Broadcasting that talks back.',detail:'Turn your content into interactive radio and TV-style experiences.'}
    };
    const box=k=>{if(!k)return{vis:'',lead:'',detail:''};const c=COPY[k];return{vis:'vis',lead:c.lead,detail:c.detail};};
    const on=(o,r)=>()=>this.setState({['h'+o]:r});
    const off=o=>()=>this.setState({['h'+o]:null});
    const make=o=>{const b=box(s['h'+o]);return{vis:b.vis,lead:b.lead,detail:b.detail,onCo:on(o,'co'),offCo:off(o),onStu:on(o,'stu'),offStu:off(o),onRad:on(o,'rad'),offRad:off(o)};};
    const a=make('A'),b=make('B'),c=make('C'),d=make('D'),e=make('E'),f=make('F'),g=make('G'),h=make('H'),i=make('I');
    return {
      setDcv:el=>{this.dcv=el;}, setAcv:el=>{this.acv=el;},
      aVis:a.vis,aLead:a.lead,aDetail:a.detail,aOnCo:a.onCo,aOffCo:a.offCo,aOnStu:a.onStu,aOffStu:a.offStu,aOnRad:a.onRad,aOffRad:a.offRad,
      bVis:b.vis,bLead:b.lead,bDetail:b.detail,bOnCo:b.onCo,bOffCo:b.offCo,bOnStu:b.onStu,bOffStu:b.offStu,bOnRad:b.onRad,bOffRad:b.offRad,
      cVis:c.vis,cLead:c.lead,cDetail:c.detail,cOnCo:c.onCo,cOffCo:c.offCo,cOnStu:c.onStu,cOffStu:c.offStu,cOnRad:c.onRad,cOffRad:c.offRad,
      dVis:d.vis,dLead:d.lead,dDetail:d.detail,dOnCo:d.onCo,dOffCo:d.offCo,dOnStu:d.onStu,dOffStu:d.offStu,dOnRad:d.onRad,dOffRad:d.offRad,
      eVis:e.vis,eLead:e.lead,eDetail:e.detail,eOnCo:e.onCo,eOffCo:e.offCo,eOnStu:e.onStu,eOffStu:e.offStu,eOnRad:e.onRad,eOffRad:e.offRad,
      fVis:f.vis,fLead:f.lead,fDetail:f.detail,fOnCo:f.onCo,fOffCo:f.offCo,fOnStu:f.onStu,fOffStu:f.offStu,fOnRad:f.onRad,fOffRad:f.offRad,
      gVis:g.vis,gLead:g.lead,gDetail:g.detail,gOnCo:g.onCo,gOffCo:g.offCo,gOnStu:g.onStu,gOffStu:g.offStu,gOnRad:g.onRad,gOffRad:g.offRad,
      hVis:h.vis,hLead:h.lead,hDetail:h.detail,hOnCo:h.onCo,hOffCo:h.offCo,hOnStu:h.onStu,hOffStu:h.offStu,hOnRad:h.onRad,hOffRad:h.offRad,
      iVis:i.vis,iLead:i.lead,iDetail:i.detail,iOnCo:i.onCo,iOffCo:i.offCo,iOnStu:i.onStu,iOffStu:i.offStu,iOnRad:i.onRad,iOffRad:i.offRad,
    };
  }
  componentDidMount(){
    this._retints=[]; this._resizes=[]; this._aLight=false;
    const wait=()=>{ if(window.SMOKE_IMG){
      this._aRetint=this.initSmoke(this.acv,()=>this._aLight?{r:42,g:42,b:46}:{r:152,g:152,b:158});
      this.initSmoke(this.dcv,()=>this.colorRGB());
      this.bindAHover();
    } else setTimeout(wait,80); };
    wait();
  }
  bindAHover(){
    const alf=this.acv&&this.acv.parentElement; if(!alf) return;
    const co=alf.querySelector('.colp.co'); if(!co) return;
    co.addEventListener('mouseenter',()=>{this._aLight=true;if(this._aRetint)this._aRetint();});
    co.addEventListener('mouseleave',()=>{this._aLight=false;if(this._aRetint)this._aRetint();});
  }
  componentDidUpdate(){(this._retints||[]).forEach(f=>f());}
  componentWillUnmount(){this._dead=true;(this._resizes||[]).forEach(f=>window.removeEventListener('resize',f));}
  colorRGB(){
    const c=this.props.smokeColor||'White';
    if(c==='Crimson')return{r:226,g:64,b:70};
    if(c==='Ice')return{r:150,g:190,b:255};
    return{r:255,g:255,b:255};
  }
  initSmoke(canvas,colorFn){
    if(!canvas)return null;
    const ctx=canvas.getContext('2d');
    const host=canvas.parentElement;
    const self=this;
    const size=()=>{canvas.width=host.offsetWidth||1240;canvas.height=host.offsetHeight||780;};
    size();window.addEventListener('resize',size);this._resizes.push(size);
    const orig=new Image();const img=new Image();let ready=false;
    const retint=()=>{
      if(!orig.complete||!orig.naturalWidth)return;
      const rgb=colorFn?colorFn():self.colorRGB();
      const t=document.createElement('canvas');t.width=t.height=32;
      const tc=t.getContext('2d');tc.drawImage(orig,0,0,32,32);
      const d=tc.getImageData(0,0,32,32),p=d.data;
      for(let i=0;i<p.length;i+=4){p[i]=rgb.r;p[i+1]=rgb.g;p[i+2]=rgb.b;}
      tc.putImageData(d,0,0);img.src=t.toDataURL();
    };
    this._retints.push(retint);
    img.onload=()=>{ready=true;};
    orig.onload=()=>{retint();};
    orig.src=window.SMOKE_IMG;
    if(orig.complete)retint();
    let parts=[],lastTime=Date.now();
    const minSpawn=16;
    const maxLife=()=>Math.min(6000,canvas.height/(1.4*60)*1000);
    function Smoke(){
      this.x=canvas.width/2+(Math.random()*180-90);
      this.y=canvas.height-8;
      this.startSize=38;this.endSize=150;this.size=1;
      this.angle=Math.random()*359;
      this.startLife=Date.now();this.lifeTime=0;
      this.velY=-1-(Math.random()*0.5);
      this.velX=(Math.floor(Math.random()*-6+3))/2;
    }
    Smoke.prototype.update=function(){
      const ml=maxLife();
      this.lifeTime=Date.now()-this.startLife;this.angle+=0.2;
      const pc=this.lifeTime/ml*100;
      this.size=this.startSize+(this.endSize-this.startSize)*pc*0.1;
      this.alpha=Math.max(1-pc*0.01,0);
      this.x+=this.velX;this.y+=this.velY;
    };
    const render=()=>{
      if(self._dead)return;
      requestAnimationFrame(render);
      ctx.clearRect(0,0,canvas.width,canvas.height);
      if(!ready)return;
      const on=self.props.showSmoke??true;
      if(!on){parts=[];return;}
      const intensity=self.props.smokeIntensity??0.5;
      const ml=maxLife();
      let len=parts.length;
      while(len--){
        const pt=parts[len];
        if(pt.y<0||pt.lifeTime>ml){parts.splice(len,1);continue;}
        pt.update();
        ctx.save();
        const ox=-pt.size/2,oy=-pt.size/2;
        ctx.translate(pt.x-ox,pt.y-oy);
        ctx.rotate(pt.angle/180*Math.PI);
        ctx.globalAlpha=pt.alpha*intensity;
        ctx.drawImage(img,ox,oy,pt.size,pt.size);
        ctx.restore();
      }
      if(Date.now()>lastTime+minSpawn){lastTime=Date.now();parts.push(new Smoke());}
    };
    render();
    return retint;
  }
}
</script>
</body>
</html>
