/* ==========================================================================
   SteinTecDev — KNOWSTEAD
   --------------------------------------------------------------------------
   Everything the documentation-tool product needs: the floating stack of
   screenshots (a stage made of plain CSS 3D — no WebGL, no library), the wide
   card on the home page, and the sections of the product page itself.

   Loaded after core.css and home.css / styles.css, on index.html,
   produkte.html and knowstead.html. Same cascade layers as the rest.
   ========================================================================== */

@layer components {
  /* ============================================================ KSTACK =
     Three windows of the product, hung in space. The scene turns a little
     with the pointer (fx.js sets --rx / --ry) and, while effects are on, the
     windows drift on their own. Without any of that it is a still composition
     of three screenshots — which is all the markup needs.
     ====================================================================== */
  .kstack {
    --rx: 0deg;
    --ry: 0deg;
    position: relative;
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 11;
    perspective: 1800px;
    perspective-origin: 50% 40%;
  }

  .kstack__scene {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: rotateX(calc(4deg + var(--rx))) rotateY(calc(-11deg + var(--ry)));
  }

  /* the glow the windows hang in front of */
  .kstack__glow {
    position: absolute;
    inset: -8% -6% -12%;
    transform: translateZ(-200px) scale(1.2);
    background: radial-gradient(
      closest-side,
      color-mix(in oklab, var(--accent) 26%, transparent),
      transparent 72%
    );
    pointer-events: none;
  }

  .kstack__win {
    position: absolute;
    inline-size: 82%;
    aspect-ratio: 1200 / 750;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--hair-bright);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    box-shadow: var(--lift-3), 0 0 0 1px oklch(0 0 0 / 0.5);
    backface-visibility: hidden;
  }

  .kstack__win img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  .kstack__win--back {
    inset-block-start: 0;
    inset-inline-start: 0;
    transform: translateZ(-120px);
  }

  .kstack__win--mid {
    inset-block-start: 10%;
    inset-inline-start: 9%;
    transform: translateZ(-50px);
  }

  .kstack__win--front {
    inset-block-start: 20%;
    inset-inline-start: 18%;
    transform: translateZ(30px);
  }

  /* a soft pool of shadow under the whole stack */
  .kstack::after {
    content: "";
    position: absolute;
    inset: auto 8% -4% 8%;
    block-size: 14%;
    background: radial-gradient(closest-side, oklch(0 0 0 / 0.55), transparent);
    pointer-events: none;
    z-index: -1;
  }

  /* while effects run the windows drift, out of step with each other.
     `translate`, so the pose in `transform` stays untouched. */
  @media (prefers-reduced-motion: no-preference) {
    html[data-fx="on"] .kstack__win {
      animation: kdrift 9s var(--ease-in-out) infinite;
    }

    html[data-fx="on"] .kstack__win--mid {
      animation-delay: -3s;
    }

    html[data-fx="on"] .kstack__win--front {
      animation-delay: -6s;
    }

    @keyframes kdrift {
      50% {
        translate: 0 -2.2%;
      }
    }
  }

  /* as the stack scrolls into view the windows fan out of one pile */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      html[data-fx="on"] .kstack__win--back,
      html[data-fx="on"] .kstack__win--mid {
        animation: kspread linear both, kdrift 9s var(--ease-in-out) infinite;
        animation-timeline: view(), auto;
        animation-range: entry 0% entry 80%, normal;
      }

      html[data-fx="on"] .kstack__win--mid {
        animation-delay: 0s, -3s;
      }

      @keyframes kspread {
        from {
          inset-inline-start: 18%;
          inset-block-start: 20%;
          transform: translateZ(30px);
        }
      }
    }
  }

  /* the plates and cards that hold a stack tilt it themselves */
  html:not([data-fx="off"]):not([data-fx="reduced"]) .fx-card.has-stack {
    transform: none;
  }

  /* ========================================================= WIDE CARD =
     Knowstead on the home page: a fourth card in the app grid, spanning the
     whole row, with the stack in the well beside the text.
     ====================================================================== */
  .app--wide {
    grid-column: 1 / -1;
  }

  .app__plate--stack {
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem);
    overflow: hidden;
  }

  .app__plate--stack .kstack {
    max-inline-size: 40rem;
  }

  @media (min-width: 62rem) {
    .app--wide {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      grid-template-rows: auto 1fr;
    }

    .app--wide .app__top {
      grid-column: 1 / -1;
    }

    .app--wide .app__body {
      grid-column: 1;
      grid-row: 2;
    }

    .app--wide .app__plate {
      grid-column: 2;
      grid-row: 2;
      border-bottom: 0;
      border-inline-start: 1px solid var(--hair);
    }
  }

  .app--wide .app__meta {
    margin-top: var(--sp-5);
  }

  /* two calls to action side by side */
  .app__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: var(--sp-5);
  }

  .app__ctas .app__cta {
    flex: 1 1 11rem;
    width: auto;
    margin-top: 0;
  }

  /* ===================================================== PRODUCT PLATE =
     The same stack inside the recessed plate of the products page.
     ====================================================================== */
  .product-detail__visual--stack {
    aspect-ratio: auto;
    min-block-size: 15rem;
    padding: clamp(0.5rem, 1.6vw, 1rem);
  }

  .product-detail__visual--stack .kstack {
    position: relative;
  }

  /* ============================================================ PAGE ===
     knowstead.html
     ====================================================================== */
  .kn-hero__inner {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .kn-hero__inner {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    }
  }

  .kn-hero__title {
    max-width: 14ch;
  }

  .kn-hero__stack {
    position: relative;
    min-inline-size: 0;
  }

  .kn-mark {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: var(--sp-4);
  }

  .kn-mark img {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }

  .kn-mark__name {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-size: var(--t-lg);
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  /* ---------------------------------------------------------- facts strip */
  .kn-facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--hair-strong);
  }

  @media (min-width: 40rem) {
    .kn-facts {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .kn-fact {
    padding: var(--sp-4) var(--sp-4) var(--sp-4) 0;
    border-bottom: 1px solid var(--hair);
  }

  @media (min-width: 40rem) {
    .kn-fact {
      padding-inline-start: var(--sp-4);
      border-inline-start: 1px solid var(--hair);
      border-bottom: 0;
    }

    .kn-fact:first-child {
      padding-inline-start: 0;
      border-inline-start: 0;
    }
  }

  .kn-fact dt {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .kn-fact dd {
    margin: 0.35rem 0 0;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  /* ------------------------------------------------------------- pillars */
  .kn-pillars {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
    list-style: none;
    padding: 0;
    margin: 0;
  }

  @media (min-width: 40rem) {
    .kn-pillars {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .kn-pillars {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .kn-pillar {
    padding: var(--sp-5);
  }

  .kn-pillar__n {
    font-size: var(--t-xs);
    letter-spacing: 0.12em;
    color: var(--accent);
  }

  .kn-pillar__t {
    margin-top: 0.7rem;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-head);
    font-weight: 400;
    font-size: var(--t-xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--ink);
  }

  .kn-pillar__t em {
    font-style: italic;
    color: var(--accent);
  }

  .kn-pillar__p {
    margin-top: 0.7rem;
    font-size: var(--t-ui);
    line-height: 1.65;
    color: var(--ink-2);
  }

  /* ------------------------------------------------------------ features */
  .kn-features {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 40rem) {
    .kn-features {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .kn-features {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .kn-feat {
    padding: var(--sp-5);
  }

  .kn-feat__k {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--ink-3);
  }

  .kn-feat__t {
    margin-top: 0.6rem;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-weight: 450;
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .kn-feat__p {
    margin-top: 0.6rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }

  /* ------------------------------------------------------------- gallery */
  .kn-shots {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  @media (min-width: 48rem) {
    .kn-shots {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kn-shot:first-child {
      grid-column: 1 / -1;
    }
  }

  .kn-shot {
    margin: 0;
  }

  .kn-shot__frame {
    display: block;
    overflow: hidden;
    border: 1px solid var(--hair-bright);
    border-radius: var(--r-md);
    background: var(--surface-raised);
    box-shadow: var(--lift-2);
  }

  .kn-shot img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }

  .kn-shot figcaption {
    margin-top: 0.8rem;
    font-size: var(--t-sm);
    line-height: 1.55;
    color: var(--ink-2);
  }

  .kn-shot figcaption b {
    color: var(--ink);
    font-weight: 600;
  }

  .kn-note {
    margin-top: var(--sp-5);
    font-size: var(--t-xs);
    line-height: 1.6;
    color: var(--ink-3);
    max-width: 70ch;
  }

  /* the status dots on the fit cards: this one is a "no" */
  .status--stop {
    color: var(--sig-stop);
  }

  /* ------------------------------------------------------------ fit / not */
  .kn-fit {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 56rem) {
    .kn-fit {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kn-fit__col {
    padding: var(--sp-5);
  }

  .kn-fit__col h3 {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-weight: 450;
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
    margin-top: 0.7rem;
  }

  /* :not(.status) — a descendant selector outranks the bare .status--live class */
  .kn-fit__col p:not(.status) {
    margin-top: 0.7rem;
    font-size: var(--t-ui);
    line-height: 1.65;
    color: var(--ink-2);
  }

  .kn-status {
    margin-top: var(--sp-6);
    padding: var(--sp-4) var(--sp-5);
    border: 1px solid var(--hair-strong);
    border-inline-start: 2px solid var(--accent);
    border-radius: var(--r-sm);
    background: var(--surface-raised);
    font-size: var(--t-ui);
    line-height: 1.65;
    color: var(--ink-2);
    max-width: 78ch;
  }

  .kn-status b {
    color: var(--ink);
    font-weight: 600;
  }

  /* ------------------------------------------------------------- install */
  .kn-install {
    display: grid;
    gap: var(--sp-4);
    grid-template-columns: 1fr;
  }

  @media (min-width: 64rem) {
    .kn-install {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kn-step {
    display: flex;
    flex-direction: column;
    padding: var(--sp-5);
    min-inline-size: 0;
  }

  .kn-step__k {
    font-size: var(--t-2xs);
    font-weight: 600;
    letter-spacing: var(--track-label);
    text-transform: uppercase;
    color: var(--accent);
  }

  .kn-step h3 {
    margin-top: 0.6rem;
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-weight: 450;
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .kn-step p {
    margin-top: 0.6rem;
    font-size: var(--t-sm);
    line-height: 1.65;
    color: var(--ink-2);
  }

  .kn-code {
    margin: var(--sp-4) 0 0;
    padding: 0.8rem 0.95rem;
    border: 1px solid var(--hair);
    border-radius: var(--r-sm);
    background: var(--surface-inset);
    box-shadow: var(--inset-well);
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    line-height: 1.7;
    color: var(--ink-2);
    /* long commands wrap instead of scrolling; the text itself stays one line */
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    tab-size: 2;
  }

  .kn-code b {
    color: var(--accent-hi);
    font-weight: 500;
  }

  code.kn-inline,
  .kn-step p code,
  .kn-pillar__p code,
  .kn-feat__p code,
  .kn-fit__col p:not(.status) code,
  .kn-note code {
    padding: 0.08em 0.4em;
    border: 1px solid var(--hair);
    border-radius: var(--r-xs);
    background: var(--surface-raised);
    font-family: var(--face-mono);
    font-size: 0.86em;
    color: var(--ink);
    overflow-wrap: anywhere;
  }

  .kn-after {
    margin-top: var(--sp-6);
    max-width: 74ch;
    font-size: var(--t-ui);
    line-height: 1.7;
    color: var(--ink-2);
  }

  .kn-after + .kn-after {
    margin-top: var(--sp-3);
  }

  /* ---------------------------------------------------------------- tech */
  .kn-tech {
    display: grid;
    gap: var(--sp-5);
    grid-template-columns: 1fr;
  }

  @media (min-width: 64rem) {
    .kn-tech {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kn-tech__col {
    padding: var(--sp-5);
  }

  .kn-tech__col h3 {
    font-family: var(--face-display);
    font-variation-settings: var(--fr-sub);
    font-weight: 450;
    font-size: var(--t-lg);
    line-height: 1.2;
    letter-spacing: -0.015em;
    color: var(--ink);
  }

  .kn-tech__col p {
    margin-top: 0.7rem;
    font-size: var(--t-ui);
    line-height: 1.65;
    color: var(--ink-2);
  }

  .kn-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: var(--sp-4);
    padding: 0;
    list-style: none;
  }

  /* --------------------------------------------------------------- links */
  .kn-links {
    display: grid;
    gap: 0;
    grid-template-columns: 1fr;
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--hair-strong);
  }

  @media (min-width: 48rem) {
    .kn-links {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: var(--sp-7);
    }
  }

  .kn-links li {
    border-bottom: 1px solid var(--hair);
  }

  .kn-links a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: 0.95rem 0;
    color: var(--ink);
    transition: color var(--dur-2) var(--ease), padding-inline-start var(--dur-2) var(--ease);
  }

  .kn-links a:hover {
    color: var(--accent);
    padding-inline-start: 0.4rem;
  }

  .kn-links small {
    font-family: var(--face-mono);
    font-size: var(--t-xs);
    color: var(--ink-3);
    text-align: end;
    overflow-wrap: anywhere;
  }

  .kn-back {
    margin-top: var(--sp-7);
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
  }

  /* ============================================================= PRINT =
     A stack of floating screenshots has no place on paper. */
  @media print {
    .kstack {
      display: none;
    }
  }
}