@import url("https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Rubik+Glitch&family=Sora:wght@300;400;500&family=JetBrains+Mono:wght@400;500&display=swap");

/* ---------- MenuItem: StarCraft-style plate ---------- */
.omni-plate {
  --cut: 14px;
  position: relative; display: flex; align-items: center; gap: 14px;
  height: 58px; padding: 0 22px; overflow: hidden; outline: none;
  color: var(--muted); text-decoration: none;
  font-family: var(--font-deck); font-size: 24px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  background: rgba(26, 20, 48, .6);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: color .15s, transform .35s cubic-bezier(.2,.9,.2,1), background .25s;
}
.omni-plate::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--rim-strong); clip-path: inherit; opacity: .55; transition: opacity .2s, border-color .2s; pointer-events: none; }
.omni-plate__tick { flex: none; width: 6px; height: 22px; background: var(--rim-strong); transition: background .2s, box-shadow .2s, height .3s; }
.omni-plate__label { white-space: nowrap; }
.omni-plate__num { margin-left: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: var(--rim-strong); transition: color .2s; }
.omni-plate__sweep { position: absolute; top: 0; bottom: 0; left: -60%; width: 50%; pointer-events: none; opacity: 0; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(212,178,255,.35) 45%, rgba(255,255,255,.55) 50%, rgba(212,178,255,.35) 55%, transparent); }
.omni-plate__br { position: absolute; width: 12px; height: 12px; border: 0 solid var(--plasma); opacity: 0; transition: all .3s cubic-bezier(.2,.9,.2,1); pointer-events: none; }
.omni-plate__br--a { top: 8px; right: 8px; border-width: 1px 1px 0 0; transform: translate(10px, -10px); }
.omni-plate__br--b { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; transform: translate(-10px, 10px); }
.omni-plate:hover, .omni-plate:focus-visible, .omni-plate.is-active { color: var(--ink); background: rgba(90, 31, 194, .45); }
.omni-plate:hover, .omni-plate:focus-visible { transform: translateX(14px); }
.omni-plate:hover::before, .omni-plate:focus-visible::before, .omni-plate.is-active::before { opacity: 1; border-color: var(--bloom); }
.omni-plate:hover .omni-plate__tick, .omni-plate:focus-visible .omni-plate__tick, .omni-plate.is-active .omni-plate__tick { background: var(--flare); box-shadow: var(--glow-flare); height: 30px; }
.omni-plate:hover .omni-plate__num, .omni-plate:focus-visible .omni-plate__num { color: var(--flare); }
.omni-plate:hover .omni-plate__br, .omni-plate:focus-visible .omni-plate__br { opacity: 1; transform: none; }
.omni-plate:hover .omni-plate__sweep, .omni-plate:focus-visible .omni-plate__sweep { animation: omni-sweep .7s cubic-bezier(.3,.7,.2,1) forwards; }
.omni-plate:hover .omni-plate__label, .omni-plate:focus-visible .omni-plate__label { text-shadow: 0 0 12px rgba(212,178,255,.7); }
.omni-plate--sm { --cut: 10px; height: 42px; font-size: 16px; padding: 0 18px; }

/* ---------- Button ---------- */
.omni-btn {
  --cut: 10px;
  position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  height: 48px; padding: 0 28px; border: 0; cursor: pointer;
  font-family: var(--font-deck); font-size: 16px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  transition: transform .2s cubic-bezier(.2,.9,.2,1), box-shadow .2s, background .2s, color .2s;
}
.omni-btn__label { position: relative; z-index: 1; white-space: nowrap; }
.omni-btn__sweep { position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; transform: skewX(-20deg); opacity: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.45) 50%, transparent); }
.omni-btn:hover .omni-btn__sweep, .omni-btn:focus-visible .omni-btn__sweep { animation: omni-sweep .6s ease-out forwards; }
.omni-btn:active { transform: translateY(1px) scale(.99); }
.omni-btn:focus-visible { outline: 2px solid var(--plasma); outline-offset: 3px; }
.omni-btn--primary { background: var(--bloom-deep); color: var(--ink); }
.omni-btn--primary:hover { background: #6a2be0; box-shadow: var(--glow-bloom); }
.omni-btn--secondary { background: rgba(26,20,48,.6); color: var(--ink); box-shadow: inset 0 0 0 1px var(--rim-strong); }
.omni-btn--secondary:hover { box-shadow: inset 0 0 0 1px var(--flare), var(--glow-flare); color: var(--flare); }

/* ---------- HUD frame helpers ---------- */
.omni-hud-corner { position: absolute; width: 28px; height: 28px; border: 0 solid var(--rim-strong); pointer-events: none; }
.omni-hud-corner--tl { top: 16px; left: 16px; border-width: 1px 0 0 1px; }
.omni-hud-corner--tr { top: 16px; right: 16px; border-width: 1px 1px 0 0; }
.omni-hud-corner--bl { bottom: 16px; left: 16px; border-width: 0 0 1px 1px; }
.omni-hud-corner--br { bottom: 16px; right: 16px; border-width: 0 1px 1px 0; }
.omni-scanlines { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: overlay;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 3px); }
.omni-label { font-family: var(--font-mono); font-size: 12px; line-height: 16px; letter-spacing: .22em; text-transform: uppercase; }

