/* First-visit walkthrough. Each scene sits on a 440 × 220 canvas, scaled to the stage by tour.js.
   Every animated element's resting style is a still that reads on its own, so with reduced motion each scene still makes sense. */

.tour {
  border: 0; padding: 0; width: min(520px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  border-radius: 20px; color: var(--ink); background: var(--paper); overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(24, 33, 31, .08), 0 32px 80px -24px rgba(24, 33, 31, .38), 0 4px 14px -4px rgba(24, 33, 31, .08);
}
.tour[open] { animation: tour-in 420ms cubic-bezier(.2, .9, .25, 1); }
.tour::backdrop { background: rgba(24, 33, 31, .3); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: tour-fade 320ms ease; }
@keyframes tour-in { from { opacity: 0; transform: translateY(14px) scale(.975); } }
@keyframes tour-fade { from { opacity: 0; } }

.tour-stage {
  position: relative; height: calc(220px * var(--s, 1)); overflow: hidden;
  border-bottom: .5px solid var(--rule);
  background:
    radial-gradient(circle at center, rgba(24, 33, 31, .075) .7px, transparent 1px) 0 0 / 14px 14px,
    radial-gradient(120% 100% at 50% 0%, #fdfdfd 0%, var(--mist) 75%);
}
.tour-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(90% 80% at 50% 45%, transparent 55%, rgba(245, 246, 245, .9) 100%);
}
.tour-canvas {
  position: absolute; left: 50%; top: 0; width: 440px; height: 220px;
  transform: translateX(-50%) scale(var(--s, 1)); transform-origin: top center;
}
.tour-close { position: absolute; top: 10px; right: 10px; z-index: 2; }

.scene { position: absolute; inset: 0; display: none; --d: 7s; }
.scene.on, .scene.leave { display: block; }
.scene.enter { animation: scene-in 460ms cubic-bezier(.2, .9, .25, 1); }
.scene.leave { animation: scene-out 220ms ease-in forwards; }
@keyframes scene-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } }
@keyframes scene-out { to { opacity: 0; transform: translateX(calc(var(--dir, 1) * -36px)); } }

.t-loop { position: absolute; inset: 0; animation: t-loop var(--d) linear infinite; }
@keyframes t-loop { 0% { opacity: 0; } 3%, 94% { opacity: 1; } 100% { opacity: 0; } }

