/*
  The paper theme (?theme=paper): the preorder page in the Cut Paper look, made of construction
  paper. Loaded after preorder.css, so it only restyles; preorder-paper.js adds the few pieces that need
  markup. Colours are mixed from the tokens (test/tokens.test.mjs).
*/

/* Self-hosted, the same files as wagu.com's (SIL Open Font License: assets/fonts/OFL-*.txt). */
@font-face { font-family: "Grandstander"; src: url("../fonts/grandstander.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("../fonts/caveat.woff2") format("woff2"); font-weight: 600 700; font-display: swap; }

:root {
  --oat: color-mix(in srgb, var(--palette-cream) 93%, var(--palette-amber-text));
  --paper: var(--palette-paper);
  --ink: color-mix(in srgb, color-mix(in srgb, var(--palette-ink) 70%, var(--palette-amber-text)) 60%, var(--palette-black));
  --ink-2: color-mix(in srgb, var(--ink) 72%, var(--oat));
  --cherry: var(--palette-red);
  --marigold: var(--palette-rainbow-yellow);
  --cobalt: color-mix(in srgb, var(--palette-rainbow-blue-dark) 75%, var(--palette-purple));
  --mint: color-mix(in srgb, var(--palette-green-tint) 88%, var(--palette-green-text));
  --leaf: color-mix(in srgb, var(--palette-green) 72%, var(--palette-green-text));
  --umber: color-mix(in srgb, var(--palette-amber-text), var(--palette-black) 45%);
  --shade: color-mix(in srgb, var(--umber) 20%, transparent);
  --shade-deep: color-mix(in srgb, var(--umber) 50%, transparent);
  --tex: url("../img/paper/tex-paper.webp");
  --font-paper: "Grandstander", var(--font-display);
  --font-hand: "Caveat", "Bradley Hand", cursive;
  --lift: drop-shadow(0 1px 1px var(--shade)) drop-shadow(0 10px 12px color-mix(in srgb, var(--umber) 15%, transparent));
  --cut: 14px 18px 13px 17px / 17px 13px 18px 14px;
  --spring-paper: linear(0, 0.009, 0.035 2.1%, 0.141, 0.281 6.7%, 0.723 12.9%, 0.938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, 0.991, 0.977 51%, 0.974 53.8%, 0.975 57.1%, 0.997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
  /* Torn edges: two ragged strips, a paper one and the section's own colour over it. */
  --tear-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201000%2060'%20preserveAspectRatio%3D'none'%3E%3Cfilter%20id%3D't'%20x%3D'-2%25'%20y%3D'-60%25'%20width%3D'104%25'%20height%3D'220%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.014%20.3'%20numOctaves%3D'4'%20seed%3D'3'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20scale%3D'18'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D'-20'%20y%3D'26'%20width%3D'1040'%20height%3D'90'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");
  --tear-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201000%2060'%20preserveAspectRatio%3D'none'%3E%3Cfilter%20id%3D't'%20x%3D'-2%25'%20y%3D'-60%25'%20width%3D'104%25'%20height%3D'220%25'%3E%3CfeTurbulence%20type%3D'fractalNoise'%20baseFrequency%3D'.014%20.3'%20numOctaves%3D'4'%20seed%3D'8'%2F%3E%3CfeDisplacementMap%20in%3D'SourceGraphic'%20scale%3D'24'%20xChannelSelector%3D'R'%20yChannelSelector%3D'G'%2F%3E%3C%2Ffilter%3E%3Crect%20x%3D'-20'%20y%3D'26'%20width%3D'1040'%20height%3D'90'%20filter%3D'url(%23t)'%2F%3E%3C%2Fsvg%3E");

  --color-background: var(--oat);
  --color-foreground: var(--ink);
  --color-foreground-secondary: var(--ink-2);
  --color-foreground-muted: var(--ink-2);
  --color-focus-ring: var(--cobalt);
}

body { background: var(--oat) var(--tex) 0 0 / 520px; background-blend-mode: multiply; overflow-x: clip; }
h1, h2, h3 { font-family: var(--font-paper); letter-spacing: -0.02em; }
:focus-visible { border-radius: 8px; }

/* Key words, crayoned over. */

.test-mode { background: var(--marigold) var(--tex) 0 0 / 300px; background-blend-mode: multiply; color: var(--ink); }

/* ---------- Header: the one wordmark, set down letter by letter ---------- */
.bar { padding-block: 8px; background: var(--oat) var(--tex) 0 0 / 520px; background-blend-mode: multiply; backdrop-filter: none; transition: filter 0.3s; }
:root.is-scrolled .bar { filter: drop-shadow(0 2px 3px var(--shade)); }
.bar__mark { position: relative; display: block; width: clamp(110px, 9vw, 136px); aspect-ratio: 600 / 241; }
.bar__mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.bar__mark img:not(.bar__letter) { visibility: hidden; }
.bar__letter { transform-origin: var(--ox) 88%; filter: drop-shadow(0 1.5px 1px var(--shade-deep)); animation: wm-in 0.72s steps(9, end) both; animation-delay: calc(var(--i) * 110ms + 150ms); }
.bar__letter.is-in { animation: none; }
.bar__letter.is-in.is-lift { animation: wm-lift 0.62s steps(8, end); }
@keyframes wm-in {
  0% { transform: translateY(-70%) rotate(-16deg) scale(1.12); opacity: 0; }
  30% { opacity: 1; }
  62% { transform: translateY(5%) rotate(4deg) scale(0.98); }
  82% { transform: translateY(-3%) rotate(-1.5deg); }
  100% { transform: none; opacity: 1; }
}
@keyframes wm-lift { 35% { transform: translateY(-14%) rotate(-7deg) scale(1.06); } 70% { transform: translateY(2%) rotate(2.5deg); } }

/* ---------- Paper buttons ---------- */
.bar__buy, .buy {
  border: 0;
  border-radius: var(--cut);
  background: var(--cobalt) var(--tex) 0 0 / 300px;
  background-blend-mode: multiply;
  color: var(--paper);
  font-family: var(--font-paper);
  font-weight: 800;
  box-shadow: 0 0 0 3px var(--paper), 0 3px 0 3px var(--shade), 0 10px 16px -8px var(--shade-deep);
  transform: rotate(-0.8deg);
  transition: transform 0.4s var(--spring-paper);
}
.bar__buy { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; font-size: 0.95rem; }
.bar__buy:hover, .buy:hover { background: var(--cobalt) var(--tex) 0 0 / 300px; background-blend-mode: multiply; transform: rotate(0.6deg) translateY(-2px); }
.bar__buy:active, .buy:active { transform: translateY(2px) scale(0.97); box-shadow: 0 0 0 3px var(--paper), 0 1px 0 3px var(--shade); transition-duration: 0.08s; }
.buy[aria-busy="true"], .buy:disabled { background: var(--color-disabled) var(--tex) 0 0 / 300px; color: var(--color-on-disabled); box-shadow: 0 0 0 3px var(--paper); transform: none; }

/* ---------- Hero ---------- */

/* ---------- The shop: the pick's color on paper ---------- */
.swatches { --ring-gap: var(--paper); }
.swatches__label { font-family: var(--font-paper); }
.bar { background: var(--wash) var(--tex) 0 0 / 520px; background-blend-mode: multiply; }
.hero { background: var(--tex) 0 0 / 520px, var(--spotlight), var(--wash); background-blend-mode: multiply, normal; }
.swatch__chip, .stage__turn, .gallery__thumb { background: var(--paper) var(--tex) 0 0 / 240px; background-blend-mode: multiply; }
.cart__name, .cart__amount, .cart__total, .bar__count { font-family: var(--font-paper); }
.order__note [data-deal] { font-family: var(--font-paper); color: var(--cobalt); }
.order__note [data-ships] { font: 700 1.3rem/1 var(--font-hand); color: var(--cherry); }

/* ---------- The cart: a sheet of paper from the right ---------- */
.bar__cart { border: 0; background: var(--paper) var(--tex) 0 0 / 240px; background-blend-mode: multiply; box-shadow: 0 0 0 3px var(--paper), 0 3px 0 3px var(--shade), 0 10px 16px -8px var(--shade-deep); color: var(--ink); }
.bar__count { background: var(--marigold) var(--tex) 0 0 / 120px; background-blend-mode: multiply; color: var(--ink); box-shadow: 0 0 0 2px var(--paper); }
.cart { background: var(--paper) var(--tex) 0 0 / 420px; background-blend-mode: multiply; color: var(--ink); }
.cart::backdrop { background: color-mix(in srgb, var(--umber) 45%, transparent); }
.cart__head, .cart__line { border-bottom: 2px dashed color-mix(in srgb, var(--ink) 35%, transparent); }
.cart__chip { background: var(--oat) var(--tex) 0 0 / 240px; background-blend-mode: multiply; box-shadow: 0 0 0 2px var(--paper), 0 3px 6px -2px var(--shade); }
.cart__saving { color: var(--cobalt); font-family: var(--font-paper); }
.cart__ships { font: 700 1.3rem/1.15 var(--font-hand); color: var(--cherry); }
.cart__close:hover { background: var(--oat); }

/* ---------- The order box: a coupon ---------- */
.order, .coupon {
  border: 3px dashed color-mix(in srgb, var(--ink) 70%, transparent);
  border-radius: 20px;
  background: var(--paper) var(--tex) 0 0 / 420px;
  background-blend-mode: multiply;
  color: var(--ink);
  box-shadow: 0 18px 30px -18px var(--shade-deep);
  transform: rotate(-1deg);
}
.order { padding: clamp(22px, 3vw, 30px); }
.order__price { font-family: var(--font-paper); }
.order__list { text-decoration-color: var(--cherry); text-decoration-thickness: 0.1em; }
.order__ships { margin-top: 4px; font: 700 1.6rem/1.1 var(--font-hand); color: var(--cherry); }
.order__thanks { font-family: var(--font-paper); }
.stepper { border: 0; border-radius: var(--cut); background: var(--oat) var(--tex) 0 0 / 300px; background-blend-mode: multiply; box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ink) 80%, transparent); }
.stepper__button, .stepper__count { font-family: var(--font-paper); }
.stepper__button:first-child, .stepper__button:last-child { border-radius: var(--cut); }

/* ---------- Section headings ---------- */
.details h2, .closing h2 { font-size: clamp(2.1rem, 1.4rem + 2.8vw, 3.6rem); line-height: 1; }

/* ---------- Torn seams into the cobalt sections ---------- */
.closing, .foot { position: relative; isolation: isolate; }
.closing::before, .closing::after, .foot::before, .foot::after {
  content: "";
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  top: -30px;
  height: 46px;
  pointer-events: none;
  background: var(--paper) var(--tex) 0 0 / 520px;
  background-blend-mode: multiply;
  mask: var(--tear-a) top / 100% 100% no-repeat;
}
.closing::after, .foot::after { top: -25px; background-color: var(--face); mask-image: var(--tear-b); }
:root[data-state="open"] .foot::before, :root[data-state="open"] .foot::after { display: none; }

/* ---------- Details and questions: index cards on the page, with no seam (the same oat as above, as on wagu.com) ---------- */
.specs, .faq details {
  background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--cherry) 50%, transparent) 22px 24px, transparent 24px), var(--tex);
  background-size: auto, 420px;
  background-blend-mode: normal, multiply;
  filter: drop-shadow(0 1px 1px var(--shade)) drop-shadow(0 6px 8px color-mix(in srgb, var(--umber) 12%, transparent));
}
.specs { padding: 12px 20px 12px 38px; transform: rotate(-0.8deg); }
.specs div, .specs div:last-child { padding: 7px 0; border: 0; }
.faq { display: grid; align-content: start; gap: 12px; }
.faq details, .faq details:last-child { position: relative; border: 0; transform: rotate(var(--r, -0.6deg)); transition: transform 0.4s var(--spring-paper); }
.faq details:nth-of-type(2n) { --r: 0.6deg; }
.faq details:nth-of-type(3n) { --r: -0.3deg; }
.faq__title { margin-bottom: 4px; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1; }
.faq details:hover { transform: rotate(0deg) translateY(-2px); }
.faq summary { display: block; position: relative; padding: 15px 56px 15px 38px; font: 800 1.08rem/1.3 var(--font-paper); }
.faq summary::after, .faq details[open] summary::after {
  content: "+";
  position: absolute;
  right: 14px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  border-radius: 50%;
  background: var(--marigold) var(--tex) 0 0 / 120px;
  background-blend-mode: multiply;
  box-shadow: 0 0 0 2px var(--paper), 0 2px 3px var(--shade);
  color: var(--ink);
  font: 900 1.2rem/1 var(--font-paper);
  transition: transform 0.45s var(--spring-paper);
}
.faq details[open] summary::after { transform: rotate(135deg); }
.faq details p { max-width: none; padding: 0 20px 18px 38px; }

