/* ==========================================================================
   aclace.labs Directory — ONE spatial scene, three states via [data-state].
   Scene chrome follows the aclace.labs system (black, sharp edges, Anton/
   Archivo); result cards carry per-service accents from the Visual Engine.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700;900&display=swap');

.directory{
  --scene-accent:#FFFFFF;                 /* monochrome — white accent */
  --scene-line:rgba(255,255,255,.24);     /* connection lines */
  --glass-a:rgba(255,255,255,.10);
  --glass-b:rgba(255,255,255,.03);
  --edge:rgba(255,255,255,.16);
  --edge-bright:rgba(255,255,255,.42);
  position:relative;
  height:calc(100dvh - 168px);
  min-height:560px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.05), transparent 42%),
    #000000;
  color:var(--ink);
  isolation:isolate;
  display:flex; flex-direction:column;
}

/* breadcrumb / control bar */
.lab__bar{
  position:relative; z-index:6;
  display:flex; align-items:center; gap:10px;
  padding:14px var(--gutter);
  border-bottom:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--grey);
}
#crumbs{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.lab__crumb{ background:none; border:0; padding:0; cursor:pointer; color:var(--grey);
  font:inherit; letter-spacing:inherit; text-transform:inherit; transition:color .15s; }
.lab__crumb:hover{ color:var(--ink); }
.lab__crumb--active{ color:var(--ink); cursor:default; }
.lab__sep{ color:rgba(255,255,255,.25); }
.lab__hint{ margin-left:auto; color:var(--grey); }

/* ---- stage ---- */
.stage{ position:relative; z-index:2; flex:1; display:grid; place-items:center; }
.directory-scene{ position:relative; width:min(1400px,94vw); height:min(760px,80vh); }
.scene-background{ position:absolute; inset:-10%; z-index:-2; pointer-events:none;
  background:radial-gradient(circle at 50% 45%, rgba(255,255,255,.045), transparent 44%); }