.tour-copy { padding: 22px 28px 0; overflow: hidden; }
.tour-text { display: none; }
.tour-text.on { display: block; }
.tour-text.enter { animation: text-in 420ms cubic-bezier(.2, .9, .25, 1) 60ms both; }
@keyframes text-in { from { opacity: 0; transform: translateY(8px); } }
.tour-count { margin: 0 0 8px; font-size: 12px; font-weight: 500; color: var(--pine); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.tour h2 { margin: 0 0 8px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -0.022em; }
.tour-body { margin: 0; color: var(--slate); font-size: 15px; line-height: 1.55; text-wrap: pretty; }
.tour-note { margin: 12px 0 0; color: var(--slate); font-size: 13px; }

.tour-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 24px 28px 24px; }
.tour-dots { display: flex; gap: 2px; margin-left: -6px; }
.tour-dots button { padding: 10px 4px; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.tour-dots button:focus-visible { outline: 2px solid var(--pine); outline-offset: 0; }
.tour-dots i {
  display: block; width: 6px; height: 6px; border-radius: 3px; background: var(--rule-strong);
  transition: width 360ms cubic-bezier(.2, .9, .25, 1), background-color 200ms ease;
}
.tour-dots button:hover i { background: #b9bfbc; }
.tour-dots .done i { background: #9fbdb6; }
.tour-dots [aria-selected="true"] i { width: 22px; background: var(--pine); }
.tour-btns { display: flex; gap: 8px; }
.tour-back { transition: opacity 160ms ease; }
.tour-back.gone { opacity: 0; pointer-events: none; }
.tour-next { min-width: 92px; }

/* ---------- mini portal ---------- */

.m-win {
  position: absolute; background: var(--paper); border: .5px solid var(--rule-strong); border-radius: 10px; overflow: hidden;
  font-size: 11px; line-height: 1.2;
  box-shadow: 0 14px 30px -16px rgba(24, 33, 31, .28), 0 1px 2px rgba(24, 33, 31, .04);
}
.m-head { height: 40px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 10px 0 12px; border-bottom: .5px solid var(--rule); }
.m-title { font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-btns { display: flex; gap: 5px; }
.m-btn { display: inline-flex; align-items: center; gap: 3px; height: 22px; padding: 0 8px 0 6px; border-radius: 6px; font-size: 10px; font-weight: 500; white-space: nowrap; }
.m-btn svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
.m-outline { background: var(--paper); border: .5px solid var(--rule-strong); }
.m-outline svg { opacity: .75; }
.m-primary {
  color: #fff; border: .5px solid var(--pine-edge);
  background: linear-gradient(180deg, var(--pine-hi), var(--pine));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 1px rgba(20, 62, 54, .14);
}
.m-row {
  position: relative; height: 26px; display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-top: .5px solid var(--rule); background: var(--paper); overflow: hidden;
}
.m-head + .m-row { border-top-color: transparent; }
.m-kind { width: 14px; height: 14px; flex-shrink: 0; display: grid; place-items: center; color: var(--slate); }
.m-kind svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; }
.m-kind.folder { color: var(--pine); }
.m-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row:has(.folder) .m-label { font-weight: 500; }
.m-size { color: var(--slate); font-size: 10px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.m-caption { position: absolute; top: 30px; font-size: 10.5px; font-weight: 500; color: var(--slate); }

.t-cursor { display: block; width: 15px; height: 17px; overflow: visible; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .22)); }
.t-cursor path { fill: var(--ink); stroke: #fff; stroke-width: 1.1; stroke-linejoin: round; }

/* ---------- 1. same files on both sides ---------- */

.scene-sync { --d: 6.5s; }
.sync-a, .sync-b { top: 50px; width: 168px; }
.sync-a { left: 30px; }
.sync-b { left: 242px; }
.sync-new-a { animation: sync-a var(--d) cubic-bezier(.2, .9, .25, 1) infinite; }
.sync-new-b { animation: sync-b var(--d) cubic-bezier(.2, .9, .25, 1) infinite; }
@keyframes sync-a {
  0%, 12% { height: 0; opacity: 0; background: var(--pine-wash); }
  19% { height: 26px; opacity: 1; background: var(--pine-wash); }
  52%, 100% { height: 26px; opacity: 1; background: var(--paper); }
}
@keyframes sync-b {
  0%, 44% { height: 0; opacity: 0; background: var(--pine-wash); }
  51% { height: 26px; opacity: 1; background: var(--pine-wash); }
  80%, 100% { height: 26px; opacity: 1; background: var(--paper); }
}
.sync-link { position: absolute; left: 198px; width: 44px; top: 103px; height: 0; }
.sync-link i { position: absolute; left: 2px; right: 2px; top: 0; border-top: 1px dashed #c4cac7; }
.sync-link::after {
  content: ""; position: absolute; left: 0; top: -2.5px; width: 5px; height: 5px; border-radius: 50%; background: var(--pine);
  opacity: 0; animation: sync-dot var(--d) ease-in-out infinite;
}
@keyframes sync-dot {
  0%, 20% { transform: translateX(0); opacity: 0; }
  23% { opacity: 1; }
  41% { transform: translateX(39px); opacity: 1; }
  44%, 100% { transform: translateX(39px); opacity: 0; }
}
.sync-link b {
  position: absolute; left: 10px; top: -12px; width: 24px; height: 24px; border-radius: 50%; z-index: 1;
  display: grid; place-items: center; background: var(--paper); color: var(--pine);
  border: .5px solid var(--rule-strong); box-shadow: 0 2px 6px -2px rgba(24, 33, 31, .18);
  animation: sync-badge var(--d) cubic-bezier(.3, .7, .3, 1) infinite;
}
.sync-link svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
@keyframes sync-badge {
  0%, 20% { transform: rotate(0) scale(1); background: var(--paper); color: var(--pine); border-color: var(--rule-strong); }
  25% { transform: rotate(20deg) scale(1.14); background: var(--pine); color: #fff; border-color: var(--pine-edge); }
  42% { transform: rotate(180deg) scale(1.14); background: var(--pine); color: #fff; border-color: var(--pine-edge); }
  50%, 100% { transform: rotate(180deg) scale(1); background: var(--paper); color: var(--pine); border-color: var(--rule-strong); }
}

/* ---------- 2. drop to upload ---------- */

.scene-upload { --d: 7s; }
.up-win { left: 70px; top: 30px; width: 300px; }
.up-new { animation: up-row var(--d) cubic-bezier(.2, .9, .25, 1) infinite; }
@keyframes up-row {
  0%, 45% { height: 0; opacity: 0; background: var(--pine-wash); }
  51% { height: 26px; opacity: 1; background: var(--pine-wash); }
  72%, 100% { height: 26px; opacity: 1; background: var(--paper); }
}
.up-new .m-label { animation: up-label var(--d) linear infinite; }
@keyframes up-label { 0%, 76% { color: var(--slate); } 79%, 100% { color: var(--ink); } }
.up-new .m-size { display: grid; justify-items: end; }
.up-going, .up-done { grid-area: 1 / 1; }
.up-going { opacity: 0; animation: up-going var(--d) linear infinite; }
.up-done { animation: up-done var(--d) linear infinite; }
@keyframes up-going { 0%, 76% { opacity: 1; } 79%, 100% { opacity: 0; } }
@keyframes up-done { 0%, 76% { opacity: 0; } 79%, 100% { opacity: 1; } }
.up-bar {
  position: absolute; left: 32px; right: 0; bottom: 0; height: 2px; background: var(--pine);
  transform-origin: left; opacity: 0; animation: up-bar var(--d) linear infinite;
}
@keyframes up-bar {
  0%, 50% { transform: scaleX(0); opacity: 1; }
  58% { transform: scaleX(.38); }
  67% { transform: scaleX(.66); }
  76% { transform: scaleX(1); opacity: 1; }
  82%, 100% { transform: scaleX(1); opacity: 0; }
}
.up-ring {
  position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  display: grid; place-items: end center; padding-bottom: 10px;
  box-shadow: inset 0 0 0 1.5px var(--pine); background: rgba(232, 241, 238, .55);
  opacity: 0; animation: up-ring var(--d) ease infinite;
}
.up-ring span {
  background: var(--pine); color: #fff; font-size: 10px; font-weight: 500; padding: 5px 10px; border-radius: 999px;
  box-shadow: 0 6px 14px -6px rgba(20, 62, 54, .6); animation: up-pill var(--d) cubic-bezier(.2, .9, .25, 1) infinite;
}
@keyframes up-ring { 0%, 24% { opacity: 0; } 30%, 42% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes up-pill { 0%, 24% { transform: translateY(5px); } 32%, 100% { transform: none; } }
.up-drag { position: absolute; left: 136px; top: 80px; opacity: 0; animation: up-drag var(--d) cubic-bezier(.45, .05, .25, 1) infinite; }
@keyframes up-drag {
  0% { transform: translate(200px, 140px); opacity: 0; }
  6% { transform: translate(186px, 128px); opacity: 1; }
  36%, 46% { transform: translate(0, 0); opacity: 1; }
  66%, 100% { transform: translate(170px, 96px); opacity: 1; }
}
.up-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px 0 9px; border-radius: 8px;
  background: var(--paper); border: .5px solid var(--rule-strong); font-size: 11px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 12px 24px -10px rgba(24, 33, 31, .35), 0 1px 2px rgba(24, 33, 31, .06);
  transform-origin: 70% 60%; animation: up-chip var(--d) cubic-bezier(.3, .7, .3, 1) infinite;
}
@keyframes up-chip {
  0%, 40% { transform: rotate(-4deg); opacity: 1; }
  47%, 100% { transform: rotate(0) scale(.55); opacity: 0; }
}
.up-drag .t-cursor { position: absolute; left: 84px; top: 18px; }

/* ---------- 3. folders and moving ---------- */

.scene-organize { --d: 8.5s; }
.org-win { left: 70px; top: 26px; width: 300px; }
.org-win .m-outline { animation: org-press var(--d) ease infinite; }
@keyframes org-press {
  0%, 12% { transform: none; background: var(--paper); }
  14% { transform: scale(.93); background: var(--hover); }
  18%, 100% { transform: none; background: var(--paper); }
}
.org-new { animation: org-new var(--d) cubic-bezier(.2, .9, .25, 1) infinite; }
@keyframes org-new {
  0%, 15% { height: 0; opacity: 0; box-shadow: none; background: var(--paper); }
  20% { height: 26px; opacity: 1; }
  57% { box-shadow: inset 0 0 0 1px transparent; background: var(--paper); }
  60%, 67% { box-shadow: inset 0 0 0 1px var(--pine); background: var(--pine-wash); }
  73%, 100% { height: 26px; opacity: 1; box-shadow: inset 0 0 0 1px transparent; background: var(--paper); }
}
.org-new .m-label { position: relative; z-index: 1; }
.org-type {
  display: inline-block; vertical-align: bottom; overflow: hidden; white-space: nowrap; max-width: 40px;
  border-right: 1px solid transparent; animation: org-type var(--d) steps(5, end) infinite;
}
@keyframes org-type {
  0%, 21% { max-width: 0; border-right-color: var(--ink); }
  33% { max-width: 29px; border-right-color: var(--ink); }
  37%, 100% { max-width: 40px; border-right-color: transparent; }
}
.org-edit {
  position: absolute; left: 29px; top: 4px; bottom: 4px; width: 120px; border-radius: 5px;
  border: .5px solid var(--pine); box-shadow: 0 0 0 2.5px rgba(31, 92, 81, .14);
  opacity: 0; animation: org-edit var(--d) ease infinite;
}
@keyframes org-edit { 0%, 16% { opacity: 1; } 36% { opacity: 1; } 39%, 100% { opacity: 0; } }
.org-take { height: 0; opacity: 0; border-top-color: transparent; animation: org-take var(--d) cubic-bezier(.2, .9, .25, 1) infinite; }
@keyframes org-take {
  0%, 47% { height: 26px; opacity: 1; border-top-color: var(--rule); }
  50%, 65% { height: 26px; opacity: .35; border-top-color: var(--rule); }
  72%, 100% { height: 0; opacity: 0; border-top-color: transparent; }
}
.org-ghost {
  position: absolute; left: 92px; top: 66px; width: 210px; border-radius: 7px; overflow: hidden;
  border: .5px solid var(--rule-strong); font-size: 11px;
  box-shadow: 0 14px 26px -12px rgba(24, 33, 31, .4), 0 1px 2px rgba(24, 33, 31, .06);
  opacity: 0; animation: org-ghost var(--d) cubic-bezier(.45, .05, .25, 1) infinite;
}
.org-ghost .m-row { border-top: 0; }
@keyframes org-ghost {
  0%, 47% { transform: translate(0, 52px); opacity: 0; }
  50% { transform: translate(4px, 50px) rotate(-1.5deg); opacity: .97; }
  63% { transform: translate(4px, 0) rotate(-1.5deg); opacity: .97; }
  66% { transform: translate(4px, 0) rotate(-1.5deg) scale(.96); opacity: .97; }
  71%, 100% { transform: translate(-30px, 0) scale(.4); opacity: 0; }
}
.org-cursor { position: absolute; left: 0; top: 0; opacity: 0; animation: org-cursor var(--d) cubic-bezier(.45, .05, .25, 1) infinite; }
.org-cursor .t-cursor { transform-origin: 2px 1px; animation: org-click var(--d) ease infinite; }
@keyframes org-cursor {
  0% { transform: translate(300px, 200px); opacity: 0; }
  4% { opacity: 1; }
  12%, 15% { transform: translate(262px, 52px); }
  25%, 40% { transform: translate(318px, 100px); }
  48%, 50% { transform: translate(140px, 132px); }
  63%, 66% { transform: translate(144px, 80px); }
  80%, 100% { transform: translate(250px, 170px); opacity: 1; }
}
@keyframes org-click {
  0%, 12.5% { transform: none; }
  13.5% { transform: scale(.85); }
  15%, 48% { transform: none; }
  49.5%, 66% { transform: scale(.85); }
  67.5%, 100% { transform: none; }
}

/* ---------- 4. big files and dropped connections ---------- */

.scene-resume { --d: 8s; }
.rs-card {
  position: absolute; left: 80px; top: 60px; width: 280px; background: var(--paper);
  border: .5px solid var(--rule-strong); border-radius: 12px; font-size: 11px; line-height: 1.25;
  box-shadow: 0 16px 34px -16px rgba(24, 33, 31, .3), 0 1px 2px rgba(24, 33, 31, .04);
  animation: rs-card var(--d) cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes rs-card {
  0%, 68% { opacity: 1; transform: none; }
  74%, 100% { opacity: 0; transform: translateY(8px) scale(.94); }
}
.rs-head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 9px 14px; }
.rs-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rs-text strong { font-size: 12.5px; font-weight: 600; }
.rs-subs { display: grid; }
.rs-sub { grid-area: 1 / 1; color: var(--slate); font-size: 10.5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rs-b, .rs-c { opacity: 0; }
.rs-a { animation: rs-a var(--d) linear infinite; }
.rs-b { animation: rs-b var(--d) linear infinite; color: var(--signal); }
.rs-c { animation: rs-c var(--d) linear infinite; }
@keyframes rs-a { 0%, 26% { opacity: 1; } 28%, 100% { opacity: 0; } }
@keyframes rs-b { 0%, 26% { opacity: 0; } 28%, 46% { opacity: 1; } 48%, 100% { opacity: 0; } }
@keyframes rs-c { 0%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }
.rs-wifi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; color: var(--pine); animation: rs-wifi var(--d) ease infinite; }
.rs-wifi svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rs-off { opacity: 0; animation: rs-b var(--d) linear infinite; }
.rs-on { animation: rs-on var(--d) linear infinite; }
@keyframes rs-on { 0%, 26% { opacity: 1; } 28%, 46% { opacity: 0; } 48%, 100% { opacity: 1; } }
@keyframes rs-wifi {
  0%, 26% { background: var(--pine-wash); color: var(--pine); }
  28%, 46% { background: var(--signal-wash); color: var(--signal); }
  48%, 100% { background: var(--pine-wash); color: var(--pine); }
}
.rs-meter { height: 3px; margin: 0 14px 12px; background: var(--rule); border-radius: 2px; overflow: hidden; }
.rs-meter span {
  display: block; height: 100%; border-radius: 2px; background: var(--pine); transform-origin: left; transform: scaleX(.56);
  animation: rs-fill var(--d) linear infinite;
}
@keyframes rs-fill {
  0% { transform: scaleX(.04); background: var(--pine); }
  26% { transform: scaleX(.56); background: var(--pine); }
  28%, 46% { transform: scaleX(.56); background: #b3bab7; }
  48% { transform: scaleX(.56); background: var(--pine); }
  66%, 100% { transform: scaleX(1); background: var(--pine); }
}
.rs-item { display: flex; align-items: center; gap: 6px; padding: 8px 14px 10px; border-top: .5px solid var(--rule); }
.rs-pill {
  position: absolute; left: 50%; top: 92px; display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 15px 0 8px;
  border-radius: 999px; background: var(--paper); border: .5px solid var(--rule-strong); font-size: 12px; font-weight: 500; white-space: nowrap;
  box-shadow: 0 14px 30px -14px rgba(24, 33, 31, .32), 0 1px 2px rgba(24, 33, 31, .05);
  opacity: 0; transform: translateX(-50%); animation: rs-pill var(--d) cubic-bezier(.2, .9, .25, 1) infinite;
}
@keyframes rs-pill {
  0%, 71% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
  78%, 100% { opacity: 1; transform: translateX(-50%); }
}
.rs-check { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: var(--pine); color: #fff; }
.rs-check svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 520px) {
  .tour-copy { padding: 20px 20px 0; }
  .tour h2 { font-size: 20px; }
  .tour-foot { padding: 20px; }
}