/* Tallpine site: the illustrated moments (enterprise policy figure, release timeline, pine ridge).
 * Requires tokens.css, site.css and app-ui.css. Every visual has a complete static state: the markup
 * ships in its final frame, motion is added by visuals.js only when the visitor allows it. */

/* ── Home hero: one request fans out to three agents and comes back as pull requests you merge. ──
 * The markup is the end state (three green PRs, Merge waiting on you): that is what phones, reduced
 * motion and screenshots show. On larger screens it builds up to that once, in about 9 s:
 * 0.3 s lines fan out · 0.6-1.0 s lanes start · 2.6 s Codex CI fails, goes back · 4.6-7.4 s lanes go
 * to review, then ready · 7.5 s lines join · 7.9 s "3 pull requests" · 8.4 s Merge, waiting on you. */
.flow-fig { margin: 0; }
.flow {
	display: grid; grid-template-columns: minmax(0, 0.9fr) 56px minmax(0, 1.75fr) 56px minmax(0, 0.9fr); align-items: center;
	max-width: 1120px; margin-inline: auto; padding: clamp(24px, 3vw, 40px); border-radius: 20px;
	background: var(--tp-surface); border: 1px solid var(--tp-border-strong);
	font-size: 15px; line-height: 1.45; text-align: left;
}
.flow__k { font-size: 13px; font-weight: 550; color: var(--tp-fg-passive); }
.flow__ask, .flow__out { display: grid; gap: 10px; padding: 20px; border-radius: 14px; background: var(--tp-bg); border: 1px solid var(--tp-border-strong); }
.flow__q { font-size: 17px; font-weight: 550; line-height: 1.35; color: var(--tp-fg); }
.flow__by { display: flex; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--tp-border); font-size: 13.5px; color: var(--tp-fg-muted); }
.flow .av { width: 26px; height: 26px; border-radius: 7px; }
.flow .av b { font-size: 12.5px; font-weight: 650; }
.flow .av--or svg { width: 15px; height: 15px; }

/* Wires: drawn in the static frame; on play they draw out (fan) and in (join). */
.flow__wire { align-self: stretch; width: 100%; height: 0; min-height: 100%; overflow: visible; }
.flow__wire path { fill: none; stroke: var(--tp-brand-mark); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.flow__wire--join path { stroke: var(--tp-status-ready); }

.flow__lanes { display: grid; grid-auto-rows: 1fr; gap: 12px; }
.lc {
	display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; grid-template-areas: "av who st" "bar bar bar"; align-items: center; gap: 10px 12px;
	padding: 14px 16px 12px; border-radius: 12px; background: var(--tp-bg); border: 1px solid var(--tp-border-strong);
}
.lc > .av { grid-area: av; }
.lc__who { grid-area: who; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.lc__who b { font-weight: 600; white-space: nowrap; }
.lc__who code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 7px; border-radius: 6px; background: var(--tp-surface-2); font-family: var(--tp-font-mono); font-size: 13px; color: var(--tp-fg-muted); }
.lc__st { grid-area: st; width: auto; justify-items: end; font-size: 13.5px; font-weight: 600; }
.lc__st .v { justify-self: end; gap: 6px; padding: 3px 9px; border-radius: 999px; background: color-mix(in oklch, currentColor 13%, transparent); white-space: nowrap; }
.lc__st code { font-family: var(--tp-font-mono); font-size: 13px; font-weight: 500; }
.lc__st .ic { width: 14px; height: 14px; }
.lc__bar { grid-area: bar; height: 3px; border-radius: 3px; background: var(--tp-border); overflow: hidden; }
.lc__bar i { display: block; height: 100%; border-radius: inherit; background: var(--tp-status-ready); transform-origin: left; }

.flow__out { border-color: color-mix(in oklch, var(--tp-brand-mark) 55%, transparent); background: color-mix(in oklch, var(--tp-brand-mark) 4%, var(--tp-bg)); }
.flow__n { font-family: var(--tp-font-display); font-stretch: var(--tp-display-stretch); font-weight: 700; font-size: 28px; line-height: 1.05; letter-spacing: -0.01em; }
.flow__s { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--tp-fg-muted); font-weight: 550; }
.flow__s .dot { color: var(--tp-status-ready); }
.flow__act { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 12px; border-top: 1px solid var(--tp-border); }
.flow__merge { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; border-radius: var(--tp-radius-control); background: var(--tp-btn-primary); color: var(--tp-btn-primary-fg, var(--tp-ivory)); font-size: 14px; font-weight: 600; }
.flow__merge .ic { width: 15px; height: 15px; }

