/* SEKUREX Motion // Origin — sound veil + now-playing chip.
   Markup lives outside .mox (its isolation:isolate would trap fixed elements
   under the z-100 topnav), so the .mox line tokens are re-declared here with
   identical values. */
.sx-veil,.sx-chip{--mox-accent:#b9bfc6;--mox-line:rgba(185,191,198,0.22);--mox-line-strong:rgba(185,191,198,0.45);}

body.sx-lock{overflow:hidden;}

/* Entry veil */
.sx-veil{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;text-align:center;background:rgba(3,4,6,0.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;transition:opacity 480ms cubic-bezier(0.22,1,0.36,1);}
.sx-veil[hidden]{display:none;} /* author display:flex would otherwise beat the UA [hidden] rule */
.sx-veil.is-open{opacity:1;}
.sx-veil.is-closing{opacity:0;pointer-events:none;}
.sx-veil-panel{max-width:460px;display:flex;flex-direction:column;align-items:center;transition:transform 480ms cubic-bezier(0.22,1,0.36,1);}
.sx-veil.is-closing .sx-veil-panel{transform:scale(1.03);}

/* Earpod glyph */
.sx-veil-glyph{position:relative;width:66px;margin-bottom:22px;animation:sxGlyphFloat 7.5s ease-in-out infinite alternate;}
.sx-veil-glyph::before{content:'';position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(0,255,200,0.10),transparent 68%);filter:blur(6px);pointer-events:none;}
.sx-veil-glyph svg{position:relative;display:block;width:100%;height:auto;}
@keyframes sxGlyphFloat{from{transform:translateY(0);}to{transform:translateY(-5px);}}

/* Type stack */
.sx-veil-kicker{font-family:var(--font-mono);font-size:10px;letter-spacing:0.24em;text-transform:uppercase;color:#868d94;margin-bottom:14px;}
.sx-veil-title{font-family:var(--font-serif);font-weight:600;font-size:clamp(24px,4vw,34px);line-height:1.15;color:var(--metal-100);margin-bottom:10px;}
.sx-veil-sub{font-size:14px;line-height:1.6;color:var(--steel-400);max-width:340px;margin-bottom:24px;}

/* Track identity — house glass chip */
.sx-veil-track{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border:1px solid var(--mox-line-strong);border-radius:2px;background:rgba(3,4,6,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--champagne-500);white-space:nowrap;margin-bottom:30px;}
.sx-dot{width:6px;height:6px;border-radius:50%;background:var(--accent-mint);box-shadow:0 0 8px rgba(0,255,200,0.9);animation:sxPulse 1.6s ease-in-out infinite;}
@keyframes sxPulse{0%,100%{opacity:.35;}50%{opacity:1;}}
.sx-file{text-transform:none;letter-spacing:0.05em;color:var(--champagne-400);} /* filename renders verbatim */

/* Actions */
.sx-veil-actions{display:flex;flex-direction:column;align-items:center;gap:16px;}
.sx-enter{display:inline-flex;align-items:center;gap:10px;padding:15px 34px;border:1px solid rgba(0,255,200,0.45);border-radius:2px;background:rgba(0,255,200,0.05);font-family:var(--font-sans);font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:var(--accent-mint);cursor:pointer;transition:border-color var(--transition),background var(--transition),transform var(--transition),box-shadow var(--transition);}
.sx-enter:hover{border-color:var(--accent-mint);background:rgba(0,255,200,0.1);transform:translateY(-1px);box-shadow:0 10px 30px rgba(0,255,200,0.12);}
.sx-enter .arrow{font-weight:400;letter-spacing:0;}
.sx-enter-muted{border:0;background:transparent;font-family:var(--font-mono);font-size:10px;letter-spacing:0.18em;text-transform:uppercase;color:var(--steel-500);cursor:pointer;padding:6px 4px;transition:color var(--transition);}
.sx-enter-muted:hover{color:var(--metal-300);}
.sx-enter:focus-visible,.sx-enter-muted:focus-visible,.sx-chip:focus-visible{outline:1px solid var(--accent-mint);outline-offset:3px;}

/* Degraded — audio failed while the veil was still open */
.sx-veil.is-dead .sx-enter-muted{display:none;}
.sx-veil.is-dead .sx-veil-track{opacity:0.4;}
.sx-veil.is-dead .sx-dot{animation:none;opacity:0.3;box-shadow:none;}

/* Now-playing chip */
.sx-chip{position:fixed;z-index:120;left:calc(18px + env(safe-area-inset-left,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));display:inline-flex;align-items:center;gap:9px;padding:9px 13px;border:1px solid var(--mox-line-strong);border-radius:2px;background:rgba(3,4,6,0.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font-family:var(--font-mono);font-size:9.5px;letter-spacing:0.2em;text-transform:uppercase;color:var(--steel-400);cursor:pointer;white-space:nowrap;overflow:hidden;opacity:0;transform:translateY(8px);transition:opacity 480ms cubic-bezier(0.22,1,0.36,1),transform 480ms cubic-bezier(0.22,1,0.36,1),border-color var(--transition);}
.sx-chip[hidden]{display:none;}
.sx-chip.is-in{opacity:1;transform:translateY(0);}
.sx-chip:hover{border-color:var(--mox-accent);}

/* Equalizer */
.sx-eq{display:inline-flex;align-items:flex-end;gap:2.5px;height:11px;}
.sx-eq i{width:2.5px;height:100%;background:var(--accent-mint);border-radius:1px;box-shadow:0 0 6px rgba(0,255,200,0.55);transform-origin:bottom;animation:sxEq 1.1s ease-in-out infinite;}
.sx-eq i:nth-child(2){animation-delay:-0.35s;}
.sx-eq i:nth-child(3){animation-delay:-0.7s;}
@keyframes sxEq{0%,100%{transform:scaleY(0.3);}50%{transform:scaleY(1);}}
.sx-chip.is-paused .sx-eq i{animation:none;transform:scaleY(0.3);opacity:0.5;box-shadow:none;}
.sx-chip.is-buffering .sx-eq i{animation:sxEqBuffer 1.6s ease-in-out infinite;}
@keyframes sxEqBuffer{0%,100%{transform:scaleY(0.3);opacity:0.35;}50%{transform:scaleY(0.45);opacity:0.8;}}

@media (max-width:640px){
  .sx-veil-panel{width:100%;}
  .sx-veil-sub{font-size:13px;}
  .sx-veil-track{font-size:8.5px;letter-spacing:0.14em;padding:5px 9px;}
  .sx-veil-actions{width:100%;}
  .sx-enter{width:100%;justify-content:center;}
  .sx-chip{font-size:8.5px;letter-spacing:0.12em;padding:8px 10px;gap:7px;max-width:calc(100vw - 32px);}
}

@media (prefers-reduced-motion:reduce){
  .sx-veil,.sx-veil-panel,.sx-chip{transition:none;}
  .sx-veil-glyph,.sx-dot,.sx-eq i,.sx-chip.is-buffering .sx-eq i{animation:none;}
  .sx-eq i{transform:scaleY(0.55);}
}