/* Porta d'entrada: el fader SILENCE / HOWL */
:root{--trk:clamp(240px,40vw,560px);--pad:30px}
body:not(.obert) #txt{opacity:0;visibility:hidden}
body:not(.obert) #dust{opacity:0}
#porta{position:fixed;inset:0;z-index:5;display:grid;place-items:center;padding:0 16px}
#porta[hidden]{display:none}
#llumc{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:block;opacity:0}
body:not(.llum-rodona) #aura{display:none}   /* la llum perpendicular substitueix l'aura rodona */
#aura{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(46vmax 30vmax at 30% 52%,rgba(40,150,255,.13),rgba(40,150,255,0) 70%),
             radial-gradient(46vmax 30vmax at 70% 52%,rgba(226,40,160,.13),rgba(226,40,160,0) 70%)}
#consola{position:relative;display:flex;align-items:center;gap:clamp(20px,3vw,44px);margin-top:-2vh}
.lbl{font-weight:300;font-size:clamp(13px,1.6vw,26px);letter-spacing:.5em;margin-right:-.5em;text-transform:uppercase;color:#56606f;
  user-select:none;-webkit-user-select:none;white-space:nowrap;line-height:1}
#lHowl{color:#3d4757}
#fader{position:relative;width:calc(var(--trk) + 2*var(--pad));height:120px;touch-action:none;cursor:pointer;outline:none;
  user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}
#fader.agafa{cursor:grab}
#fader.arrossega{cursor:grabbing}
#fader canvas{position:absolute;left:-64px;top:-64px;width:calc(100% + 128px);height:calc(100% + 128px);pointer-events:none;display:block}
#fader::after{content:"";position:absolute;left:calc(var(--pad) - 34px);right:calc(var(--pad) - 34px);top:calc(50% - 44px);height:88px;
  border-radius:44px;border:1px solid rgba(190,215,255,0);transition:border-color .2s;pointer-events:none}
#fader.kbd:focus::after{border-color:rgba(190,215,255,.42)}   /* anell de focus nomes amb teclat */
body::after{transition:opacity 1.6s ease}
body:not(.obert)::after{opacity:0}   /* la vinyeta de la landing fa bandes sobre el negre pur */
@media (max-width:640px){
  :root{--pad:28px}
  #consola{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:0}
  #fader{grid-row:1;grid-column:1/3;width:calc(100vw - 32px);--trk:calc(100vw - 32px - 2*var(--pad));height:112px}
  #lSil{grid-row:2;grid-column:1;justify-self:start;margin-left:var(--pad);margin-top:-18px;font-size:14px}
  #lHowl{grid-row:2;grid-column:2;justify-self:end;margin-right:calc(var(--pad) - .5em);margin-top:-18px;font-size:14px}
}
/* flaix en arribar al final: una ratlla de llum anamorfica i una floracio suau, res de pantalla blanca */
#flaix{position:fixed;inset:0;pointer-events:none;z-index:6}
#flaix i{position:absolute;display:block;opacity:0}
#flaix .ratlla{left:0;right:0;height:2px;margin-top:-1px;top:var(--y);transform-origin:var(--x) 50%;
  background:linear-gradient(90deg,rgba(120,200,255,0),rgba(214,226,255,.95) 42%,rgba(255,236,250,.95) 58%,rgba(252,105,190,0));
  box-shadow:0 0 16px 3px rgba(226,40,160,.36),0 0 42px 6px rgba(80,170,255,.18)}
#flaix .flor{left:var(--x);top:var(--y);width:120vmax;height:120vmax;margin:-60vmax 0 0 -60vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(255,236,250,.30) 0%,rgba(252,105,190,.10) 18%,rgba(120,110,255,.04) 36%,rgba(0,0,0,0) 56%)}
#flaix .columna{top:0;bottom:0;left:var(--x);width:22vmin;margin-left:-11vmin;transform-origin:50% var(--y);
  background:linear-gradient(90deg,rgba(0,0,0,0),rgba(226,40,160,.20) 34%,rgba(255,236,250,.16) 50%,rgba(226,40,160,.20) 66%,rgba(0,0,0,0));
  -webkit-mask-image:linear-gradient(180deg,transparent 4%,#000 40%,#000 60%,transparent 96%);mask-image:linear-gradient(180deg,transparent 4%,#000 40%,#000 60%,transparent 96%)}
/* boto de silenci */
#mut{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(10px,env(safe-area-inset-bottom));z-index:8;width:44px;height:44px;
  border:0;padding:0;background:none;color:#8a97ab;opacity:.42;cursor:pointer;border-radius:50%;display:grid;place-items:center;
  transition:opacity .2s,color .2s;-webkit-tap-highlight-color:transparent}
#mut:hover,#mut:focus-visible{opacity:.95;color:#e4edf8;outline:none}
#mut:focus-visible{box-shadow:0 0 0 1px rgba(190,215,255,.45)}
#mut[hidden]{display:none}
#mut svg{width:18px;height:18px;display:block}
#mut .ona{transition:opacity .2s} #mut .creu{opacity:0;transition:opacity .2s}
#mut[aria-pressed="true"] .ona{opacity:0} #mut[aria-pressed="true"] .creu{opacity:1}
/* panell de proves (nomes al mockup; ?nomock=1 l'amaga) */
#mock{position:fixed;left:10px;top:10px;z-index:9;font:11px/1.5 "Segoe UI",system-ui,sans-serif;color:#7d8ba0;
  background:rgba(9,12,19,.78);border:1px solid rgba(255,255,255,.06);border-radius:8px;padding:7px 10px 8px;max-width:calc(100vw - 20px)}
#mock b{font-weight:600;letter-spacing:.14em;color:#5d6a7d;font-size:10px}
#mock .fila{display:flex;gap:4px;align-items:center;flex-wrap:wrap;margin-top:3px}
#mock .fila span{min-width:44px;color:#5d6a7d}
#mock button{font:inherit;color:#8d9ab0;background:none;border:1px solid transparent;border-radius:5px;padding:1px 6px;cursor:pointer}
#mock button:hover{color:#dfe8f5}
#mock button[aria-pressed="true"]{color:#e4edf8;border-color:rgba(59,201,255,.45)}
#mock button:focus-visible{outline:1px solid rgba(190,215,255,.6)}
#mock.plegat .fila{display:none}