/* Primitives page. Showcase-only layout; every motion comes from the core attributes in the markup. */
.vls-jump { display: grid; align-content: end; }
.vls-jump a { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; }

.vls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.vls-tile { display: flex; flex-direction: column; min-width: 0; }
.vls-stage { flex: 1; display: grid; place-items: center; min-height: 190px; padding: 22px 16px; overflow: clip; font-size: 13px; --vl-motion-delay: 450ms; }
.vls-tile pre { border-width: 1px 0; white-space: pre-wrap; overflow-wrap: anywhere; overflow-x: visible; font-size: 12px; }
.vls-more { border-top: 1px solid var(--line); }
.vls-more > summary { cursor: pointer; padding: 10px 16px; color: var(--muted); font-size: 11px; list-style: none; }
.vls-more > summary::-webkit-details-marker { display: none; }
.vls-more > summary::after { content: " +"; }
.vls-more[open] > summary::after { content: " −"; }
.vls-more { border-top: 1px solid var(--line); }
.vls-more > summary { cursor: pointer; padding: 10px 16px; color: var(--muted); font-size: 11px; list-style: none; }
.vls-more > summary::-webkit-details-marker { display: none; }
.vls-more > summary::after { content: " +"; }
.vls-more[open] > summary::after { content: " −"; }
.vls-meta { margin: 0; padding: 10px 16px 0; color: var(--muted); font-size: 11px; text-transform: none; letter-spacing: 0; }
.vls-meta:last-child { padding-bottom: 12px; }
.vls-all { margin-top: 14px; color: var(--muted); }
.vls-all code { margin-inline-end: 10px; white-space: nowrap; }

/* Demo subjects: any element that carries a motion attribute and is a direct child of a stage. */
.vls-stage > :is(div, button, a):is([vl-enter], [vl-exit], [vl-hover], [vl-loop-effect], [vl-effect]:not([vl-effect="duotone"]), [vl-scroll="parallax"], [vl-scroll="media-zoom"], [vl-scroll="rotate-scroll"], [vl-scroll="cinema-zoom"], [vl-scroll="crossfade"], [vl-scroll="depth-drift"], [vl-scroll="depth-push"], [vl-scroll="path"], [vl-scroll="reveal"]),
.vls-stage > div:not([vl-loop-effect]) > [vl-loop-effect="sway"],
.vls-stage > button[popovertarget],
.vls-stage [vl-scroll="ring-scroll"] > *,
.vls-stage :is([vl-scroll-markers], [vl-children]) > * { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-width: 7.5rem; min-height: 4.5rem; padding: 10px 14px; border: 1px solid var(--line); background-color: var(--chip-bg, var(--bg)); color: var(--chip-fg, var(--fg)); font: inherit; text-decoration: none; }
/* sweep-border paints its own padding-box fill from --vl-bg-surface: match the chip so the label stays readable in dark. */
.vls-stage [vl-effect="sweep-border"] { --vl-bg-surface: var(--chip-bg, var(--bg)); }
.vls-stage > [vl-loop-effect="orbit"] { min-width: 0; min-height: 0; width: .9rem; height: .9rem; padding: 0; background: var(--accent); }
.vls-stage > :is([vl-loop-effect="spin"], [vl-loop-effect="spin-slow"]) { min-width: 0; min-height: 0; width: 5.5rem; aspect-ratio: 1; padding: 0; border-radius: 50%; }
.vls-stage > [vl-hover] { cursor: pointer; }
.vls-stage h3 { font-size: clamp(1.5rem, 2.4vw, 2rem); }
.vls-stage :is([vl-scroll="text-scrub"], [vl-scroll="ink-scrub"]) { font: 800 clamp(1.5rem, 2.4vw, 2rem)/1.1 var(--font-display); min-height: 4.4em; }
.vls-stage [vl-scroll="scroll-marquee"] { white-space: nowrap; font: 800 1.4rem var(--font-display); }
.vls-stage [vl-scroll="ring-scroll"] { --vl-ring-width: 5rem; margin: 0; }
.vls-stage [vl-scroll="ring-scroll"] > * { min-width: 0; min-height: 0; }
.vls-stage [vl-scroll-markers], .vls-stage [vl-children] { width: 100%; }
.vls-stage [vl-children] { display: flex; gap: 8px; }
.vls-stage details { width: 100%; }
.vls-stage img { display: block; max-width: 100%; max-height: 150px; object-fit: cover; }
.vls-stage summary { cursor: pointer; }

