/* ───────── Maple ID · animated theme backgrounds + clean see-through surfaces ─────────
 * maplefx.js adds <html class="fx-on"> on card pages and draws the motif for the current theme. */
#fx-big{position:fixed;inset:0;z-index:0;pointer-events:none;display:grid;place-items:center;overflow:hidden}
#fx-big:before{content:"";position:absolute;width:min(120vmin,900px);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--maple-red,var(--accent)) 30%,transparent),transparent)}
#fx-big .fx-float{position:relative;width:min(135vmin,860px);opacity:.36;animation:fx-float 18s ease-in-out infinite alternate}
#fx-big svg{display:block;width:100%;height:auto;overflow:visible}
#fx-big .veins{fill:none;stroke:#ffd9b0;stroke-opacity:.3;stroke-width:.55;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;animation:fx-vein 2.6s .4s cubic-bezier(.22,1,.36,1) forwards}
@keyframes fx-vein{to{stroke-dashoffset:0}}
@keyframes fx-float{from{transform:translateY(-8px) scale(1)}to{transform:translateY(10px) scale(1.025)}}
#fx-canvas{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
@media (prefers-reduced-motion:reduce){#fx-big .fx-float{animation:none}#fx-big .veins{stroke-dashoffset:0;animation:none}}

html.fx-on,html.fx-on body{background-color:var(--bg)}
html.fx-on body{
  background:
    radial-gradient(60% 45% at 88% -8%,color-mix(in oklab,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(50% 40% at -6% 96%,color-mix(in oklab,var(--maple-red,var(--accent)) 22%,transparent),transparent 70%),
    var(--bg);
  background-attachment:fixed}
html.fx-on .halo{display:none}
html.fx-on .grid-bg{opacity:.1}
html.fx-on .bio{color:var(--text)}

/* surfaces: transparent + clean */
html.fx-on .panel,html.fx-on .idcard{
  background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 5.1%,transparent),color-mix(in srgb,var(--ink) 1.6%,transparent)),color-mix(in srgb,var(--bg) 65.1%,transparent);
  border:1px solid color-mix(in srgb,var(--ink) 11%,transparent);box-shadow:0 34px 80px -40px #000,inset 0 1px 0 color-mix(in srgb,var(--ink) 5.9%,transparent)}
html.fx-on .panel:before{opacity:.28}
html.fx-on .live,html.fx-on .tile,html.fx-on .prod,html.fx-on .specs-box,html.fx-on .stats{
  background:linear-gradient(color-mix(in srgb,var(--ink) 4.3%,transparent),color-mix(in srgb,var(--ink) 1.2%,transparent)),color-mix(in srgb,var(--bg) 54.9%,transparent);border-color:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:none}
html.fx-on .live:hover{border-color:var(--accent);box-shadow:0 12px 32px -14px var(--accent-glow)}
html.fx-on .support,html.fx-on .cta-card{
  border:1px solid color-mix(in srgb,var(--ink) 12.2%,transparent);
  background:linear-gradient(140deg,color-mix(in srgb,var(--accent) 22%,transparent),color-mix(in srgb,var(--ink) 2%,transparent) 64%),color-mix(in srgb,var(--bg) 50.2%,transparent);
  box-shadow:0 22px 46px -26px var(--accent-glow)}
html.fx-on .icon-pill,html.fx-on .lang,html.fx-on .love,html.fx-on .chip,html.fx-on .reacts button,
html.fx-on .reactions button,html.fx-on .like,html.fx-on .tile-copy,
html.fx-on .actions .btn:not(.btn-accent){background:color-mix(in srgb,var(--ink) 3.9%,transparent);border-color:color-mix(in srgb,var(--ink) 10.2%,transparent)}
html.fx-on .modal-card,html.fx-on .music-panel{background:color-mix(in srgb,var(--bg) 94.1%,transparent);border-color:color-mix(in srgb,var(--ink) 12.2%,transparent)}

@media (hover:hover) and (pointer:fine){
  html.fx-on .panel,html.fx-on .idcard{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
}
@media (prefers-reduced-transparency:reduce){
  html.fx-on .panel,html.fx-on .idcard{-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* home page theme picker: many swatches wrap neatly */
.theme-pick .sw{flex-wrap:wrap}