/* The build-up, only where it can be watched: wider screens with motion allowed. */
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
	.flow__wire path { animation: flow-draw 0.6s var(--tp-ease-out) 0.3s both; }
	.flow__wire path:nth-child(2) { animation-delay: 0.38s; } .flow__wire path:nth-child(3) { animation-delay: 0.46s; }
	.flow__wire--join path { animation-delay: 7.5s; }
	.flow__wire--join path:nth-child(2) { animation-delay: 7.58s; } .flow__wire--join path:nth-child(3) { animation-delay: 7.66s; }
	.play .lc__bar i { animation: flow-fill calc(var(--done) - var(--in)) linear var(--in) backwards; }
	.play .lc--retry .lc__bar i { animation-name: flow-fill-retry; }
	.play .lc--retry { animation: tp-msg-in 0.5s var(--tp-ease-out) var(--in) both, flow-flag calc(var(--done) - var(--in)) linear var(--in) both; }
	.play .flow__merge { animation: flow-ask 1.4s var(--tp-ease-out) 8.7s 2; }
}
@keyframes flow-draw { from { stroke-dashoffset: 1; } }
@keyframes flow-fill { from { transform: scaleX(0.04); background: var(--tp-status-working); } to { transform: scaleX(1); background: var(--tp-status-working); } }
/* Codex: works, fails CI (red, held), goes back to Codex (bar drops back), then finishes. */
@keyframes flow-fill-retry {
	0% { transform: scaleX(0.04); background: var(--tp-status-working); }
	27% { transform: scaleX(0.6); background: var(--tp-status-working); }
	28%, 52% { transform: scaleX(0.6); background: var(--tp-status-failed); }
	57% { transform: scaleX(0.3); background: var(--tp-status-working); }
	100% { transform: scaleX(1); background: var(--tp-status-working); }
}
@keyframes flow-flag { 0%, 27%, 54%, 100% { border-color: var(--tp-border-strong); } 29%, 52% { border-color: color-mix(in oklch, var(--tp-status-failed) 60%, transparent); } }
@keyframes flow-ask { 50% { box-shadow: 0 0 0 6px color-mix(in oklch, var(--tp-brand-mark) 22%, transparent); } }

/* Static frame everywhere else: the end state, no playback. */
@media (max-width: 960px), (prefers-reduced-motion: reduce) {
	.flow.play .v, .flow.play .enter { animation: none; }
	.flow.play .v:not(.end) { display: none; }
}
@media (max-width: 960px) {
	/* Stacked: the request, the three lanes, then the PRs; short pine links between. */
	.flow { grid-template-columns: minmax(0, 1fr); max-width: 560px; gap: 0; padding: 18px; }
	.flow__wire { display: none; }
	.flow__lanes { position: relative; padding-block: 28px; }
	.flow__lanes::before, .flow__lanes::after { content: ""; position: absolute; left: 50%; width: 2px; height: 28px; background: var(--tp-brand-mark); }
	.flow__lanes::before { top: 0; }
	.flow__lanes::after { bottom: 0; background: var(--tp-status-ready); }
}
@media (max-width: 480px) {
	.flow { padding: 12px; font-size: 14px; }
	.flow__ask, .flow__out { padding: 16px; }
	.lc { grid-template-columns: 26px minmax(0, 1fr); grid-template-areas: "av who" "st st" "bar bar"; padding: 12px; }
	.lc__st { justify-items: start; }
	.lc__st .v { justify-self: start; }
}

/* ── Enterprise hero: text left, the policy figure right ── */
.hero__split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px clamp(32px, 4vw, 72px); align-items: center; }
.hero__split .hero-title { font-size: clamp(2.75rem, 1.4rem + 3.2vw, 4.75rem); }
.hero__split .hero__intro { max-width: 36rem; }

.pviz { margin: 0; display: grid; gap: 14px; min-width: 0; }
/* One fixed layout for both steps: the Mac never moves. Only the right-hand column changes
 * (the MDM, then the destinations), and the links between them. */
