/* Shared motion for every Mac Apps page. Transform and opacity only; quick (140-220ms), one easing, calm on purpose. */
:root { --mo-ease: cubic-bezier(0.22, 1, 0.36, 1); --mo-spring: cubic-bezier(0.34, 1.4, 0.5, 1); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* reading progress line */
.mo-progress { display: none !important; position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 9999; transform-origin: 0 50%; transform: scaleX(0); background: var(--accent, #a85432); pointer-events: none; }

/* cards: lift, soft shadow, a faint light that follows the pointer */
.card, .game, .point { transition: transform .28s var(--mo-ease), box-shadow .28s var(--mo-ease); will-change: transform; }
@media (hover: hover) {
  .card:hover { transform: translateY(-5px); box-shadow: 0 22px 44px -22px rgba(0,0,0,.38); }
  .point:hover, .game:hover { transform: translateY(-3px); }
}
.card, .point { position: relative; }
@media (hover: hover) { .js .reveal.in.card:hover, .js .reveal.in.point:hover, .mo-ready .mo-reveal.mo-in.card:hover { transform: translateY(-5px); } }
.card::after, .point::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s var(--mo-ease);
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--tint, var(--accent, #a85432)) 22%, transparent), transparent 70%); }
@media (hover: hover) {
  .card:hover::after, .point:hover::after { opacity: 1; }
  .card[style*="--tint"]:hover { border-color: color-mix(in srgb, var(--tint) 45%, var(--line, transparent)); box-shadow: 0 22px 44px -22px color-mix(in srgb, var(--tint) 55%, transparent); }
}
.card[style*="--tint"] .go { color: var(--bg); }

/* buttons: arrows lean, press sinks to .97, primary buttons follow the pointer a little */
.btn, .dlmac, .cmd, a.btn, button.btn { transition: transform .2s var(--mo-ease), box-shadow .2s var(--mo-ease), background-color .2s, opacity .2s; will-change: transform; }
@media (hover: hover) {
  .btn:hover, .dlmac:hover { box-shadow: 0 10px 22px -12px rgba(0,0,0,.5); }
  .btn:hover .arrow, .dlmac:hover span, .cardlink:hover .go span, .btn:hover span { transform: translateX(3px); }
  .dlmac:hover span { transform: translateY(2px); }
}
.btn .arrow, .dlmac span, .go span, .btn span { display: inline-block; transition: transform .22s var(--mo-ease); }
.btn:active, .dlmac:active, .cmd:active, .card:active { transform: scale(.97); transition-duration: .08s; }

/* links and small controls */
a { transition: color .18s, opacity .18s, text-underline-offset .18s; }
a:not(.btn):not(.dlmac):not(.cardlink):hover { text-underline-offset: 4px; }
.os-switch button, .opt, summary, nav a, .top a { transition: transform .2s var(--mo-ease), background-color .2s, color .2s; }
@media (hover: hover) { .opt:hover, summary:hover { transform: translateX(2px); } }

/* pictures and screenshots: gentle zoom inside their frame */
.shot, .gallery figure, .stagebox, .winstage, .wingal figure, .pvgrid figure { overflow: visible; }
.shot img, .gallery img, .gallery figure img, .stagebox img { transition: transform .6s var(--mo-ease); }
@media (hover: hover) { .shot:hover img, .gallery figure:hover img { transform: scale(1.025); } }

/* scroll reveal that replays each time a block enters view, down and back up (js adds .mo-in / .mo-out) */
.mo-ready .mo-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--mo-ease), transform .7s var(--mo-ease); transition-delay: var(--mo-d, 0ms); }
.mo-ready .mo-reveal.mo-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .card, .game, .point, .btn, .dlmac, .cmd, .shot img, .gallery img { transition: none !important; transform: none !important; }
  .mo-ready .mo-reveal { opacity: 1; transform: none; transition: none; }
  .mo-progress { display: none; }
}

/* ---- big previews: clean cut-outs on a soft glow (no posters, no hard edges) ---- */
.pv { position: relative; display: block; margin: 0 auto; width: min(var(--w, 460px), 100%); }
.pv::before { content: ""; position: absolute; inset: -12% -26%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent, #7a5af5) 9%, transparent), color-mix(in srgb, var(--accent, #7a5af5) 3%, transparent) 55%, transparent 100%); }
.pv picture, .pv img { position: relative; z-index: 1; display: block; width: 100%; height: auto; }
.pv img, .gallery .pv img, .shot .pv img { border-radius: 0 !important; box-shadow: none !important;
  filter: drop-shadow(0 18px 30px rgba(20, 16, 40, .13)) drop-shadow(0 1px 3px rgba(20, 16, 40, .08)); }
@media (prefers-color-scheme: dark) { .pv img { filter: drop-shadow(0 22px 34px rgba(0, 0, 0, .55)) drop-shadow(0 2px 5px rgba(0, 0, 0, .35)); } }
.stagebox .pv { --w: 480px; }
.pvgrid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 56px 64px; margin-top: 12px; }
.pvgrid figure { margin: 0; text-align: center; }
.pvgrid figcaption { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
.pvgrid figure:hover .pv { transform: translateY(-4px); }
.pvgrid .pv { transition: transform .5s cubic-bezier(.34,1.4,.5,1); }
/* welcome windows: the screenshots come with square corners, so round and clip them cleanly */
.gallery.welcome img { border-radius: 26px !important; background: transparent; }

.pvgrid figure { width: min(var(--w, 340px), 100%); }
.pvgrid .pv { width: 100%; }
.pvgrid { gap: 56px 44px; }
.gallery.welcome { max-width: 1000px !important; }
.gallery.welcome img { box-shadow: none !important; filter: drop-shadow(0 20px 30px rgba(20, 16, 40, .22)) drop-shadow(0 2px 4px rgba(20, 16, 40, .10)); }
@media (prefers-color-scheme: dark) { .gallery.welcome img { filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .55)); } }