.scene-grid{
  position:absolute; inset:-30% -20% -10%; z-index:-1; pointer-events:none; opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:70px 70px;
  transform:perspective(800px) rotateX(66deg) translateY(16%);
  transform-origin:center bottom;
  -webkit-mask-image:linear-gradient(to top, #000, transparent 78%);
  mask-image:linear-gradient(to top, #000, transparent 78%);
}
.scene-content{ position:absolute; inset:0; transform:translateZ(0); }
.scene-background, .scene-grid, .connections, .directory-brand, .layer{ pointer-events:none; }
.node, .tool-card, .tool-try, .tool-view{ pointer-events:auto; }

/* connection lines (hub only) */
.connections{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;
  transition:opacity .6s ease; color:var(--scene-line); }
.directory-scene[data-state="hub"] .connections{ opacity:.5; }
.directory-scene:not([data-state="hub"]) .connections{ opacity:0; }
.connections line{ stroke:currentColor; stroke-width:1; }

/* ---- glass primitive ---- */
.glass{
  background:linear-gradient(145deg, rgba(255,255,255,.09), rgba(18,18,18,.6));
  border:1px solid var(--edge);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 20px 60px rgba(0,0,0,.5);
}

/* ---- central brand ---- */
.directory-brand{
  position:absolute; left:50%; top:50%;
  width:clamp(180px,24vw,236px); height:clamp(104px,15vw,132px);
  display:grid; place-items:center; text-align:center; gap:2px;
  border-radius:0; z-index:10;
  transform:translate(-50%,-50%);
  transition:transform 800ms cubic-bezier(.2,.8,.2,1), opacity 500ms ease, filter 500ms ease;
}
.directory-brand .mark{ width:32px; height:32px; margin-bottom:6px; }
.directory-brand .brand-name{ font-family:var(--font-head); font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:1.15rem; }
.directory-brand .brand-name b{ color:var(--ink); }
.directory-brand .brand-sub{ font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }
.directory-scene[data-state="category"] .directory-brand{ transform:translate(-50%,-50%) scale(.62); opacity:.22; filter:blur(1px); }
.directory-scene[data-state="results"]  .directory-brand{ transform:translate(-50%,-50%) scale(.5); opacity:0; }

/* ============================================================ NODES ============================================================ */
.node{
  position:absolute; left:50%; top:50%;
  display:grid; place-items:center; gap:6px;
  border-radius:0; cursor:pointer; color:var(--ink); text-align:center;
  font-family:var(--font-mono); letter-spacing:.14em; text-transform:uppercase;
  transform:translate(calc(-50% + var(--nx,0px)), calc(-50% + var(--ny,0px)));
  transition:transform 800ms cubic-bezier(.2,.8,.2,1), opacity 550ms ease, filter 500ms ease,
             background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}
.node:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }
.node .dot{ width:6px; height:6px; border-radius:50%; background:#fff; box-shadow:0 0 10px rgba(255,255,255,.7); }
.node:hover{
  border-color:var(--edge-bright);
  background:linear-gradient(145deg, rgba(255,255,255,.2), rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 0 46px -12px rgba(255,255,255,.55), 0 20px 60px rgba(0,0,0,.5);
  transform:translate(calc(-50% + var(--nx,0px)), calc(-50% + var(--ny,0px))) scale(1.08);
}
.hub-node{ width:clamp(104px,13vw,132px); height:clamp(74px,10vw,104px); font-size:.76rem; }
.hub-node .label{ font-weight:700; }
.category-node{ width:clamp(112px,13vw,140px); height:clamp(78px,10vw,96px); font-size:.82rem; opacity:0; pointer-events:none; }
.category-node .count{ font-size:.58rem; letter-spacing:.1em; color:var(--grey); }

/* STATE: category */
.directory-scene[data-state="category"] .hub-node:not(.is-hero),
.directory-scene[data-state="results"]  .hub-node{
  opacity:0; pointer-events:none; filter:blur(1px);
  transform:translate(calc(-50% + var(--nx,0px)), calc(-50% + var(--ny,0px))) scale(.45);
}
.directory-scene[data-state="category"] .hub-node.is-hero,
.directory-scene[data-state="results"]  .hub-node.is-hero{
  transform:translate(-50%, calc(-50% - 40%)) scale(1.22);
  border-color:var(--edge-bright);
  background:linear-gradient(145deg, rgba(255,255,255,.18), rgba(255,255,255,.05));
  box-shadow:0 0 60px -16px rgba(255,255,255,.5), 0 30px 70px rgba(0,0,0,.6);
  cursor:default;
}
.directory-scene[data-state="results"] .hub-node.is-hero{ opacity:.35; filter:blur(1px); }
.directory-scene[data-state="category"] .category-node,
.directory-scene[data-state="results"]  .category-node{
  opacity:1; pointer-events:auto;
  transform:translate(calc(-50% + var(--nx,0px)), calc(-50% + var(--ny,0px)));
}
.directory-scene[data-state="results"] .category-node:not(.is-hero){
  opacity:0; pointer-events:none;
  transform:translate(calc(-50% + var(--nx,0px)), calc(-50% + var(--ny,0px))) scale(.5); filter:blur(1px);
}
.directory-scene[data-state="results"] .category-node.is-hero{
  opacity:0; pointer-events:none;
  transform:translate(-50%,-50%) scale(2.8); filter:blur(2px);
}

/* ============================================================ RESULTS ============================================================
   Visual Engine cards. ONE reusable card; every service gets its own look
   from --service-accent / --service-accent-rgb (set per card by directory.js
   from the Visual Engine cache, or a deterministic fallback). */
.directory{
  --directory-bg:#05040b;
  --card-bg:#0a0912;
  --card-radius:14px;
  --card-border:rgba(var(--service-accent-rgb,139,92,246), .30);
  --card-border-hover:rgba(var(--service-accent-rgb,139,92,246), .75);
  --card-shadow:0 18px 44px rgba(0,0,0,.6), 0 0 26px -14px rgba(var(--service-accent-rgb,139,92,246), .55);
  --card-shadow-hover:0 26px 60px rgba(0,0,0,.7), 0 0 44px -10px rgba(var(--service-accent-rgb,139,92,246), .7);
  --card-transition:260ms cubic-bezier(.2,.8,.2,1);
  --card-media-h:220px;
}

/* Opaque results layer: nothing from the hub/category scene bleeds through. */
.tool-results{
  position:absolute; inset:0; z-index:20;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:18px;
  align-content:start; padding:18px; overflow:hidden;
  background:
    radial-gradient(1200px 500px at 15% -10%, rgba(120,70,255,.10), transparent 60%),
    radial-gradient(900px 500px at 100% 110%, rgba(0,220,255,.07), transparent 60%),
    var(--directory-bg);
  opacity:0; visibility:hidden; pointer-events:none; transform:scale(.97);
  transition:opacity 450ms ease, transform 600ms cubic-bezier(.2,.8,.2,1), visibility 0s linear 450ms;
}
.directory-scene[data-state="results"] .tool-results{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity 450ms ease, transform 600ms cubic-bezier(.2,.8,.2,1), visibility 0s;
}
/* Results view: the page itself scrolls through every card, then the footer. */
.directory[data-view="results"]{ height:auto; min-height:0; overflow:visible; overflow-x:clip; }
.directory[data-view="results"] .stage{ display:block; padding:0 0 28px; }
.directory[data-view="results"] .directory-scene{ height:auto; margin:0 auto; }
.directory[data-view="results"] .tool-results{ position:relative; inset:auto; overflow:visible; border-radius:0 0 var(--card-radius) var(--card-radius); }

.directory-scene[data-state="results"] .scene-grid,
.directory-scene[data-state="results"] .hub-node.is-hero{ opacity:0 !important; }

.vcard{
  position:relative; isolation:isolate; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:360px; border-radius:var(--card-radius);
  background:var(--card-bg);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  transition:transform var(--card-transition), border-color var(--card-transition), box-shadow var(--card-transition);
  content-visibility:auto; contain-intrinsic-size:300px 360px;
}
.directory-scene[data-state="results"] .vcard{ animation:vcard-in 520ms cubic-bezier(.2,.8,.2,1) both; animation-delay:calc(var(--i,0) * 45ms); }
@keyframes vcard-in{ from{ opacity:0; transform:translateY(22px) scale(.97); } to{ opacity:1; transform:none; } }
.vcard:hover, .vcard:focus-within{ transform:translateY(-6px); border-color:var(--card-border-hover); box-shadow:var(--card-shadow-hover); }
.vcard--featured{ grid-column:span 2; --card-media-h:260px; }

/* media: hero image over a generated fallback, both fading into the card */
.vcard__media{ position:absolute; inset:0 0 auto 0; height:var(--card-media-h); z-index:-1; overflow:hidden; }
.vcard__media::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(10,9,18,.05) 0%, rgba(10,9,18,.15) 35%, rgba(10,9,18,.88) 88%, var(--card-bg) 100%); }
.vcard__hero{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:var(--pos, center);
  opacity:0; transform:scale(1.01); transition:opacity 400ms ease, transform 600ms cubic-bezier(.2,.8,.2,1); }
.vcard.has-hero .vcard__hero{ opacity:1; }
.vcard:hover .vcard__hero{ transform:scale(1.06); }
.vcard__media[data-pos="top"]{ --pos:center top; }
.vcard__media[data-pos="bottom"]{ --pos:center bottom; }
.vcard__media[data-pos="left"]{ --pos:left center; }
.vcard__media[data-pos="right"]{ --pos:right center; }

.vcard__fallback{ position:absolute; inset:0; display:grid; place-items:center;
  background:
    radial-gradient(60% 80% at 25% 20%, rgba(var(--service-accent-rgb),.42), transparent 70%),
    radial-gradient(50% 70% at 85% 75%, rgba(var(--service-accent-rgb),.22), transparent 70%),
    linear-gradient(160deg, #120f22, #07060d); }
.vcard__fallback::before{ content:""; position:absolute; inset:0; opacity:.55; pointer-events:none; }
.vcard[data-style="spatial"] .vcard__fallback::before{
  background:linear-gradient(rgba(var(--service-accent-rgb),.35) 1px, transparent 1px) 0 0/100% 22px,
             linear-gradient(90deg, rgba(var(--service-accent-rgb),.35) 1px, transparent 1px) 0 0/22px 100%;
  transform:perspective(260px) rotateX(58deg) translateY(28%) scale(1.6); transform-origin:bottom;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%); mask-image:linear-gradient(to top,#000,transparent 85%); }
.vcard[data-style="terminal"] .vcard__fallback::before{
  background:repeating-linear-gradient(0deg, rgba(var(--service-accent-rgb),.14) 0 1px, transparent 1px 4px); }
.vcard[data-style="neural"] .vcard__fallback::before{
  background:radial-gradient(rgba(var(--service-accent-rgb),.55) 1px, transparent 1.6px) 0 0/18px 18px; }
.vcard[data-style="data"] .vcard__fallback::before{
  background:repeating-linear-gradient(90deg, rgba(var(--service-accent-rgb),.18) 0 6px, transparent 6px 16px);
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 80%); mask-image:linear-gradient(to top,#000 10%,transparent 80%); }
.vcard[data-style="cinematic"] .vcard__fallback::before,
.vcard[data-style="editorial"] .vcard__fallback::before{
  background:repeating-linear-gradient(115deg, rgba(var(--service-accent-rgb),.10) 0 2px, transparent 2px 26px); }
.vcard[data-style="interface"] .vcard__fallback::before{
  background:linear-gradient(rgba(var(--service-accent-rgb),.22) 1px, transparent 1px) 0 0/100% 34px; }
.vcard__fallback-logo{ position:relative; width:72px; height:72px; object-fit:contain; margin-top:-8%;
  filter:drop-shadow(0 0 18px rgba(var(--service-accent-rgb),.65)); }
.vcard__monogram{ position:relative; margin-top:-8%;
  font-family:'Orbitron', var(--font-mono), sans-serif; font-weight:900; font-size:2.6rem; letter-spacing:.08em;
  color:#fff; text-shadow:0 0 6px rgba(var(--service-accent-rgb),.9), 0 0 22px rgba(var(--service-accent-rgb),.7); }

/* floating logo, top-right */
.vcard__logo{ position:absolute; top:14px; right:14px; width:38px; height:38px; display:grid; place-items:center;
  border-radius:10px; background:rgba(6,5,12,.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border:1px solid rgba(var(--service-accent-rgb),.35); box-shadow:0 0 16px -6px rgba(var(--service-accent-rgb),.8); }
.vcard__logo img{ width:26px; height:26px; object-fit:contain; border-radius:4px; }
.vcard:not(.has-hero) .vcard__logo{ display:none; } /* the fallback already shows the logo big */

/* neon Y2K floating label: no box, no pill — just glowing type */
.vcard .tool-neon{
  position:absolute; top:18px; left:18px; z-index:2;
  font-family:'Orbitron', var(--font-mono), sans-serif; font-weight:900; font-size:.64rem;
  letter-spacing:.16em; text-transform:uppercase; line-height:1; white-space:nowrap;
  color:#fff;
  text-shadow:0 0 1px #fff, 0 0 4px rgba(var(--service-accent-rgb),.95), 0 0 12px rgba(var(--service-accent-rgb),.75), 0 0 26px rgba(var(--service-accent-rgb),.45);
}

.vcard__body{ flex:1; display:flex; flex-direction:column; gap:10px; padding:calc(var(--card-media-h) - 34px) 18px 16px; }
.vcard h3{
  font-family:'Orbitron', var(--font-head), sans-serif; font-weight:900; font-size:1.02rem;
  letter-spacing:.06em; text-transform:uppercase; line-height:1.2; color:#fff;
  text-shadow:0 0 14px rgba(var(--service-accent-rgb),.35);
}
.vcard .tool-card__desc{
  font-size:.86rem; line-height:1.5; margin:0; flex:none;
  color:#c9c7d8;
  color:color-mix(in srgb, var(--service-accent) 32%, #e4e2ee);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.vcard__foot{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-top:auto; }
.vcard .tool-tags{ display:flex; flex-wrap:wrap; gap:4px 10px; min-width:0; }
.vcard .tool-tag{
  background:none; border:0; padding:0;
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(var(--service-accent-rgb),.9); text-shadow:0 0 8px rgba(var(--service-accent-rgb),.45);
}
.vcard .tool-tag::before{ content:"// "; opacity:.55; }
.vcard__cta{
  flex:none; display:inline-flex; align-items:center; gap:6px; padding:6px 0;
  font-family:'Orbitron', var(--font-mono), sans-serif; font-weight:700; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase;
  color:var(--service-accent); text-decoration:none;
  border-bottom:1px solid rgba(var(--service-accent-rgb),.35);
  text-shadow:0 0 8px rgba(var(--service-accent-rgb),.5);
  transition:color var(--card-transition), border-color var(--card-transition), text-shadow var(--card-transition);
}
.vcard__cta span{ transition:transform var(--card-transition); }
.vcard:hover .vcard__cta, .vcard__cta:focus-visible{
  color:#fff; border-color:var(--service-accent);
  text-shadow:0 0 4px var(--service-accent), 0 0 14px rgba(var(--service-accent-rgb),.9);
}
.vcard:hover .vcard__cta span{ transform:translateX(4px); }
.vcard__cta:focus-visible{ outline:none; }
.vcard__cta::after{ content:""; position:absolute; inset:0; } /* whole card is clickable */

.vcard__admin{ position:absolute; top:60px; left:18px; z-index:2; display:flex; gap:6px; }
.vcard__admin button{ font:600 .58rem/1 var(--font-mono); letter-spacing:.08em; text-transform:uppercase; cursor:pointer;
  padding:5px 7px; color:#fff; background:rgba(0,0,0,.65); border:1px dashed rgba(var(--service-accent-rgb),.7); }
.vcard__admin button:disabled{ opacity:.6; cursor:wait; }

@media (prefers-reduced-motion: reduce){
  .vcard, .vcard__hero, .vcard__cta span{ transition:none; animation:none !important; }
  .vcard:hover, .vcard:hover .vcard__hero{ transform:none; }
}

.lab__foot{ position:relative; z-index:6; text-align:center; padding:12px;
  border-top:1px solid var(--hairline);
  font-family:var(--font-mono); font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--grey); }

/* ============================================================ MOBILE ============================================================ */
@media (max-width:800px){
  .directory{ height:auto; min-height:calc(100dvh - 200px); overflow:visible; }
  .stage{ min-height:calc(100dvh - 240px); padding:16px 0; }
  .directory-scene{ width:94vw; height:auto; min-height:60vh; perspective:none; }
  .scene-content{ position:relative; transform:none !important; transform-style:flat; }
  .scene-grid, .connections{ display:none; }
  .directory-brand{ position:relative; left:auto; top:auto; transform:none !important; margin:0 auto 20px; opacity:1 !important; filter:none !important; }
  .directory-scene[data-state="category"] .directory-brand,
  .directory-scene[data-state="results"] .directory-brand{ display:none; }
  .node{ position:relative; left:auto; top:auto; transform:none !important; width:100%; max-width:340px; margin:8px auto; height:70px; }
  .layer{ display:flex; flex-direction:column; align-items:center; }
  .directory-scene[data-state="hub"] .layer--category,
  .directory-scene[data-state="hub"] .tool-results{ display:none; }
  .directory-scene[data-state="hub"] .layer--hub{ display:flex; }
  .directory-scene[data-state="category"] .layer--hub .hub-node:not(.is-hero){ display:none; }
  .directory-scene[data-state="category"] .tool-results{ display:none; }
  .directory-scene[data-state="results"] .layer--hub,
  .directory-scene[data-state="results"] .layer--category{ display:none; }
  .category-node{ opacity:1 !important; }
  .tool-results{ position:relative; inset:auto; opacity:1 !important; visibility:visible !important; transform:none !important;
    overflow:visible; padding:4px 0 16px; background:none; grid-template-columns:repeat(auto-fill, minmax(240px,1fr)); gap:14px; }
  .vcard{ min-height:330px; --card-media-h:200px; }
  .vcard--featured{ grid-column:auto; }
  .directory-scene:not([data-state="results"]) .tool-results{ display:none; }
}