.pviz__stage {
	position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) 52px minmax(0, 1fr); align-items: center;
	min-height: 360px; padding: clamp(20px, 2.2vw, 28px); border-radius: 16px;
	background: var(--tp-surface); border: 1px solid var(--tp-border-strong); font-size: 13.5px; line-height: 1.4;
}
.pviz__label { position: absolute; top: 9px; left: 14px; font-size: 12px; font-weight: 500; color: var(--tp-fg-passive); }
.pviz__mac { position: relative; padding: 34px 12px 12px; border-radius: 14px; border: 1px dashed var(--tp-border-strong); }
.pviz__app { display: grid; gap: 10px; padding: 14px; border-radius: 10px; background: var(--tp-app-card); color: var(--tp-app-fg); }
.pviz__apphead { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; }
.pviz__apphead .av { width: 22px; height: 22px; border-radius: 6px; }
.pviz__apphead .av svg { width: 13px; height: 13px; }
.pviz__rules li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; margin-inline: -10px; border-top: 1px solid var(--tp-app-border); border-radius: 6px; transition: background-color 260ms var(--tp-ease-out); }
.pviz__rules li:nth-child(1) { --d: 0ms; } .pviz__rules li:nth-child(2) { --d: 160ms; } .pviz__rules li:nth-child(3) { --d: 320ms; }
.pviz__st { display: grid; justify-items: end; font-weight: 600; font-size: 12.5px; white-space: nowrap; }
.pviz__st > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; transition: opacity 200ms, transform 260ms var(--tp-ease-out); transition-delay: var(--d, 0ms); }
.pviz__off { color: var(--tp-app-fg-passive); font-weight: 500; }
.pviz__on { color: var(--tp-status-needs-you); opacity: 0; transform: scale(0.85); }
.pviz__on svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.pviz[data-step="2"] .is-managed { background: color-mix(in oklch, var(--tp-status-needs-you) 9%, transparent); transition-delay: var(--d); }
.pviz[data-step="2"] .is-managed .pviz__off { opacity: 0; }
.pviz[data-step="2"] .is-managed .pviz__on { opacity: 1; transform: none; }
.pviz__agents { display: flex; align-items: center; gap: 6px; padding-top: 10px; border-top: 1px solid var(--tp-app-border); font-size: 12.5px; color: var(--tp-app-fg-muted); }
.pviz__agents .av { width: 22px; height: 22px; border-radius: 6px; }
.pviz__agents .av b { font-size: 10px; }
.pviz__agents > span:last-child { margin-left: 4px; }

/* The link column: the profile wire in step 1; the destination lines start here in step 2. */
.pviz__link { position: relative; align-self: stretch; }
.pviz__link::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: var(--tp-border-strong); transition: opacity 180ms, background-color 300ms; }
.pviz[data-step="2"] .pviz__link::before { background: var(--tp-brand-mark); }
.pviz[data-scene="out"] .pviz__link::before { opacity: 0; }
.pviz__packet {
	position: absolute; z-index: 1; top: 50%; left: 100%; transform: translate(-40%, -50%); padding: 3px 8px; border-radius: 6px;
	background: var(--tp-pine); color: var(--tp-ivory); font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap;
	opacity: 0; visibility: hidden;
	transition: left 1100ms cubic-bezier(0.45, 0, 0.2, 1), transform 1100ms cubic-bezier(0.45, 0, 0.2, 1), opacity 200ms, visibility 0s 200ms;
}
.pviz[data-step="1"] .pviz__packet { opacity: 1; visibility: visible; left: 0; transform: translate(-60%, -50%); transition-delay: 0s; }
.pviz[data-step="0"] .pviz__rules li, .pviz[data-step="0"] .pviz__rules li *, .pviz[data-step="0"] .pviz__packet, .pviz[data-step="0"] .pviz__link::before { transition: none; }

/* The side column: one thing at a time. The outgoing item fades first, then the incoming one,
 * so the two never show through each other. */
