/* Homepage products: a ring of marks that turns into cards when scrolled into view. Also opts both pages into cross-page view transitions. */
@view-transition { navigation: auto; }
.oc { padding: var(--space-lg, 3rem) 0; }
.oc-sub { margin-top: .5rem; color: var(--muted, #6B6B6B); max-width: 60ch; }
.oc-stage { list-style: none; margin: var(--space-md, 1.5rem) 0 0; padding: 0; position: relative; }
.oc-item { position: absolute; will-change: transform; }
.oc-item a { display: flex; gap: 14px; text-decoration: none; color: inherit; }
.oc-mark { flex: none; width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--ink, #0A0A0A); background: #fff; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; font-weight: 700; font-size: 18px; }
.oc-mark::before { content: ""; position: absolute; inset: -30%; background: radial-gradient(circle, var(--glow, #0A0A0A) 0%, transparent 62%); opacity: .3; }
.oc-mark span, .oc-mark img { position: relative; }
.oc-mark img { width: 62%; height: 62%; object-fit: contain; }
.oc-body { opacity: 0; min-width: 0; }
.oc-body strong { display: block; font-size: 16px; }
.oc-body .oc-tag { display: block; font-size: 13px; color: var(--muted, #6B6B6B); margin-top: 2px; }
.oc-body .oc-stagebadge { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line, #E5E5E5); font-size: 11px; letter-spacing: .05em; font-weight: 600; }
.oc-body .oc-more { display: block; margin-top: 10px; font-size: 13px; font-weight: 600; }
.oc-item a:focus-visible { outline: 2px solid var(--ink, #0A0A0A); outline-offset: 4px; border-radius: 8px; }

/* card state */
.oc-stage.is-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.oc-stage.is-cards .oc-item { position: static; }
.oc-stage.is-cards .oc-item a { padding: 18px; border: 1px solid var(--line, #E5E5E5); border-radius: 8px; background: #fff; height: 100%; box-sizing: border-box; }
.oc-stage.is-cards .oc-body { opacity: 1; transition: opacity .5s ease var(--d, 0ms); }
.oc-stage.is-cards.arr-staggered .oc-item:nth-child(even) { margin-top: 28px; }
.oc-stage.is-cards.arr-rail { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; padding-bottom: 8px; }
.oc-stage.is-cards.arr-rail .oc-item { flex: 0 0 min(280px, 80%); scroll-snap-align: start; }
.oc-stage.pre .oc-body { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .oc-body { transition: none !important; } }