/* Showcase hub cards — per-category fx (same data-fx names as the topnav pills) + shared
   /tools/wc-fx.js shader box + spotlight / 3D tilt on hover. Hub page only (Bobby via Proof 2026-10-26).
   Pairs with /showcase/assets/hubfx.js. Reduced motion: no tilt, no keyframes; static hover only. */
@property --hx-a { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

.hub a.card[data-fx] {
  --c: #7c5cff; --ga: var(--c); --gb: #7c5cff;
  --rx: 0deg; --ry: 0deg; --sx: 50%; --sy: 30%;
  border-color: color-mix(in srgb, var(--c) 28%, #1e2636);
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .35s cubic-bezier(.2,.7,.3,1), border-color .2s, box-shadow .25s;
  -webkit-tap-highlight-color: transparent;
}
.hub a.card[data-fx]:is(:hover, :focus-visible) {
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px);
  border-color: var(--c);
  box-shadow: 0 18px 42px -22px var(--c), 0 12px 30px rgba(0,0,0,.35);
}
.hub a.card[data-fx].hx-tilt { transition: transform .08s linear, border-color .2s, box-shadow .25s; }
.hub a.card[data-fx]:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
.hub a.card[data-fx] .kicker { color: var(--c); }
.hub a.card[data-fx] h2 { position: relative; align-self: flex-start; }
.hub a.card[data-fx] .meta { color: #b4bfd3; }

/* spotlight (sits under the text, over the shader) */
.hub a.card[data-fx] > .hx-spot {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  opacity: 0; transition: opacity .25s;
  background: radial-gradient(240px circle at var(--sx) var(--sy), color-mix(in srgb, var(--c) 34%, transparent), transparent 65%);
}
.hub a.card[data-fx]:is(:hover, :focus-visible) > .hx-spot { opacity: 1; }
/* per-fx decoration layer */
.hub a.card[data-fx] > .hx-fx { position: absolute; z-index: 2; pointer-events: none; }

.hx-layer { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.hx-layer i { position: absolute; left: 0; top: 0; border-radius: 50%; margin: -3px 0 0 -3px; }
.hx-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* jelly — Buttons */
.hub a.card[data-fx=jelly]:is(:hover, :focus-visible) h2 { animation: hx-jelly .75s both; }
@keyframes hx-jelly {
  0% { transform: scale(1, 1); } 30% { transform: scale(1.18, .82); } 42% { transform: scale(.86, 1.14); }
  55% { transform: scale(1.08, .94); } 68% { transform: scale(.97, 1.03); } 100% { transform: scale(1, 1); }
}

/* flip — Approval Cards */
.hub a.card[data-fx=flip] h2 { perspective: 500px; }
.hub a.card[data-fx=flip] .hx-flip { display: inline-grid; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3,1.4,.5,1); }
.hub a.card[data-fx=flip] .hx-flip > span { grid-area: 1 / 1; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.hub a.card[data-fx=flip] .hx-back { transform: rotateX(180deg); color: var(--c); }
.hub a.card[data-fx=flip]:is(:hover, :focus-visible) .hx-flip { transform: rotateX(180deg); }

/* drop — Dropdown Menus, Flooring */
.hub a.card[data-fx=drop] .hx-ch { display: inline-block; white-space: pre; }
.hub a.card[data-fx=drop]:is(:hover, :focus-visible) .hx-ch { animation: hx-drop .6s calc(var(--i) * 28ms) both; }
@keyframes hx-drop {
  0% { transform: none; opacity: 1; } 38% { transform: translateY(.7em); opacity: 0; }
  39% { transform: translateY(-.7em); opacity: 0; } 75% { transform: translateY(.06em); opacity: 1; } 100% { transform: none; }
}

/* island — Phone Menus */
.hub a.card[data-fx=island] > .hx-island {
  top: 6px; left: 50%; width: 40px; height: 10px; translate: -50% 0; border-radius: 999px;
  background: #000; box-shadow: inset 0 0 0 1px #2a2f3a;
  transition: width .45s cubic-bezier(.3,1.5,.5,1), height .45s cubic-bezier(.3,1.5,.5,1);
}
.hub a.card[data-fx=island] > .hx-island::after {
  content: ""; position: absolute; right: 6px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
  border-radius: 50%; background: var(--c); opacity: 0; transition: opacity .3s .15s;
}
.hub a.card[data-fx=island]:is(:hover, :focus-visible) > .hx-island { width: 34%; height: 18px; }
.hub a.card[data-fx=island]:is(:hover, :focus-visible) > .hx-island::after { opacity: 1; box-shadow: 0 0 10px var(--c); }
.hub a.card[data-fx=island].hx-on > .hx-island { animation: hx-buzz .3s; }
@keyframes hx-buzz { 20% { translate: calc(-50% - 2px) 0; } 40% { translate: calc(-50% + 2px) 0; } 60% { translate: calc(-50% - 1px) 0; } 80% { translate: calc(-50% + 1px) 0; } }

/* conic — Top Web Effects */
.hub a.card[data-fx=conic] > .hx-ring {
  inset: 0; border-radius: inherit; padding: 1.5px; opacity: 0; transition: opacity .25s;
  background: conic-gradient(from var(--hx-a), transparent 55%, var(--c), #fff 92%, transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.hub a.card[data-fx=conic]:is(:hover, :focus-visible) > .hx-ring { opacity: 1; animation: hx-spin 2.4s linear infinite; }
@keyframes hx-spin { to { --hx-a: 360deg; } }

/* glitch — Next Effects */
.hub a.card[data-fx=glitch] h2::before, .hub a.card[data-fx=glitch] h2::after {
  content: attr(data-t); position: absolute; inset: 0; opacity: 0; pointer-events: none;
}
.hub a.card[data-fx=glitch] h2::before { color: var(--c); }
.hub a.card[data-fx=glitch] h2::after { color: #00e5ff; }
.hub a.card[data-fx=glitch]:is(:hover, :focus-visible) h2 { animation: hx-jit .35s steps(2) 2; }
.hub a.card[data-fx=glitch]:is(:hover, :focus-visible) h2::before { opacity: .85; animation: hx-sl1 .9s steps(3) infinite; }
.hub a.card[data-fx=glitch]:is(:hover, :focus-visible) h2::after { opacity: .85; animation: hx-sl2 .8s steps(3) infinite; }
@keyframes hx-jit { 25% { transform: translate(-2px, 1px); } 50% { transform: translate(2px, -1px); } 75% { transform: translate(-1px, 0); } }
@keyframes hx-sl1 { 0% { clip-path: inset(0 0 60% 0); transform: translate(-3px); } 50% { clip-path: inset(40% 0 20% 0); transform: translate(3px); } 100% { clip-path: inset(70% 0 0 0); transform: translate(-2px); } }
@keyframes hx-sl2 { 0% { clip-path: inset(55% 0 0 0); transform: translate(3px); } 50% { clip-path: inset(10% 0 65% 0); transform: translate(-3px); } 100% { clip-path: inset(30% 0 40% 0); transform: translate(2px); } }

/* peel — Page Effects */
.hub a.card[data-fx=peel] > .hx-peel {
  right: 0; bottom: 0; width: 0; height: 0; border-top-left-radius: 6px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--c) 70%, #fff) 0 48%, transparent 50%);
  box-shadow: -4px -4px 12px rgba(0,0,0,.35);
  transition: width .4s cubic-bezier(.3,1.3,.5,1), height .4s cubic-bezier(.3,1.3,.5,1);
}
.hub a.card[data-fx=peel]:is(:hover, :focus-visible) > .hx-peel { width: 56px; height: 56px; }

/* dock — Taskbar & Nav */
.hub a.card[data-fx=dock] h2 { transform-origin: 50% 100%; }
.hub a.card[data-fx=dock]:is(:hover, :focus-visible) h2 { animation: hx-bounce .9s both; }
@keyframes hx-bounce {
  0%, 100% { transform: none; } 22% { transform: translateY(-12px) scale(1.06); } 44% { transform: translateY(0) scale(1.06, .96); }
  62% { transform: translateY(-5px) scale(1.04); } 78% { transform: translateY(0) scale(1.04); }
}

/* holo — Fresh 2026 */
.hub a.card[data-fx=holo] > .hx-holo {
  --hx: 50%; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .3s; mix-blend-mode: color-dodge;
  background: linear-gradient(110deg, transparent calc(var(--hx) - 40%), #f0abfc calc(var(--hx) - 22%), #67e8f9 var(--hx), #fde047 calc(var(--hx) + 18%), transparent calc(var(--hx) + 40%));
}
.hub a.card[data-fx=holo]:is(:hover, :focus-visible) > .hx-holo { opacity: .45; }

/* scramble — Text Effects (JS decodes the title) */
.hub a.card[data-fx=scramble]:is(:hover, :focus-visible) h2 { color: var(--c); text-shadow: 0 0 14px color-mix(in srgb, var(--c) 50%, transparent); }

/* truck — Trackers */
.hub a.card[data-fx=truck] > .hx-track {
  --p: 0%; left: 18px; right: 18px; bottom: 8px; height: 3px; border-radius: 3px; background: #1e2636;
  opacity: 0; transition: opacity .2s;
}
.hub a.card[data-fx=truck] > .hx-track::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: inherit; background: var(--c);
  transition: width 1.1s cubic-bezier(.4,0,.2,1), background .3s;
}
.hub a.card[data-fx=truck] > .hx-track::after {
  content: "\1F69A"; position: absolute; bottom: 2px; left: var(--p); font-size: 15px; line-height: 1;
  transform: translateX(-60%) scaleX(-1); transition: left 1.1s cubic-bezier(.4,0,.2,1);
}
.hub a.card[data-fx=truck]:is(:hover, :focus-visible) > .hx-track { --p: 100%; opacity: 1; }
.hub a.card[data-fx=truck].hx-done > .hx-track::before { background: #22c55e; }
.hub a.card[data-fx=truck].hx-done { border-color: #22c55e; }

/* elastic — Sliders */
.hub a.card[data-fx=elastic] { --k: .5; --sk: 0deg; --sxk: 1; }
.hub a.card[data-fx=elastic] h2 { transform: skewX(var(--sk)) scaleX(var(--sxk)); transform-origin: 0 50%; transition: transform .5s cubic-bezier(.3,1.8,.5,1); }
.hub a.card[data-fx=elastic] > .hx-slide { left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 3px; background: #1e2636; opacity: .0; transition: opacity .25s; }
.hub a.card[data-fx=elastic] > .hx-slide::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--k) * 100%); background: var(--c); border-radius: inherit; }
.hub a.card[data-fx=elastic] > .hx-slide::after {
  content: ""; position: absolute; top: 50%; left: calc(var(--k) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px;
  border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--c);
}
.hub a.card[data-fx=elastic]:is(:hover, :focus-visible) > .hx-slide { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .hub a.card[data-fx], .hub a.card[data-fx] *, .hub a.card[data-fx] *::before, .hub a.card[data-fx] *::after,
  .hub a.card[data-fx] > .hx-fx::before, .hub a.card[data-fx] > .hx-fx::after {
    animation: none !important; transition: none !important;
  }
  .hub a.card[data-fx], .hub a.card[data-fx]:is(:hover, :focus-visible) { transform: none; }
}