/* One painted companion explores the page. The 1000 × 900 top-perch painting's
   contact line is y620, so -.62 × canvas width puts the wrists on the border
   at every size. Only actual claw tips extend onto the card. */
.dragon-perch {
  --dragon-width: clamp(200px, 19vw, 280px);
  position: absolute;
  z-index: 4;
  top: 0;
  left: 50%;
  width: var(--dragon-width);
  height: 0;
  transform: translateX(-60%);
  pointer-events: none;
  visibility: hidden;
}
.dragon-perch[data-ready="true"][data-live="true"] { visibility: visible; }
.dragon-perch__canvas {
  position: absolute;
  left: 0;
  top: calc(var(--dragon-width) * -.62);
  display: block;
  width: 100%;
  height: calc(var(--dragon-width) * .9);
  max-width: none;
  pointer-events: none;
}
.dragon-perch__hello {
  position: absolute;
  left: 39%;
  top: calc(var(--dragon-width) * -.55);
  width: 42%;
  height: calc(var(--dragon-width) * .43);
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 46% 46% 38% 38%;
  background: transparent;
  color: var(--text);
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.dragon-perch__hello:focus-visible { outline: 2px solid #a5ccec; outline-offset: 6px; }
.dragon-perch__hello:disabled { pointer-events: none; cursor: default; }

/* Follow the card's own opacity/entrance/hover. Once the artwork starts
   expanding, there must be no detached dragon over the showcase. */
.pin .arrival:is([data-state="move"], [data-state="show"], [data-card="off"]) :is([data-dragon-perch="hero"], [data-dragon-perch="sorta"]) {
  visibility: hidden;
}
.letter { position: relative; scroll-margin-top: 180px; } /* Added to the page's header scroll-padding. */
.letter .dragon-perch {
  --dragon-width: clamp(235px, 22vw, 300px);
  top: -1px; /* Match the letter's outside border, including its 1px stroke. */
  left: auto;
  right: 8px;
  transform: none;
}
[data-dragon-perch="sorta"] { left: 46%; }

/* The side portrait is painted around a vertical grip at x850 on a square
   stage. A sliver of the page edge conceals the body; the real claws cross it. */
.upcoming, .studio { position: relative; overflow: clip; }
.dragon-perch[data-dragon-pose="edge"] {
  --dragon-width: clamp(200px, 20vw, 290px);
  left: auto;
  right: calc(14px - var(--dragon-width) * .15);
  width: var(--dragon-width);
  height: var(--dragon-width);
  transform: none;
}
.dragon-perch[data-dragon-pose="edge"] .dragon-perch__canvas {
  top: 0;
  left: 0;
  height: 100%;
}
.dragon-perch[data-dragon-pose="edge"] .dragon-perch__hello {
  top: 12%;
  left: 16%;
  width: 58%;
  height: 52%;
}
.dragon-perch[data-dragon-side="left"] {
  left: calc(14px - var(--dragon-width) * .15);
  right: auto;
}
.dragon-perch[data-dragon-side="left"] .dragon-perch__canvas { transform: scaleX(-1); }
.dragon-perch[data-dragon-side="left"] .dragon-perch__hello { left: 26%; }
[data-dragon-perch="upcoming-edge"] { top: clamp(145px, 17vw, 270px); }
[data-dragon-perch="studio-edge"] { top: 18%; }
.dragon-motion {
  margin-left: auto;
  min-height: 44px;
  padding: 8px 12px;
  color: var(--text-3);
  border: 1px solid transparent;
  border-radius: 8px;
  font: inherit;
  cursor: pointer;
}
.dragon-motion[hidden] { display: none; }
.dragon-motion:disabled { cursor: default; opacity: .65; }
.dragon-motion:focus-visible { outline: 2px solid #a5ccec; outline-offset: 3px; }
@media (hover: hover) {
  .dragon-motion:not(:disabled):hover { color: var(--text); border-color: var(--line-2); }
}
@media (min-width: 1200px) and (min-height: 700px) {
  .gamecards { top: 56%; }
}
@media (max-width: 899.98px) {
  /* The next card is below the social links: reserve the full silhouette,
     including its horns, instead of painting over the last link. */
  .js .letter:has([data-dragon-perch]) { margin-top: 138px; }
}
@media (max-width: 639.98px) {
  :is([data-dragon-perch="hero"], [data-dragon-perch="sorta"]) { --dragon-width: min(280px, 80vw); }
  /* The second card gets its own space for a complete silhouette. */
  .intro .gamecard--upcoming { margin-top: 134px; }
  .letter .dragon-perch { --dragon-width: min(255px, 76vw); right: 0; }
  .dragon-perch[data-dragon-pose="edge"] { --dragon-width: 205px; }
  [data-dragon-perch="upcoming-edge"] { top: 86px; }
  .studio:has([data-dragon-perch="studio-edge"]) { padding-top: 214px; }
  [data-dragon-perch="studio-edge"] { top: 4px; }
  .dragon-motion { margin-left: 0; }
}