@media (max-width: 980px) { .vls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .vls-grid { grid-template-columns: minmax(0, 1fr); } }

/* Script acts (params, sequence, ink, highlight, weight, marquee): layout only; all motion is core attributes. */
.en-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.en-demo { min-height: 150px; display: grid; place-items: center; padding: 22px 14px; overflow: hidden; }
.en-obj { display: inline-grid; place-items: center; min-width: 7.5rem; min-height: 4.6rem; padding: 10px 14px; background: var(--fg); color: var(--bg); font-size: 12px; text-transform: none; letter-spacing: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%); }
.en .tile-bar { flex-direction: column; align-items: flex-start; gap: 4px; }
.en .tile-bar code, .sq-row .tile-bar code { font: 11px var(--font-mono); text-transform: none; letter-spacing: 0; }
.sq-line { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; padding: 26px 18px; overflow: hidden; }
.sq-line .en-obj { min-width: 0; }
@media (max-width: 980px) { .en-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sq-line { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 520px) { .en-grid { grid-template-columns: minmax(0, 1fr); } }

.ink { font: 700 clamp(1.5rem, 3.4vw, 3rem)/1.18 var(--font-display); letter-spacing: -.02em; max-width: 30em; text-wrap: pretty; }
.hl { font: 800 clamp(1.8rem, 4.6vw, 4.2rem)/1.25 var(--font-display); letter-spacing: -.03em; max-width: 22em; }
.hl mark { color: inherit; padding-inline: .12em; margin-inline: -.12em; }
.ws { font-family: var(--font-display); font-size: clamp(4rem, 17vw, 16rem); line-height: .9; padding-bottom: .12em; letter-spacing: -.04em; }
.snip { margin: 22px 0 0; padding: 12px 14px; border: 1px solid var(--line); background: var(--surface); font-size: 12px; text-transform: none; letter-spacing: 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--fg); }
.cm { overflow: hidden; background: var(--fg); color: var(--bg); padding-block: clamp(22px, 4vw, 44px); display: grid; gap: 8px;
  clip-path: polygon(0 calc(tan(var(--cut-angle)) * 4vw), 100% 0, 100% calc(100% - tan(var(--cut-angle)) * 4vw), 0 100%); }
.cm-row { margin: 0; white-space: nowrap; font: 800 clamp(2rem, 6.4vw, 5.6rem)/1 var(--font-display); letter-spacing: -.03em; }
.cm-row.b { color: color-mix(in oklab, var(--bg) 55%, transparent); }
.vls-ref { padding-block: clamp(64px, 10vw, 128px) 24px; }
.vls-ref h2 { font: 800 clamp(2.4rem, 6vw, 5rem)/1 var(--font-display); letter-spacing: -.03em; margin-block: 12px; }

