/* =========================================================
   crate.css: the Holder Crate graphic and its states
   The Crate is an armored plate crate, sealed by a sword
   run through its clasps. Metal = grade. Meter = fill.
   ========================================================= */

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

.crate-svg .c-outline { stroke: #0b0d11; stroke-width: 3; stroke-linejoin: round; }

/* metals */
.crate-svg .c-plate { fill: url(#m-steel); }
.crate-svg[data-metal="copper"] .c-plate { fill: url(#m-copper); }
.crate-svg[data-metal="bronze"] .c-plate { fill: url(#m-bronze); }
.crate-svg[data-metal="silver"] .c-plate { fill: url(#m-silver); }
.crate-svg[data-metal="gold"] .c-plate { fill: url(#m-gold); }
.crate-svg[data-metal="platinum"] .c-plate { fill: url(#m-platinum); }

.crate-svg .c-shade { fill: rgba(0, 0, 0, .16); }
.crate-svg .c-band-shade { fill: rgba(0, 0, 0, .2); }
.crate-svg .c-lid-hi { fill: rgba(255, 255, 255, .38); }
.crate-svg .c-rivets circle { fill: #0b0d11; opacity: .55; }
.crate-svg .c-shadow { fill: rgba(0, 0, 0, .45); }

.crate-svg .c-halo { fill: url(#halo); opacity: .14; transition: opacity .5s var(--ease); }
.crate-svg[data-level="1"] .c-halo { opacity: .22; }
.crate-svg[data-level="2"] .c-halo { opacity: .3; }
.crate-svg[data-level="3"] .c-halo { opacity: .4; }
.crate-svg[data-level="4"] .c-halo { opacity: .52; }
.crate-svg[data-level="5"] .c-halo { opacity: .66; }

/* crest + sigil */
.crate-svg .c-crest { fill: #13161c; }
.crate-svg .c-trim { fill: none; stroke: url(#seg-on); stroke-width: 2; }
.crate-svg .c-eye { fill: #13161c; }

/* meter */
.crate-svg .c-meter-bg { fill: #0b0d11; stroke: #0b0d11; stroke-width: 2; }
.crate-svg .seg { fill: #232933; transition: fill .3s var(--ease); }
.crate-svg .seg.on { fill: url(#seg-on); }

/* ornaments appear as level rises */
.crate-svg .c-orn { display: none; }
.crate-svg[data-level="2"] .c-orn-2,
.crate-svg[data-level="3"] .c-orn-2, .crate-svg[data-level="3"] .c-orn-3,
.crate-svg[data-level="4"] .c-orn-2, .crate-svg[data-level="4"] .c-orn-3, .crate-svg[data-level="4"] .c-orn-4,
.crate-svg[data-level="5"] .c-orn { display: inline; }

.crate-svg .c-pole { stroke: #0b0d11; stroke-width: 3.5; stroke-linecap: round; }
.crate-svg .c-flag { fill: var(--ember); }
.crate-svg .c-gem { fill: var(--ember); stroke: #0b0d11; stroke-width: 2; }

/* the sword lock */
.crate-svg .c-blade { fill: url(#m-blade); }
.crate-svg .c-fuller { stroke: rgba(11, 13, 17, .35); stroke-width: 2; stroke-linecap: round; }
.crate-svg .c-guard { fill: #2b313b; }
.crate-svg .c-grip { fill: var(--ember-deep); }
.crate-svg .c-hasp { fill: #2b313b; }
.crate-svg .c-sword { transform-box: view-box; transform-origin: 306px 116px; transition: transform .7s var(--ease); }

/* unsealed (used later, after a real wallet resolves the Crate) */
.crate-svg[data-sealed="false"] .c-sword { transform: translate(-6px, -54px) rotate(-14deg); }

/* sealed + empty: one meter cell pulses to show the system is waiting */
.crate-svg[data-sealed="true"][data-segments="0"] .seg:first-child { animation: seg-wait 2.4s ease-in-out infinite; }
@keyframes seg-wait {
  0%, 100% { fill: #232933; }
  50% { fill: #5a4129; }
}

/* ---------- hero stage ---------- */
.crate-stage { position: relative; margin: 0; }
.crate-float { animation: crate-bob 6s ease-in-out infinite; will-change: transform; }
@keyframes crate-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.crate-tag {
  position: relative;
  margin: .25rem auto 0;
  width: max-content;
  max-width: 100%;
  display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: .45rem;
  padding: .5rem .85rem;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: rgba(12, 14, 18, .82);
  font-family: var(--font-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--steel);
}
.crate-tag .tag-icon { width: 14px; height: 14px; color: var(--ember-soft); }
.crate-tag .tag-sep { color: var(--line-2); }
.crate-tag .tag-dim { color: var(--mist); }

/* ---------- refinements (higher specificity so they win over sections.css) ---------- */
/* keep hover lift working after the reveal transition has finished */
.js .tier.reveal.is-in:hover { transform: translateY(-4px); }

/* hero H1: keeps "Holder Crates" on one line on 1280 to 1440 laptops */
.hero .hero-title { font-size: clamp(2.5rem, 5vw, 4.4rem); }

@media (max-width: 960px) {
  .preview-stage .preview-crate { max-width: 240px; }
}
@media (max-width: 560px) {
  .hero .hero-title { font-size: clamp(2.3rem, 11vw, 3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .crate-float { animation: none; }
  .crate-svg[data-sealed="true"][data-segments="0"] .seg:first-child { animation: none; fill: #5a4129; }
}