/* The product page: a split screen, glad left and abloh IDE right; clicking one slides it open into its own page.
   Its content is readout blocks on the landing hero's dark grey. */
html, body { background: #0A0A0A; }
.product { color: #F4F1E8; }

/* The split. Opening a half moves only the divider and the other half, by transform and opacity, so nothing
   reflows while it moves; product.js then holds 0.3 s and fades the product in. */
.split { --move: 650ms cubic-bezier(0.65, 0, 0.35, 1); position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto auto 1fr; height: calc(100vh - 64px); margin-top: 64px; overflow: hidden; }
.split[hidden] { display: none; }
.split-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgb(244 241 232 / 0.3); will-change: transform; transition: transform var(--move); }
/* Both halves share the split's rows (subgrid), so number, name, description and open sit level across the divider. */
.half { position: relative; isolation: isolate; grid-row: 1 / -1; min-width: 0; display: grid; grid-template-rows: subgrid; align-content: start; row-gap: 1rem; padding: 28vh clamp(2rem, 5vw, 5rem) 4rem; color: #F4F1E8; text-decoration: none; will-change: transform; transition: transform var(--move); }
/* Each half's grey is its own layer, so it can move and grow with the divider by transform alone. */
.half::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #0A0A0A; will-change: transform; transition: transform var(--move), background 0.2s; }
.half:hover::before, .half:focus-visible::before { background: #141414; }
.half:first-of-type::before { transform-origin: left; } .half:last-child::before { transform-origin: right; } /* each grows from its outer edge */
.half:focus-visible { outline: 1px solid #F4F1E8; outline-offset: -6px; }
.half-n { font-size: 14px; letter-spacing: 0.12em; color: rgb(244 241 232 / 0.55); }
.half-name { font-family: "Alliance No.2", ui-sans-serif, system-ui, sans-serif; font-size: clamp(3rem, 7vw, 6.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.half-lede { max-width: 32ch; font-size: 1.25rem; line-height: 1.4; color: rgb(244 241 232 / 0.8); }
.half-open { margin-top: 1rem; font-size: 15px; letter-spacing: 0.04em; color: rgb(244 241 232 / 0.7); }
.half:hover .half-open { color: #F4F1E8; }
/* glad opens: the divider slides to the right edge, the IDE's whole surface sliding off with it while glad's
   grey grows behind it to fill the window; the IDE opens the other way. The surfaces meet exactly at the line. */
.split[data-open="glad"] .split-line { transform: translateX(50vw); }
.split[data-open="glad"] .half:last-child { transform: translateX(100%); }
.split[data-open="glad"] .half:first-of-type::before { transform: scaleX(2); }
.split[data-open="ide"] .split-line { transform: translateX(-50vw); }
.split[data-open="ide"] .half:first-of-type { transform: translateX(-100%); }
.split[data-open="ide"] .half:last-child::before { transform: scaleX(2); }
/* While moving, the leaving half is the lighter grey, so its surface is seen going; the opening one is the page's grey. */
.split[data-open] .half::before { background: #141414; }
.split[data-open="glad"] .half:first-of-type::before, .split[data-open="ide"] .half:last-child::before { background: #0A0A0A; }
.split.instant .split-line, .split.instant .half, .split.instant .half::before { transition: none; }
/* The opening half's words fade during the hold, so only its grey is left when the product comes in. */
.half > * { transition: opacity 250ms ease; }
.split[data-open="glad"] .half:first-of-type > *, .split[data-open="ide"] .half:last-child > * { opacity: 0; transition-delay: 450ms; }
.split.instant .half > * { transition: none; }
@media (max-width: 47.99rem) {
  .split { display: flex; flex-direction: column; height: auto; min-height: calc(100vh - 64px); }
  .split-line { display: none; }
  .half { display: flex; flex-direction: column; gap: 1rem; min-height: calc((100vh - 64px) / 2); padding-top: 4rem; }
  .half + .half { border-top: 1px solid rgb(244 241 232 / 0.3); }
}
@media (prefers-reduced-motion: reduce) { .half, .half::before, .split-line { transition: none; } }
.home-nav a[aria-current="page"] { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
/* On a phone the two halves fill the screen between them, each name and line centred in its half, open as the
   plain words it is on a wide screen (the whole half is the link, so it needs no box). */
@media (max-width: 760px) {
  .split { min-height: calc(100svh - 64px); }
  .half { justify-content: center; flex: 1; min-height: 0; padding: 2rem 20px; }
  .half-lede { font-size: 1.125rem; }
  .half-open { margin-top: 0.5rem; font-size: 16px; }
}