/* The things you can pick up, the things in the air, and the pocket they go into.
   Written against tokens.css. Works with any page markup: hoard.js builds what it needs.
   Z-order, from DIRECTION.md: collectibles 2, carried thing 41, pocket 42, cursor effects 70. */

/* ---------------------------------------------------------------- Anything you can pick up */

[data-collect] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

[data-collect] img,
[data-collect] svg {
  -webkit-user-drag: none;
}

/* The sheen needs something to sit in. No specificity, so the page's own placement wins. */
:where([data-collect][data-trinket]) {
  position: relative;
  isolation: isolate;
}

/* Taken from where it lay. It keeps its space, so a list never jumps while you scroll it. */
.hoard-gone {
  visibility: hidden !important;
}

/* ---------------------------------------------------------------- Trinkets */

.hoard-trinket {
  --size: clamp(58px, 5.6vw, 88px);
  --r: 0deg;
  appearance: none;
  display: inline-block;
  position: relative;
  width: var(--size);
  height: var(--size);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  rotate: var(--r);
}

/* Placed by data-x and data-y, percentages of the section it lies in. */
.hoard-trinket--placed {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  margin: calc(var(--size) / -2) 0 0 calc(var(--size) / -2);
  z-index: 2;
}

.hoard-trinket__shadow {
  position: absolute;
  left: 14%;
  right: 14%;
  bottom: 8%;
  height: 24%;
  border-radius: 50%;
  background: var(--art-shadow);
  opacity: 0.26;
  filter: blur(5px);
  pointer-events: none;
  z-index: -1;
  transition: transform 140ms var(--ease-out), opacity 140ms var(--ease-out);
}

.hoard-trinket__art {
  position: absolute;
  inset: 0;
  display: block;
  transition: transform 140ms var(--ease-out);
}

.hoard-trinket__art img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Light moving on metal. The trinket's own outline masks it, so it never spills past the edge. */
.hoard-trinket__sheen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.hoard-trinket__sheen i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 64%;
  height: 64%;
  margin: -32% 0 0 -32%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 253, 247, 0.85), rgba(255, 253, 247, 0));
  opacity: 0;
  will-change: transform, opacity;
}

@media (hover: hover) and (pointer: fine) {
  [data-collect]:hover > .hoard-trinket__art,
  .hoard-thing--rest:hover .hoard-trinket__art {
    transform: translateY(-3px) rotate(-3deg);
  }

  [data-collect]:hover > .hoard-trinket__shadow {
    transform: scale(0.92);
    opacity: 0.2;
  }
}

.hoard-trinket:focus-visible,
.hoard-thing:focus-visible {
  outline: 3px solid var(--leaf);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- Things in the air, things that fell */

/* Where a dropped thing comes to rest. It belongs to the page now and scrolls with it. */
.hoard-floor {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 3; /* Above the peek bird, so nothing is ever lost behind it. Below the sign-up cards. */
}

.hoard-thing {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 41;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.hoard-thing--rest {
  position: absolute;
  will-change: auto;
}

.hoard-thing--carry {
  pointer-events: none;
}

.hoard-thing__body {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 50% 50%;
}

.hoard-thing__body > * {
  pointer-events: none;
}

.hoard-thing__shadow {
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: var(--shadow-radius, 18px);
  background: var(--art-shadow);
  opacity: 0;
  filter: blur(9px);
  pointer-events: none;
}

/* ---------------------------------------------------------------- The pocket */

.hoard-pocket {
  --hoard-w: 92px;
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 42;
  width: var(--hoard-w);
  height: calc(var(--hoard-w) * 0.92);
}

.hoard-pocket__button {
  appearance: none;
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hoard-pocket__stack {
  position: absolute;
  inset: 0;
  transition: transform 120ms var(--ease-out);
}

.hoard-pocket__button:active .hoard-pocket__stack {
  transform: translateY(2px);
  transition-duration: 80ms;
}

.hoard-pocket__button:focus-visible {
  /* Two rings, so it shows on paper and on the dark and green fields alike. */
  outline: 3px solid var(--art-paper-hi);
  box-shadow: 0 0 0 6px var(--art-x-low);
  outline-offset: 2px;
  border-radius: var(--radius-lg);
}

.hoard-pocket__back,
.hoard-pocket__front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.hoard-pocket__pile {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.hoard-item {
  will-change: transform;
}

/* The nest is on screen and holding the hoard, so the pocket steps aside. */
.hoard-pocket {
  transition: transform 220ms var(--ease-drawer);
}

.hoard-pocket--left {
  right: auto;
  left: max(20px, env(safe-area-inset-left));
}

.hoard-pocket--bare .hoard-pocket__pile { visibility: hidden; }

.hoard-pocket--tucked {
  transform: translateY(calc(100% + 32px));
  transition-duration: 160ms;
  pointer-events: none;
}

/* A drag is on its way: the pocket looks up. Over it: it comes to meet you. One move each. */
.hoard-pocket--ready .hoard-pocket__stack {
  transform: translateY(-3px);
  transition: transform 140ms var(--ease-out);
}

.hoard-pocket--over .hoard-pocket__stack {
  transform: translateY(-7px) scale(1.07);
  transition: transform 140ms var(--ease-out);
}

.hoard-pocket--open .hoard-item {
  transition: transform 220ms var(--ease-drawer);
}

.hoard-item--closing {
  transition: transform 140ms var(--ease-out);
}

.hoard-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* The nest's heap. Sits between the nest's back and front art. */
:where(#nest [data-hoard-nest]) {
  position: absolute;
  inset: 0;
}

/* Its own stack, so the heap can never climb over the nest's front rim. */
#nest [data-hoard-nest] {
  isolation: isolate;
}

.hoard-nest-piece {
  position: absolute;
  pointer-events: none;
}

/* Your email, on its paper tag, in the bowl with everything else. */
.hoard-nest-tag {
  position: absolute;
  left: 58%;
  top: 27.5%;
  max-width: 30%;
  padding: .32em .8em .32em 1.5em;
  border-radius: .5em;
  background: var(--art-paper-hi);
  box-shadow: 0 .16em 0 var(--art-paper-low);
  color: #3d3226;
  font-family: var(--font-sans);
  font-size: clamp(9px, 1.05vw, 15px);
  font-weight: 800;
  line-height: 1.3;
  rotate: -7deg;
  pointer-events: none;
}
.hoard-nest-tag::before {
  content: "";
  position: absolute;
  left: .55em;
  top: 50%;
  width: .46em;
  height: .46em;
  margin-top: -.23em;
  border-radius: 50%;
  background: var(--art-leaf-deep);
}
.hoard-nest-tag span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (max-width: 640px) {
  .hoard-pocket {
    --hoard-w: 72px;
    right: max(12px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
  }

  .hoard-pocket--left {
    right: auto;
    left: max(12px, env(safe-area-inset-left));
  }
}

/* ---------------------------------------------------------------- Catch sparkles (cursor.js) */

.catch-glint {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 70;
  display: block;
  pointer-events: none;
  will-change: transform, opacity;
}

/* ---------------------------------------------------------------- Reduced motion */

@media (prefers-reduced-motion: reduce) {
  .hoard-pocket,
  .hoard-trinket__art,
  .hoard-trinket__shadow,
  .hoard-pocket__stack,
  .hoard-item,
  .hoard-pocket--open .hoard-item,
  .hoard-item--closing {
    transition: none !important;
  }

  .hoard-pocket--ready .hoard-pocket__stack,
  .hoard-pocket--over .hoard-pocket__stack,
  [data-collect]:hover > .hoard-trinket__art {
    transform: none;
  }
}