/* Coded motion for the home page. Everything loops only while on screen (.run). */
.fx-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none}
.stage h1.rise{opacity:1;transform:none;animation:none}
/* fx-intro is set in the page head, before first paint, so nothing flashes. */
html.fx-intro .stage h1.rise{opacity:0}
html.fx-intro.fx-land .stage h1.rise{opacity:1;transition:opacity .3s ease}
html.fx-intro:not(.fx-land) .rise{animation-play-state:paused}
html.fx-intro .stage::after{content:"";position:absolute;inset:0;z-index:3;background:#030405;pointer-events:none;transition:opacity 1.1s ease .25s}
html.fx-reveal .stage::after{opacity:0}

/* A message arriving through the wormhole. */
.fx-card{position:absolute;z-index:5;width:300px;padding:13px 15px;border:1px solid rgba(123,243,208,.28);border-radius:14px;background:rgba(8,12,13,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--fg);font-size:14.5px;line-height:1.35;opacity:0;transform:scale(.96);transition:opacity .3s,transform .3s;pointer-events:none}
.fx-card.on{opacity:1;transform:none}
.fx-card .row{display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;align-items:center}
.fx-card .who{font-weight:600;display:flex;align-items:center;gap:6px}
.fx-card .txt{color:#d5d2ca}
@media(max-width:1099px){.fx-card{display:none}}

.av{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font-weight:650;font-size:13px;color:#fff;flex:none}
.bot{display:inline-flex;align-items:center;padding:0 5px;border-radius:4px;background:var(--mint);color:#052018;font-size:9.5px;font-weight:800;letter-spacing:.04em;line-height:1.55}

/* The real app runs in a shadow root inside these hosts, scaled to fit. */
.scene{position:relative;aspect-ratio:1500/844;background:#0a0e13;overflow:hidden}
@media(max-width:680px){.scene{aspect-ratio:auto;height:520px}}

/* Theme picker */
.swatches button.sw{font:inherit;background:none;cursor:pointer;color:#c4c0b8}
.swatches .sw[aria-pressed="true"]{color:var(--fg);border-color:var(--mint);background:rgba(51,233,181,.08)}
.swatches .sw:focus-visible{outline:2px solid var(--mint);outline-offset:2px}

/* Tile graphics */
.fx{position:relative;height:150px;margin-bottom:20px;border-radius:12px;border:1px solid var(--line);background:#07090a;overflow:hidden}
.tile.big .fx{flex:1;min-height:210px;margin-bottom:24px}
.fx:not(.run) *,.fx:not(.run) *::before,.fx:not(.run) *::after{animation-play-state:paused!important}

.fx-host{position:absolute;inset:0}

.fx-stream canvas{display:block;width:100%;height:100%;image-rendering:pixelated}
.fx-stream canvas.sharp{image-rendering:auto}
.fx-stream b{position:absolute;right:10px;bottom:9px;padding:2px 9px;border-radius:7px;background:rgba(5,7,8,.74);color:var(--mint2);font-family:var(--mono);font-size:13px;font-weight:500}

.fx-watch{padding:16px}
.fx-watch .screen{height:68px;border-radius:8px;background:linear-gradient(120deg,#0c3a35,#14233f 60%,#311a4d);display:grid;place-items:center}
.fx-watch .screen::after{content:"";border-left:15px solid #fff;border-top:9px solid transparent;border-bottom:9px solid transparent;opacity:.85}
.fx-watch .bar{position:relative;height:4px;margin-top:26px;border-radius:9px;background:#20262a}
.fx-watch .bar u{position:absolute;inset:0 auto 0 0;border-radius:9px;background:var(--mint);animation:wBar 8s linear infinite}
.fx-watch .head{position:absolute;top:-23px;width:20px;height:20px;margin-left:-10px;border-radius:50%;display:grid;place-items:center;color:#fff;font-size:9px;font-weight:700;border:2px solid #07090a;animation:wBar2 8s linear infinite}
.fx-watch .head:nth-of-type(1){animation-name:wLag}
.fx-watch .head:nth-of-type(2){margin-left:4px}
.fx-watch .head:nth-of-type(3){margin-left:-24px}
@keyframes wBar{from{width:6%}to{width:94%}}
@keyframes wBar2{from{left:6%}to{left:94%}}
@keyframes wLag{0%{left:6%}24%{left:20%}26%{left:29.4%}100%{left:94%}}

.fx-sound{display:flex;align-items:center;gap:14px;padding:0 16px}
.fx-sound .pads{display:grid;grid-template-columns:repeat(2,38px);gap:7px;flex:none}
.fx-sound .pads span{display:grid;place-items:center;height:38px;border-radius:9px;background:#141a1d;font-size:18px;animation:pad 4s infinite}
.fx-sound .pads span:nth-child(2){animation-delay:1s}.fx-sound .pads span:nth-child(3){animation-delay:2s}.fx-sound .pads span:nth-child(4){animation-delay:3s}
.fx-sound .wave{flex:1;display:flex;align-items:center;gap:3px;height:80px;min-width:0}
.fx-sound .wave i{flex:1;height:100%;border-radius:9px;background:var(--mint);transform:scaleY(.08);animation:wave 1s ease-in-out infinite}
@keyframes pad{0%,4%{background:rgba(51,233,181,.32);transform:scale(.93)}16%,100%{background:#141a1d;transform:none}}
@keyframes wave{0%,100%{transform:scaleY(.1)}50%{transform:scaleY(var(--h,.7))}}

.fx-wheel .win{position:absolute;inset:14px 16px;border-radius:8px;background:#11161a;border:1px solid var(--line)}
.fx-wheel .win::before{content:"";position:absolute;left:12px;top:12px;width:44%;height:9px;border-radius:9px;background:#232b30;box-shadow:0 18px 0 #1b2226,0 36px 0 #1b2226}
.fx-wheel .ask{position:absolute;right:12px;bottom:10px;padding:5px 9px;border-radius:8px;background:var(--mint);color:#052018;font-size:12.5px;font-weight:650;animation:ask 7s infinite}
.fx-wheel .cur{position:absolute;left:0;top:0;width:18px;height:18px;animation:cur 7s infinite cubic-bezier(.5,0,.2,1)}
.fx-wheel .cur svg{display:block;width:100%;height:100%;fill:var(--mint2);stroke:#07090a;stroke-width:1.5}
.fx-wheel .cur em{position:absolute;left:16px;top:12px;padding:0 6px;border-radius:5px;background:#9d8cff;color:#17113f;font-size:10.5px;font-style:normal;font-weight:700}
@keyframes ask{0%,4%{opacity:0;transform:translateY(5px)}9%,26%{opacity:1;transform:none}30%,100%{opacity:0;transform:scale(.9)}}
@keyframes cur{0%,30%{transform:translate(170px,110px);opacity:0}34%{transform:translate(170px,110px);opacity:1}52%{transform:translate(50px,38px)}56%{transform:translate(50px,38px) scale(.82)}60%{transform:translate(50px,38px)}80%{transform:translate(120px,66px);opacity:1}92%,100%{transform:translate(120px,66px);opacity:0}}

.fx-map{background:#0a1012}
.fx-map svg{position:absolute;inset:0;width:100%;height:100%}
.fx-map .road{fill:none;stroke:#1d282c;stroke-width:5}
.fx-map text{fill:#fff;font:700 12px Geist,sans-serif;text-anchor:middle;dominant-baseline:central}

.fx-import{display:grid;grid-template-columns:1fr 34px 1fr;align-items:center;gap:8px;padding:0 16px}
.fx-import ul{list-style:none;display:grid;gap:5px;font-size:13px}
.fx-import li{padding:3px 8px;border-radius:6px;background:#141a1d;color:#cbc8c1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-import .to li{background:rgba(51,233,181,.1);color:var(--mint2);opacity:0;animation:land 7s infinite}
.fx-import .to li:nth-child(2){animation-delay:.6s}.fx-import .to li:nth-child(3){animation-delay:1.2s}.fx-import .to li:nth-child(4){animation-delay:1.8s}
.fx-import img{width:34px;filter:drop-shadow(0 0 10px rgba(51,233,181,.5))}
@keyframes land{0%,6%{opacity:0;transform:translateX(-14px)}12%,84%{opacity:1;transform:none}92%,100%{opacity:0}}

@media(prefers-reduced-motion:reduce){
  .fx *,.fx *::before,.fx *::after,.scene *{animation:none!important}
  .fx-watch .bar u{width:60%}.fx-watch .head{left:60%}
  .fx-sound .wave i{transform:scaleY(var(--h,.5))}
  .fx-wheel .ask{opacity:1}.fx-wheel .cur{display:none}
  .fx-import .to li{opacity:1}
}

/* Phones: the portal sits behind the copy, so darken it enough for the mint headline. */
@media(max-width:760px){.stage::before{background:linear-gradient(90deg,rgba(5,6,7,.86) 0%,rgba(5,6,7,.58) 70%,rgba(5,6,7,.34) 100%),linear-gradient(0deg,rgba(5,6,7,.92) 0%,rgba(5,6,7,0) 24%)}}