/* ==========================================================================
   The emblem, taken apart and animated. Generated markup: scripts/emblem.js.
   Every moving part sits in a pivot wrapper:
     <g translate(pivot)> <g class="*-in"> <g class="*-idle"> <g translate(-pivot)>
   so rotations happen about the real pin, not the SVG origin.
   ========================================================================== */

:root {
  --em-ink: #1b1a18;          /* a shade darker than the hero so the dark parts still read */
  --em-amber: #e5b232;
  --em-amber-deep: #c9971a;
  --em-range: #3a3733;        /* the gray mountain range */
}

.emblem { display: block; width: 100%; height: auto; overflow: visible; }

.f-amber { fill: var(--em-amber); }
.f-amber-deep { fill: var(--em-amber-deep); }
.f-ink { fill: var(--em-ink); }
.f-range { fill: var(--em-range); }
.s-ink { stroke: var(--em-ink); fill: none; }

/* ---- assembly ---- */
.em-ring-in, .em-mountain, .em-boom-in, .em-stick-in, .em-bucket-in, .em-banner, .em-letter {
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes em-ring-in   { from { transform: rotate(-75deg) scale(1.3); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-rise      { from { transform: translateY(300px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-boom-in   { from { transform: rotate(42deg) translate(60px, -40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-stick-in  { from { transform: rotate(-80deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-bucket-in { from { transform: rotate(85deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-letter-in { from { transform: translateY(44px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes em-fade      { from { opacity: 0; } to { opacity: 1; } }

/* ---- idle dig loop (touch devices; desktop follows the pointer instead) ---- */
@keyframes em-dig-boom   { 0%, 100% { transform: rotate(0); } 45% { transform: rotate(2.5deg); } 65% { transform: rotate(1.5deg); } }
@keyframes em-dig-stick  { 0%, 100% { transform: rotate(0); } 40% { transform: rotate(-7deg); } 65% { transform: rotate(-3deg); } }
@keyframes em-dig-bucket { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-6deg); } 55% { transform: rotate(12deg); } 75% { transform: rotate(4deg); } }

.em-boom-idle   { animation: em-dig-boom   7s ease-in-out infinite; }
.em-stick-idle  { animation: em-dig-stick  7s ease-in-out infinite; }
.em-bucket-idle { animation: em-dig-bucket 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .em-ring-in, .em-mountain, .em-boom-in, .em-stick-in, .em-bucket-in, .em-banner, .em-letter,
  .em-boom-idle, .em-stick-idle, .em-bucket-idle { animation: none !important; }
}