/* Pixel pals — penguin + bear mascots. Drawn by pals.js from pixels.js */

/* ---------- the mood-board scene ---------- */
.table-wrap{ position: relative; --ps: 4; }
@media (max-width: 760px){ .table-wrap{ --ps: 3; } }
.pals-layer{ position: absolute; inset: 0; z-index: 6; overflow: hidden; border-radius: 14px; pointer-events: none; }
.pals-layer[hidden]{ display: none; }

/* the golden-thread road the pals live on (drawn by pals.js; sits over the table, under the pals) */
.thread-road{ position: absolute; left: calc(24px - var(--ps) * 1px); bottom: 10px; z-index: 5; width: calc(72px * var(--ps)); height: calc(9px * var(--ps)); pointer-events: none; overflow: visible;
  filter: drop-shadow(0 0 7px rgba(246,214,140,.38)) drop-shadow(0 2px 2px rgba(0,0,0,.4)); }
.thread-road svg{ display: block; width: 100%; height: 100%; overflow: visible; }
.road-shine{ stroke-dasharray: .07 .93; stroke-dashoffset: 1; animation: roadShine 4.6s linear infinite; }
@keyframes roadShine{ to{ stroke-dashoffset: -1; } }
.road-tw{ transform-box: fill-box; transform-origin: center; animation: roadTw 2.9s ease-in-out infinite; }
@keyframes roadTw{ 0%, 100%{ opacity: .1; } 50%{ opacity: .95; } }

