/* fassinos.com landing page */
@font-face {
  font-family: "Monsieur La Doulaise";
  src: url("/assets/fonts/monsieur-la-doulaise-latin.woff2") format("woff2");
  font-display: block;   /* the name never flashes in a fallback face */
}
:root { --paper: #f6f5f2; --ink: #1a1a1a; --dot: rgba(26, 26, 26, .16); color-scheme: light dark; }
@media (prefers-color-scheme: dark) { :root { --paper: #131313; --ink: #f2f2f2; --dot: rgba(242, 242, 242, .13); } }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  background: var(--paper); color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
#stage { position: fixed; inset: 0; touch-action: none; }
#grid { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* The signature. It is a real link in the HTML; the script marks the page .locked until the
   puzzle is solved, so if the script never runs the name simply works. */
.mark {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -56%);
  font-family: "Monsieur La Doulaise", "Snell Roundhand", "Apple Chancery", cursive; font-weight: 400;
  font-size: clamp(52px, 11vw, 128px); line-height: 1; white-space: nowrap;
  color: var(--ink); text-decoration: none; cursor: pointer;
  padding: .18em .28em .22em .16em;   /* a generous hit area around the strokes */
  -webkit-font-smoothing: antialiased;
}
.mark span { display: inline-block; }
.locked .mark { pointer-events: none; cursor: default; }
.mark:focus-visible { outline: 1px solid currentColor; outline-offset: 4px; border-radius: 6px; }

/* solved: the name breathes, barely, so it reads as something to tap */
.mark.on { animation: breathe 3.5s ease-in-out 1.8s infinite; }
@keyframes breathe { 50% { transform: translate(-50%, -56%) scale(1.018); } }
.mark.on:hover, .mark.on:active { opacity: .82; }
@media (prefers-reduced-motion: reduce) { .mark.on { animation: none; } }