/* ---------- StatusTag: the green ONLINE readout ---------- */
.omni-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; color: var(--signal); }
.omni-status__dot { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--signal); box-shadow: var(--glow-signal); }
.omni-status__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--signal); animation: omni-ping 1.8s cubic-bezier(.2,.7,.3,1) infinite; }
.omni-status:hover { text-shadow: var(--glow-signal); }
.omni-status--standby { color: var(--flare); }
.omni-status--standby .omni-status__dot { background: var(--flare); box-shadow: var(--glow-flare); }
.omni-status--standby .omni-status__dot::after { border-color: var(--flare); }
.omni-status--offline { color: var(--muted); }
.omni-status--offline .omni-status__dot { background: var(--muted); box-shadow: none; }
.omni-status--offline .omni-status__dot::after { display: none; }
@keyframes omni-ping { 0% { transform: scale(.4); opacity: 1; } 100% { transform: scale(1.8); opacity: 0; } }


/* ---------- SoundToggle ---------- */
.omni-sound { display: inline-flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; cursor: pointer;
  background: rgba(15,11,26,.7); color: var(--muted); border: 1px solid var(--rim-strong);
  font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: .22em; text-transform: uppercase; transition: color .2s, border-color .2s, box-shadow .2s; }
.omni-sound:hover { color: var(--ink); border-color: var(--bloom); }
.omni-sound:focus-visible { outline: 2px solid var(--plasma); outline-offset: 2px; }
.omni-sound:not(.is-on) { animation: omni-nudge 2.4s ease-in-out infinite; }
.omni-sound.is-on { color: var(--flare); border-color: var(--flare); box-shadow: var(--glow-flare); animation: none; }
.omni-sound__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.omni-sound__bars i { width: 2px; height: 3px; background: currentColor; }
.omni-sound.is-on .omni-sound__bars i { animation: omni-eq .9s ease-in-out infinite; }
.omni-sound.is-on .omni-sound__bars i:nth-child(2) { animation-delay: -.3s; }
.omni-sound.is-on .omni-sound__bars i:nth-child(3) { animation-delay: -.6s; }
.omni-sound.is-on .omni-sound__bars i:nth-child(4) { animation-delay: -.15s; }
@keyframes omni-eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
@keyframes omni-nudge { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 3px rgba(166,107,255,.25); } }

/* ---------- FeatureCard ---------- */
.omni-card { --cut: 18px; position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 260px; padding: 24px; overflow: hidden; cursor: pointer; outline: none;
  background: rgba(26,20,48,.55); color: var(--ink);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  transition: transform .35s cubic-bezier(.2,.9,.2,1), background .25s; }
.omni-card::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--rim-strong); clip-path: inherit; opacity: .6; pointer-events: none; transition: border-color .2s, opacity .2s; }
.omni-card__head { display: flex; justify-content: space-between; align-items: center; }
.omni-card__code { color: var(--flare); }
.omni-card__glyph { font-style: normal; font-family: var(--font-mono); font-size: 22px; color: var(--bloom); transition: transform .5s cubic-bezier(.2,.9,.2,1), color .2s; }
.omni-card__title { margin: 18px 0 0; font-family: var(--font-deck); font-size: 26px; line-height: 1.05; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.omni-card__body { margin: 0; font-family: var(--font-sans); font-weight: 300; font-size: 15px; line-height: 24px; color: var(--muted); }
.omni-card__foot { margin-top: auto; display: flex; justify-content: space-between; color: var(--muted); }
.omni-card__go { transition: transform .3s, color .2s; }
.omni-card__scan { position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(166,107,255,.14) 80%, rgba(212,178,255,.45) 100%); }
.omni-card:hover, .omni-card:focus-visible { transform: translateY(-4px); background: rgba(42,11,99,.55); }
.omni-card:hover::before, .omni-card:focus-visible::before { opacity: 1; border-color: var(--bloom); }
.omni-card:hover .omni-plate__br, .omni-card:focus-visible .omni-plate__br { opacity: 1; transform: none; }
.omni-card:hover .omni-card__glyph { transform: rotate(180deg) scale(1.2); color: var(--plasma); }
.omni-card:hover .omni-card__go { transform: translateX(6px); color: var(--flare); }
.omni-card:hover .omni-card__scan { animation: omni-scan 1s cubic-bezier(.3,.7,.2,1) forwards; }
@keyframes omni-scan { 0% { top: -40%; opacity: 1; } 100% { top: 110%; opacity: 0; } }

/* ---------- Footer ---------- */
.omni-footer { position: relative; background: var(--abyss); color: var(--ink); border-top: 1px solid var(--rim); padding: 48px 48px 24px; font-family: var(--font-sans); }
.omni-footer::before { content: ""; position: absolute; top: -1px; left: 48px; width: 120px; height: 2px; background: var(--flare); box-shadow: var(--glow-flare); }
.omni-footer__top { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.omni-footer__word { font-family: var(--font-deck); font-weight: 400; font-size: 18px; letter-spacing: .3em; }
.omni-footer__tag { margin: 12px 0 18px; max-width: 300px; color: var(--muted); font-weight: 300; font-size: 14px; line-height: 22px; }
.omni-footer__col { display: flex; flex-direction: column; gap: 10px; }
.omni-footer__h { color: var(--flare); margin-bottom: 4px; }
.omni-footer__a { color: var(--muted); text-decoration: none; font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em; transition: color .15s, transform .2s; }
.omni-footer__a:hover, .omni-footer__a:focus-visible { color: var(--ink); transform: translateX(4px); outline: none; }
.omni-footer__a:hover::before { content: "> "; color: var(--signal); }
.omni-footer__bar { display: flex; justify-content: space-between; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rim); color: var(--muted); }

@keyframes omni-sweep { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .omni-plate, .omni-btn { transition-duration: .01s; }
  .omni-plate:hover, .omni-plate:focus-visible { transform: none; }
}

.omni-glitch { font-family: var(--font-glitch); font-weight: 400; }