/* ---- install cards: a real download button and a copy-able terminal box ---- */
.install .card .dl { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; padding: 0 20px; margin: 4px 0 18px; border-radius: 14px; background: var(--ink); color: var(--bg); text-decoration: none; font-weight: 650; font-size: 16px; transition: transform .25s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; box-shadow: 0 10px 22px -12px rgba(0,0,0,.45); }
.install .card .dl small { font-weight: 500; font-size: 12.5px; opacity: .65; }
.install .card .dl:hover { transform: translateY(-2px); box-shadow: 0 16px 28px -14px rgba(0,0,0,.5); }
.install .card .dl:active { transform: scale(.98); }
.install .card .or { margin: 0 0 8px; font-size: 13.5px; color: var(--ink-3); }
.code { position: relative; margin: 0 0 20px; border-radius: 14px; background: color-mix(in srgb, var(--ink, #1d1d1f) 7%, var(--surface, #fff)); color: var(--ink, #1d1d1f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink, #1d1d1f) 9%, transparent); }
.code code { display: block; padding: 16px 84px 16px 16px; font: 500 13px/1.55 ui-monospace, "SF Mono", Menlo, Consolas, monospace; word-break: break-all; user-select: all; }
.code .copy { position: absolute; top: 10px; right: 10px; min-height: 30px; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--ink, #1d1d1f) 16%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--ink, #1d1d1f) 7%, var(--surface, #fff)); color: var(--ink, #1d1d1f); font: 600 12.5px/1 inherit; cursor: pointer; transition: background .2s, transform .15s; }
.code .copy:hover { background: color-mix(in srgb, var(--ink, #1d1d1f) 14%, var(--surface, #fff)); }
.code .copy:active { transform: scale(.95); }
.code .copy.done { background: #3b8f5f; border-color: transparent; color: #fff; }

/* sticky header: solid, so page content never shows through it */
header.top { background: var(--bg) !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; border-bottom: 1px solid var(--line, rgba(0,0,0,.08)) !important; z-index: 50 !important; }

/* the panel under the menu bar in each page's top section stays perfectly still: no breathing, no tilt, no hover movement */
.stagebox .shot, .stagebox .shot .float, .stagebox .shot picture, .stagebox .shot img,
.stagebox .pv, .stagebox .pv picture, .stagebox .pv img, .stagebox .menubar, .stagebox .menubar * {
  animation: none !important; transform: none !important; transition: none !important; }
.stagebox .pv:hover, .stagebox .shot:hover { transform: none !important; }

.oss { padding: 56px 0 72px; }
section[style*="max-width:720px"] { margin: 0 auto !important; padding: 0 20px !important; border-top: 0 !important; }
.ossbtn { display: flex; align-items: center; gap: 16px; max-width: 640px; margin: 0 auto; padding: 18px 22px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 12%, transparent), 0 14px 30px -20px rgba(0,0,0,.35); color: var(--ink); text-decoration: none; transition: transform .25s cubic-bezier(.34,1.4,.5,1), box-shadow .3s; }
.ossbtn svg { width: 34px; height: 34px; flex: none; }
.ossbtn span { flex: 1; display: grid; gap: 2px; }
.ossbtn b { font-size: 17px; }
.ossbtn small { font-size: 14px; opacity: .65; }
.ossbtn i { font-style: normal; font-size: 20px; transition: transform .3s; }
.ossbtn:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--tint, var(--ink)), 0 18px 34px -20px rgba(0,0,0,.4); }
.ossbtn:hover i { transform: translateX(4px); }
.ossbtn:active { transform: scale(.98); }

.stagebox .glow, section .glow { opacity: .4; }

/* menu bar the dropdown arrow points to */
.shot.mac-only { display: grid; justify-items: center; }
.mbar { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; height: 36px; padding: 0 16px; margin: 0 auto 2px; border-radius: 13px; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.66)); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 10px 24px -12px rgba(40,28,16,.32), 0 1px 3px rgba(40,28,16,.10); color: var(--ink); }
@media (prefers-color-scheme: dark) { .mbar { background: linear-gradient(180deg, rgba(60,60,66,.92), rgba(40,40,46,.78)); border-color: rgba(255,255,255,.12); box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 12px 26px -12px rgba(0,0,0,.7); } }
.mbar .side { display: flex; align-items: center; gap: 16px; color: color-mix(in srgb, var(--ink) 78%, transparent); }
.mbar .side.l { justify-content: flex-end; }
.mbar .side.r { justify-content: flex-start; }
.mbar .side svg { width: 15px; height: 15px; }
.mbar .clock { font: 600 12px/1 var(--font, system-ui); font-style: normal; color: color-mix(in srgb, var(--ink) 70%, transparent); white-space: nowrap; }
.mbar .pad { position: relative; width: 22px; height: 18px; display: grid; place-items: center; color: var(--ink); }
.mbar .pad svg { width: 17px; height: 17px; }
.mbar .pad::after { content: ""; position: absolute; inset: -6px -8px; border-radius: 8px; background: color-mix(in srgb, var(--ink) 11%, transparent); z-index: -1; }