/* ─────────────────────────────────────────────────────────────────────────
   frinq poster world — drop-in stylesheet
   Source of truth: DESIGN.md in this kit. Pair with js/frinq-hand.js.
   Paths assume this file lives in css/ next to fonts/ and images/.
   ───────────────────────────────────────────────────────────────────────── */

@font-face { font-family: "Inter Tight"; src: url("../fonts/InterTight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Emphasis Hand"; src: url("../fonts/NothingYouCouldDo.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Notes Hand"; src: url("../fonts/KalamLight.woff2") format("woff2"); font-weight: 300; font-display: swap; }

:root {
  /* palette — five colours from the campaign board */
  --fq-paper: #E9E4DA;
  --fq-paper-hi: #F6F3ED;   /* slips, cards, sheets: one step brighter than paper */
  --fq-blush: #F1A9B9;
  --fq-signal: #E4412A;
  --fq-ink: #121110;
  --fq-charcoal: #3B3936;

  /* type */
  --fq-print: "Inter Tight", system-ui, sans-serif;
  --fq-hand: "Emphasis Hand", cursive;
  --fq-notes: "Notes Hand", cursive;

  /* motion */
  --fq-ease: cubic-bezier(.16, 1, .3, 1);
  --fq-ease-draw: cubic-bezier(.3, .6, .2, 1);
}

/* ── grounds: a colour owns the whole section, never an accent ── */
.fq-ground { position: relative; isolation: isolate; background: var(--ground); color: var(--fg); overflow: hidden; }
.fq-ground::after { /* crumpled-print grain over every ground */
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url("../images/paper-portrait.jpg") center / cover; mix-blend-mode: soft-light; opacity: .75;
}
@media (min-aspect-ratio: 4/5) {
  .fq-ground::after { background: url("../images/paper-landscape.jpg") 0 0 / 1600px auto repeat; }
}
.fq-paper  { --ground: var(--fq-paper);  --fg: var(--fq-ink);   --fg2: #4A4642; --mark: var(--fq-ink); }
.fq-blush  { --ground: var(--fq-blush);  --fg: var(--fq-ink);   --fg2: #3A2A2E; --mark: var(--fq-ink); }
.fq-signal { --ground: var(--fq-signal); --fg: var(--fq-ink);   --fg2: #1E0C08; --mark: var(--fq-ink); }
.fq-ink    { --ground: var(--fq-ink);    --fg: var(--fq-paper); --fg2: #BDB6AB; --mark: var(--fq-paper); }
.fq-ink::after { mix-blend-mode: screen; opacity: .07; }
.fq-ground > * { position: relative; z-index: 2; }

/* ── type ── */
.fq-body { font-family: var(--fq-print); -webkit-font-smoothing: antialiased; }
.fq-wordmark { font-family: var(--fq-print); font-weight: 800; letter-spacing: -.05em; line-height: 1; } /* "frinq", lowercase, never letterspaced */
.fq-display { font-family: var(--fq-print); font-weight: 800; font-size: clamp(40px, 7.5vw, 112px); line-height: .98; letter-spacing: -.045em; text-wrap: balance; }
.fq-h2 { font-family: var(--fq-print); font-weight: 800; font-size: clamp(32px, 5vw, 64px); line-height: 1.02; letter-spacing: -.04em; text-wrap: balance; }
.fq-h3 { font-family: var(--fq-print); font-weight: 800; font-size: clamp(24px, 2.6vw, 34px); line-height: 1.06; letter-spacing: -.03em; }
.fq-text { font-family: var(--fq-print); font-size: 17px; line-height: 1.5; color: var(--fg2); max-width: 62ch; }
.fq-small { font-family: var(--fq-print); font-size: 14px; line-height: 1.45; color: var(--fg2); }
.fq-tagline { font-family: var(--fq-print); font-size: 11.5px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; }
.fq-tab { font-variant-numeric: tabular-nums; }

/* the emphasis hand: one word written into a printed line */
.fq-em { font-family: var(--fq-hand); font-weight: 400; letter-spacing: 0; font-size: 1.16em; line-height: .8;
  display: inline-block; position: relative; padding: 0 .04em; white-space: nowrap; transform: rotate(-2deg) translateY(.04em); }
.fq-em > svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.fq-nw { white-space: nowrap; } /* keeps a hand word and its punctuation together */

/* the notes hand: caps margin comments, never necessary to act */
.fq-note { font-family: var(--fq-notes); font-weight: 300; font-size: 17px; line-height: 1.28; letter-spacing: .05em; text-transform: uppercase;
  display: inline-block; transform: rotate(-4deg); transform-origin: left top; }

/* struck-through lines, like the pink poster ("The swipe. The match.") */
.fq-struck { position: relative; display: inline-block; }
.fq-struck > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

/* ── controls ── */
.fq-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; padding: 0 22px;
  border: 0; border-radius: 2px; background: var(--fg); color: var(--ground); cursor: pointer;
  font: 700 17px/1 var(--fq-print); letter-spacing: -.01em; text-decoration: none; transition: transform .12s var(--fq-ease); }
.fq-btn svg { width: 30px; height: 14px; overflow: visible; transition: transform .25s var(--fq-ease); }
.fq-btn:active { transform: translateY(1px); }
.fq-btn:active svg { transform: translateX(4px); }
.fq-btn:focus-visible, .fq-link:focus-visible, .fq-slip:focus-visible { outline: 2px solid var(--mark); outline-offset: 4px; }
.fq-link { color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; min-height: 44px; display: inline-flex; align-items: center; }

/* paper slip: options, cards, anything that is a separate piece of paper */
.fq-slip { position: relative; display: block; background: var(--fq-paper-hi); color: var(--fq-ink); border-radius: 2px; padding: 16px 18px;
  font: 500 17px/1.3 var(--fq-print); box-shadow: 0 0 0 1px #1211101a, 0 1px 0 #1211100d, 0 10px 16px -14px #12111066; }
.fq-slip .fq-loop { position: absolute; inset: -9px; width: calc(100% + 18px); height: calc(100% + 18px); overflow: visible; pointer-events: none; color: var(--mark); }

/* a taped sheet (tilted paper held by torn tape) */
.fq-sheet { position: relative; background: var(--fq-paper-hi); color: var(--fq-ink); border-radius: 2px; padding: 28px 22px 22px; transform: rotate(-.6deg);
  box-shadow: 0 0 0 1px #12111014, 0 18px 28px -22px #121110aa; }
.fq-sheet::before { content: ""; position: absolute; top: -13px; left: 50%; width: 108px; height: 26px; margin-left: -54px; transform: rotate(3deg);
  background: color-mix(in srgb, #FBFAF6 62%, transparent); box-shadow: 0 1px 2px #12111022;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 26' preserveAspectRatio='none'%3E%3Cpath d='M2 0 L106 0 L104 3 L107 6 L104 9 L106 13 L103 17 L106 20 L104 23 L106 26 L2 26 L4 23 L1 20 L4 16 L1 13 L3 9 L0 6 L3 3Z'/%3E%3C/svg%3E") center / 100% 100%;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 108 26' preserveAspectRatio='none'%3E%3Cpath d='M2 0 L106 0 L104 3 L107 6 L104 9 L106 13 L103 17 L106 20 L104 23 L106 26 L2 26 L4 23 L1 20 L4 16 L1 13 L3 9 L0 6 L3 3Z'/%3E%3C/svg%3E") center / 100% 100%; }

/* ── the hands: black-and-white cut-outs reaching in from the edges, never touching ── */
.fq-hands { position: relative; height: clamp(220px, 36vw, 520px); pointer-events: none; user-select: none; z-index: 1; }
.fq-hand { position: absolute; bottom: 0; height: auto; max-width: none; }
.fq-hand-l { left: -6%; width: 56%; }
.fq-hand-r { right: -6%; width: 56%; bottom: 3%; }
@media (min-width: 900px) { .fq-hand-l { left: 0; width: 46%; } .fq-hand-r { right: 0; width: 46%; } }

/* ── motion: one authored moment (the hand writing), everything else quiet ── */
@keyframes fq-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fq-write { from { opacity: 0; filter: blur(1.6px); } to { opacity: 1; filter: none; } }
@keyframes fq-reach-l { from { opacity: 0; transform: translate3d(-16%, 4%, 0) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes fq-reach-r { from { opacity: 0; transform: translate3d(16%, -3%, 0) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes fq-drift-l { from { transform: none; } to { transform: translate3d(5px, -3px, 0) rotate(.5deg); } }
@keyframes fq-drift-r { from { transform: none; } to { transform: translate3d(-4px, 2px, 0) rotate(-.4deg); } }

.fq-rise { animation: fq-up .72s var(--fq-ease) both; }
.fq-js .fq-reveal { opacity: 0; transform: translateY(16px); }            /* hidden only when JS is running */
.fq-js .fq-reveal.is-in { animation: fq-up .72s var(--fq-ease) both; }
.fq-letter { display: inline-block; animation: fq-write .24s ease-out both; }
.fq-hands.is-in .fq-hand-l, .fq-hands:not(.fq-wait) .fq-hand-l { animation: fq-reach-l 1.15s var(--fq-ease) .18s both, fq-drift-l 7s ease-in-out 1.4s infinite alternate; }
.fq-hands.is-in .fq-hand-r, .fq-hands:not(.fq-wait) .fq-hand-r { animation: fq-reach-r 1.15s var(--fq-ease) .26s both, fq-drift-r 8s ease-in-out 1.5s infinite alternate; }

.fq-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
::selection { background: var(--fq-signal); color: var(--fq-ink); }

@media (prefers-reduced-motion: reduce) {
  .fq-rise, .fq-js .fq-reveal, .fq-js .fq-reveal.is-in, .fq-letter, .fq-hand-l, .fq-hand-r { animation: none !important; opacity: 1 !important; transform: none; filter: none; }
}