.pal{ position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pal-air{ position: absolute; left: 0; top: 0; width: 0; height: 0; will-change: transform; }
.pal-c{ position: absolute; left: 0; bottom: 0; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; transform-origin: 50% 100%; }
.pal-c.flip{ transform: scaleX(-1); }
.pal-sh{ position: absolute; left: 0; top: 0; width: calc(var(--ps) * 13px); height: calc(var(--ps) * 3px); margin: calc(var(--ps) * -1.5px) 0 0 calc(var(--ps) * -6.5px); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.34), rgba(0,0,0,0)); will-change: transform, opacity; }
.pal-hit{ position: absolute; left: 0; bottom: 0; transform: translateX(-50%); border: 0; padding: 0; margin: 0; background: transparent; border-radius: 40% 40% 12% 12%; pointer-events: auto; touch-action: none; cursor: grab; -webkit-tap-highlight-color: transparent; }
.pal-hit:active, .pal.held .pal-hit{ cursor: grabbing; }
.pal-hit:focus-visible{ outline: 2px solid var(--amber, #ff8a2a); outline-offset: 2px; }

.pal-fx{ position: absolute; left: 0; top: 0; z-index: 99999; image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; will-change: transform, opacity; }

/* a fresh print gets shaken like a polaroid */
.card.pal-shake{ animation: pshake .95s cubic-bezier(.36,.07,.19,.97); }
@keyframes pshake{
  0%, 100%{ transform: rotate(var(--rot)); }
  10%{ transform: rotate(calc(var(--rot) - 7deg)) translateY(-4px); }
  22%{ transform: rotate(calc(var(--rot) + 7deg)) translateY(-2px); }
  34%{ transform: rotate(calc(var(--rot) - 6deg)) translateY(-4px); }
  46%{ transform: rotate(calc(var(--rot) + 6deg)) translateY(-2px); }
  58%{ transform: rotate(calc(var(--rot) - 4deg)) translateY(-3px); }
  70%{ transform: rotate(calc(var(--rot) + 4deg)); }
  84%{ transform: rotate(calc(var(--rot) - 2deg)); }
}

/* ---------- on / off switch in the board tools ---------- */
.pals-toggle{ padding: 6px 12px; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.pals-toggle canvas{ width: 24px; height: 21px; image-rendering: pixelated; image-rendering: crisp-edges; display: block; margin: -2px 0; }
.pals-toggle[aria-pressed="false"]{ opacity: .6; }
.pals-toggle[aria-pressed="false"] canvas{ filter: grayscale(1) opacity(.7); }

/* ---------- the little penguin next to the wordmark ---------- */
.brand{ display: flex; align-items: center; gap: 2px; min-width: 0; }
.brand-pal{ position: relative; flex: none; width: 38px; height: 34px; margin: 4px 0 -4px 0; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.brand-pal[hidden]{ display: none; }
.brand-pal .pal-hit{ pointer-events: none; }
.brand-pal:focus-visible{ outline: 2px solid var(--amber, #ff8a2a); outline-offset: 2px; border-radius: 10px; }
.brand-pal .pal-sh{ opacity: .55; }

@media (prefers-reduced-motion: reduce){
  .card.pal-shake{ animation: none; }
}

/* ---------- the envelope (a letter from the bear) ---------- */
.envelope{ position: absolute; z-index: 7; left: calc(24px + 71px * var(--ps) + 14px); bottom: calc(10px + var(--ps) * 1px); width: calc(13px * (var(--ps) + 1)); height: calc(9px * (var(--ps) + 1)); padding: 0; border: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; transform-origin: 50% 100%; filter: drop-shadow(0 4px 5px rgba(0,0,0,.45)); animation: envBob 3.2s ease-in-out infinite; }
.envelope[hidden]{ display: none; }
.envelope.in{ animation: envPop .85s cubic-bezier(.2,1.6,.4,1), envBob 3.2s ease-in-out .85s infinite; }
.envelope:hover, .envelope:focus-visible{ filter: drop-shadow(0 4px 5px rgba(0,0,0,.45)) brightness(1.12); }
.envelope:focus-visible{ outline: 2px solid var(--amber, #ff8a2a); outline-offset: 6px; }
.env-body{ display: block; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; }
.env-heart{ position: absolute; left: 50%; top: calc(var(--ps) * -7px); width: calc(5px * var(--ps)); height: calc(5px * var(--ps)); margin-left: calc(var(--ps) * -2.5px); image-rendering: pixelated; image-rendering: crisp-edges; pointer-events: none; animation: envHeart 1.9s ease-in-out infinite; }
.envelope.read .env-heart{ display: none; }
.env-tip{ position: absolute; left: 50%; bottom: calc(100% + var(--ps) * 8px); transform: translate(-50%, 6px); white-space: nowrap; padding: 5px 11px; border-radius: 999px; font-family: var(--mono, monospace); font-size: 11.5px; letter-spacing: .14em; color: #f6e3bd; background: rgba(21,17,14,.78); border: 1px solid rgba(246,227,189,.3); opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none; }
.envelope.read .env-tip{ bottom: calc(100% + var(--ps) * 2px); }
.envelope.tip .env-tip, .envelope:hover .env-tip, .envelope:focus-visible .env-tip{ opacity: 1; transform: translate(-50%, 0); }
@keyframes envBob{ 0%, 100%{ transform: translateY(0) rotate(-2deg); } 50%{ transform: translateY(-3px) rotate(2deg); } }
@keyframes envPop{ from{ transform: scale(0) rotate(-24deg); opacity: 0; } }
@keyframes envHeart{ 0%, 100%{ transform: translateY(0) scale(1); } 50%{ transform: translateY(calc(var(--ps) * -3px)) scale(1.12); } }

/* ---------- the letter ---------- */
.letter{ position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px calc(env(safe-area-inset-bottom, 0px) + 18px);
  background: rgba(10,6,7,.74); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); opacity: 0; transition: opacity .3s ease; }
.letter[hidden]{ display: none; }
.letter.go{ opacity: 1; } .letter.out{ opacity: 0; }
.letter-paper{ position: relative; width: min(540px, 100%); border-radius: 6px; color: #2a2547; outline: none; cursor: default;
  background: radial-gradient(120% 90% at 20% 0%, rgba(255,255,255,.65), transparent 60%), linear-gradient(180deg, #fbf5e6, #f2e8d2);
  box-shadow: 0 44px 100px rgba(0,0,0,.65), inset 0 0 0 1px rgba(255,255,255,.45), inset 0 0 60px rgba(150,110,60,.12);
  transform: translateY(44px) rotate(-2.5deg) scale(.94); opacity: 0; transition: transform .75s cubic-bezier(.2,1.15,.3,1), opacity .45s ease; }
.letter.go .letter-paper{ transform: rotate(-.6deg); opacity: 1; }
.letter.out .letter-paper{ transform: translateY(30px) scale(.96); opacity: 0; transition-duration: .25s; }
.letter-inner{ max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow: auto; padding: 58px clamp(24px, 6vw, 46px) 22px; border-radius: 6px; scrollbar-width: thin; }
.letter-seal{ position: absolute; z-index: 2; left: 50%; top: -24px; width: 78px; height: 54px; margin-left: -39px; image-rendering: pixelated; image-rendering: crisp-edges; filter: drop-shadow(0 5px 7px rgba(0,0,0,.4)); transform: scale(0); transition: transform .6s cubic-bezier(.3,1.8,.5,1) .4s; }
.letter.go .letter-seal{ transform: scale(1) rotate(-4deg); }
.letter-to{ margin: 0 0 14px; font: 700 clamp(32px, 5.4vw, 42px)/1.1 "Caveat", "Homemade Apple", cursive; color: #8a3a52; }
.letter-body p{ margin: 0 0 12px; min-height: 1.34em; font: 500 clamp(25px, 3.8vw, 30px)/1.34 "Caveat", "Homemade Apple", cursive; }
.caret{ display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -.12em; background: #8a3a52; animation: caretBlink .8s steps(1) infinite; }
@keyframes caretBlink{ 50%{ opacity: 0; } }
.letter-from{ margin: 10px 0 0; text-align: right; font: 700 clamp(30px, 4.8vw, 38px)/1 "Caveat", "Homemade Apple", cursive; color: #8a3a52; opacity: 0; transform: translateY(8px); transition: opacity .6s, transform .6s; }
.letter-pals{ display: block; width: 256px; height: 88px; margin: 8px auto 0; image-rendering: pixelated; image-rendering: crisp-edges; opacity: 0; transform: translateY(14px); transition: opacity .7s .25s, transform .7s .25s cubic-bezier(.3,1.5,.5,1); }
.letter.done .letter-from, .letter.done .letter-pals{ opacity: 1; transform: none; }
.letter-x{ position: absolute; z-index: 3; right: 10px; top: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(138,58,82,.1); color: #8a3a52; font-size: 15px; line-height: 1; display: grid; place-items: center; cursor: pointer; transition: background .2s, transform .2s; }
.letter-x:hover{ background: rgba(138,58,82,.2); transform: rotate(90deg); }
.letter-x:focus-visible{ outline: 2px solid #8a3a52; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
  .envelope, .envelope.in, .env-heart, .road-shine, .road-tw{ animation: none; }
  .letter, .letter-paper, .letter-seal, .letter-from, .letter-pals{ transition: none; }
}