/* Namespaced: amhs- = Arcade Mart Home Slider */
.amhs-slide {
  position: relative;
  background: #000; /* black bg */
  color: #fff;
  padding: 28px 16px 16px;
  overflow: hidden;
  border-radius: 20px;
}

/* Typography kept neutral so it won’t fight arcade.css */
.amhs-eyebrow {
  font: 600 12px/1.2 system-ui, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .75;
  margin: 0 0 6px;
}

.amhs-title {
  font: 800 28px/1.1 system-ui, sans-serif;
  margin: 0 0 6px;
}

.amhs-sub {
  margin: 0 0 12px;
  opacity: .85;
}

#amhs-canvas {
  display: block;
  width: 100%;
  max-width: 1200px;
  height: 420px;            /* keep aspect stable in layout */
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.5);
  background: radial-gradient(120% 100% at 50% 40%, #0b0f1a 0%, #010308 60%, #000 100%);
  outline: none;
}

/* Responsive height scaling */
@media (max-width: 768px) {
  #amhs-canvas { height: 360px; }
}
@media (max-width: 480px) {
  #amhs-canvas { height: 300px; }
}


/* ----- Slide 2 badges (pink floaters like the "Choose a Challenge" CTA) ----- */
/* Base pill style */
#am-hero .amhs-slide .amhs-badge{
  display:inline-block;
  max-width: 90%;
  padding: 10px 16px;
  border-radius: 18px;
  background: var(--am-pink, #FF3AAE);
  box-shadow: 0 8px 22px rgba(255, 58, 174, .35);
  transform: translateZ(0);                /* GPU hint */
  /* gentle float + tiny wiggle like marquee button */
  animation: amhs-float 3.2s ease-in-out infinite,
             amhs-wiggle 6.5s ease-in-out infinite;
  position: relative;
  z-index: 2;                               /* above the canvas */
  margin: 4px 0 10px;
}

/* Title pill = Retro font, black text on pink */
#am-hero .amhs-slide .amhs-badge--title{
  font-family: var(--am-font-head, "RetroSide"), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .3px;
  color: #0d223a;                           /* black-ish header */
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.1;
}

/* Subtext pill = Retro font, white text on pink */
#am-hero .amhs-slide .amhs-badge--sub{
  font-family: var(--am-font-head, "RetroSide"), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;                              /* white text for <p> */
  font-size: clamp(13px, 1.7vw, 16px);
  line-height: 1.25;
  opacity: .95;
}

/* Nudge positions so they sit “on” the slide, above the canvas */
#am-hero .amhs-slide .amhs-title.amhs-badge{ margin-top: 2px; }
#am-hero .amhs-slide .amhs-sub.amhs-badge{  margin-top: 4px; }

/* Float + wiggle keyframes (mirrors the marquee vibe, but unique names) */
@keyframes amhs-float{
  0%, 100% { transform: translateY(0) translateZ(0); }
  50%      { transform: translateY(-6px) translateZ(0); }
}
@keyframes amhs-wiggle{
  0%, 100% { transform: rotate(0deg); }
  25%      { transform: rotate(-0.6deg); }
  75%      { transform: rotate(0.6deg); }
}

/* Small screens: slightly tighter pills */
@media (max-width: 480px){
  #am-hero .amhs-slide .amhs-badge{
    padding: 8px 12px;
    border-radius: 16px;
    margin-bottom: 8px;
  }
}