/* ============================================================
   ANDREW'S BUSINESS CARD — the styles behind assets/pbx-card.js

   The card keeps its own dark room whatever the site theme is: it is a
   photograph of a printed object, and the paper and ink colours are the
   print file's, not the palette's. Sizes on the faces are in container
   units, so the face is laid out at its final size before any script has
   measured anything.
   ============================================================ */
@font-face{
  font-family:'Departure Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/assets/fonts/departure-mono.woff2') format('woff2');
}

/* the room: the card page's body, and the overlay on the home page */
.pbxc-room{
  --pbxc-ink:#edebe6;
  --pbxc-muted:#a3a19c;
  --pbxc-accent:#f0735e;
  background:radial-gradient(120% 80% at 50% 40%,#2a2a28 0%,#1a1a19 55%,#121211 100%);
  color:var(--pbxc-ink);
  font-family:'Departure Mono',ui-monospace,'SF Mono',Menlo,Consolas,monospace;
}
.pbxc-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.pbxc-body{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:100svh;padding:32px 16px;box-sizing:border-box;
}
.pbxc-hint{margin:0;text-align:center;font-size:15px;line-height:1.65;color:var(--pbxc-muted);}
.pbxc-hint>span:not(.pbxc-sr){display:block;}

/* ---------- the stage ---------- */
.pbxc-stage{
  --aspect:1.75;--depth:.007;--fill:.88;--edge:#d8d6cf;
  position:relative;display:grid;place-items:center;
  width:100%;max-width:1100px;height:min(54svh,600px,72vw);
  container-type:size;
  /* a zoomed card stays inside the stage and never widens the page */
  overflow:clip;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  cursor:grab;outline:none;
}
.pbxc-stage:active{cursor:grabbing;}
.pbxc-stage:focus-visible{outline:2px dashed currentColor;outline-offset:-8px;}
.pbxc-sizer{
  position:relative;
  width:min(calc(var(--fill) * 100cqw),calc(var(--fill) * 100cqh * var(--aspect)));
  aspect-ratio:var(--aspect);
  perspective:1800px;
}
/* --k is the render scale. The script raises it while zoomed and shrinks
   the card back down by the same amount. */
.pbxc-object{
  --k:1;
  position:absolute;
  top:calc(50% - var(--k) * 50%);left:calc(50% - var(--k) * 50%);
  width:calc(var(--k) * 100%);height:calc(var(--k) * 100%);
  container-type:inline-size;
  transform-style:preserve-3d;
}
.pbxc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.pbxc-face--front{transform:translateZ(calc(var(--depth) * 50cqw));}
.pbxc-face--back{transform:rotateY(180deg) translateZ(calc(var(--depth) * 50cqw));}
.pbxc-shade{position:absolute;inset:0;background:#000;opacity:0;pointer-events:none;}
.pbxc-edge{position:absolute;background:var(--edge);}
.pbxc-edge--left,.pbxc-edge--right{
  top:0;height:100%;width:calc(var(--depth) * 100cqw);left:calc(50% - var(--depth) * 50cqw);
}
.pbxc-edge--right{transform:rotateY(90deg) translateZ(50cqw);}
.pbxc-edge--left{transform:rotateY(-90deg) translateZ(50cqw);filter:brightness(.82);}
.pbxc-edge--top,.pbxc-edge--bottom{
  left:0;width:100%;height:calc(var(--depth) * 100cqw);top:calc(50% - var(--depth) * 50cqw);
}
.pbxc-edge--top{transform:rotateX(90deg) translateZ(calc(50cqw / var(--aspect)));}
.pbxc-edge--bottom{transform:rotateX(-90deg) translateZ(calc(50cqw / var(--aspect)));filter:brightness(.7);}

/* ---------- the front, from the print file (1050 by 600) ---------- */
.pbxc-front{
  position:absolute;inset:0;background:#fafaf8;color:#0c0c0c;
  font-family:'Sora',-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
}
.pbxc-front p{margin:0;}
.pbxc-front__emboss{
  position:absolute;top:50%;left:50%;width:25.9%;
  transform:translate(-50%,-50%);overflow:visible;
}
.pbxc-front__lockup{position:absolute;top:13.7%;left:8.15%;width:max-content;}
.pbxc-front__company{
  font-size:8.3cqw;line-height:.73;font-weight:800;letter-spacing:-.02em;text-transform:uppercase;
}
.pbxc-front__sub{
  margin-top:3.05cqw !important;display:flex;justify-content:space-between;
  padding-left:.35cqw;font-size:2.75cqw;line-height:.73;text-transform:uppercase;
}
.pbxc-front__rule{position:absolute;top:39.1%;left:8.5%;height:.8%;width:5.35%;background:#0c0c0c;}
.pbxc-front__services{
  position:absolute;top:45.75%;left:8.5%;
  font-size:2cqw;line-height:.73;font-weight:600;letter-spacing:.131em;
  white-space:nowrap;color:#5a5a58;text-transform:uppercase;
}
.pbxc-front__bar{margin:0 1.25cqw;}
.pbxc-front__who{position:absolute;bottom:12.07%;left:8.5%;}
.pbxc-front__name{font-size:3.24cqw;line-height:1;font-weight:600;}
.pbxc-front__title{margin-top:1.21cqw !important;font-size:2.35cqw;line-height:1;color:#5a5a58;}
.pbxc-front__reach{position:absolute;right:8%;bottom:10.7%;text-align:right;font-size:2.385cqw;line-height:1.68;}
.pbxc-front__qr{position:absolute;top:11.45%;right:8.1%;width:14.2%;}

/* ---------- the back: the mark in white, pressed into black stock ---------- */
.pbxc-back{position:absolute;inset:0;display:grid;place-items:center;background:#0c0c0c;}
.pbxc-back svg{width:25.9%;overflow:visible;}

/* ---------- controls and links ---------- */
.pbxc-buttons{display:flex;justify-content:center;gap:12px;margin-top:16px;}
.pbxc-button,.pbxc-link{font:inherit;color:inherit;background:none;cursor:pointer;}
.pbxc-button{
  font-size:14px;padding:6px 14px;border-radius:9999px;
  border:1px solid color-mix(in srgb,currentColor 40%,transparent);
  transition:border-color 160ms cubic-bezier(.4,0,.2,1);
}
.pbxc-button:hover{border-color:currentColor;}
.pbxc-button:focus-visible,.pbxc-link:focus-visible,.pbxc-close:focus-visible{outline:2px solid currentColor;outline-offset:3px;}
.pbxc-links{
  list-style:none;margin:24px 0 0;padding:0;
  display:flex;flex-direction:column;align-items:center;gap:12px;
  font-size:17px;
}
.pbxc-link{
  border:0;padding:0;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;
  transition:color 160ms cubic-bezier(.4,0,.2,1);
}
.pbxc-link:hover{color:var(--pbxc-accent);}
@media (min-width:768px){
  .pbxc-hint{font-size:17px;}
  .pbxc-links{font-size:19px;}
}

/* ---------- the overlay ---------- */
/* Above everything the page draws (its highest layer is 200) and below the
   custom cursor (9999), which hides the native one on fine pointers: any
   higher and the overlay would have no cursor at all. */
.pbxc-layer{
  position:fixed;inset:0;z-index:9000;
  overflow-y:auto;overscroll-behavior:contain;
  opacity:0;transition:opacity .26s ease;
}
.pbxc-layer.is-open{opacity:1;}
html.pbxc-locked,html.pbxc-locked body{overflow:hidden;}
.pbxc-close{
  position:fixed;top:max(16px,env(safe-area-inset-top));right:16px;z-index:1;
  width:44px;height:44px;display:grid;place-items:center;
  border-radius:9999px;border:1px solid color-mix(in srgb,currentColor 40%,transparent);
  background:rgb(18 18 17 / .6);color:inherit;cursor:pointer;
}
.pbxc-close svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;}
.pbxc-close:hover{border-color:currentColor;}

/* ---------- the hold, on the hero's mark ----------
   A hair of a bar fills along the foot of the plate while the mark is held.
   It waits a beat before it shows, so an ordinary press never flashes it,
   and it finishes on the same 700ms the script waits for. */
.hero__plate::after{
  content:'';position:absolute;left:0;bottom:0;z-index:3;
  width:100%;height:2px;background:var(--fg,#0e0e0c);
  transform:scaleX(0);transform-origin:left;opacity:0;pointer-events:none;
}
.hero__plate.is-card-holding::after{
  opacity:1;transform:scaleX(1);
  transition:opacity .1s ease .15s,transform .55s linear .15s;
}

@media (prefers-reduced-motion:reduce){
  .pbxc-layer,.hero__plate.is-card-holding::after{transition:none;}
}
html.reduce-motion .pbxc-layer,
html.reduce-motion .hero__plate.is-card-holding::after{transition:none;}