/* ---------- Closing: a coupon on cobalt, cut along the dashes ---------- */
.closing { --face: var(--cobalt); display: block; justify-items: normal; max-width: none; margin: 0; padding: clamp(64px, 8vw, 88px) var(--inset) clamp(72px, 9vw, 96px); background: var(--cobalt) var(--tex) 0 0 / 520px; background-blend-mode: multiply; color: var(--paper); }
.cutline { display: flex; align-items: center; gap: 10px; max-width: 760px; margin: 0 auto 22px; color: var(--paper); font: 700 1.4rem/1 var(--font-hand); }
.cutline::after { content: ""; flex: 1; border-top: 3px dashed currentColor; opacity: 0.8; }
.cutline svg { flex: none; width: 34px; height: 34px; }
.coupon { display: grid; justify-items: start; gap: 16px; max-width: 760px; margin-inline: auto; padding: clamp(28px, 4vw, 40px) clamp(22px, 4vw, 48px); }
.closing__price { color: var(--ink-2); }
.closing .order__status:empty { display: none; }

/* ---------- Footer ---------- */
.foot { --face: var(--cobalt); width: auto; margin: 0; padding: 18px var(--inset) 28px; border-top: 0; background: var(--cobalt) var(--tex) 0 0 / 520px; background-blend-mode: multiply; color: var(--paper); font: 400 0.9rem/1.5 var(--font-body); }
.foot__words { font: 700 1.3rem/1 var(--font-hand); }
:root:not([data-state="open"]) .foot { padding-top: 48px; }

/* ---------- Confetti, when an order is confirmed ---------- */
.confetti { position: fixed; z-index: 60; width: 10px; height: 12px; pointer-events: none; background: var(--c) var(--tex) 0 0 / 80px; background-blend-mode: multiply; animation: confetti 1.4s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
@keyframes confetti {
  0% { transform: translate(0, 0) rotate(0); opacity: 1; }
  45% { transform: translate(calc(var(--dx) * 0.7), var(--dy)) rotate(calc(var(--r) * 0.5)); opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--dy) + 320px)) rotate(var(--r)); opacity: 0; }
}

/* The closing coupon settles onto the page as it scrolls in. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .coupon { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes settle { from { translate: 0 22px; rotate: -3deg; } }
  }
}