:root {
  color-scheme: light;
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  background: #efefef;
  color: #000000;
}

@property --land-wobble {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

@property --lift {
  syntax: "<number>";
  initial-value: 0.88;
  inherits: false;
}

@property --is-upright {
  syntax: "<number>";
  initial-value: 0;
  inherits: false;
}

@property --peek-y {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@property --drag-x {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@property --drag-y {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

@property --preview-scale {
  syntax: "<number>";
  initial-value: 1;
  inherits: false;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  background: #efefef;
}

img {
  display: block;
  max-width: 100%;
}

.site-header {
  align-items: center;
  display: flex;
  justify-content: space-between;
  left: 0;
  padding: min(1.6667vw, 2.5svh) min(2.7778vw, 4.1667svh);
  position: fixed;
  right: 0;
  top: 0;
  /* Below the preview overlay (z-index 110) so the brand and hamburger
     blur together with the rest of the page when a preview is showing. */
  z-index: 100;
}

.brand {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: min(0.9722vw, 1.4583svh);
  text-decoration: none;
}

.brand-icon {
  border-radius: 25%;
  box-shadow: 0 min(0.4167vw, 0.625svh) min(1.3889vw, 2.0833svh) rgba(0, 0, 0, 0.1);
  height: min(5.5vw, 8.25svh);
  width: min(5.5vw, 8.25svh);
}

.brand-name {
  color: #000;
  font-size: min(1.3889vw, 2.0833svh);
  font-style: italic;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Hamburger-only nav across all viewports: the panel is hidden by default
   and pops out from the top-right of the header when the hamburger toggles
   `.is-open`. (Earlier the desktop layout showed an inline link row; we
   collapsed it into a hamburger to match the mobile pattern.) */
.top-nav {
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.04),
    0 12px 32px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 220px;
  opacity: 0;
  padding: 10px;
  pointer-events: none;
  position: absolute;
  right: clamp(16px, 2vw, 28px);
  /* Desktop 默认更紧凑的 panel-to-button 间距（mobile 媒体里复位到
     原距离），同时把 panel 顶部往按钮拉近 ~5px = 缩短 20%。*/
  top: calc(100% - 9px);
  transform: translateY(-6px) scale(0.96);
  transform-origin: top right;
  transition:
    opacity 180ms ease-out,
    transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
    visibility 0s linear 220ms;
  visibility: hidden;
  width: min(280px, calc(100vw - 32px));
  z-index: 200;
}

.top-nav.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity 200ms ease-out,
    transform 260ms cubic-bezier(0.34, 1.5, 0.64, 1),
    visibility 0s linear 0s;
  visibility: visible;
}

body:not(.legal-body-page) .site-header {
  animation: site-header-in 620ms ease-out 1320ms both;
}

@keyframes site-header-in {
  from {
    opacity: 0;
    transform: translateY(min(-1.6667vw, -2.5svh));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body:not(.legal-body-page) .site-header {
    animation: none;
  }
}

.top-nav-link {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.02em;
  line-height: 1.25;
  min-height: 42px;
  padding: 10px 12px;
  text-align: left;
  text-decoration: none;
  transition: background 120ms ease-out, color 120ms ease-out;
  width: 100%;
}

.top-nav-link:hover,
.top-nav-link:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: #000;
  outline: none;
}

.top-nav-link.is-active {
  background: rgba(0, 0, 0, 0.04);
  color: #000;
  font-weight: 600;
}

.top-nav-toggle {
  font-family: inherit;
}

/* Language switcher lives inside the hamburger panel on every viewport.
   The standalone toggle button (used by an old desktop hover dropdown) is
   hidden — the language list itself sits inline within the panel. */
.lang-switcher {
  display: block;
  margin-top: 2px;
  width: 100%;
}

.lang-switcher .top-nav-toggle {
  display: none;
}

.lang-caret {
  display: inline-block;
  font-size: 0.75em;
  line-height: 1;
}

.lang-menu {
  background: transparent;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  min-width: auto;
  padding: 0;
  position: static;
  width: 100%;
}

.hamburger {
  align-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  gap: 5px;
  height: 32px;
  justify-content: center;
  padding: 0;
  width: 32px;
}

.hamburger-line {
  background: #000;
  border-radius: 2px;
  display: block;
  height: 2px;
  transition:
    transform 220ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 160ms ease-out;
  width: 22px;
}

.hamburger.is-open .hamburger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .hamburger-line:nth-child(2) {
  opacity: 0;
}
.hamburger.is-open .hamburger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.lang-menu li {
  list-style: none;
  margin: 0;
  width: 100%;
}

.lang-menu button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 13px;
  justify-content: flex-start;
  line-height: 1.25;
  min-height: 42px;
  padding: 10px 12px;
  text-align: left;
  transition: background 120ms ease-out, color 120ms ease-out;
  width: 100%;
}

.lang-menu button:hover,
.lang-menu button:focus-visible {
  background: rgba(0, 0, 0, 0.04);
  color: #000;
  outline: none;
}

.lang-menu button.is-active {
  background: rgba(0, 0, 0, 0.04);
  color: #000;
  font-weight: 600;
}

.lang-menu button.is-active::after {
  color: rgba(0, 0, 0, 0.5);
  content: "✓";
  font-size: 12px;
  margin-left: auto;
}

.legal-body-page {
  background: #efefef;
  color: #000;
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  margin: 0;
  min-height: 100svh;
}

.legal-page {
  margin: 0 auto;
  max-width: 760px;
  padding: clamp(80px, 12svh, 140px) clamp(20px, 5vw, 48px) clamp(60px, 10svh, 120px);
}

.back-link {
  color: rgba(0, 0, 0, 0.55);
  display: inline-block;
  font-size: 14px;
  margin-bottom: clamp(28px, 5svh, 48px);
  text-decoration: none;
  transition: color 160ms ease-out;
}

.back-link:hover,
.back-link:focus-visible {
  color: #000;
  outline: none;
}

.legal-header h1 {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.1;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.legal-meta {
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  margin: 0 0 clamp(28px, 4svh, 44px);
}

.legal-intro {
  margin-bottom: clamp(20px, 3svh, 32px);
}

.legal-intro p,
.legal-section p {
  color: rgba(0, 0, 0, 0.78);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.legal-section {
  margin-bottom: clamp(28px, 4svh, 44px);
}

.legal-section h2 {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin: 0 0 12px;
  text-transform: uppercase;
}

.legal-section h3 {
  color: rgba(0, 0, 0, 0.85);
  font-size: 14px;
  font-weight: 700;
  margin: 18px 0 8px;
}

.legal-section ul {
  color: rgba(0, 0, 0, 0.78);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 14px;
  padding-left: 20px;
}

.legal-section li {
  margin-bottom: 6px;
}

.legal-section a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-section a:hover {
  text-decoration: none;
}

/* ---------- Releases page ---------- */

.releases-list {
  display: flex;
  flex-direction: column;
  gap: clamp(32px, 5svh, 56px);
}

.release-item {
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
  padding-top: clamp(20px, 3svh, 32px);
}

.release-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.release-head {
  margin-bottom: 14px;
}

.release-version {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: 0.01em;
  margin: 0;
}

.release-date {
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  margin: 4px 0 0;
}

.release-notes p,
.release-notes ul {
  color: rgba(0, 0, 0, 0.78);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 14px;
}

.release-notes ul {
  padding-left: 20px;
}

.release-notes li {
  margin-bottom: 6px;
}

.release-notes a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.release-footnote {
  border-top: 1px dashed rgba(0, 0, 0, 0.18);
  color: rgba(0, 0, 0, 0.55);
  font-size: 13px;
  margin-top: clamp(40px, 6svh, 64px);
  padding-top: clamp(20px, 3svh, 32px);
}

.release-footnote a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.back-to-top {
  align-items: center;
  background: #000;
  border: 0;
  border-radius: 999px;
  bottom: clamp(24px, 4svh, 40px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  color: #fff;
  cursor: pointer;
  display: flex;
  font: inherit;
  font-size: 18px;
  height: 44px;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: clamp(20px, 4vw, 40px);
  transform: translateY(8px);
  transition: opacity 220ms ease-out, transform 220ms ease-out, background 160ms ease-out;
  width: 44px;
  z-index: 90;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.back-to-top:hover {
  background: #1f1f1f;
}

.back-to-top:active {
  transform: translateY(1px);
}

.back-to-top:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.4);
  outline-offset: 4px;
}

@media (max-width: 900px) {
  .top-nav-link {
    font-size: 10px;
  }

  .legal-page {
    padding: 96px 20px 60px;
  }

  .legal-header h1 {
    font-size: 26px;
  }
}

.viewport {
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  display: grid;
  min-height: 100svh;
  overflow: hidden;
  place-items: center;
  user-select: none;
}

.preview-overlay {
  background: rgba(239, 239, 239, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  inset: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 320ms ease-out;
  z-index: 110;
}

.preview-overlay.is-shown {
  opacity: 1;
  pointer-events: auto;
}

.artboard {
  align-items: center;
  background: #efefef;
  display: flex;
  height: 100svh;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100vw;
}

.stage {
  aspect-ratio: 3 / 2;
  flex-shrink: 0;
  height: min(66.6667vw, 100svh);
  position: relative;
  width: min(100vw, 150svh);
}

.box {
  animation: box-in 460ms ease-out both;
  height: auto;
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 43.75%;
  transform: translate(-50%, -50%);
  width: 35.28%;
  z-index: 1;
}

@keyframes box-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.receipt {
  aspect-ratio: 2010 / 4096;
  --drag-x: 0px;
  --drag-y: 0px;
  --rotation: 0deg;
  --center-x: 0%;
  --center-y: 0%;
  --land-wobble: 0deg;
  --lift: 0.88;
  --is-upright: 0;
  --peek-y: 0px;
  --preview-scale: 1;
  animation: receipt-drop 720ms cubic-bezier(0.34, 1.18, 0.64, 1) both;
  filter: drop-shadow(0 0.3023vw 0.5101vw rgba(0, 0, 0, 0.25));
  object-fit: cover;
  pointer-events: none;
  position: absolute;
  transform: translate(var(--center-x), var(--center-y))
    translate(var(--drag-x), calc(var(--drag-y) + var(--peek-y)))
    rotate(calc(var(--rotation) * (1 - var(--is-upright)) + var(--land-wobble)))
    scale(calc(var(--lift) * var(--preview-scale)));
  transform-origin: center;
  /* Stack 总区域被设计为不超过 box 高度的 75%，所以 receipt 宽度从 18%
     收到 17%——旋转 ±12° 的 bounding box 高度 ~411，box 高 550 时占
     74.6%，留出顶部开口可见。*/
  width: 17%;
  z-index: 2;
}

@keyframes receipt-drop {
  0% {
    opacity: 0;
    transform: translate(var(--center-x), var(--center-y))
      translate(var(--drag-x), calc(var(--drag-y) - 38vh + var(--peek-y)))
      rotate(calc(var(--rotation) * 0.35)) scale(var(--lift));
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translate(var(--center-x), var(--center-y))
      translate(var(--drag-x), calc(var(--drag-y) + var(--peek-y)))
      rotate(calc(var(--rotation) * (1 - var(--is-upright)) + var(--land-wobble)))
      scale(var(--lift));
  }
}

@keyframes receipt-land {
  0% {
    --land-wobble: 0deg;
  }
  35% {
    --land-wobble: -1.6deg;
  }
  70% {
    --land-wobble: 0.7deg;
  }
  100% {
    --land-wobble: 0deg;
  }
}

.receipt-9 {
  left: 40.85%;
  top: 14.06%;
  --rotation: -7deg;
  animation-delay: 0ms;
  z-index: 2;
}

.receipt-8 {
  left: 41.2%;
  top: 14.35%;
  --rotation: 13deg;
  animation-delay: 100ms;
  z-index: 3;
}

.receipt-7 {
  left: 40.7%;
  top: 14.1%;
  --rotation: -9deg;
  animation-delay: 200ms;
  z-index: 4;
}

.receipt-6 {
  left: 41.5%;
  top: 14.4%;
  --rotation: 7.4deg;
  animation-delay: 300ms;
  z-index: 5;
}

.receipt-5 {
  left: 40.5%;
  top: 13.93%;
  --rotation: -16deg;
  animation-delay: 400ms;
  z-index: 6;
}

.receipt-4 {
  left: 41.4%;
  top: 14.53%;
  animation-delay: 500ms;
  z-index: 7;
}

.receipt-3 {
  left: 40.6%;
  top: 14.03%;
  --rotation: 11.56deg;
  animation-delay: 600ms;
  z-index: 8;
}

.receipt-2 {
  left: 41.05%;
  top: 14.24%;
  --rotation: 4.6deg;
  animation-delay: 700ms;
  z-index: 9;
}

.receipt-1 {
  left: 41%;
  top: 14.23%;
  --rotation: -4.63deg;
  animation-delay: 800ms;
  z-index: 10;
}

.draggable-receipt {
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  transition:
    filter 220ms ease-out,
    --lift 240ms cubic-bezier(0.34, 1.4, 0.64, 1),
    --is-upright 280ms cubic-bezier(0.34, 1.2, 0.64, 1),
    --peek-y 240ms cubic-bezier(0.34, 1.2, 0.64, 1);
  user-select: none;
  will-change: transform;
}

.receipt.is-entered {
  animation: none;
}

.draggable-receipt:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.3);
  outline-offset: 6px;
}

@media (hover: hover) {
  .draggable-receipt:hover:not(.is-dragging):not(.is-returning):not(.is-previewing) {
    --peek-y: min(-1.4vw, -2.1svh);
  }
}

.draggable-receipt.is-dragging {
  --lift: 1.05;
  --is-upright: 1;
  --peek-y: 0px;
  cursor: grabbing;
  filter: drop-shadow(0 0.42vw 0.7vw rgba(0, 0, 0, 0.22))
    drop-shadow(0 1.6vw 2.4vw rgba(0, 0, 0, 0.28));
  z-index: 30;
}

.draggable-receipt.is-returning {
  --peek-y: 0px;
  --preview-scale: 1;
  filter: drop-shadow(0 0.3023vw 0.5101vw rgba(0, 0, 0, 0.25));
  transition:
    --drag-x 760ms cubic-bezier(0.22, 1.18, 0.34, 1.06),
    --drag-y 760ms cubic-bezier(0.22, 1.18, 0.34, 1.06),
    --is-upright 760ms cubic-bezier(0.22, 1.18, 0.34, 1.06),
    --lift 760ms cubic-bezier(0.22, 1.18, 0.34, 1.06),
    --preview-scale 760ms cubic-bezier(0.22, 1.18, 0.34, 1.06),
    filter 520ms ease-out;
  z-index: 30;
}

.draggable-receipt.is-landing {
  animation: receipt-land 380ms cubic-bezier(0.22, 0.9, 0.32, 1);
}

.draggable-receipt.is-previewing {
  --is-upright: 1;
  cursor: zoom-out;
  filter: drop-shadow(0 1.5vw 2.5vw rgba(0, 0, 0, 0.28))
    drop-shadow(0 0.4vw 0.8vw rgba(0, 0, 0, 0.18));
  transition:
    --drag-x 460ms cubic-bezier(0.22, 1.06, 0.34, 1),
    --drag-y 460ms cubic-bezier(0.22, 1.06, 0.34, 1),
    --is-upright 460ms cubic-bezier(0.22, 1.06, 0.34, 1),
    --lift 460ms cubic-bezier(0.22, 1.06, 0.34, 1),
    --preview-scale 460ms cubic-bezier(0.22, 1.06, 0.34, 1),
    filter 320ms ease-out;
  z-index: 120;
}

.draggable-receipt.is-on-top {
  z-index: 20;
}

.hero-footer {
  align-items: center;
  animation: hero-footer-in 620ms ease-out 1320ms both;
  bottom: calc(clamp(48px, calc(18svh - 114px), 128px) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  left: 50%;
  position: fixed;
  translate: -50% 0;
  z-index: 10;
}

.hero-copy {
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: min(2.0833vw, 3.125svh);
  text-align: center;
}

.icp-record {
  color: #c3c3c3;
  display: none;
  font-size: 12px;
  margin-top: 20px;
  text-align: center;
}

html[lang="zh"] .icp-record {
  display: block;
}

.hero-copy p {
  font-size: 14px;
  font-style: normal;
  line-height: 1.45;
  margin: 0;
}

.hero-copy p + p {
  margin-top: 4px;
}

@keyframes hero-footer-in {
  from {
    opacity: 0;
    transform: translateY(min(1.6667vw, 2.5svh));
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .receipt,
  .hero-footer,
  .box,
  .site-header {
    animation: none;
  }
  .fold-content,
  .fold-edge {
    transition: none;
  }
}

/* ── Foldable receipts ──
 * Rule: receipt-1.png (1200×2445, ~2:1) is the "short" baseline.
 * Any receipt taller than this ratio (e.g. receipt-6.png at 600×3381 ≈ 5.6:1)
 * is "long" and folds into a single-panel card.
 *
 * Implementation:
 *   .foldable-receipt   — wrapper sized like a short receipt (1 panel high)
 *   .fold-content       — full receipt image, clip-path animates the reveal
 *   .fold-edge / -2     — soft fold-line shadows that travel with the clip
 *
 * The unfold reads as one continuous strip of paper extending downward from
 * the wrapper; a single drop shadow follows the clipped contour. The fold
 * lines are subtle dark bands anchored at the 1/3 and 2/3 marks; they're
 * visible while folded/folding and fade out once the receipt is fully open.
 */

.receipt.draggable-receipt.foldable-receipt {
  filter: none;
  overflow: visible;
  /* Wrapper = one folded panel; per-card panel ratio is supplied via the
     --fold-panel-aspect variable so different long receipts can have
     their own proportions. */
  aspect-ratio: var(--fold-panel-aspect, 600 / 1127);
}

.fold-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: var(--fold-full-aspect, 600 / 3381);
  background-image: var(--fold-image);
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  clip-path: inset(0 0 66.667% 0);
  /* Drop shadow follows the clipped contour, so the folded card reads like
     a regular receipt; when unfolded, the shadow stretches to the full strip. */
  filter: drop-shadow(0 0.3023vw 0.5101vw rgba(0, 0, 0, 0.25));
  transition:
    clip-path 0.9s cubic-bezier(0.32, 0.72, 0, 1),
    filter 0.4s ease-out;
  will-change: clip-path;
}

.foldable-receipt:not(.is-folded) .fold-content {
  clip-path: inset(0);
}

.foldable-receipt.is-previewing .fold-content {
  filter:
    drop-shadow(0 0.2vw 0.5vw rgba(0, 0, 0, 0.18))
    drop-shadow(0 1.4vw 3vw rgba(0, 0, 0, 0.10));
}

/* Fold-edge bands sit at the 1/3 and 2/3 marks. Each is a soft horizontal
   gradient — strongest in the middle of the band — that reads as the bend in
   the paper. They're inside .fold-content, so the clip-path naturally hides
   them until the unfold reaches their fold mark, and the bands stay glued to
   the receipt as it scales. */
.fold-edge {
  position: absolute;
  left: 0;
  width: 100%;
  /* Anchor the band so its midline rests exactly on the fold mark. */
  top: calc(33.333% - 1.6%);
  height: 3.2%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.04) 24%,
    rgba(0, 0, 0, 0.18) 50%,
    rgba(0, 0, 0, 0.04) 76%,
    transparent 100%);
  pointer-events: none;
  opacity: 1;
  z-index: 2;
}

.fold-edge-2 {
  top: calc(66.667% - 1.6%);
}

/* Crease ↔ segment mapping
 *
 * The clip-path transition is 0.9s with cubic-bezier(0.32, 0.72, 0, 1).
 * Solving for when each fold mark becomes the visible bottom edge:
 *   bezier(t) = 0.5 at t ≈ 0.34  → fold-1 reached at ~310ms
 *   bezier(t) = 1.0 at t = 1.0   → fold-2 reached at  900ms
 *
 * Each edge fades out when its fold has finished opening (its mark is well
 * inside the open paper); on the way back it fades in as the clip catches
 * up to its mark. Timings flip between the folded/unfolded rule sets so the
 * direction reverses cleanly.
 */
.fold-edge {
  transition: opacity 0.34s ease-out 0s;
}

.fold-edge-2 {
  transition: opacity 0.34s ease-out 0.31s;
}

.foldable-receipt:not(.is-folded) .fold-edge { opacity: 0; }
.foldable-receipt:not(.is-folded) .fold-edge-2 { opacity: 0; }

.foldable-receipt.is-folded .fold-edge {
  transition: opacity 0.34s ease-out 0.31s;
}

.foldable-receipt.is-folded .fold-edge-2 {
  transition: opacity 0.34s ease-out 0s;
}

@media (prefers-reduced-motion: reduce) {
  .fold-content,
  .fold-edge {
    transition: none;
  }
}

.store-button-wrap {
  display: inline-block;
  position: relative;
}

/* Popover sits above EVERY other layer (dragged receipts can climb to
   z-index 110+, preview to 120). To break out of .hero-footer's stacking
   context — created by its own `position: fixed` — JS lifts this element
   to <body> on init and syncs its position to the button each frame
   that matters. We position it via fixed coords (left/top set inline). */
.store-qr {
  background: #ffffff;
  border-radius: 16px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 22px rgba(0, 0, 0, 0.10),
    0 24px 60px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  padding: 14px;
  pointer-events: none;
  position: fixed;
  /* left/top set by JS; transform anchors the panel's bottom-center to
     that point so the diamond visually points at the button. */
  transform: translate(-50%, -100%) scale(0.96);
  transform-origin: bottom center;
  transition:
    opacity 180ms ease-out,
    transform 220ms cubic-bezier(0.34, 1.4, 0.64, 1),
    visibility 0s linear 220ms;
  visibility: hidden;
  width: 184px;
  z-index: 9999;
}

.store-qr::after {
  background: #ffffff;
  bottom: -5px;
  content: "";
  height: 12px;
  left: 50%;
  position: absolute;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  z-index: -1;
}

.store-qr-image {
  border-radius: 6px;
  display: block;
  height: auto;
  width: 100%;
}

.store-qr-label {
  color: rgba(0, 0, 0, 0.55);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.store-qr.is-shown {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -100%) scale(1);
  transition:
    opacity 200ms ease-out,
    transform 260ms cubic-bezier(0.34, 1.5, 0.64, 1),
    visibility 0s linear 0s;
  visibility: visible;
}

.store-button {
  align-items: center;
  background: linear-gradient(180deg, #1a1a1a 0%, #000000 100%);
  border-radius: 999px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 4px 10px rgba(0, 0, 0, 0.18),
    0 14px 32px rgba(0, 0, 0, 0.14);
  display: inline-flex;
  gap: min(0.75vw, 1.125svh);
  justify-content: center;
  min-height: min(3.75vw, 5.625svh);
  padding: min(0.75vw, 1.125svh) min(2vw, 3svh);
  text-decoration: none;
  transition: box-shadow 220ms ease-out, transform 160ms ease-out;
}

.store-button:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -1px 0 rgba(0, 0, 0, 0.6),
    0 2px 4px rgba(0, 0, 0, 0.24),
    0 6px 14px rgba(0, 0, 0, 0.2),
    0 18px 40px rgba(0, 0, 0, 0.16);
}

.store-button:active {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.5),
    0 1px 2px rgba(0, 0, 0, 0.22),
    0 2px 6px rgba(0, 0, 0, 0.16);
  transform: translateY(1px);
}

.store-button:focus-visible {
  outline: 3px solid rgba(0, 0, 0, 0.35);
  outline-offset: 5px;
}

.apple-mark {
  height: min(2.0719vw, 3.1092svh);
  width: min(1.7297vw, 2.5945svh);
}

.store-wordmark {
  display: grid;
  gap: min(0.375vw, 0.5625svh);
  justify-items: center;
  width: min(6.645vw, 9.9675svh);
}

.download-text,
.app-store-text {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: block;
}

.download-text {
  background-image: url("./assets/download-on-the.svg");
  height: min(0.5675vw, 0.8512svh);
  width: min(6.4608vw, 9.6919svh);
}

.app-store-text {
  background-image: url("./assets/app-store.svg");
  height: min(1.4148vw, 2.1222svh);
  width: min(6.645vw, 9.9675svh);
}

@media (max-width: 900px) {
  .viewport {
    align-items: stretch;
    min-height: 100svh;
    overflow-x: hidden;
    overflow-y: auto;
    place-items: stretch;
  }

  .artboard {
    aspect-ratio: auto;
    height: auto;
    min-height: 100svh;
    width: 100%;
  }

  .stage {
    aspect-ratio: auto;
    display: contents;
  }

  .box {
    height: auto;
    left: 50%;
    top: 41svh;
    transform: translate(-50%, -50%);
    width: min(86.4vw, 403px);
  }

  .receipt {
    --center-x: -50%;
    --center-y: -50%;
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.25));
    /* 同 desktop 的 75% 约束：缩到 42vw 后旋转 ±12° bounding box ~309，
       box 高 421 时占 73%。*/
    width: min(42vw, 200px);
  }

  /* receipt 缩窄后 stack 高度 ~309，已不会从 box 底部穿出，可以让
     stack 中心回到 box 主体矩形中心（~38svh），上下溢出对称。*/
  .receipt-6 {
    left: 49.7%;
    top: 38.15svh;
  }

  .foldable-receipt .fold-content {
    filter: drop-shadow(0 4px 7px rgba(0, 0, 0, 0.22));
  }

  .receipt-5 {
    left: 49.5%;
    top: 37.65svh;
  }

  .receipt-4 {
    left: 50.4%;
    top: 38.35svh;
  }

  .receipt-3 {
    left: 49.6%;
    top: 37.85svh;
  }

  .receipt-2 {
    left: 50.05%;
    top: 38.05svh;
  }

  .receipt-1 {
    left: 50%;
    top: 38.05svh;
  }

  .receipt-7 {
    left: 50.15%;
    top: 37.95svh;
  }

  .receipt-8 {
    left: 49.85%;
    top: 38.20svh;
  }

  .receipt-9 {
    left: 50.25%;
    top: 37.90svh;
  }

  .draggable-receipt.is-dragging {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.22))
      drop-shadow(0 18px 26px rgba(0, 0, 0, 0.28));
  }

  .site-header {
    padding: 14px 16px;
  }

  .brand {
    gap: 8px;
  }

  .brand-icon {
    height: 36px;
    width: 36px;
  }

  .brand-name {
    font-size: 13px;
    letter-spacing: 0.04em;
  }

  /* nav 弹出样式现在是默认（所有视口共用汉堡菜单），mobile 媒体里只
     保留 panel 在小屏下的水平边距收紧；top 也复位到原来的 4px 间距。*/
  .top-nav {
    right: 16px;
    top: calc(100% - 4px);
    width: min(280px, calc(100vw - 32px));
  }

  .hero-footer {
    bottom: calc(clamp(44px, 10svh, 104px) + env(safe-area-inset-bottom, 0px));
    gap: 16px;
  }

  .hero-copy p {
    font-size: 14px;
    line-height: 1.4;
  }

  .hero-copy p + p {
    margin-top: 3px;
  }

  .store-button {
    gap: 7px;
    min-height: 40px;
    padding: 9px 16px;
  }

  .apple-mark {
    height: 20px;
    width: 16px;
  }

  .store-wordmark {
    gap: 4px;
    width: 68px;
  }

  .download-text {
    height: 6px;
    width: 66px;
  }

  .app-store-text {
    height: 14px;
    width: 68px;
  }
}