/* Winnow launch intro. Uses the app's tokens (css/app.css) when they are
   there and falls back to the same values so the deck also works alone.
   Every animation moves transform and opacity only. The resting style of
   each part is the last frame of its animation, so with reduced motion (no
   animation at all) each slide shows its finished picture. Loops run only on
   the slide in view (.wi-run) and stop while the window is hidden. */

:root {
  --wi-css: 1;
}

.wi {
  --wi-bg: var(--bg, #f7f8fb);
  --wi-surface: var(--surface, #ffffff);
  --wi-surface-2: var(--surface-2, #eef1f6);
  --wi-fg: var(--fg, #0f172a);
  --wi-muted: var(--muted, #5b6577);
  --wi-border: var(--border, #e3e7ee);
  --wi-accent: var(--accent, #0d9488);
  --wi-accent-fg: var(--accent-fg, #ffffff);
  --wi-ink: var(--accent-ink, #0f766e);
  --wi-ring: var(--ring, #0ea5a0);
  --wi-bad: var(--bad, #dc2626);
  --wi-gold: var(--gold, #f5c518);
  --wi-font: var(--font, "Inter Variable", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
  --wi-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --wi-shadow: 0 24px 60px -24px rgba(15, 23, 42, 0.22), 0 2px 6px rgba(15, 23, 42, 0.04);
  --wi-tile: #121418;
  --wi-tile-edge: rgba(255, 255, 255, 0.1);
  --wi-toast: #1b2233;
  --wi-toast-fg: #f3f5f9;
  --wi-amber: #e0a21b;
  --wi-green: #16a34a;
  --wi-red: #dc2626;

  /* photo palettes: sky, sun, far hill, near hill */
  --wi-a1: #cfe4ea; --wi-a2: #fbe3a8; --wi-a3: #8fbcb2; --wi-a4: #4a8a80;
  --wi-b1: #f4dfd0; --wi-b2: #fff3df; --wi-b3: #dcae90; --wi-b4: #a8705a;
  --wi-c1: #d9ddf1; --wi-c2: #ffffff; --wi-c3: #9ea8d2; --wi-c4: #5d6aa3;
  --wi-d1: #e3edd6; --wi-d2: #fbf2c4; --wi-d3: #a8c48c; --wi-d4: #6a9152;
  --wi-e1: #ecdde6; --wi-e2: #fff4e8; --wi-e3: #c79db4; --wi-e4: #8d6380;

  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--wi-bg);
  color: var(--wi-fg);
  font: 400 15px/1.5 var(--wi-font);
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  touch-action: pan-y;
  opacity: 0;
}
.wi.is-open {
  opacity: 1;
}
.wi.is-closing {
  opacity: 0;
  pointer-events: none;
}

[data-theme="dark"] .wi {
  --wi-bg: var(--bg, #0b0f19);
  --wi-surface: var(--surface, #111827);
  --wi-surface-2: var(--surface-2, #182136);
  --wi-fg: var(--fg, #e6e9ef);
  --wi-muted: var(--muted, #98a2b3);
  --wi-border: var(--border, rgba(255, 255, 255, 0.09));
  --wi-accent: var(--accent, #21dbaa);
  --wi-accent-fg: var(--accent-fg, #06251c);
  --wi-ink: var(--accent-ink, #21dbaa);
  --wi-ring: var(--ring, #21dbaa);
  --wi-bad: var(--bad, #f87171);
  --wi-shadow: 0 28px 70px -28px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --wi-tile: #1c2538;
  --wi-tile-edge: rgba(255, 255, 255, 0.14);
  --wi-toast: #e8ebf1;
  --wi-toast-fg: #0f172a;
  --wi-amber: #f2b632;
  --wi-green: #34d399;
  --wi-red: #f87171;
  --wi-a1: #22414b; --wi-a2: #e8c77e; --wi-a3: #2f6d65; --wi-a4: #1b4a45;
  --wi-b1: #4a3a35; --wi-b2: #f1d9b6; --wi-b3: #8a5f4b; --wi-b4: #5c3d31;
  --wi-c1: #2a3052; --wi-c2: #dfe3f6; --wi-c3: #4a5590; --wi-c4: #2f3866;
  --wi-d1: #2f3c2a; --wi-d2: #e7dca0; --wi-d3: #4f6d3e; --wi-d4: #34492a;
  --wi-e1: #3f3040; --wi-e2: #f0dccc; --wi-e3: #765169; --wi-e4: #4f3547;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wi {
    --wi-bg: #0b0f19;
    --wi-surface: #111827;
    --wi-surface-2: #182136;
    --wi-fg: #e6e9ef;
    --wi-muted: #98a2b3;
    --wi-border: rgba(255, 255, 255, 0.09);
    --wi-accent: #21dbaa;
    --wi-accent-fg: #06251c;
    --wi-ink: #21dbaa;
    --wi-ring: #21dbaa;
    --wi-tile: #1c2538;
    --wi-toast: #e8ebf1;
    --wi-toast-fg: #0f172a;
  }
}

.wi *,
.wi *::before,
.wi *::after {
  box-sizing: border-box;
}

/* soft accent light behind everything */
.wi-glow {
  position: absolute;
  inset: -20% -10% auto;
  height: 80%;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--wi-accent) 10%, transparent), transparent);
  pointer-events: none;
}

/* ---------- top bar ---------- */
.wi-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 0;
}
.wi-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--brand-wordmark, var(--wi-fg));
}
.wi-brand .logo {
  display: block;
}
.wi-brand .logo rect:first-child {
  fill: var(--wi-tile);
  stroke: var(--wi-tile-edge);
}

/* ---------- buttons ---------- */
.wi-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--wi-border);
  border-radius: 12px;
  background: var(--wi-surface);
  color: var(--wi-fg);
  font: 500 14px/1 var(--wi-font);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background 0.15s,
    border-color 0.15s,
    color 0.15s,
    filter 0.15s,
    opacity 0.2s;
}
.wi-btn .ic,
.wi-btn svg {
  flex: none;
  display: block;
}
.wi-btn:focus-visible,
.wi-dot:focus-visible {
  outline: 2px solid var(--wi-ring);
  outline-offset: 2px;
}
.wi-btn-quiet {
  background: transparent;
  border-color: transparent;
  color: var(--wi-muted);
}
.wi-btn-quiet:hover {
  color: var(--wi-fg);
  background: color-mix(in oklab, var(--wi-fg) 6%, transparent);
}
.wi-btn-primary {
  min-width: 112px;
  background: var(--wi-accent);
  border-color: var(--wi-accent);
  color: var(--wi-accent-fg);
  font-weight: 600;
}
.wi-btn-primary:hover {
  filter: brightness(1.07);
}
.wi-btn-primary:active {
  filter: brightness(0.96);
}
.wi-btn:disabled {
  opacity: 0;
  pointer-events: none;
}
.wi-skip {
  height: 34px;
  padding: 0 12px;
  font-size: 13px;
}

/* ---------- slides ---------- */
.wi-deck {
  position: relative;
  min-height: 0;
}
.wi-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3.4vh, 34px);
  padding: 12px 20px;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.wi-slide.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wi-art {
  position: relative;
  flex: none;
  width: min(580px, 100%, calc((100dvh - 330px) * 1.6));
  min-width: min(240px, 100%);
  aspect-ratio: 16 / 10;
  border: 1px solid var(--wi-border);
  border-radius: 22px;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in oklab, var(--wi-accent) 7%, transparent), transparent 60%),
    var(--wi-surface);
  box-shadow: var(--wi-shadow);
  overflow: hidden;
}
.wi-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  font-family: var(--wi-font);
}

.wi-copy {
  max-width: 34em;
}
.wi-h {
  margin: 0;
  font-size: clamp(24px, 3.4vw, 32px);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.022em;
  color: var(--wi-fg);
}
.wi-p {
  margin: 10px auto 0;
  max-width: 30em;
  font-size: 16px;
  line-height: 1.55;
  color: var(--wi-muted);
  text-wrap: pretty;
}
.wi-keys {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--wi-muted);
}
.wi-k {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.wi-k-l {
  margin-left: 3px;
}
.wi-k-sep {
  margin: 0 1px;
}
.wi-kbd {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border: 1px solid color-mix(in oklab, var(--wi-fg) 16%, var(--wi-surface));
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--wi-surface);
  color: var(--wi-fg);
  font: 500 12px/1 var(--wi-font);
}

/* ---------- bottom bar ---------- */
.wi-nav {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  padding: 8px 20px calc(20px + env(safe-area-inset-bottom, 0px));
}
.wi-back {
  justify-self: start;
}
.wi-next {
  justify-self: end;
}
.wi-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.wi-dots {
  display: flex;
  gap: 2px;
}
.wi-dot {
  position: relative;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 11px;
  background: none;
  cursor: pointer;
}
.wi-dot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 4px;
  background: color-mix(in oklab, var(--wi-fg) 20%, transparent);
  transition:
    transform 0.3s var(--wi-ease),
    background 0.3s;
}
.wi-dot:hover::after {
  background: color-mix(in oklab, var(--wi-fg) 40%, transparent);
}
.wi-dot[aria-current]::after {
  background: var(--wi-accent);
  transform: scaleX(2.4);
}
.wi-count-t {
  font-size: 12px;
  color: var(--wi-muted);
  font-variant-numeric: tabular-nums;
}

.wi-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- illustration parts ---------- */
/* animated parts turn and scale about their own centre; groups placed
   with a transform attribute keep the default origin */
.wi-svg g:not([transform]),
.wi-ring circle {
  transform-box: fill-box;
  transform-origin: center;
}
.wi-svg text {
  fill: var(--wi-fg);
  font-size: 12px;
  font-weight: 500;
}

.wi-ph .sky { fill: var(--wi-a1); }
.wi-ph .sun { fill: var(--wi-a2); }
.wi-ph .h1 { fill: var(--wi-a3); }
.wi-ph .h2 { fill: var(--wi-a4); }
.wi-ph-b .sky { fill: var(--wi-b1); }
.wi-ph-b .sun { fill: var(--wi-b2); }
.wi-ph-b .h1 { fill: var(--wi-b3); }
.wi-ph-b .h2 { fill: var(--wi-b4); }
.wi-ph-c .sky { fill: var(--wi-c1); }
.wi-ph-c .sun { fill: var(--wi-c2); }
.wi-ph-c .h1 { fill: var(--wi-c3); }
.wi-ph-c .h2 { fill: var(--wi-c4); }
.wi-ph-d .sky { fill: var(--wi-d1); }
.wi-ph-d .sun { fill: var(--wi-d2); }
.wi-ph-d .h1 { fill: var(--wi-d3); }
.wi-ph-d .h2 { fill: var(--wi-d4); }
.wi-ph-e .sky { fill: var(--wi-e1); }
.wi-ph-e .sun { fill: var(--wi-e2); }
.wi-ph-e .h1 { fill: var(--wi-e3); }
.wi-ph-e .h2 { fill: var(--wi-e4); }
.wi-ph .ghost {
  opacity: 0.42;
}
.wi-ph .haze {
  fill: var(--wi-surface);
  opacity: 0.16;
}
.wi-ph-edge {
  fill: none;
  stroke: color-mix(in oklab, var(--wi-fg) 10%, transparent);
  stroke-width: 1;
}

.wi-fold .back {
  fill: color-mix(in oklab, var(--wi-muted) 34%, var(--wi-surface));
}
.wi-fold .front {
  fill: color-mix(in oklab, var(--wi-muted) 18%, var(--wi-surface));
  stroke: color-mix(in oklab, var(--wi-muted) 30%, transparent);
}
.wi-fold-k .back {
  fill: color-mix(in oklab, var(--wi-accent) 45%, var(--wi-surface));
}
.wi-fold-k .front {
  fill: color-mix(in oklab, var(--wi-accent) 22%, var(--wi-surface));
  stroke: color-mix(in oklab, var(--wi-accent) 45%, transparent);
}
.wi-lbl {
  fill: var(--wi-muted) !important;
  font-size: 12.5px !important;
}

.wi-key .base {
  fill: color-mix(in oklab, var(--wi-fg) 18%, var(--wi-surface));
}
.wi-key .top {
  fill: var(--wi-surface);
  stroke: color-mix(in oklab, var(--wi-fg) 16%, var(--wi-surface));
}
.wi-key .lit {
  fill: var(--wi-accent);
  opacity: 0;
}
.wi-key-x .lit {
  fill: var(--wi-bad);
}
.wi-key .kl {
  font-size: 13px;
  font-weight: 600;
}

.wi-count .dot {
  fill: var(--wi-accent);
}
.wi-count text {
  fill: var(--wi-accent-fg);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.wi-cnt-s .dot {
  fill: color-mix(in oklab, var(--wi-muted) 80%, var(--wi-fg));
}
.wi-cnt-s text {
  fill: var(--wi-surface);
}
.wi-count .old {
  opacity: 0;
}

.wi-badge circle {
  fill: var(--wi-accent);
  stroke: var(--wi-surface);
  stroke-width: 2.5;
}
.wi-badge path {
  fill: none;
  stroke: var(--wi-accent-fg);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wi-badge-skip circle {
  fill: var(--wi-bad);
}
.wi-badge-skip path {
  stroke: #fff;
}
.wi-card {
  filter: drop-shadow(0 10px 14px rgba(15, 23, 42, 0.16));
}
.wi-card-b {
  opacity: 0;
}
.wi-card-a .wi-badge {
  opacity: 0;
}

.wi-touch .tip {
  fill: color-mix(in oklab, var(--wi-fg) 30%, transparent);
  stroke: var(--wi-surface);
  stroke-width: 2;
}
.wi-touch .halo {
  fill: color-mix(in oklab, var(--wi-fg) 10%, transparent);
}
.wi-touch {
  opacity: 0;
}
.wi-swipe-hint path,
.wi-swipe-hint line {
  fill: none;
  stroke: var(--wi-muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.4;
}

/* welcome */
.wi-lg-tile rect {
  fill: var(--wi-tile);
  stroke: var(--wi-tile-edge);
  stroke-width: 0.5;
}
.wi-sq rect {
  fill: #f7f6f3;
  opacity: 0.35;
}
.wi-lg-pick rect {
  fill: #21dbaa;
}
.wi-lg-check path {
  fill: none;
  stroke: #06251c;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wi-ring circle {
  fill: none;
  stroke: var(--wi-accent);
  stroke-width: 1.2;
  opacity: 0;
}
.wi-float {
  opacity: 0.92;
}
.wi-chip .pill {
  fill: color-mix(in oklab, var(--wi-accent) 12%, var(--wi-surface));
  stroke: color-mix(in oklab, var(--wi-accent) 30%, transparent);
}
.wi-chip .shield {
  fill: none;
  stroke: var(--wi-ink);
  stroke-width: 2;
  stroke-linejoin: round;
}
.wi-chip text {
  fill: var(--wi-ink);
  font-size: 12px;
  font-weight: 600;
}

/* open a folder */
.wi-win .frame {
  fill: var(--wi-bg);
  stroke: var(--wi-border);
}
.wi-win .bar {
  fill: var(--wi-surface-2);
}
.wi-win .rule {
  stroke: var(--wi-border);
}
.wi-win .tl {
  fill: color-mix(in oklab, var(--wi-fg) 18%, transparent);
}
.wi-win .ttl {
  fill: var(--wi-muted);
  font-size: 11px;
}
.wi-drop {
  opacity: 0;
}

/* nothing is lost */
.wi-slot {
  fill: none;
  stroke: color-mix(in oklab, var(--wi-fg) 22%, transparent);
  stroke-width: 1.5;
  stroke-dasharray: 5 5;
  opacity: 0;
}
.wi-halo rect {
  fill: none;
  stroke: var(--wi-accent);
  stroke-width: 2;
  opacity: 0.55;
}
.wi-toast .pill {
  fill: var(--wi-toast);
}
.wi-toast .msg {
  fill: var(--wi-toast-fg);
  font-size: 12.5px;
}
.wi-undo-btn .btn {
  fill: color-mix(in oklab, var(--wi-toast-fg) 12%, transparent);
}
.wi-undo-btn .bt {
  fill: var(--wi-toast-fg);
  font-weight: 600;
  font-size: 12.5px;
}
.wi-undo-btn .k rect {
  fill: none;
  stroke: color-mix(in oklab, var(--wi-toast-fg) 40%, transparent);
}
.wi-undo-btn .k text {
  fill: var(--wi-toast-fg);
  opacity: 0.75;
  font-size: 10px;
}

/* compare */
.wi-loupe .lens {
  fill: rgba(255, 255, 255, 0.16);
}
.wi-loupe .rim {
  fill: none;
  stroke: #fff;
  stroke-width: 2.5;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
}
.wi-loupe .cross {
  stroke: #fff;
  stroke-width: 1.5;
  stroke-linecap: round;
  opacity: 0.85;
}
.wi-star-o {
  fill: none;
  stroke: color-mix(in oklab, var(--wi-fg) 22%, transparent);
  stroke-width: 1.6;
  stroke-linejoin: round;
}
.wi-star path {
  fill: var(--wi-gold);
  stroke: color-mix(in oklab, var(--wi-gold) 80%, #8a5a00);
  stroke-width: 1;
  stroke-linejoin: round;
}

/* pro */
.wi-pro {
  fill: color-mix(in oklab, var(--wi-accent) 14%, var(--wi-surface));
  stroke: color-mix(in oklab, var(--wi-accent) 35%, transparent);
}
.wi-pro-t {
  fill: var(--wi-ink) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
}
.wi-burst {
  filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.14));
}
.wi-burst-0 {
  transform: translate(calc(var(--dx) - 10px), 6px) rotate(-7deg);
}
.wi-burst-2 {
  transform: translate(calc(var(--dx) + 9px), 4px) rotate(5deg);
}
.wi-burst-3 {
  transform: translate(calc(var(--dx) + 16px), 9px) rotate(10deg);
}
.wi-burst-1 {
  transform: translate(var(--dx), 0) scale(1.1);
}
.wi-fdot circle,
.wi-lg-dot {
  stroke: var(--wi-surface);
  stroke-width: 1.5;
}
.wi-fdot-green circle,
.wi-lg-dot.wi-fdot-green {
  fill: var(--wi-green);
}
.wi-fdot-amber circle,
.wi-lg-dot.wi-fdot-amber {
  fill: var(--wi-amber);
}
.wi-fdot-red circle,
.wi-lg-dot.wi-fdot-red {
  fill: var(--wi-red);
}
.wi-sharpest .pill {
  fill: var(--wi-accent);
}
.wi-sharpest .ck {
  fill: none;
  stroke: var(--wi-accent-fg);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wi-sharpest text {
  fill: var(--wi-accent-fg);
  font-weight: 600;
}
.wi-lgd {
  fill: var(--wi-muted) !important;
  font-size: 11.5px !important;
}

/* ---------- motion (only when the viewer is fine with it) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .wi {
    transition: opacity 0.24s var(--wi-ease);
  }
  .wi-slide {
    transform: translateX(28px);
    transition:
      opacity 0.32s var(--wi-ease),
      transform 0.5s var(--wi-ease),
      visibility 0s linear 0.5s;
  }
  .wi-slide.is-before {
    transform: translateX(-28px);
  }
  .wi-slide.is-active {
    transform: none;
    transition:
      opacity 0.42s var(--wi-ease) 0.06s,
      transform 0.6s var(--wi-ease),
      visibility 0s;
  }
  .wi-lite .wi-slide {
    transform: none;
  }

  /* 1. welcome: the mark builds itself, then breathes */
  .wi-run .wi-lg-tile { animation: wi-pop 0.7s var(--wi-ease) both; }
  .wi-run .wi-sq1 { animation: wi-drop-in 0.6s var(--wi-ease) 0.25s both; }
  .wi-run .wi-sq2 { animation: wi-drop-in 0.6s var(--wi-ease) 0.38s both; }
  .wi-run .wi-sq3 { animation: wi-drop-in 0.6s var(--wi-ease) 0.51s both; }
  .wi-run .wi-lg-pick { animation: wi-pop-big 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.75s both; }
  .wi-run .wi-lg-check { animation: wi-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.1s both; }
  .wi-run .wi-chip { animation: wi-rise 0.7s var(--wi-ease) 1.3s both; }
  .wi:not(.wi-lite) .wi-run .wi-ring circle { animation: wi-ring 4s cubic-bezier(0.2, 0.6, 0.3, 1) 1.2s infinite both; }
  .wi:not(.wi-lite) .wi-run .wi-r2 circle { animation-delay: 3.2s; }
  .wi-run .wi-float { animation: wi-fade-in 0.9s var(--wi-ease) 0.4s both; }
  .wi:not(.wi-lite) .wi-run .wi-float > g { animation: wi-float 4s ease-in-out 1.3s infinite both; }
  .wi:not(.wi-lite) .wi-run .wi-f2 > g { animation-delay: 2.3s; }
  .wi:not(.wi-lite) .wi-run .wi-f3 > g { animation-delay: 1.8s; }
  .wi:not(.wi-lite) .wi-run .wi-f4 > g { animation-delay: 2.8s; }

  /* 2. a folder lands on the window and fans out into a grid */
  .wi-run .wi-drop { animation: wi-folder 4s infinite; }
  .wi-run .wi-thumb { animation: wi-fan 4s infinite; animation-fill-mode: both; }
  .wi-lite .wi-run .wi-thumb { animation-name: wi-fan-lite; animation-delay: 0s !important; }

  /* 3. keep and skip */
  .wi-run .wi-card-a { animation: wi-card-keep 4s infinite; }
  .wi-run .wi-card-a .wi-badge { animation: wi-badge-a 4s infinite; }
  .wi-run .wi-card-b { animation: wi-card-skip 4s infinite; }
  .wi-run .wi-card-b .wi-badge { animation: wi-badge-b 4s infinite; }
  .wi-run .wi-key-s .cap { animation: wi-press-a 4s infinite; }
  .wi-run .wi-key-s .lit { animation: wi-lit-a 4s infinite; }
  .wi-run .wi-key-x .cap { animation: wi-press-b 4s infinite; }
  .wi-run .wi-key-x .lit { animation: wi-lit-b 4s infinite; }
  .wi-run .wi-bump-k { animation: wi-bump-a 4s infinite; }
  .wi-run .wi-bump-s { animation: wi-bump-b 4s infinite; }
  .wi-run .wi-cnt-k .old { animation: wi-old-a 4s infinite; }
  .wi-run .wi-cnt-k .new { animation: wi-new-a 4s infinite; }
  .wi-run .wi-cnt-s .old { animation: wi-old-b 4s infinite; }
  .wi-run .wi-cnt-s .new { animation: wi-new-b 4s infinite; }
  .wi-run .wi-touch-a { animation: wi-touch-a 4s infinite; }
  .wi-run .wi-touch-b { animation: wi-touch-b 4s infinite; }

  /* 4. skipped, then brought back */
  .wi-run .wi-return { animation: wi-return 4s infinite; }
  .wi-run .wi-slot { animation: wi-slot 4s infinite; }
  .wi-run .wi-toast { animation: wi-toast 4s infinite; }
  .wi-run .wi-undo-btn { animation: wi-tap 4s infinite; }
  .wi-run .wi-bump-u { animation: wi-bump-u 4s infinite; }
  .wi-run .wi-halo { animation: wi-halo 4s infinite; }
  .wi-lite .wi-run .wi-halo { animation: none; opacity: 0; }

  /* 5. compare: a synced loupe sweeps both, then stars land */
  .wi:not(.wi-lite) .wi-run .wi-loupe { animation: wi-sweep 4s ease-in-out infinite; }
  .wi-run .wi-star { animation: wi-star 4s infinite; }

  /* 6. a burst folds into its sharpest frame */
  .wi-run .wi-burst-0 { animation: wi-b0 4s infinite; }
  .wi-run .wi-burst-1 { animation: wi-b1 4s infinite; }
  .wi-run .wi-burst-2 { animation: wi-b2 4s infinite; }
  .wi-run .wi-burst-3 { animation: wi-b3 4s infinite; }
  .wi-run .wi-fdot { animation: wi-dotpop 4s infinite; }
  .wi-run .wi-sharpest { animation: wi-sharpest 4s infinite; }
  .wi-run .wi-legend { animation: wi-legend 4s infinite; }

  /* freeze a slide that is fading out, and everything while hidden */
  .wi-hold *,
  .wi-paused * {
    animation-play-state: paused !important;
  }
}

@keyframes wi-fade-in {
  from { opacity: 0; }
}
@keyframes wi-pop {
  from { opacity: 0; transform: scale(0.6); }
}
@keyframes wi-pop-big {
  from { opacity: 0; transform: scale(0.2); }
}
@keyframes wi-drop-in {
  from { opacity: 0; transform: translateY(-9px); }
}
@keyframes wi-rise {
  from { opacity: 0; transform: translateY(10px); }
}
@keyframes wi-ring {
  0% { opacity: 0; transform: scale(0.85); }
  15% { opacity: 0.45; }
  70%, 100% { opacity: 0; transform: scale(1.65); }
}
@keyframes wi-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes wi-folder {
  0% { opacity: 0; transform: translateY(-150px) scale(0.9); }
  8% { opacity: 1; }
  20% { opacity: 1; transform: translateY(0) scale(1); }
  24% { transform: translateY(0) scale(1.08, 0.9); }
  28% { opacity: 1; transform: translateY(0) scale(1); }
  38%, 100% { opacity: 0; transform: translateY(0) scale(0.5); }
}
@keyframes wi-fan {
  0%, 30% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.3); }
  50%, 88% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes wi-fan-lite {
  0%, 30% { opacity: 0; }
  45%, 88% { opacity: 1; }
  100% { opacity: 0; }
}

/* keep: 0-46%, skip: 50-96% */
@keyframes wi-card-keep {
  0% { opacity: 0; transform: scale(0.92); }
  8%, 20% { opacity: 1; transform: none; }
  40% { opacity: 0.9; transform: translate(146px, 10px) scale(0.36); }
  44%, 100% { opacity: 0; transform: translate(146px, 10px) scale(0.3); }
}
@keyframes wi-card-skip {
  0%, 48% { opacity: 0; transform: scale(0.92); }
  56%, 68% { opacity: 1; transform: none; }
  88% { opacity: 0.9; transform: translate(-146px, 10px) scale(0.36); }
  92%, 100% { opacity: 0; transform: translate(-146px, 10px) scale(0.3); }
}
@keyframes wi-badge-a {
  0%, 15% { opacity: 0; transform: scale(0.4); }
  20%, 100% { opacity: 1; transform: none; }
}
@keyframes wi-badge-b {
  0%, 63% { opacity: 0; transform: scale(0.4); }
  68%, 100% { opacity: 1; transform: none; }
}
@keyframes wi-press-a {
  0%, 14%, 22%, 100% { transform: none; }
  16%, 20% { transform: translateY(2px); }
}
@keyframes wi-lit-a {
  0%, 14%, 26%, 100% { opacity: 0; }
  16%, 20% { opacity: 0.22; }
}
@keyframes wi-press-b {
  0%, 62%, 70%, 100% { transform: none; }
  64%, 68% { transform: translateY(2px); }
}
@keyframes wi-lit-b {
  0%, 62%, 74%, 100% { opacity: 0; }
  64%, 68% { opacity: 0.22; }
}
@keyframes wi-bump-a {
  0%, 38%, 48%, 100% { transform: none; }
  42% { transform: scale(1.07); }
}
@keyframes wi-bump-b {
  0%, 86%, 96%, 100% { transform: none; }
  90% { transform: scale(1.07); }
}
@keyframes wi-old-a {
  0%, 40% { opacity: 1; transform: none; }
  44%, 96% { opacity: 0; transform: translateY(-7px); }
  100% { opacity: 1; transform: none; }
}
@keyframes wi-new-a {
  0%, 40% { opacity: 0; transform: translateY(7px); }
  44%, 94% { opacity: 1; transform: none; }
  98%, 100% { opacity: 0; transform: none; }
}
@keyframes wi-old-b {
  0%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-7px); }
}
@keyframes wi-new-b {
  0%, 88% { opacity: 0; transform: translateY(7px); }
  92%, 96% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes wi-touch-a {
  0%, 10% { opacity: 0; transform: none; }
  14% { opacity: 1; transform: none; }
  28% { opacity: 1; transform: translateX(70px); }
  34%, 100% { opacity: 0; transform: translateX(90px); }
}
@keyframes wi-touch-b {
  0%, 58% { opacity: 0; transform: none; }
  62% { opacity: 1; transform: none; }
  76% { opacity: 1; transform: translateX(-70px); }
  82%, 100% { opacity: 0; transform: translateX(-90px); }
}

/* undo: skip 0-24%, toast 26%, tap 48%, back 56-74%, settle */
@keyframes wi-return {
  0%, 6% { opacity: 1; transform: none; }
  22% { opacity: 0.9; transform: translate(-164px, 120px) scale(0.32); }
  25%, 54% { opacity: 0; transform: translate(-164px, 120px) scale(0.3); }
  58% { opacity: 0.9; transform: translate(-164px, 120px) scale(0.34); }
  74%, 100% { opacity: 1; transform: none; }
}
@keyframes wi-slot {
  0%, 8% { opacity: 0; }
  16%, 66% { opacity: 1; }
  74%, 100% { opacity: 0; }
}
@keyframes wi-toast {
  0%, 22% { opacity: 0; transform: translateY(14px); }
  30%, 62% { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translateY(8px); }
}
@keyframes wi-tap {
  0%, 44%, 52%, 100% { transform: none; }
  47%, 49% { transform: scale(0.92); }
}
@keyframes wi-bump-u {
  0%, 18%, 30%, 52%, 62%, 100% { transform: none; }
  24%, 56% { transform: scale(1.07); }
}
@keyframes wi-halo {
  0%, 72% { opacity: 0; transform: scale(0.96); }
  78% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: scale(1.04); }
}

@keyframes wi-sweep {
  0% { opacity: 0; transform: translate(-40px, -28px); }
  8% { opacity: 1; transform: translate(-40px, -28px); }
  30% { transform: translate(32px, -14px); }
  48% { transform: translate(-6px, 26px); }
  62%, 90% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes wi-star {
  0%, 52% { opacity: 0; transform: scale(0.3); }
  60% { opacity: 1; transform: scale(1.18); }
  65%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}

/* bursts: row 0-30%, fold 32-54%, badge 58%, hold, fade 92-100% */
@keyframes wi-b0 {
  0% { opacity: 0; transform: none; }
  8%, 32% { opacity: 1; transform: none; }
  54%, 92% { opacity: 1; transform: translate(calc(var(--dx) - 10px), 6px) rotate(-7deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx) - 10px), 6px) rotate(-7deg); }
}
@keyframes wi-b2 {
  0% { opacity: 0; transform: none; }
  8%, 32% { opacity: 1; transform: none; }
  54%, 92% { opacity: 1; transform: translate(calc(var(--dx) + 9px), 4px) rotate(5deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx) + 9px), 4px) rotate(5deg); }
}
@keyframes wi-b3 {
  0% { opacity: 0; transform: none; }
  8%, 32% { opacity: 1; transform: none; }
  54%, 92% { opacity: 1; transform: translate(calc(var(--dx) + 16px), 9px) rotate(10deg); }
  100% { opacity: 0; transform: translate(calc(var(--dx) + 16px), 9px) rotate(10deg); }
}
@keyframes wi-b1 {
  0% { opacity: 0; transform: none; }
  8%, 34% { opacity: 1; transform: none; }
  54%, 92% { opacity: 1; transform: translate(var(--dx), 0) scale(1.1); }
  100% { opacity: 0; transform: translate(var(--dx), 0) scale(1.1); }
}
@keyframes wi-dotpop {
  0%, 12% { opacity: 0; transform: scale(0.2); }
  20%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes wi-sharpest {
  0%, 54% { opacity: 0; transform: translateY(8px) scale(0.94); }
  62%, 92% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: none; }
}
@keyframes wi-legend {
  0%, 14% { opacity: 0; }
  24%, 92% { opacity: 1; }
  100% { opacity: 0; }
}

/* ---------- phones and short windows ---------- */
@media (max-width: 560px) {
  .wi-top {
    padding-left: 16px;
    padding-right: 10px;
  }
  .wi-slide {
    justify-content: safe center;
    padding: 12px 16px 24px;
    gap: 22px;
  }
  .wi-phone .wi-lbl,
  .wi-phone .wi-lgd {
    font-size: 15px !important;
  }
  .wi-art {
    width: 100%;
    border-radius: 18px;
  }
  .wi-h {
    font-size: 24px;
  }
  .wi-p {
    font-size: 15.5px;
  }
  .wi-nav {
    padding-left: 12px;
    padding-right: 16px;
    gap: 6px;
  }
  .wi-btn-primary {
    min-width: 0;
    padding: 0 14px;
  }
  .wi-back {
    padding: 0 10px;
  }
  .wi-dot {
    width: 18px;
  }
}
@media (max-width: 360px) {
  .wi-back span {
    display: none;
  }
}
@media (max-height: 520px) and (min-width: 561px) {
  .wi-slide {
    flex-direction: row;
    text-align: left;
    gap: 28px;
  }
  .wi-art {
    width: min(46vw, calc((100dvh - 140px) * 1.6));
  }
  .wi-keys {
    justify-content: flex-start;
  }
  .wi-p {
    margin-left: 0;
  }
}