/*
 * Ornaments — the product-row motifs, ported from the design canvas
 * (Product Graphics.dc.html, turn 2: options 2a, 2b and 2e).
 *
 * Each one is a decorative layer spanning the whole row rather than an icon in a
 * column: anchored at the left, drawn behind the content, and masked so it fades
 * out to the right. The row reserves an empty first column so the motif has room
 * to read before the copy starts.
 *
 * The design's artboard row is 190px tall, so the layer is pinned to that height
 * and centred; every child then uses the design's own coordinates verbatim.
 */

.ornament {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    translate: 0 -50%;
    height: 190px;
    pointer-events: none;
    /* The fade is the motif's defining move — it dissolves before the copy.
       Each variant carries the design's own stops. */
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 30%);
    mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 30%);
}

.ornament--axes {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 32%);
    mask-image: linear-gradient(to right, #000 0%, #000 12%, transparent 32%);
}

.ornament--device {
    -webkit-mask-image: linear-gradient(to right, #000 0%, #000 13%, transparent 32%);
    mask-image: linear-gradient(to right, #000 0%, #000 13%, transparent 32%);
}

.ornament > * {
    position: absolute;
}

/* --- 2a · Lunor — falling stack ------------------------------------------
   Blocks detaching from a column and tumbling away from it. */
.ornament--collapse > .block-1 {
    left: 64px; bottom: 0; width: 54px; height: 54px;
    background: rgb(233 234 238 / 0.10);
    border: 1px solid rgb(233 234 238 / 0.22);
}
.ornament--collapse > .block-2 {
    left: 64px; bottom: 54px; width: 54px; height: 54px;
    background: rgb(233 234 238 / 0.07);
    border: 1px solid rgb(233 234 238 / 0.18);
}
.ornament--collapse > .block-3 {
    left: 60px; bottom: 112px; width: 54px; height: 54px;
    background: rgb(233 234 238 / 0.05);
    border: 1px solid rgb(233 234 238 / 0.14);
    rotate: -7deg;
}
.ornament--collapse > .shard-1 {
    left: 140px; bottom: 26px; width: 38px; height: 38px;
    border: 1px solid rgb(233 234 238 / 0.16);
    rotate: 14deg;
}
.ornament--collapse > .shard-2 {
    left: 196px; bottom: 74px; width: 26px; height: 26px;
    border: 1px solid rgb(233 234 238 / 0.12);
    rotate: -22deg;
}
.ornament--collapse > .shard-3 {
    left: 242px; bottom: 14px; width: 18px; height: 18px;
    border: 1px solid rgb(233 234 238 / 0.10);
    rotate: 31deg;
}
/* The ground the stack collapses onto; the mask fades it out to the right. */
.ornament--collapse > .ground {
    left: 0; right: 0; bottom: 0; height: 1px;
    background: rgb(233 234 238 / 0.18);
}

/* --- 2b · Lunor Architect — dashed axes -----------------------------------
   Construction lines crossing at a solid node. */
.ornament--axes > .rule-h1 {
    left: 0; top: 64px; width: 420px; height: 1px;
    background: repeating-linear-gradient(90deg, rgb(233 234 238 / 0.4) 0 7px, transparent 7px 14px);
}
.ornament--axes > .rule-h2 {
    left: 0; top: 132px; width: 340px; height: 1px;
    background: repeating-linear-gradient(90deg, rgb(233 234 238 / 0.22) 0 7px, transparent 7px 14px);
}
.ornament--axes > .rule-v1 {
    left: 118px; top: 0; bottom: 0; width: 1px;
    background: repeating-linear-gradient(180deg, rgb(233 234 238 / 0.3) 0 7px, transparent 7px 14px);
}
.ornament--axes > .rule-v2 {
    left: 214px; top: 0; bottom: 0; width: 1px;
    background: repeating-linear-gradient(180deg, rgb(233 234 238 / 0.16) 0 7px, transparent 7px 14px);
}
/* The one solid mark in the whole motif — the selected node. */
.ornament--axes > .node {
    left: 112px; top: 58px; width: 13px; height: 13px;
    background: color-mix(in oklch, var(--accent) 80%, transparent);
}
.ornament--axes > .node-outline {
    left: 210px; top: 126px; width: 9px; height: 9px;
    border: 1px solid rgb(233 234 238 / 0.55);
}

/* --- 2e · Lunor Mobile — solid silhouette ---------------------------------
   One filled device, cropped by the row edge, with content rules beside it. */
.ornament--device > .device {
    left: 60px; top: 26px; width: 86px; height: 176px;
    border-radius: 18px;
    background: rgb(233 234 238 / 0.12);
}
.ornament--device > .notch {
    left: 88px; top: 36px; width: 30px; height: 4px;
    border-radius: 2px;
    background: rgb(10 11 14 / 0.7);
}
.ornament--device > .rule-1 {
    left: 174px; top: 60px; width: 200px; height: 1px;
    background: repeating-linear-gradient(90deg, rgb(233 234 238 / 0.22) 0 6px, transparent 6px 12px);
}
.ornament--device > .rule-2 {
    left: 174px; top: 96px; width: 160px; height: 1px;
    background: repeating-linear-gradient(90deg, rgb(233 234 238 / 0.16) 0 6px, transparent 6px 12px);
}

/* Compact: the row stacks and the copy runs the full width, so the motif steps
   back to being texture rather than competing with the text. */
@media (max-width: 900px) {
    .ornament {
        height: 150px;
        opacity: 0.5;
        scale: 0.72;
        transform-origin: left center;
    }
}