/* ==========================================================================
   The Super Crate (see js/crate.js for the SVG and state model)
   ========================================================================== */

.crate {
  --fill: 0;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  transition:
    --metal-hi 0.7s ease,
    --metal-mid 0.7s ease,
    --metal-lo 0.7s ease;
}

/* Tier metals */
.crate[data-tier="sealed"]   { --metal-hi: #c3cff0; --metal-mid: #6a7db3; --metal-lo: #27335e; }
.crate[data-tier="copper"]   { --metal-hi: #ffc4a0; --metal-mid: #d9743e; --metal-lo: #7d3516; }
.crate[data-tier="bronze"]   { --metal-hi: #f8dba0; --metal-mid: #b8843f; --metal-lo: #5f3d14; }
.crate[data-tier="silver"]   { --metal-hi: #ffffff; --metal-mid: #c2ccd8; --metal-lo: #5f6e84; }
.crate[data-tier="gold"]     { --metal-hi: #fff4b0; --metal-mid: #ffc21a; --metal-lo: #9a5f06; }
.crate[data-tier="platinum"] { --metal-hi: #ffffff; --metal-mid: #e3eaff; --metal-lo: #7d8cc4; }

.crate-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.crate-svg * {
  transform-box: view-box;
}

/* ---------- Emblem meter ---------- */

.crate-meter {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--fill));
  transition: transform 0.9s var(--ease-spring);
}

.crate-sheen {
  opacity: 0.35;
  transform: skewX(-20deg) translateX(0);
  animation: crate-sheen 3.6s ease-in-out infinite;
}

@keyframes crate-sheen {
  0%, 55% { transform: skewX(-20deg) translateX(0); }
  100% { transform: skewX(-20deg) translateX(170px); }
}

.crate-si {
  font-family: var(--font-display);
  font-weight: 900;
  font-style: italic;
  font-size: 70px;
  fill: var(--cream-50);
  stroke: var(--ink);
  stroke-width: 8px;
  paint-order: stroke;
  stroke-linejoin: round;
}

.crate-latch {
  fill: var(--volt-400);
  opacity: calc(0.35 + var(--fill) * 0.65);
}

/* ---------- Seam glow ---------- */

.crate-seam {
  fill: var(--volt-300);
  opacity: 0;
  transition: opacity 0.6s ease;
}

.crate.has-glow .crate-seam {
  opacity: calc(0.25 + var(--fill) * 0.75);
}

/* ---------- Shadow ---------- */

.crate-shadow {
  fill: #000;
  opacity: 0.38;
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 0.8s var(--ease-out), opacity 0.8s ease;
}

.crate.is-flying .crate-shadow {
  transform: scale(0.7);
  opacity: 0.22;
}

/* ---------- Cape (silver+) ---------- */

.crate-cape {
  transform-origin: 200px 112px;
  transform: scale(0.35, 0.2);
  opacity: 0;
  transition:
    transform 0.7s var(--ease-spring),
    opacity 0.3s ease;
}

.crate.has-cape .crate-cape {
  transform: none;
  opacity: 1;
}

.crate-cape-cloth {
  transform-origin: 200px 112px;
  animation: crate-billow 2.8s ease-in-out infinite alternate;
}

@keyframes crate-billow {
  from { transform: scale(1, 1) skewX(0deg); }
  to { transform: scale(1.06, 0.97) skewX(-3deg); }
}

.crate.is-flying .crate-cape-cloth {
  animation-duration: 1.4s;
}

/* ---------- Flight (gold+) ---------- */

.crate-float {
  transition: transform 0.9s var(--ease-spring);
}

.crate.is-flying .crate-float {
  transform: translateY(-26px);
}

.crate.is-flying .crate-bob {
  animation: crate-bob 3.2s ease-in-out infinite;
}

@keyframes crate-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.crate-bolt {
  fill: var(--volt-400);
  stroke: var(--ink);
  stroke-width: 3px;
  stroke-linejoin: round;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.crate.is-flying .crate-bolt {
  opacity: 1;
  animation: crate-flicker 1.6s steps(1) infinite;
  animation-delay: var(--bd, 0s);
}

@keyframes crate-flicker {
  0%, 60% { opacity: 1; }
  61%, 72% { opacity: 0; }
  73%, 100% { opacity: 1; }
}

/* ---------- Aura (gold glow, platinum rays) ---------- */

.crate-aura {
  opacity: 0;
  transition: opacity 0.8s ease;
}

.crate-rays,
.crate-twinkle {
  opacity: 0;
  transition: opacity 0.6s ease;
}

.crate-rays {
  fill: var(--volt-300);
  transform-origin: 200px 220px;
  animation: crate-spin 26s linear infinite;
}

.crate-rays polygon:nth-child(odd) {
  opacity: 0.5;
}

@keyframes crate-spin {
  to { transform: rotate(360deg); }
}

.crate.is-flying .crate-aura {
  opacity: 0.55;
}

.crate.is-super .crate-aura {
  opacity: 1;
}

.crate.is-super .crate-rays {
  opacity: 0.32;
}

.crate.is-super .crate-twinkle {
  opacity: 1;
  fill: #fff;
  transform-box: fill-box;
  transform-origin: center;
  animation: crate-twinkle 2.2s ease-in-out infinite;
  animation-delay: var(--tw, 0s);
}

@keyframes crate-twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* ---------- Sealed ---------- */

.crate-seal {
  opacity: 0;
  transform-origin: 200px 240px;
  transform: scale(1.2);
  transition:
    opacity 0.35s ease,
    transform 0.5s var(--ease-spring);
  pointer-events: none;
}

.crate[data-state="sealed"] .crate-seal {
  opacity: 1;
  transform: none;
}

.crate[data-state="sealed"] .crate-meter {
  transform: scaleY(1);
  animation: crate-mystery 2.8s ease-in-out infinite;
}

@keyframes crate-mystery {
  0%, 100% { opacity: 0.12; }
  50% { opacity: 0.34; }
}

.crate[data-state="sealed"] .crate-seam {
  opacity: 0.4;
  animation: crate-mystery 2.8s ease-in-out infinite;
}

.crate-tape {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  fill: var(--cream-50);
}

/* The lock's position lives in its transform attribute; the rattle keyframes
   repeat that translate and swing it from the shackle. */
.crate-lock {
  transform-origin: 0 0;
}

/* "Tries to open, can't": the lid heaves against the lock twice, slams shut,
   the crate jolts and the padlock swings. Runs once (0.8s) per trigger;
   see SuperInu.crate.rattle(). */
.crate.is-rattling .crate-lid {
  animation: crate-heave 0.8s ease-out;
}

.crate.is-rattling .crate-lock {
  animation: crate-rattle 0.8s ease-out;
}

.crate.is-rattling .crate-float {
  animation: crate-jolt 0.8s ease-out;
}

.crate.is-rattling .crate-seam {
  animation: crate-leak 0.8s ease-out;
}

@keyframes crate-heave {
  0%, 76%, 100% { transform: none; }
  12% { transform: translateY(-11px) rotate(-1.5deg); }
  24% { transform: none; }
  40% { transform: translateY(-7px) rotate(1deg); }
  52% { transform: none; }
  64% { transform: translateY(-3px); }
}

@keyframes crate-rattle {
  0%, 100% { transform: translate(200px, 162px) rotate(0) translateY(14px); }
  12% { transform: translate(200px, 151px) rotate(-16deg) translateY(14px); }
  24% { transform: translate(200px, 162px) rotate(12deg) translateY(14px); }
  40% { transform: translate(200px, 155px) rotate(-9deg) translateY(14px); }
  52% { transform: translate(200px, 162px) rotate(6deg) translateY(14px); }
  68% { transform: translate(200px, 162px) rotate(-3deg) translateY(14px); }
}

@keyframes crate-jolt {
  0%, 18%, 80%, 100% { transform: none; }
  26% { transform: translate(-5px, 3px) rotate(-1.2deg); }
  34% { transform: translate(4px, 0) rotate(0.8deg); }
  54% { transform: translate(3px, 2px) rotate(0.8deg); }
  62% { transform: translate(-3px, 0) rotate(-0.5deg); }
}

@keyframes crate-leak {
  0%, 100% { opacity: 0.4; }
  12%, 40% { opacity: 1; }
  24%, 52% { opacity: 0.3; }
}

/* Scan sweep (hero / vault) */
.crate-scanline {
  fill: var(--volt-300);
  opacity: 0;
}

.crate.is-scanning .crate-scanline {
  animation: crate-scan 1.6s ease-in-out;
}

@keyframes crate-scan {
  0% { opacity: 0; transform: translateY(0); }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { opacity: 0; transform: translateY(176px); }
}

/* ---------- Open ---------- */

.crate-lid {
  transform-origin: 66px 168px;
  transition: transform 0.8s var(--ease-spring);
}

.crate[data-state="open"] .crate-lid {
  transform: translate(-6px, -54px) rotate(-16deg);
}

.crate-light {
  opacity: 0;
  transform-origin: 200px 166px;
  transform: scaleY(0.2);
  transition:
    opacity 0.6s ease,
    transform 0.8s var(--ease-out);
}

.crate[data-state="open"] .crate-light {
  opacity: 0.9;
  transform: none;
}

/* Static Crates (tier cards etc.) can opt out of loops */
.crate--calm .crate-rays,
.crate--calm .crate-sheen {
  animation: none;
}