/* =====================================================================
   HeySwaey — install section: download, drag, open.
   Three steps, each a tiny Mac screen that plays the step out (the real
   DMG window, macOS's "Not Opened" alert, Privacy & Security), plus the
   one-line installer in a Terminal window. Pictures scale with their box
   (sizes in em; 1em = 1/40 of the picture's width).
   ===================================================================== */

.install { padding: clamp(100px, 11vw, 150px) var(--gutter) clamp(10px, 2vw, 30px); }

.dl-win {
  max-width: 1100px; margin: 46px auto 0;
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-win); overflow: hidden;
}
.dl-win .win-bar { background: #f6f6f6; border-bottom: .5px solid rgba(0,0,0,.1); }

/* ---------- the app + the button ---------- */
.dl-top { display: flex; align-items: center; gap: 20px; padding: 28px clamp(20px, 3vw, 36px) 22px; }
.dl-icon { width: 76px; height: 76px; flex: none; filter: drop-shadow(0 8px 16px rgba(10, 40, 90, .22)); }
.dl-meta { flex: 1; min-width: 0; }
.dl-meta h3 { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: -.04em; }
.dl-meta p { margin: 4px 0 0; font-size: 14.5px; color: var(--mute); }
.dl-btn { flex: none; }

.dl-started {
  display: flex; align-items: center; gap: 10px;
  margin: 0 clamp(20px, 3vw, 36px) 18px; padding: 12px 16px;
  border-radius: 12px; background: #eef5ff; box-shadow: inset 0 0 0 1px rgba(var(--electric-rgb), .25);
  font-size: 15px; color: #08243d;
}
.dl-started[hidden] { display: none; }
.dl-started svg { width: 20px; height: 20px; flex: none; color: var(--electric); }
.dl-started a { color: var(--electric); text-decoration: underline; text-underline-offset: 2px; }
.dl-started.pop { animation: dlPop .5s var(--ease-spring); }
@keyframes dlPop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.dl-notmac { margin: 0 clamp(20px, 3vw, 36px) 18px; padding: 10px 14px; border-radius: 10px; background: #fff7e6; color: #6b4400; font-size: 14.5px; }
.dl-notmac[hidden] { display: none; }

/* ---------- tabs ---------- */
.dl-tabs {
  position: relative; display: flex; width: max-content; max-width: calc(100% - 40px); margin: 4px auto 0; padding: 4px;
  border-radius: 999px; background: #f1f1f3; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.dl-tabs button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 18px; border-radius: 999px; font-size: 15px; font-weight: 500; color: rgba(0,0,0,.55);
  transition: color .25s;
}
.dl-tabs button svg { width: 17px; height: 17px; }
.dl-tabs button[aria-selected="true"] { color: #000; }
.dl-tabs-thumb {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 999px;
  background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.06);
  transition: transform .45s var(--ease-island), width .45s var(--ease-island);
}

.dl-panel { padding: 30px clamp(20px, 3vw, 36px) 32px; }
.dl-panel[hidden] { display: none; }
.dl-panel.in { animation: dlFade .45s var(--ease-out); }
@keyframes dlFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- the three steps ---------- */
/* minmax(0, …): Safari sizes the mock windows before their em (container) units resolve, so it would otherwise
   widen each column to the mock's 16px-based width and push step 3 out of the window. */
.dl-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.dl-step { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.dl-txt { position: relative; padding-left: 42px; }
.dl-n {
  position: absolute; left: 0; top: -1px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 15px; font-weight: 600; color: #000;
  background: linear-gradient(#edf4ff 0%, #d6e7ff 18%, #a2c7ff 50%, #99cbf8 80%, #a2d2f7 100%);
  box-shadow: inset 0 0 0 1px var(--indigo), 0 4px 10px rgba(0,0,0,.12);
}
.dl-txt h4 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.03em; line-height: 1.35; }
.dl-txt p { margin: 6px 0 0; font-size: 15px; line-height: 1.5; color: var(--mute); }
.dl-txt b { color: #000; font-weight: 600; }

.dl-foot { margin: 26px 0 0; text-align: center; font-size: 15px; color: var(--mute); }
.dl-link { display: inline-flex; align-items: center; gap: 4px; color: var(--electric); font-weight: 500; }
.dl-link svg { width: 15px; height: 15px; transition: transform .25s var(--ease-out); }
.dl-link:hover svg { transform: translateX(3px); }

/* ---------- the pictures: a Mac desktop each ---------- */
.art {
  position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden;
  container-type: inline-size;
  background: url("../img/wp-imacblue.jpg") center / cover, #a9c2f2;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 10px 26px -16px rgba(10, 40, 90, .45);
}
.art > * { font-size: calc(100cqw / 40); }
.cursor { position: absolute; width: 2.1em; height: 2.1em; pointer-events: none; filter: drop-shadow(0 .15em .25em rgba(0,0,0,.35)); }

/* Step 1 — the real DMG window, with the icon dragged across */
.art--dmg { display: grid; place-items: center; }
.art-win { position: relative; width: 88%; filter: drop-shadow(0 .9em 1.6em rgba(0,10,40,.38)); }
.art-win > img:first-child { display: block; width: 100%; height: auto; }
/* positions as % of the window screenshot: swaey icon at (25%, 53%), Applications at (75%, 53%) */
.drag-ghost {
  position: absolute; left: 25%; top: 53%; width: 19.4%; height: auto; transform: translate(-50%, -50%);
  opacity: 0; pointer-events: none; filter: drop-shadow(0 .4em .6em rgba(0,0,0,.3));
}
.drop-glow {
  position: absolute; left: 75%; top: 55.5%; width: 24%; height: 42.5%; transform: translate(-50%, -50%);
  border-radius: 14%; box-shadow: 0 0 0 .2em rgba(var(--electric-rgb), .9), 0 0 1.2em .2em rgba(var(--electric-rgb), .45);
  opacity: 0; pointer-events: none;
}
.art--dmg .cursor { left: 62%; top: 88%; }
.play .art--dmg .cursor { animation: dmgCursor 4.6s var(--ease-out) infinite; }
.play .drag-ghost { animation: dmgGhost 4.6s var(--ease-out) infinite; }
.play .drop-glow { animation: dmgGlow 4.6s ease-out infinite; }
@keyframes dmgCursor {
  0% { left: 62%; top: 88%; opacity: 0; }
  6% { opacity: 1; }
  18% { left: 25.6%; top: 53.5%; transform: scale(1); }
  23% { left: 25.6%; top: 53.5%; transform: scale(.88); }
  42% { left: 50%; top: 40%; transform: scale(.88); }
  62% { left: 75.6%; top: 53.5%; transform: scale(.88); }
  67% { left: 75.6%; top: 53.5%; transform: scale(1); }
  88% { left: 75.6%; top: 53.5%; opacity: 1; }
  100% { left: 75.6%; top: 53.5%; opacity: 0; }
}
@keyframes dmgGhost {
  0%, 21% { left: 25%; top: 53%; opacity: 0; transform: translate(-50%, -50%) scale(1); }
  24% { opacity: .78; }
  42% { left: 50%; top: 40%; opacity: .78; }
  62% { left: 75%; top: 53%; opacity: .78; transform: translate(-50%, -50%) scale(1); }
  70%, 100% { left: 75%; top: 53%; opacity: 0; transform: translate(-50%, -50%) scale(.6); }
}
@keyframes dmgGlow { 0%, 55% { opacity: 0; } 64% { opacity: 1; } 80% { opacity: 1; } 92%, 100% { opacity: 0; } }

/* Step 2 — macOS's "Not Opened" alert */
.art--alert { display: grid; place-items: center; }
.gk {
  position: relative; width: 50%; padding: 1.6em 1.4em 1.3em; border-radius: 1.2em; text-align: center;
  font-family: var(--font-sf); letter-spacing: -.01em;
  background: rgba(236, 236, 238, .9); backdrop-filter: blur(1.2em) saturate(160%); -webkit-backdrop-filter: blur(1.2em) saturate(160%);
  box-shadow: 0 0 0 .05em rgba(0,0,0,.12), 0 1.2em 2.6em rgba(0, 10, 40, .4);
}
.gk-icon { width: 4.2em; height: 4.2em; margin: 0 auto .7em; }
.gk-title { display: block; font-size: 1.05em; font-weight: 700; color: #000; }
.gk-body { margin: .45em 0 1.1em; font-size: .78em; line-height: 1.35; color: #3a3a3c; }
.gk-btns { display: flex; gap: .55em; }
.gk-btn {
  position: relative; flex: 1; display: grid; place-items: center; height: 2.2em; border-radius: .6em;
  font-size: .82em; font-weight: 500; color: #000; background: #fff; box-shadow: 0 .05em .15em rgba(0,0,0,.18);
}
.gk-btn--done { color: #fff; background: #0a84ff; box-shadow: 0 .1em .2em rgba(0, 60, 160, .35); }
.gk-btn--done .cursor, .ss-open .cursor { left: 55%; top: 55%; }
.art--alert > .cursor, .art--settings > .cursor { display: none; }
.play .gk-btn--done { animation: gkPress 4.2s ease-out infinite; }
@keyframes gkPress { 0%, 44% { filter: none; } 48%, 54% { filter: brightness(.82); } 58%, 100% { filter: none; } }

/* Step 3 — System Settings › Privacy & Security */
.art--settings { display: grid; place-items: center; }
.ss {
  position: relative; display: grid; grid-template-columns: 11.5em 1fr; grid-template-rows: 2em 1fr;
  width: 87.5%; aspect-ratio: 35 / 23.5; border-radius: 1em; overflow: hidden; font-family: var(--font-sf); letter-spacing: -.01em;
  background: #fff; box-shadow: 0 0 0 .05em rgba(0,0,0,.15), 0 1.2em 2.6em rgba(0, 10, 40, .4);
}
.ss-bar { grid-column: 1 / -1; display: flex; gap: .45em; align-items: center; padding: 0 .8em; background: #ececee; }
.ss-bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--tl-red); }
.ss-bar i:nth-child(2) { background: var(--tl-yellow); }
.ss-bar i:nth-child(3) { background: var(--tl-green); }
.ss-side { display: flex; flex-direction: column; gap: .2em; padding: .6em .5em; background: #ececee; }
.ss-side span { display: flex; align-items: center; gap: .55em; padding: .42em .55em; border-radius: .45em; font-size: .78em; color: #1c1c1e; white-space: nowrap; }
.ss-side i { width: 1.25em; height: 1.25em; flex: none; border-radius: .32em; background: var(--c); }
.ss-side .on { background: #0a84ff; color: #fff; }
.ss-main { padding: 1em 1.2em; }
.ss-h { display: block; font-size: 1.05em; font-weight: 700; color: #000; }
.ss-label { display: block; margin: 1.6em 0 .45em; font-size: .7em; font-weight: 600; color: #6e6e73; }
.ss-box { display: flex; flex-direction: column; border-radius: .65em; background: #f5f5f7; box-shadow: inset 0 0 0 .05em rgba(0,0,0,.08); }
.ss-row { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; padding: .85em .9em; }
.ss-row + .ss-row { border-top: .05em solid rgba(0,0,0,.08); }
.ss-radio { display: flex; align-items: center; gap: .45em; font-size: .72em; color: #1c1c1e; }
.ss-radio i { width: 1.05em; height: 1.05em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .1em rgba(0,0,0,.2); }
.ss-radio.on i { background: radial-gradient(circle, #fff 0 28%, #0a84ff 30%); box-shadow: none; }
.ss-box p { margin: 0; font-size: .78em; line-height: 1.35; color: #1c1c1e; }
.ss-open {
  position: relative; align-self: flex-end; padding: .4em .9em; border-radius: .45em; font-size: .78em; font-weight: 500;
  color: #000; background: #fff; box-shadow: 0 .05em .15em rgba(0,0,0,.2), 0 0 0 .05em rgba(0,0,0,.06);
}
.play .ss-open { animation: ssPress 4.2s ease-out infinite; }
@keyframes ssPress {
  0%, 30% { box-shadow: 0 .05em .15em rgba(0,0,0,.2), 0 0 0 .05em rgba(0,0,0,.06); }
  38%, 46% { box-shadow: 0 0 0 .22em rgba(var(--electric-rgb), .55), 0 .05em .15em rgba(0,0,0,.2); }
  48%, 54% { background: #0a84ff; color: #fff; }
  60%, 100% { background: #fff; color: #000; box-shadow: 0 .05em .15em rgba(0,0,0,.2), 0 0 0 .05em rgba(0,0,0,.06); }
}

/* the cursor gliding in to click (steps 2 and 3; it lives inside the button it presses) */
.gk-btn--done .cursor, .ss-open .cursor { font-size: 1.22em; opacity: 0; }
.play .gk-btn--done .cursor, .play .ss-open .cursor { animation: clickIn 4.2s var(--ease-out) infinite; }
@keyframes clickIn {
  0% { transform: translate(5em, 4em); opacity: 0; }
  10% { opacity: 1; }
  40% { transform: translate(0, 0) scale(1); opacity: 1; }
  48% { transform: translate(0, 0) scale(.85); }
  54% { transform: translate(0, 0) scale(1); }
  66% { opacity: 1; }
  76%, 100% { transform: translate(0, 0); opacity: 0; }
}

/* ---------- the one-liner ---------- */
.dl-cli { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.dl-term { position: relative; border-radius: 12px; overflow: hidden; background: #1c1c1e; box-shadow: 0 0 0 .5px rgba(0,0,0,.4), 0 18px 40px -18px rgba(0,0,0,.55); }
.dl-term-body { padding: 18px 20px 22px; font: 400 14px/1.75 var(--font-mono); color: #e5e5e7; letter-spacing: 0; min-height: 210px; }
.dl-term-line { word-break: break-all; padding-right: 74px; }
.dl-term-ps { color: #8e8e93; }
.dl-term-line code { font: inherit; color: #fff; }
.dl-term-out p { margin: 0; opacity: 0; color: #c7c7cc; }
.dl-term-out b { font-weight: 500; color: #e5e5e7; }
.dl-term-progress { position: relative; height: 4px; margin: 8px 0 10px !important; border-radius: 2px; background: #3a3a3c; overflow: hidden; }
.dl-term-progress span { position: absolute; inset: 0 auto 0 0; width: 0; background: #0f7fff; border-radius: inherit; }
.dl-term-caret { display: inline-block; width: .55em; height: 1.05em; vertical-align: -.15em; background: #e5e5e7; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.dl-term.play .dl-term-out p { animation: termIn .35s var(--ease-out) forwards; animation-delay: calc(var(--k) * .75s + .3s); }
.dl-term.play .dl-term-progress span { animation: termFill 1.2s var(--ease-out) forwards 1.45s; }
@keyframes termIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes termFill { to { width: 100%; } }
.dl-term-copy {
  position: absolute; top: 38px; right: 12px; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 999px; font-size: 13px; font-weight: 500; color: #fff; background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); transition: background .2s, transform .2s var(--ease-spring);
}
.dl-term-copy:hover { background: rgba(255,255,255,.2); }
.dl-term-copy:active { transform: scale(.95); }
.dl-term-copy svg { width: 15px; height: 15px; }
.dl-term-copy.done { background: #0f7fff; box-shadow: none; }

.dl-cli-txt h4 { margin: 0 0 12px; font-size: 22px; font-weight: 600; letter-spacing: -.04em; }
.dl-cli-txt ol { margin: 0 0 18px; padding-left: 20px; font-size: 15.5px; line-height: 1.9; color: rgba(0,0,0,.7); }
.dl-cli-txt b { color: #000; font-weight: 600; }
.dl-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl-checks li { display: flex; gap: 10px; font-size: 15px; line-height: 1.45; color: rgba(0,0,0,.7); }
.dl-checks svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--electric); }

/* ---------- smaller screens ---------- */
@media (max-width: 960px) {
  .dl-steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; gap: 34px; }
  .dl-cli { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .dl-top { flex-wrap: wrap; }
  .dl-btn { width: 100%; }
  .dl-tabs button { padding: 0 13px; font-size: 14px; }
  .dl-term-body { font-size: 12.5px; }
}

/* ---------- reduced motion: show each step's end state, no loops ---------- */
@media (prefers-reduced-motion: reduce) {
  .play .art--dmg .cursor, .play .drag-ghost, .play .drop-glow, .play .gk-btn--done,
  .play .ss-open, .play .gk-btn--done .cursor, .play .ss-open .cursor { animation: none; }
  .drop-glow, .gk-btn--done .cursor, .ss-open .cursor { opacity: 1; }
  .art--dmg .cursor { left: 75.6%; top: 53.5%; }
  .dl-term.play .dl-term-out p { animation: none; opacity: 1; }
  .dl-term.play .dl-term-progress span { animation: none; width: 100%; }
}