/* ==========================================================================
   The $FROINK Holder Crate
   A kraft-paper crate drawn in froink.com's doodle style. Three stacked
   layers share one 360x400 viewBox:
     .crate__back   interior + opening (behind the frog)
     .crate__frog   the real Froink rainbow frog
     .crate__front  coins, frame, cover, lid, lock (in front of the frog)
   States: data-state="sealed" | "open"
   Frog:   data-frog="peek" | "hidden" | "pile" (pile height set by JS)
   Tier:   data-tier="copper" ... "platinum" (colors from tokens.css)
   ========================================================================== */

.crate {
  --frog-bottom: 182;
  position: relative;
  width: 100%;
  aspect-ratio: 360 / 400;
  isolation: isolate;
}

.crate__back,
.crate__front {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crate__front {
  pointer-events: none;
}

/* ---- frog ------------------------------------------------------------------- */
.crate__frog {
  position: absolute;
  left: 27%;
  width: 46%;
  top: calc(var(--frog-bottom) / 400 * 100%);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  transform: translateY(-100%);
  transition: top 0.7s var(--ease-bounce), opacity 0.35s;
}

.crate__frog img {
  width: 100%;
}

button.crate__frog {
  cursor: pointer;
  border-radius: 40% 40% 12px 12px;
}

button.crate__frog:focus-visible {
  outline-offset: -6px;
}

.crate[data-frog="peek"] {
  --frog-bottom: 182;
}

.crate[data-frog="hidden"] {
  --frog-bottom: 340;
}

.crate[data-frog="hidden"] .crate__frog {
  opacity: 0;
}

.crate__frog.is-hopping {
  animation: frog-hop 0.55s var(--ease-out);
}

@keyframes frog-hop {
  0% { transform: translateY(-100%); }
  35% { transform: translateY(calc(-100% - 18px)) rotate(-4deg); }
  65% { transform: translateY(calc(-100% + 3px)) rotate(2deg); }
  100% { transform: translateY(-100%); }
}

.crate__frog.is-sulking {
  animation: frog-sulk 0.6s var(--ease-out);
}

@keyframes frog-sulk {
  0%, 100% { transform: translateY(-100%); }
  25% { transform: translateY(-100%) translateX(-6px) rotate(-3deg); }
  50% { transform: translateY(-100%) translateX(6px) rotate(3deg); }
  75% { transform: translateY(-100%) translateX(-3px); }
}

/* speech bubble for the frog */
.frog-bubble {
  position: absolute;
  left: 64%;
  top: 0;
  z-index: 3;
  max-width: 220px;
  padding: 8px 14px;
  border: 2px solid var(--ink-2);
  border-radius: 16px 16px 16px 4px;
  background: #fff;
  box-shadow: 3px 3px 0 var(--ink-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.3;
  opacity: 0;
  transform: translateY(6px) scale(0.9);
  transform-origin: left bottom;
  transition: opacity 0.18s, transform 0.25s var(--ease-bounce);
  pointer-events: none;
}

.frog-bubble.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- back layer ---------------------------------------------------------------- */
.crate__shadow {
  fill: #111;
  opacity: 0.08;
}

.crate__opening {
  fill: var(--kraft-deep);
  stroke: var(--ink-2);
  stroke-width: 2.6;
  stroke-linejoin: round;
}

.crate__interior {
  fill: var(--kraft-inside);
}

.crate__grain {
  fill: none;
  stroke: var(--kraft-deep);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.55;
}

/* ---- frame --------------------------------------------------------------------- */
.crate__sketch {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
}

.crate__wood {
  fill: var(--kraft);
  stroke: var(--ink-2);
  stroke-width: 3;
  stroke-linejoin: round;
}

.crate__side-grain {
  fill: none;
  stroke: var(--kraft-line);
  stroke-width: 2.2;
  stroke-linecap: round;
}

.crate__corner {
  fill: var(--tier-main);
  stroke: var(--ink-2);
  stroke-width: 2.2;
  stroke-linejoin: round;
}

.crate__nails circle {
  fill: var(--ink-2);
}

.crate__label {
  fill: var(--ink-2);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.14em;
}

/* ---- cover (sealed window) -------------------------------------------------- */
.crate__cover {
  transition: opacity 0.4s 0.15s;
}

.crate__cover-panel {
  fill: var(--kraft-light);
  stroke: var(--ink-2);
  stroke-width: 2;
}

.crate__cover-q {
  fill: var(--kraft-deep);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 46px;
  animation: q-float 3.2s ease-in-out infinite;
  transform-box: fill-box;
  transform-origin: center;
}

.crate__cover-q--2 {
  font-size: 32px;
  animation-delay: -1.4s;
}

@keyframes q-float {
  0%, 100% { transform: translateY(0) rotate(-6deg); }
  50% { transform: translateY(-5px) rotate(6deg); }
}

.crate__stamp rect {
  fill: rgba(255, 72, 31, 0.07);
  stroke: var(--orange);
  stroke-width: 3;
}

.crate__stamp text {
  fill: var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 30px;
  letter-spacing: 0.03em;
}

/* ---- lid + lock ---------------------------------------------------------------- */
.crate__lid,
.crate__lock {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: transform 0.7s var(--ease-out), opacity 0.45s;
}

.crate__lid-sketch {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.6;
}

.crate__lid-top {
  fill: var(--tier-main);
  stroke: var(--ink-2);
  stroke-width: 3;
}

.crate__lid-line {
  fill: none;
  stroke: var(--tier-deep);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.45;
}

.crate__shackle {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 6;
  stroke-linecap: round;
}

.crate__lock-body {
  fill: var(--lavender);
  stroke: var(--ink-2);
  stroke-width: 3;
}

.crate__keyhole {
  fill: var(--ink-2);
}

/* sealed crates rattle a little. something's in there. */
.crate[data-state="sealed"] .crate__lid {
  animation: lid-rattle 5s ease-in-out infinite;
}

.crate[data-state="sealed"] .crate__lock {
  animation: lock-swing 5s ease-in-out infinite;
  transform-origin: 50% 0;
}

@keyframes lid-rattle {
  0%, 84%, 100% { transform: none; }
  87% { transform: translateY(-4px) rotate(-1.2deg); }
  90% { transform: translateY(0) rotate(0.8deg); }
  93% { transform: translateY(-2px) rotate(-0.5deg); }
  96% { transform: none; }
}

@keyframes lock-swing {
  0%, 84%, 100% { transform: none; }
  88% { transform: rotate(9deg); }
  92% { transform: rotate(-6deg); }
  96% { transform: rotate(2deg); }
}

/* ---- open state ---------------------------------------------------------------- */
.crate[data-state="open"] .crate__lid {
  animation: none;
  transform: translate(70px, -110px) rotate(28deg);
  opacity: 0;
}

.crate[data-state="open"] .crate__lock {
  animation: none;
  transform: translateY(90px) rotate(-30deg);
  opacity: 0;
}

.crate[data-state="open"] .crate__cover {
  opacity: 0;
  transition-delay: 0s;
}

.crate[data-state="sealed"] .crate__coins {
  display: none;
}

/* ---- coins (generated by js/crate-pile.js) ------------------------------------ */
.coin__body {
  opacity: 0;
  transform: translateY(-80px) scale(0.6);
  transform-box: fill-box;
  transform-origin: center;
  transition:
    transform 0.5s var(--ease-bounce) var(--d, 0ms),
    opacity 0.2s linear var(--d, 0ms);
}

.coin.is-in .coin__body {
  opacity: 1;
  transform: none;
}

.coin__face {
  fill: var(--yellow);
  stroke: var(--ink-2);
  stroke-width: 2.2;
}

.coin:nth-child(3n) .coin__face {
  fill: #ffe95e;
}

.coin:nth-child(5n) .coin__face {
  fill: #fff59a;
}

.coin__ring {
  fill: none;
  stroke: var(--ink-2);
  stroke-width: 1.2;
  opacity: 0.7;
}

.coin__f {
  fill: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14px;
}

/* ---- rattle on demand (hero hover, sell button) ------------------------------ */
.crate.is-rattling .crate__back,
.crate.is-rattling .crate__front {
  animation: crate-rattle 0.45s linear;
}

@keyframes crate-rattle {
  0%, 100% { transform: none; }
  20% { transform: translateX(-4px) rotate(-1deg); }
  40% { transform: translateX(4px) rotate(1deg); }
  60% { transform: translateX(-3px) rotate(-0.5deg); }
  80% { transform: translateX(2px); }
}

/* Platinum: rainbow trim borrowed from the frog, slowly cycling */
.crate[data-tier="platinum"] .crate__corner,
.crate[data-tier="platinum"] .crate__lid-top {
  animation: hue 6s linear infinite;
}

@keyframes hue {
  to { filter: hue-rotate(360deg); }
}