/*
 * MTU Certified Badge — holographic credential awarded by Mega Tickets USA.
 * Self-contained styles — pairs with /components/mtu-badge.js
 *
 * Usage:
 *   <div data-mtu-badge data-type="certified" data-subtitle="Certified Organizer"></div>
 *   or programmatic:
 *   MTUBadge(containerEl, { type: 'certified', ... });
 */

.mtu-badge {
  display: block;
  width: 260px;
  max-width: 100%;
  height: auto;
  cursor: pointer;
  text-decoration: none;
}
.mtu-badge-inner {
  transform-origin: center center;
  transition: transform 200ms ease-out;
  will-change: transform;
}
.mtu-badge svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Shimmer overlay — 10 color layers rotating at staggered angles to create
   the iridescent holographic base. Each layer has its own keyframe so they
   wave slightly out of phase. */
@keyframes mtuShimmer1  { 0%,100% { transform:rotate(0deg); }   50% { transform:rotate(10deg); } }
@keyframes mtuShimmer2  { 0%,100% { transform:rotate(10deg); }  50% { transform:rotate(20deg); } }
@keyframes mtuShimmer3  { 0%,100% { transform:rotate(20deg); }  50% { transform:rotate(30deg); } }
@keyframes mtuShimmer4  { 0%,100% { transform:rotate(30deg); }  50% { transform:rotate(40deg); } }
@keyframes mtuShimmer5  { 0%,100% { transform:rotate(40deg); }  50% { transform:rotate(50deg); } }
@keyframes mtuShimmer6  { 0%,100% { transform:rotate(50deg); }  50% { transform:rotate(60deg); } }
@keyframes mtuShimmer7  { 0%,100% { transform:rotate(60deg); }  50% { transform:rotate(70deg); } }
@keyframes mtuShimmer8  { 0%,100% { transform:rotate(70deg); }  50% { transform:rotate(80deg); } }
@keyframes mtuShimmer9  { 0%,100% { transform:rotate(80deg); }  50% { transform:rotate(90deg); } }
@keyframes mtuShimmer10 { 0%,100% { transform:rotate(90deg); }  50% { transform:rotate(100deg); } }

.mtu-shimmer-layer {
  transform-origin: center center;
  transition: transform 200ms ease-out;
  will-change: transform;
}
.mtu-shimmer-idle .mtu-shimmer-layer {
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(1)  { animation-name: mtuShimmer1; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(2)  { animation-name: mtuShimmer2; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(3)  { animation-name: mtuShimmer3; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(4)  { animation-name: mtuShimmer4; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(5)  { animation-name: mtuShimmer5; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(6)  { animation-name: mtuShimmer6; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(7)  { animation-name: mtuShimmer7; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(8)  { animation-name: mtuShimmer8; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(9)  { animation-name: mtuShimmer9; }
.mtu-shimmer-idle .mtu-shimmer-layer:nth-child(10) { animation-name: mtuShimmer10; }

/* Light sweep — continuous one-direction linear slide. Start/end keep the
   band fully off-canvas so the loop reset is invisible (no ping-pong). */
@keyframes mtuLightPass {
  0%   { transform: translateX(-180px); }
  100% { transform: translateX(460px); }
}
.mtu-light-pass {
  animation: mtuLightPass 2s linear infinite;
  will-change: transform;
}

/* Explosive flash — radial burst in the tier accent color, flares ~200ms
   as the light band exits the right edge. Synced with the 2s sweep loop. */
@keyframes mtuFlashBurst {
  0%, 82% { opacity: 0; }
  88%     { opacity: 0.85; }
  94%     { opacity: 0.35; }
  100%    { opacity: 0; }
}
.mtu-flash-burst {
  animation: mtuFlashBurst 2s linear infinite;
  will-change: opacity;
}

@media (prefers-reduced-motion: reduce) {
  .mtu-shimmer-idle .mtu-shimmer-layer,
  .mtu-light-pass,
  .mtu-flash-burst { animation: none; }
  .mtu-badge-inner { transition: none; }
}

/* Flat seal — render the credential as a clean static seal everywhere: no
   holographic shimmer, no sweeping light band, and no radial flash-burst glow
   (the bright streak/"cord" around the seal). Owner preference. */
.mtu-shimmer-idle,
.mtu-light-pass,
.mtu-flash-burst { display: none !important; }