/* Film set per channel. Layout and tone only: the motion is core (vl-scroll letterbox + cinema-zoom, vl-enter). */
.set { display: grid; gap: 12px; margin-block: 8px 28px; }
.set-frame { position: relative; width: 100%; aspect-ratio: 21 / 9; background: #0A0A09; color: #EDEDDC; overflow: hidden; display: grid; place-items: center; }
.set-pic { position: absolute; inset: 0; }
.set-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.25) contrast(1.05) brightness(.7); }
.set-pic::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(115deg, rgba(237,237,220,.14) 0 1px, transparent 1px 34px); }
.set-title { position: relative; text-align: center; padding-inline: 6%; }
.set-title small { display: block; margin-bottom: 1.1em; color: #CDD3AE; }
.set-title p { margin: 0; font-weight: 800; font-size: clamp(1.8rem, 5.4vw, 4.8rem); line-height: .95; letter-spacing: -.03em; text-wrap: balance; text-shadow: 0 2px 30px rgba(0,0,0,.55); }
.set-slate { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); }
.set-slate span:last-child { color: var(--fg); text-align: end; }
.set-floor { background: var(--bg); color: var(--fg); padding: clamp(14px, 2.4vw, 28px); }
/* Concrete values per state (no light-dark()): base light -> system dark -> explicit Light/Dark, like the Velora skin tokens. */
html[data-editorial-theme="velora"] .set-floor { --chip-bg: #0A0A09; --chip-fg: #EDEDDC; --bg: #E3E3CD; --fg: #0A0A09; --surface: #D6D6BE; --line: rgba(10,10,9,.2); --muted: #5A5A4C; }
@media (prefers-color-scheme: dark) { html[data-editorial-theme="velora"] .set-floor { --chip-bg: #EDEDDC; --chip-fg: #0A0A09; --bg: #0A0A09; --fg: #EDEDDC; --surface: #131312; --line: rgba(237,237,220,.18); --muted: #9C9C8A; } }
html[data-editorial-theme="velora"][data-theme="light"] .set-floor, html[data-editorial-theme="velora"]:has(input[name="vl-theme"][value="light"]:checked) .set-floor { --chip-bg: #0A0A09; --chip-fg: #EDEDDC; --bg: #E3E3CD; --fg: #0A0A09; --surface: #D6D6BE; --line: rgba(10,10,9,.2); --muted: #5A5A4C; }
html[data-editorial-theme="velora"][data-theme="dark"] .set-floor, html[data-editorial-theme="velora"]:has(input[name="vl-theme"][value="dark"]:checked) .set-floor { --chip-bg: #EDEDDC; --chip-fg: #0A0A09; --bg: #0A0A09; --fg: #EDEDDC; --surface: #131312; --line: rgba(237,237,220,.18); --muted: #9C9C8A; }
.set-floor .tile { background: transparent; border-color: var(--line); }
.set-floor .vls-stage { position: relative; background: radial-gradient(ellipse 60% 55% at 50% 42%, color-mix(in srgb, var(--fg) 14%, transparent), transparent 70%); }
.set-floor .vls-stage::after { content: ""; position: absolute; left: 50%; bottom: 18%; width: 54px; height: 54px; translate: -50% 0; background: linear-gradient(var(--fg),var(--fg)) 50% 0 / 2px 100% no-repeat, linear-gradient(var(--fg),var(--fg)) 0 50% / 100% 2px no-repeat; opacity: .28; pointer-events: none; z-index: 0; }
.set-floor .vls-stage > :not([popover], dialog) { position: relative; z-index: 1; }
.vls-homes { margin-top: 14px; color: var(--muted); }
.vls-homes a { color: var(--fg); }

.vls-snip { margin-top: 22px; border: 1px solid var(--line); }
.vls-snip .snip { margin: 0; border-width: 1px 0 0; }
.vls-code[open] > pre { margin-top: 0; }
.vls-stage [vl-children] > * { min-width: 0; flex: 1; }
.vls-stage [vl-loop-effect="shimmer-text"] { --vl-text-primary: var(--fg); font: 800 clamp(2rem, 4vw, 2.8rem)/1.1 var(--font-display); }
.vls-stage h2 { font: 800 clamp(2.6rem, 5vw, 3.6rem)/1 var(--font-display); letter-spacing: -.02em; text-align: center; }

.vls-stage [popover] { margin: auto; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--chip-bg, var(--bg)); color: var(--chip-fg, var(--fg)); max-width: min(90vw, 22rem); }
/* Word-level text stays one paragraph: no chips, no flex row. */
.vls-stage [vl-children]:has(> [vl-effect="text-word-rise"]) { display: block; text-align: center; }
.vls-stage [vl-children] > [vl-effect="text-word-rise"] { display: inline-block; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; color: inherit; flex: none; }
.vls-stage h3 { color: var(--fg); max-width: 100%; text-wrap: balance; text-align: center; }