/* The Holder Crate SVG: typography, states and motion. */

.crate { overflow: visible; }

.crate text { font-family: var(--font); fill: var(--nm-black); }
.crate .crate-label { font-size: 11px; font-weight: 600; letter-spacing: 0.22em; }
.crate .crate-label--lg { font-size: 15px; letter-spacing: 0.28em; }
.crate .cipher-text { font-family: var(--mono); font-size: 8.4px; fill: var(--nm-lime); letter-spacing: 0.06em; }

/* Idle: the hero Crate breathes very slightly above its pedestal.
   Limited to the hero because animating inside an SVG repaints the whole SVG. */
.crate--hero .crate-object { animation: crate-hover 6s ease-in-out infinite; }
@keyframes crate-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.crate-lid { transition: transform 520ms var(--ease-out); }
.crate-leak { transition: opacity 420ms var(--ease); }
.crate-seam polygon { transition: fill 300ms; }

.crate-led { animation: crate-led 1.8s steps(2, jump-none) infinite; }
@keyframes crate-led { 50% { fill: #0e0f0f; } }

.cable-pulse { opacity: 0; transition: opacity 300ms; }
.reader-top polygon { transition: fill 300ms; }

/* Primed: the visitor is reaching for "Open Your Crate". */
.is-primed .crate--sealed .crate-lid { transform: translateY(-22px); }
.is-primed .crate--sealed .crate-leak { opacity: 1; }
.is-primed .cable-pulse { opacity: 1; animation: cable-flow 900ms linear infinite; }
@keyframes cable-flow { to { stroke-dashoffset: -56; } }

/* Open mode (preview): layers drop in, lid floats. */
.crate--open .crate-lid { animation: lid-float 4.5s ease-in-out infinite; }
@keyframes lid-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.slab {
  opacity: 0;
  transform: translateY(-46px);
  transition: opacity 260ms var(--ease), transform 420ms var(--ease-out);
  transition-delay: calc(var(--i) * 18ms);
}
.slab.is-on { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .crate--hero .crate-object, .crate--open .crate-lid, .crate-led { animation: none; }
}