.pviz__side { display: grid; align-items: center; min-width: 0; }
.pviz__mdm, .pviz__ends { grid-area: 1 / 1; transition: opacity 220ms var(--tp-ease-out) 180ms, visibility 0s 0s; }
.pviz[data-scene="policy"] .pviz__ends, .pviz[data-scene="out"] .pviz__mdm { opacity: 0; visibility: hidden; transition: opacity 180ms, visibility 0s 180ms; }
.pviz__mdm { display: grid; gap: 4px; padding: 14px; border-radius: 12px; background: var(--tp-bg); border: 1px solid var(--tp-border-strong); }
.pviz__k { font-weight: 600; }
.pviz__s { font-size: 12.5px; color: var(--tp-fg-muted); }
.pviz__ends { display: grid; gap: 7px; }
.pviz__ends li { position: relative; display: grid; gap: 1px; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--tp-border); background: var(--tp-bg); }
.pviz__ends b { font-weight: 600; }
.pviz__ends span { font-size: 12.5px; color: var(--tp-fg-muted); }
.pviz__ends li::before { content: ""; position: absolute; top: 50%; right: 100%; width: 53px; height: 2px; transform-origin: left; transform: scaleX(0); transition: transform 500ms var(--tp-ease-out); }
.pviz__ends li:nth-child(2)::before { transition-delay: 90ms; } .pviz__ends li:nth-child(3)::before { transition-delay: 180ms; }
.pviz__ends li:nth-child(4)::before { transition-delay: 270ms; } .pviz__ends li:nth-child(5)::before { transition-delay: 360ms; }
.pviz[data-scene="out"] .pviz__ends li::before { transform: none; transition-delay: calc(200ms + var(--ld, 0ms)); }
.pviz__ends .is-on { border-color: color-mix(in oklch, var(--tp-brand-mark) 45%, transparent); }
.pviz__ends .is-on::before { background: linear-gradient(90deg, var(--tp-brand-mark) 0 8px, transparent 8px) 0 0 / 13px 2px repeat-x; }
.pviz__ends .is-opt::before { opacity: 0.6; }
/* Removed connections: dimmed, dotted, with a crossed marker; the words "None" and "Removed" say the rest. */
.pviz__ends .is-off { border-style: dashed; background: var(--tp-surface); padding-right: 34px; }
.pviz__ends .is-off b, .pviz__ends .is-off span { color: var(--tp-fg-passive); }
.pviz__ends .is-off::before { background: linear-gradient(90deg, var(--tp-border-strong) 0 3px, transparent 3px) 0 0 / 7px 2px repeat-x; }
.pviz__ends .is-off::after {
	content: ""; position: absolute; top: 50%; right: 12px; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%;
	box-shadow: inset 0 0 0 1.5px var(--tp-fg-passive);
	background: linear-gradient(45deg, transparent calc(50% - 0.75px), var(--tp-fg-passive) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.pviz.is-playing[data-scene="out"] .is-on::before { animation: pviz-flow 0.9s linear infinite; }
@keyframes pviz-flow { to { background-position: 13px 0; } }

.pviz__cap { display: flex; justify-content: flex-start; }
.pviz__tabs { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--tp-border); }
.pviz__tabs button { border: 0; background: none; padding: 6px 12px; border-radius: 7px; font-size: var(--tp-text-xs); font-weight: 550; color: var(--tp-fg-muted); cursor: pointer; }
.pviz__tabs button:hover { color: var(--tp-fg); }
.pviz__tabs button[aria-pressed="true"] { background: var(--tp-surface-2); color: var(--tp-fg); }

@media (max-width: 1100px) {
	.hero__split { grid-template-columns: 1fr; }
	.pviz { max-width: 640px; }
}
@media (max-width: 640px) {
	/* Phones: the Mac on top, fixed; the MDM and then the destinations below it. The profile travels up. */
	.pviz__stage { grid-template-columns: 1fr; grid-template-rows: auto 40px auto; min-height: 0; }
	.pviz__link::before { top: 0; bottom: 0; left: 50%; right: auto; width: 2px; height: auto; }
	.pviz__packet { top: 100%; left: 50%; transform: translate(-50%, -50%); transition-property: top, opacity, visibility; }
	.pviz[data-step="1"] .pviz__packet { top: 0; left: 50%; transform: translate(-50%, -50%); }
	.pviz__ends li { padding-left: 28px; }
	.pviz__ends li::before { top: 15px; right: auto; left: 12px; width: 7px; height: 7px; border-radius: 50%; transform: none; background: var(--tp-border-strong); }
	.pviz__ends .is-on::before { background: var(--tp-brand-mark); }
	.pviz__ends .is-off::before { background: none; box-shadow: inset 0 0 0 1.5px var(--tp-border-strong); }
	.pviz.is-playing[data-scene="out"] .is-on::before { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
	.pviz *, .pviz *::before { transition: none !important; animation: none !important; }
}

/* ── End bands: a ridge of tall pines along the bottom edge ──
 * Static SVG (inlined by the build) is the frame everyone sees; ridge.js swaps in a WebGL canvas
 * with slow sway and scroll parallax on larger screens when motion is allowed. */
:root {
	--tp-ridge-0l: color-mix(in oklch, var(--tp-ridge-0), var(--tp-ivory) 5%);
	--tp-ridge-1l: color-mix(in oklch, var(--tp-ridge-1), var(--tp-ivory) 6%);
	--tp-ridge-2l: color-mix(in oklch, var(--tp-ridge-2), var(--tp-ivory) 7%);
	--tp-ridge-3l: color-mix(in oklch, var(--tp-ridge-3), var(--tp-ivory) 8%);
}
/* The ridge field is 16:1 (ridge-geo.js), so the band is never wider than 16x its height: tips are never cropped. */
.band--ridge { --ridge-h: max(clamp(150px, 19vw, 280px), 100vw / 16); position: relative; isolation: isolate; overflow: hidden; }
.band--ridge > .wrap.section { padding-bottom: calc(var(--ridge-h) * 0.62 + 48px); }
.ridge { position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: var(--ridge-h); pointer-events: none; }
.ridge__svg, .ridge canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ridge canvas { opacity: 0; transition: opacity 600ms var(--tp-ease-out); }
.ridge.is-gl canvas { opacity: 1; }
.ridge.is-gl .ridge__svg { visibility: hidden; }
.ridge .r0 { fill: var(--tp-ridge-0); } .ridge .r0l { fill: var(--tp-ridge-0l); }
.ridge .r1 { fill: var(--tp-ridge-1); } .ridge .r1l { fill: var(--tp-ridge-1l); }
.ridge .r2 { fill: var(--tp-ridge-2); } .ridge .r2l { fill: var(--tp-ridge-2l); }
.ridge .r3 { fill: var(--tp-ridge-3); } .ridge .r3l { fill: var(--tp-ridge-3l); }

/* ── Release status: an honest timeline. One rail, the current stage marked, no dates. ── */
.rel__title { margin-bottom: clamp(32px, 3.4vw, 48px); }
.rel { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.rel::before { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 2px; background: linear-gradient(to right, var(--tp-brand-mark) 0 12.5%, var(--tp-border-strong) 12.5%); }
.rel__step { position: relative; display: grid; gap: 10px; align-content: start; padding: 34px 28px 0 0; }
.rel__step::before { content: ""; position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--tp-bg); box-shadow: inset 0 0 0 2px var(--tp-border-strong); }
.rel__step.is-now::before { background: var(--tp-brand-mark); box-shadow: 0 0 0 4px color-mix(in oklch, var(--tp-brand-mark) 22%, transparent); animation: rel-now 2.4s var(--tp-ease-out) infinite; }
@keyframes rel-now { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--tp-brand-mark) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 12px color-mix(in oklch, var(--tp-brand-mark) 0%, transparent); } }
.rel__when { font-size: var(--tp-text-xs); font-weight: 600; color: var(--tp-fg-passive); }
.is-now .rel__when { color: var(--tp-brand-mark); }
.rel .body { font-size: var(--tp-text-sm); }
@media (max-width: 860px) {
	.rel { grid-template-columns: 1fr; gap: 28px; }
	.rel::before { top: 6px; bottom: 6px; left: 6px; right: auto; width: 2px; height: auto; background: linear-gradient(to bottom, var(--tp-brand-mark) 0 22%, var(--tp-border-strong) 22%); }
	.rel__step { padding: 0 0 0 36px; }
}
@media (prefers-reduced-motion: reduce) { .rel__step.is-now::before { animation: none; } }
@media (max-width: 640px) {
	/* Phones keep the static frame, right-anchored at its natural ratio so the tall pines stay in view. */
	.band--ridge { --ridge-h: 170px; }
	/* Phones: the art at band height, showing the right-hand pines of the core (flank) or its right end. */
	.ridge__svg { width: calc(var(--ridge-h) * var(--fw) / 280); max-width: none; }
	.ridge__svg--mid { left: calc(var(--ridge-h) * (var(--fx0) - 640) / 280); }
	.ridge__svg--max { left: auto; right: 0; }
}