/* The home hero carousel, v2 (hero-lab, 11.10.2026): a ring of decks that rests on each one, then glides on.
   Sizes follow the column (container query); the ring's radius and every turn come from assets/hero-carousel.js.
   --hx-bleed: how far the stage may run past its column, out to the window's edge (set by the page). */

.hc { --w: clamp(240px, 80cqi, 540px); container-type: inline-size; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "stage stage" "cap ctrl"; align-items: start; gap: var(--space-3) var(--space-6); }

/* the stage: the ring may run out of the column, and fades at the edges instead of being cut */
.hc-stage { grid-area: stage; position: relative; height: calc(var(--w) * .5625 * 1.34 + 30px); }
.hc-view { --hc-bleed: var(--hx-bleed, var(--space-4)); position: absolute; inset-block: 0; left: calc(-1 * var(--hc-bleed)); right: calc(-1 * var(--space-6)); perspective: 1600px; perspective-origin: calc(var(--hc-bleed) + 50cqi) 0; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 84%, transparent 100%); }
@media (max-width: 999px) {
  .hc-view { --hc-bleed: var(--space-4); right: calc(-1 * var(--space-4)); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); }
}
/* the ring stands in the middle of the column, whatever the view's overhang */
.hc-ring { position: absolute; left: calc(var(--hc-bleed) + 50cqi); top: calc(22px + var(--w) * .28125); width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* a card: the deck's opening slide, a soft shadow, a faint reflection on the floor */
.hc-card { position: absolute; left: calc(var(--w) / -2); top: calc(var(--w) * -.28125); width: var(--w); aspect-ratio: 16 / 9; display: block; border-radius: 14px; backface-visibility: hidden; -webkit-backface-visibility: hidden; color: inherit; -webkit-tap-highlight-color: transparent; cursor: pointer; }
.hc-card:focus-visible { box-shadow: none; }
.hc-face { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: #fff; box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 16%, transparent), 0 34px 50px -30px color-mix(in srgb, var(--ink) 70%, transparent); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.hc-face img, .hc-refl img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; pointer-events: none; }
/* light: a soft band of light crosses a card while it turns; a card turned away is a little darker */
.hc-face::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, transparent 34%, rgb(255 255 255 / .55) 50%, transparent 66%); transform: translateX(calc(var(--sx, 0) * -70%)); opacity: var(--sheen, 0); mix-blend-mode: soft-light; pointer-events: none; }
.hc-face::after { content: ""; position: absolute; inset: 0; z-index: 1; background: #0c1411; opacity: calc((1 - var(--f, 1)) * .5); pointer-events: none; }
.hc-refl { position: absolute; inset-inline: 0; top: calc(100% + 3px); height: 100%; border-radius: inherit; overflow: hidden; transform: scaleY(-1); opacity: calc(var(--f, 0) * .3); pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000, transparent 48%); mask-image: linear-gradient(to top, #000, transparent 48%); }
.hc-card.is-front:hover .hc-face { transform: translateY(-5px); }
.hc-card:focus-visible .hc-face { box-shadow: var(--focus-ring), 0 34px 50px -30px color-mix(in srgb, var(--ink) 70%, transparent); }

/* the caption: the front deck, said once */
.hc-cap { grid-area: cap; margin-inline-start: calc((100cqi - var(--w)) / 2); display: grid; gap: 3px; min-height: 112px; /* room for a two-line title: the hero never changes height */ align-content: start; transition: opacity .3s ease; }
.hc.is-moving .hc-cap { opacity: .28; }
.hc-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--leaf); }
.hc-tag { font-size: 12px; line-height: 18px; font-weight: 700; padding: 1px 10px; border-radius: 999px; background: var(--leaf-wash); color: var(--leaf); }
.hc-tag[data-kind="demo"] { background: var(--sun-wash); color: var(--sun-ink); }
.hc-title { font-family: var(--font-display); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; font-weight: 700; color: var(--ink); text-decoration: none; }
.hc-meta { font-size: 15px; line-height: 22px; color: var(--ink-muted); }

/* the controls: turn right, pause / play, turn left. The pressed arrow is the way the ring turns. */
.hc-ctrl { grid-area: ctrl; margin-inline-end: calc((100cqi - var(--w)) / 2); display: flex; gap: var(--space-2); padding-top: 2px; }
.hc-btn { position: relative; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--paper-raised); color: var(--ink-muted); cursor: pointer; transition: border-color .16s, color .16s, background-color .16s; }
.hc-btn:hover { border-color: var(--ink); color: var(--ink); }
.hc-btn:focus-visible { border-radius: 50%; }
.hc-btn[aria-pressed="true"] { background: var(--leaf-wash); border-color: color-mix(in srgb, var(--leaf) 55%, transparent); color: var(--leaf); }
.hc-play { color: var(--ink); }
/* the play button's rim fills while the ring rests on a deck: it shows when the next turn comes */
.hc-prog { position: absolute; inset: -1.5px; width: calc(100% + 3px); height: calc(100% + 3px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
.hc-prog circle { fill: none; stroke: var(--leaf); stroke-width: 1.75; stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: calc(131.95px * (1 - var(--p, 0))); opacity: var(--po, 0); transition: opacity .3s; }

/* screen readers only */
.hx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (max-width: 999px) {
  .hc { --w: clamp(230px, 80cqi, 520px); }
  .hc-cap { min-height: 104px; }
}
@media (max-width: 480px) {
  .hc { grid-template-columns: minmax(0, 1fr); grid-template-areas: "stage" "cap" "ctrl"; justify-items: center; text-align: center; }
  .hc-eyebrow { justify-content: center; }
  .hc-cap, .hc-ctrl { margin-inline: 0; }
  .hc-stage { width: 100%; height: calc(var(--w) * .5625 * 1.3 + 26px); }
  .hc { row-gap: var(--space-2); }
}