/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER — 39+ YEARS ROTATOR BADGE
   ─────────────────────────────────────────────────────────────────────────
   Standalone file loaded globally via _Layout.cshtml.
   Contains ALL keyframes and component styles the footer badge needs so it
   works on every page — completely independent of home.css which only loads
   on the home page.
   Hero badge (.hero-rotator-badge) styles live exclusively in home.css and
   are NOT touched here.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrapper — flows inline below .footer-badges ─────────────────────────── */
.footer-rotator-badge {
  display: inline-block;
  margin-top: 24px;
  width: clamp(80px, 14vw, 140px);
  height: clamp(80px, 14vw, 140px);
  pointer-events: none;
  perspective: 700px;
  perspective-origin: center center;
  position: relative;
}

/* ── Flipper — rotates on badgeFlapSpin ──────────────────────────────────── */
.footer-rotator-badge__flipper {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: badgeFlapSpin 3.2s ease-in-out infinite;
  will-change: transform;
}

/* ── Both face images stacked ────────────────────────────────────────────── */
.footer-rotator-badge__face {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter:
    drop-shadow(0 4px 18px rgba(0, 0, 0, 0.55))
    drop-shadow(0 1px  6px rgba(0, 0, 0, 0.40));
}

.footer-rotator-badge__front { transform: rotateY(0deg);   }
.footer-rotator-badge__back  { transform: rotateY(180deg); }

/* ── Fire-cracker animation DISABLED — commented out in _Layout.cshtml too ─
   To re-enable: uncomment the fire-cracker-container div in _Layout.cshtml
   and restore the CSS blocks below (lines 51–124 and 141–180 in original).
   ─────────────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════════════
   KEYFRAMES — all prefixed "footer" / "fB" so they never clash with
   the identically-named keyframes inside home.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Card flip — 3.2 s per cycle, same easing as hero */
@keyframes badgeFlapSpin {
  0%   { transform: rotateY(0deg);   }
  30%  { transform: rotateY(0deg);   }
  50%  { transform: rotateY(180deg); }
  70%  { transform: rotateY(180deg); }
  90%  { transform: rotateY(360deg); }
  100% { transform: rotateY(360deg); }
}

/* Fire-cracker & blast keyframes DISABLED
   (footerFireCrackerSeq, footerFireCrackerSpark, footerBlastSeq, fBP1–fBP8
    kept in source control — restore alongside the HTML div when needed) */

/* ── Mobile: smaller badge ────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  .footer-rotator-badge {
    width: clamp(64px, 20vw, 100px);
    height: clamp(64px, 20vw, 100px);
    margin-top: 20px;
  }
}

/* ── Reduced-motion: static image only ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .footer-rotator-badge__flipper {
    animation: none;
    transform: rotateY(0deg);
  }
  .footer-rotator-badge__back { display: none; }
}