/* Clarity website · v3. Apple's rhythm: a headline, one sentence, the product. Tokens in tokens.css. */

* { box-sizing: border-box; }
html { background: var(--c-ink); color-scheme: dark; }
body { margin: 0; min-height: 100dvh; background: var(--c-ink); color: var(--c-mist); font: var(--fs-body) / var(--lh-body) var(--f-sans); -webkit-font-smoothing: antialiased; }
body.locked { overflow: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ol, ul { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
img, svg, video { max-width: 100%; }
kbd { font: 400 .78em/1 var(--f-mono); padding: .3em .45em; border: 1px solid currentColor; border-bottom-width: 2px; border-radius: 5px; opacity: .85; vertical-align: .08em; }
:focus-visible { outline: 2px solid var(--c-mint); outline-offset: 3px; border-radius: 6px; }
.view[hidden] { display: none; }

/* ---- background: three out-of-focus shapes, parallax by pointer (home) or scroll (about) */
.bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.bg i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; will-change: transform; transform: translate3d(var(--x, 0px), var(--y, 0px), 0); }
.bg .b1 { width: 52vw; height: 52vw; left: -14vw; top: -20vw; background: #16303a; }
.bg .b2 { width: 44vw; height: 44vw; right: -12vw; top: 30vh; background: #1a2b3a; }
.bg .b3 { width: 26vw; height: 26vw; left: 42vw; bottom: -14vw; background: rgba(88,157,161,.35); }
.view { position: relative; z-index: 1; }

/* ---- the bar: Apple's thin translucent nav */
.bar { position: fixed; top: 0; left: 0; right: 0; z-index: 10; height: 48px; background: rgba(14,20,28,.72); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid rgba(255,255,255,.06); }
.bar-in { width: 100%; height: 100%; padding: 0 clamp(20px, 3vw, 40px); display: flex; align-items: center; justify-content: space-between; }
.brand { display: flex; align-items: center; gap: 9px; font: 500 15px/1 var(--f-sans); letter-spacing: -.01em; color: var(--c-mist); }
.brand svg { width: 22px; height: 22px; border-radius: 5px; display: block; }
.links { display: flex; align-items: center; gap: 26px; font: 400 13px/1 var(--f-sans); color: var(--c-mist-70); }
.links a:hover, .links a[aria-current="page"] { color: var(--c-mist); }
.links .pill { color: var(--c-mint-ink); background: var(--c-mint); padding: 6px 12px; border-radius: 999px; font-weight: 500; }
.links .pill:hover { color: var(--c-mint-ink); filter: brightness(1.05); }

/* ---- shared type */
.h2 { font-family: var(--f-display); font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -.03em; line-height: 1.05; text-align: center; }
.h2 kbd { font-size: .42em; vertical-align: .35em; margin: 0 .04em; }
.line { margin: 18px auto 0; max-width: 40ch; text-align: center; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.4; color: var(--c-mist-70); text-wrap: balance; }
.line.small { font-size: 14px; margin-top: 28px; color: var(--c-mist-45); }
.line a { color: var(--c-mint); }

/* ================================================================ HOME */
.hero { height: 100dvh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: clamp(28px, 5vw, 72px); padding: 80px clamp(20px, 5vw, 72px) 40px; max-width: 1360px; margin-inline: auto; }
.copy { display: grid; justify-items: start; }
.wordmark { font-family: var(--f-display); font-weight: 500; font-size: clamp(72px, 9.6vw, 136px); letter-spacing: -.04em; line-height: .95; }
.slogan { margin-top: 22px; font-size: clamp(23px, 2.35vw, 30px); color: var(--c-mist-70); }
.cta { margin-top: 32px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.dl { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 20px; border-radius: 999px; background: var(--c-mint); color: var(--c-mint-ink); font: 500 15px/1 var(--f-sans); transition: transform 120ms var(--ease-out), filter 120ms; }
.dl:hover { filter: brightness(1.05); }
.dl:active { transform: scale(.97); }
.dl .apple { width: 14px; height: 17px; }
.dl.is-going { background: var(--c-ink-3); color: var(--c-mist); }
.note { font-size: 13px; color: var(--c-mist-45); }
.firstrun { margin-top: 18px; max-width: 46ch; font-size: 13px; line-height: 1.5; color: var(--c-mist-45); }
.firstrun b { font-weight: 500; color: var(--c-mist-70); }
.film { width: 100%; min-height: 0; display: flex; justify-content: center; align-items: center; max-height: calc(100dvh - 120px); }
.film video { display: block; width: 100%; height: auto; max-height: calc(100dvh - 120px); object-fit: contain; border-radius: 14px; background: #000; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
@media (max-width: 860px) { .hero { height: auto; min-height: 100dvh; grid-template-columns: 1fr; align-content: start; padding-top: 84px; gap: 28px; } body.locked { overflow: auto; } }

/* ---- boot: the word focuses in alone, then the sentence, the button, the film. Every full load. */
/* before boot (html.pre is set in the markup, so this applies on the first paint): everything the boot
   animates is hidden until the fonts are ready and site.js swaps .pre for .boot. No flash of the finished page. */
.pre :is(.wordmark, .slogan, .cta, .firstrun, .film, .bar) { opacity: 0; }
.boot .wordmark { animation: focus-word 800ms var(--ease-out) 0ms both; will-change: filter, transform, opacity; }
.boot .slogan { animation: focus 420ms var(--ease-out) 460ms both; }
.boot .cta { animation: focus 400ms var(--ease-out) 580ms both; }
.boot .firstrun { animation: appear 400ms var(--ease-out) 760ms both; }
.boot .film { animation: film-in 700ms var(--ease-out) 680ms both; }
.boot .bar { animation: appear 400ms var(--ease-out) 680ms both; }
@keyframes focus { from { opacity: 0; filter: blur(var(--blur-focus)); transform: translateY(8px); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
/* the word itself: visibly out of focus first, then sharp, like a lens finding it */
@keyframes focus-word { from { opacity: .35; filter: blur(18px); transform: scale(1.04); } 45% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: none; } }
@keyframes film-in { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================ ABOUT */
.about { padding-top: 48px; }
.sec { padding: clamp(72px, 10vh, 120px) clamp(16px, 4vw, 48px); }
.sec.dark { background: transparent; color: var(--c-mist); }
.sec.light { background: var(--c-paper-2); color: var(--c-ink-on-paper); --c-mist: var(--c-ink-on-paper); --c-mist-70: rgba(18,27,38,.72); --c-mist-45: rgba(18,27,38,.5); --c-mint: var(--c-mint-on-paper); }
.sec.last { padding-bottom: 40px; }
.focus { opacity: 0; filter: blur(8px); transform: translateY(8px); transition: opacity 480ms var(--ease-out), filter 480ms var(--ease-out), transform 480ms var(--ease-out); }
.focus.in { opacity: 1; filter: blur(0); transform: none; }
.line.focus { transition-delay: 100ms; }
.reveal > * { opacity: 0; transform: translateY(14px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); }
.reveal.in > * { opacity: 1; transform: none; }
.reveal.in > *:nth-child(2) { transition-delay: 60ms; } .reveal.in > *:nth-child(3) { transition-delay: 120ms; } .reveal.in > *:nth-child(4) { transition-delay: 180ms; }
.reveal.in > *:nth-child(5) { transition-delay: 240ms; } .reveal.in > *:nth-child(6) { transition-delay: 300ms; } .reveal.in > *:nth-child(7) { transition-delay: 360ms; } .reveal.in > *:nth-child(8) { transition-delay: 420ms; }
.reveal.in > *:nth-child(9) { transition-delay: 480ms; } .reveal.in > *:nth-child(10) { transition-delay: 540ms; } .reveal.in > *:nth-child(11) { transition-delay: 600ms; } .reveal.in > *:nth-child(12) { transition-delay: 660ms; }


/* 1 · the real captures */
.shots { position: relative; width: 100%; height: min(60vh, 560px); }
.shot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.98); opacity: 0; transition: opacity 300ms var(--ease-out), transform 300ms var(--ease-out); filter: drop-shadow(0 30px 60px rgba(0,0,0,.5)); }
.shot.spot { width: min(100%, 680px); height: auto; }
.shot.res { width: auto; height: 100%; }
.shot.on { opacity: 1; transform: translate(-50%, -50%); }

/* 2 · the backend */
.flow { width: 100%; }
.flow svg { display: block; width: 100%; height: auto; overflow: visible; }
.flow .n rect { fill: #fff; stroke: rgba(18,27,38,.14); stroke-width: 1.2; transition: stroke 300ms; }
.flow .n .t { font: 500 15px var(--f-sans); fill: var(--c-ink-on-paper); }
.flow .n .s { font: 400 11px var(--f-mono); fill: rgba(18,27,38,.55); }
.flow .n image { opacity: .85; }
.flow .n.done rect { stroke: rgba(18,27,38,.3); }
.flow .n.on rect { stroke: var(--c-mint-on-paper); stroke-width: 2; }
.flow .e { fill: none; stroke: rgba(18,27,38,.16); stroke-width: 1.5; marker-end: url(#m); transition: stroke 300ms; }
.flow marker path { fill: rgba(18,27,38,.35); }
.flow .e.on { stroke: rgba(18,27,38,.55); }
.flow .e.ret { stroke-dasharray: 5 6; }
.flow .e.ret.mint.on { stroke: var(--c-mint-on-paper); } .flow .e.ret.amber.on { stroke: #b5820e; }
.flow .el { font: 400 12px var(--f-mono); fill: rgba(18,27,38,.5); opacity: 0; transition: opacity 300ms; }
.flow .el.on { opacity: 1; }
.flow .pk { fill: var(--c-ink-on-paper); opacity: 0; offset-rotate: 0deg; }
.flow .pk.go { opacity: 1; offset-path: var(--path); animation: travel 600ms var(--ease-io) both; }
.flow .pk.mint { fill: var(--c-mint-on-paper); } .flow .pk.amber { fill: #b5820e; }
@keyframes travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.be-status { margin-top: 22px; justify-self: center; display: inline-flex; align-items: center; gap: 8px; font: 400 13px var(--f-mono); color: rgba(18,27,38,.6); }
.be-status .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-mint-on-paper); animation: pulse 1.4s ease-in-out infinite; }
.be-status.done .dot { animation: none; opacity: .5; }
@keyframes pulse { 0%,100% { opacity: .25 } 50% { opacity: 1 } }

/* 3 · built with */
.logos { list-style: none; margin: 40px auto 0; padding: 0; max-width: 1000px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 24px 12px; text-align: center; font: 400 13px var(--f-sans); color: var(--c-mist-70); }
@media (max-width: 720px) { .logos { grid-template-columns: repeat(3, 1fr); } }
.logos li { display: grid; justify-items: center; gap: 12px; }
.logos i { display: block; width: 34px; height: 34px; background: var(--c-mist); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; opacity: .9; }
.logos i.txt { background: none; -webkit-mask: none; mask: none; font: 500 20px/32px var(--f-display); font-style: normal; color: var(--c-mist); border: 1px solid var(--c-line-2); border-radius: 8px; }


/* 4 · source */
.repo { display: block; margin: 28px auto 0; text-align: center; font: 500 clamp(18px, 2.4vw, 28px)/1.2 var(--f-sans); letter-spacing: -.01em; color: var(--c-mist); }
.repo .arrow { color: var(--c-mint); display: inline-block; transition: transform 240ms var(--ease-out); }
.repo:hover .arrow { transform: translateX(.2em); }
.foot { margin-top: 72px; display: flex; justify-content: center; gap: 28px; font: 400 12.5px var(--f-sans); color: var(--c-mist-45); }
.foot a:hover { color: var(--c-mist); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; transition-duration: .001ms !important; }
  .focus, .reveal > * { opacity: 1; filter: none; transform: none; }
}

/* ---- side-by-side sections: the step list and the animation */
.sec { display: grid; justify-items: center; }
.duo { margin-top: 44px; width: min(100%, 1100px); display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.duo.wide { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); align-items: start; }
@media (max-width: 860px) { .duo, .duo.wide { grid-template-columns: 1fr; } }
.stepsl { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.stepsl li { padding: 12px 14px; border-radius: 10px; cursor: pointer; display: grid; gap: 3px; opacity: .45; transition: opacity 260ms var(--ease-out), background 260ms; }
.stepsl li.on { opacity: 1; background: rgba(255,255,255,.06); }
.sec.light .stepsl li.on { background: rgba(18,27,38,.05); }
.stepsl b { font: 500 15px/1.3 var(--f-sans); letter-spacing: -.01em; }
.stepsl span { font: 400 13.5px/1.45 var(--f-sans); color: var(--c-mist-70); }
.stepsl li.on b::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--c-mint); margin-right: 9px; vertical-align: 2px; }
.be-status { grid-column: 1 / -1; }
.stepsl.compact { gap: 0; }
.stepsl.compact li { padding: 8px 12px; }
.stepsl.compact li span { display: none; }
.stepsl.compact li.on span { display: block; }
.stepsl.compact b { font-size: 14px; }