/* ==========================================================================
   dulus.work — site.css
   Global work hub / agent compute network. Editorial register: heavier
   display type, visible structure, gold signal. Mining metaphor, useful work.

   Editing this file cannot affect dulus.ai, dulus.online, the API, the control
   plane or Fuel. There is no shared runtime between them.

   Everything raised on this page is the `.glass` material from core.css,
   driven through the same four variables (--glass-fill, --glass-rim,
   --lg-lift, --lg-sheen). Nothing here re-implements the material.
   ========================================================================== */

@layer site {
  :root {
    --accent: var(--dulus-orange);
    --accent-soft: var(--dulus-gold);
    --signal: var(--dulus-green);
    --nav-h: 80px;
  }

  [data-theme="dark"] {
    --mesh-1: rgba(255, 107, 31, 0.17);
    --mesh-2: rgba(255, 194, 51, 0.1);
    --mesh-3: rgba(0, 255, 163, 0.06);
  }

  /* ======================================================================
     ANNOUNCEMENT BAR
     ====================================================================== */

  .bar {
    position: relative;
    z-index: calc(var(--z-nav) + 1);
    border-bottom: var(--bw) solid
      color-mix(in oklab, var(--accent) 26%, transparent);
    background: color-mix(in oklab, var(--accent) 11%, var(--bg));
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .bar {
      background: color-mix(in oklab, var(--accent) 13%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(175%);
      backdrop-filter: blur(18px) saturate(175%);
    }
  }

  .bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-3);
    padding-block: 10px;
  }

  .bar__tag {
    flex: 0 0 auto;
    padding: 3px 10px;
    border-radius: var(--r-sm);
    background: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
    color: #12100e;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }

  .bar__text {
    font-size: var(--t-sm);
    color: var(--ink-2);
    min-width: 0;
  }

  .bar__cta {
    margin-left: auto;
    font-size: var(--t-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
  }
  .bar__cta:hover {
    text-decoration: underline;
  }

  /* ======================================================================
     HERO
     ====================================================================== */

  .hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    /* core.css pulls <main> up under the floating nav capsule; this gives the
       height back so the copy starts where it always did. */
    padding-block: calc(var(--nav-h) + clamp(56px, 8vw, 104px))
      clamp(48px, 6vw, 88px);
  }

  .hero__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(38px, 6vw, 78px);
    align-items: center;
  }
  .hero__layout > *,
  .hero__head,
  .hero__manifest {
    min-width: 0;
  }
  @media (min-width: 1020px) {
    .hero__layout {
      grid-template-columns: minmax(0, 1.14fr) minmax(410px, 0.86fr);
    }
  }

  .hero__head {
    display: grid;
    gap: var(--s-5);
    max-width: 100%;
  }

  .hero__title {
    display: grid;
    gap: 0.04em;
    margin-top: var(--s-2);
    max-width: none;
    font-size: clamp(2.4rem, 5vw + 0.2rem, 4.2rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    line-height: 1.04;
    text-transform: none;
    text-wrap: balance;
  }
  .hero__line {
    display: block;
    max-width: 100%;
    overflow-wrap: anywhere;
  }
  /* Solid first so engines without background-clip:text never go invisible.
     --warm-hi flips on light theme so the last stop stays readable. */
  .hero__line--hi {
    color: var(--accent-ink);
    background: none;
  }
  @supports ((background-clip: text) or (-webkit-background-clip: text)) {
    .hero__line--hi {
      color: transparent;
      background: linear-gradient(
        96deg in oklab,
        var(--accent-ink) 0%,
        var(--gold-ink) 62%,
        var(--warm-hi) 100%
      );
      background-size: 200% 100%;
      background-position: var(--flow) 0;
      -webkit-background-clip: text;
      background-clip: text;
      animation: dulus-flow 12s var(--ease) infinite alternate;
    }
  }
  .hero__line--soft {
    color: var(--ink-2);
  }

  .hero__lede {
    max-width: 68ch;
  }
  .hero__cta {
    gap: var(--s-3);
  }

  .live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow:
      0 0 0 5px rgba(0, 255, 163, 0.08),
      0 0 18px rgba(0, 255, 163, 0.45);
    animation: dulus-pulse 2.4s var(--ease) infinite;
  }

  /* The bird sits behind the manifest card and is visibly refracted by it —
     the clearest demonstration of the material anywhere in the ecosystem. */
  .hero__manifest {
    position: relative;
    min-height: 570px;
    display: grid;
    align-items: end;
    padding-top: 160px;
  }
  .hero__manifest > img {
    position: absolute;
    z-index: 0;
    width: min(100%, 470px);
    top: -40px;
    right: -5%;
    opacity: 0.82;
    filter: drop-shadow(0 26px 60px rgba(255, 128, 24, 0.24));
    animation: dulus-float 15s var(--ease) infinite;
  }

  .manifest-card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: var(--r-xl);
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent-soft) 22%, transparent),
      0 32px 88px -32px #000;
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .manifest-card {
      -webkit-backdrop-filter: blur(30px) saturate(190%);
      backdrop-filter: blur(30px) saturate(190%);
    }
  }
  /* Where real backdrop displacement exists, the bird bends through the card. */
  [data-lens="on"] .manifest-card {
    -webkit-backdrop-filter: blur(30px) saturate(190%) url("#dulus-lens");
    backdrop-filter: blur(30px) saturate(190%) url("#dulus-lens");
  }
  /* This card is the one surface that sits directly on top of artwork, so it
     is the one that must go fully opaque when there is nothing to blur with —
     60% over the bird with no blur is unreadable. */
  @supports not (
    (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))
  ) {
    .manifest-card {
      background: var(--glass-solid);
    }
  }

  .manifest-card__eyebrow {
    display: block;
    padding: 15px 19px;
    border-bottom: var(--bw) solid var(--line);
    color: var(--accent-soft);
    font-size: 10px;
    letter-spacing: 0.15em;
  }

  .manifest-card > div {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 10px;
    padding: 16px 19px;
    border-bottom: var(--bw) solid var(--line);
  }
  .manifest-card > div:last-child {
    border-bottom: 0;
  }
  .manifest-card > div span {
    color: var(--ink-4);
    font: 700 10px/1.5 var(--font-mono);
  }
  .manifest-card > div strong {
    color: var(--ink-2);
    font-size: var(--t-sm);
  }

  /* ======================================================================
     FLEET STRIP
     ====================================================================== */

  .fleet-strip {
    margin-top: clamp(40px, 6vw, 72px);
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo),
      var(--shadow-2);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .fleet-strip {
      -webkit-backdrop-filter: blur(22px) saturate(175%);
      backdrop-filter: blur(22px) saturate(175%);
    }
  }

  .fleet-strip__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 13px 17px;
    border-bottom: var(--bw) solid var(--line);
    background: var(--glass-tint);
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .fleet-strip__head .pill {
    margin-left: auto;
  }

  .fleet-strip__nodes {
    display: grid;
    gap: 1px;
    background: var(--line);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .fnode {
    display: grid;
    grid-template-columns: 10px 1fr;
    gap: 10px;
    align-items: start;
    padding: 15px 17px;
    background: color-mix(in oklab, var(--bg-1) 88%, transparent);
    transition: background var(--dur-2) var(--ease);
  }
  .fnode:hover {
    background: var(--glass-tint-hi);
  }
  .fnode__dot {
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--signal) 18%, transparent);
  }
  .fnode--idle .fnode__dot {
    background: var(--dulus-yellow);
    box-shadow: 0 0 0 3px
      color-mix(in oklab, var(--dulus-yellow) 16%, transparent);
  }
  .fnode--off .fnode__dot {
    background: var(--ink-4);
    box-shadow: none;
  }

  .fnode__name {
    font-family: var(--font-mono);
    font-size: var(--t-sm);
    font-weight: 500;
    display: block;
  }
  .fnode__meta {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-4);
    display: block;
    margin-top: 2px;
  }

  /* ======================================================================
     PHASES
     ====================================================================== */

  .phases__rule {
    margin-block: clamp(40px, 5vw, 64px) clamp(28px, 3vw, 40px);
  }
  .phases__title {
    margin-bottom: var(--s-5);
  }

  .phases {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    grid-template-columns: 1fr;
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }
  @media (min-width: 860px) {
    .phases {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  .phase {
    position: relative;
    display: grid;
    gap: 8px;
    align-content: start;
    padding: clamp(18px, 2.2vw, 26px);
    background: linear-gradient(var(--glass-tint), transparent),
      color-mix(in oklab, var(--bg-1) 86%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .phase {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .phase--done {
    background: color-mix(in oklab, var(--bg-2) 80%, transparent);
  }
  .phase--now {
    background: radial-gradient(
        120% 100% at 0% 0%,
        color-mix(in oklab, var(--accent) 15%, transparent) 0%,
        transparent 70%
      ),
      linear-gradient(var(--glass-tint), transparent),
      color-mix(in oklab, var(--bg-1) 86%, transparent);
  }
  .phase--now::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--accent-soft));
    box-shadow: 0 0 14px color-mix(in oklab, var(--accent) 70%, transparent);
  }

  .phase__n {
    font-size: var(--t-xs);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink-4);
  }
  .phase__name {
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.02em;
  }
  .phase__body {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.6;
  }
  .phase__state {
    justify-self: start;
    margin-top: 4px;
    padding: 4px 10px;
    border-radius: var(--r-sm);
    box-shadow: inset 0 0 0 1px var(--line-2);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
  .phase--done .phase__state {
    color: var(--signal-ink);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--signal) 40%, transparent);
  }
  .phase--now .phase__state {
    color: #12100e;
    background: var(--accent);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
  }

  /* ======================================================================
     DIAGRAM
     ====================================================================== */

  .diagram {
    display: grid;
    gap: var(--s-4);
    align-items: center;
    grid-template-columns: 1fr;
    padding: clamp(20px, 3vw, 34px);
    border-radius: var(--r-lg);
    background: var(--sunken);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
  }
  @media (min-width: 700px) {
    .diagram {
      grid-template-columns: 1fr auto 1fr;
    }
  }

  .diagram__col {
    display: grid;
    gap: 8px;
  }
  .node {
    padding: 11px 14px;
    border-radius: var(--r-sm);
    background: var(--glass-tint);
    box-shadow: inset 0 0 0 1px var(--glass-edge-lo);
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    color: var(--ink-2);
    transition: box-shadow var(--dur-2) var(--ease);
  }
  .node:hover {
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--accent) 45%, transparent);
  }

  .diagram__pipe {
    display: grid;
    justify-items: center;
    gap: 6px;
  }
  .diagram__wire {
    width: 2px;
    height: 22px;
    background: linear-gradient(var(--line-2), var(--accent));
  }
  @media (min-width: 700px) {
    .diagram__wire {
      width: 34px;
      height: 2px;
      background: linear-gradient(90deg, var(--line-2), var(--accent));
    }
    .diagram__pipe {
      grid-auto-flow: column;
      align-items: center;
    }
  }
  .diagram__gate {
    padding: 6px 11px;
    border-radius: var(--r-pill);
    background: color-mix(in oklab, var(--accent) 11%, transparent);
    box-shadow: inset 0 0 0 1px
      color-mix(in oklab, var(--accent) 38%, transparent);
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
  }

  .diagram__hub {
    display: grid;
    gap: 4px;
    padding: clamp(18px, 2.4vw, 28px);
    border-radius: var(--r-md);
    background: radial-gradient(
        120% 120% at 100% 0%,
        color-mix(in oklab, var(--accent) 17%, transparent) 0%,
        transparent 70%
      ),
      linear-gradient(var(--glass-tint), transparent), var(--glass);
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px color-mix(in oklab, var(--accent) 32%, transparent);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .diagram__hub {
      -webkit-backdrop-filter: blur(20px) saturate(175%);
      backdrop-filter: blur(20px) saturate(175%);
    }
  }
  .diagram__hub strong {
    font-family: var(--font-display);
    font-size: var(--t-lg);
    font-weight: 800;
    letter-spacing: 0.02em;
  }
  .diagram__hub span {
    font-size: var(--t-xs);
  }

  /* ======================================================================
     PIPELINE + LAYERS
     ====================================================================== */

  .pipeline {
    display: grid;
    gap: var(--s-3);
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  }
  .pipeline__step {
    gap: var(--s-3);
  }
  .pipeline__n {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    letter-spacing: 0.2em;
    color: var(--accent);
  }

  .layers {
    display: grid;
    gap: 1px;
    background: var(--line);
    border-radius: var(--r-lg);
    overflow: hidden;
    box-shadow:
      inset 0 1px 0 0 var(--glass-edge),
      inset 0 0 0 1px var(--glass-edge-lo);
  }

  .layer {
    display: grid;
    grid-template-columns: 46px 1fr;
    gap: var(--s-4);
    padding: clamp(18px, 2.2vw, 26px);
    background: color-mix(in oklab, var(--bg-1) 88%, transparent);
    transition: background var(--dur-2) var(--ease);
  }
  @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
    .layer {
      -webkit-backdrop-filter: blur(18px) saturate(165%);
      backdrop-filter: blur(18px) saturate(165%);
    }
  }
  .layer:hover {
    background: var(--glass-tint-hi);
  }
  .layer__tag {
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    color: var(--accent);
    padding-top: 3px;
  }
  .layer strong {
    display: block;
    font-size: var(--t-md);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
  }
  .layer p {
    font-size: var(--t-sm);
    color: var(--ink-2);
    line-height: 1.62;
    max-width: 80ch;
  }

  /* ======================================================================
     RECEIPT + HONESTY
     ====================================================================== */

  .receipt {
    align-self: start;
  }
  .receipt__rows {
    display: grid;
    gap: 0;
  }
  .receipt__rows > div {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: var(--s-3);
    padding: 12px 0;
    border-bottom: var(--bw) solid var(--line);
    font-size: var(--t-sm);
  }
  .receipt__rows > div:last-child {
    border-bottom: 0;
  }
  .receipt__rows dt {
    font-size: var(--t-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .receipt__rows dd {
    color: var(--ink);
    min-width: 0;
  }
  .receipt__note {
    margin-top: var(--s-4);
    font-size: var(--t-xs);
    color: var(--ink-4);
    line-height: 1.6;
  }

  .honesty {
    gap: 14px;
  }
  .honesty li {
    font-size: var(--t-md);
    color: var(--ink-2);
  }

  /* ======================================================================
     CTA + FOOTER
     ====================================================================== */

  .cta {
    position: relative;
    overflow: hidden;
    border-top: var(--bw) solid var(--line);
  }
  .cta__flock {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(72%, 540px);
    opacity: 0.07;
    pointer-events: none;
    z-index: 0;
  }
  .cta__title {
    margin-bottom: var(--s-4);
  }
  .cta__row {
    justify-content: center;
    margin-top: var(--s-6);
  }

  .footer__blurb {
    margin-block: var(--s-4);
    max-width: 42ch;
  }
  .footer__social {
    gap: var(--s-2);
  }

  /* ======================================================================
     NARROW VIEWPORTS
     ====================================================================== */

  @media (max-width: 760px) {
    .hero {
      /* Still has to clear the floating capsule that <main> is pulled under. */
      padding-top: calc(var(--nav-h) + 24px);
    }
    .hero__title {
      font-size: clamp(2.4rem, 12.4vw, 3.65rem);
      line-height: 0.98;
    }
    .hero__cta .btn {
      width: 100%;
    }
    .hero__manifest {
      min-height: 500px;
      padding-top: 170px;
    }
    .hero__manifest > img {
      width: min(92%, 420px);
      right: 0;
      top: 0;
    }
  }

  @media (max-width: 380px) {
    .hero__title {
      font-size: 2.37rem;
    }
    .hero__manifest {
      min-height: 450px;
    }
    .manifest-card > div {
      padding-inline: 14px;
    }
  }
}