/* ==================================================================
   Impact — kwizzbit/impact (whole-file segment)
   Faithful slice of /HTML/impact.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

:root{
  --impact2-headline-family: var(--wp--preset--font-family--display);
  --impact2-headline-size:   5rem;
  --impact2-headline-weight: 400;
  --impact2-headline-lh:     0.875;
  --impact2-headline-ls:     -0.10775em;
  --impact2-mic-shadow:      drop-shadow(-60px 140px 0px rgba(0, 0, 0, 0.15));
  --impact2-mic-offset:      20px;
}

.impact-2 {
  background: var(--wp--preset--color--blood-orange);
  position: relative;
  overflow-x: clip;
  /* desktop: padding-based (tablet/mobile padding set in the media queries below).
     Generous top so the mic + entrance have room; tighter bottom so it flows into
     player-experience (same blood-orange block). */
  padding-block: 15.5rem 6rem;
}

.impact-2__inner {
  max-width: var(--wp--custom--layout--page-max);
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--wp--custom--layout--gutter);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  /* Shift the whole block upward by half the mic offset so it sits
     visually centred — mic overlap above is balanced by equal space below */
  margin-top: calc(-1 * var(--impact2-mic-offset));
}

.impact-2__mic-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100px;
  width: 100%;
  margin-bottom: -80px;
  position: relative;
  z-index: 2;
  padding-right: 60px;
}

.impact-2__mic {
  display: block;
  width: 260px;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  pointer-events: none;
  user-select: none;
  filter: var(--impact2-mic-shadow);
  opacity: 0;
}
.impact-2__mic.is-floating {
  animation: mic-float 4s ease-in-out infinite;
}
@keyframes mic-float {
  0%   { transform: translateY(0px)  rotate(6deg);   }
  40%  { transform: translateY(-8px) rotate(6.8deg); }
  100% { transform: translateY(0px)  rotate(6deg);   }
}
@media (prefers-reduced-motion: reduce) {
  .impact-2__mic,
  .impact-2__mic.is-floating { animation: none; opacity: 1; transform: rotate(6deg); }
}

.impact-2__headline {
  font-family:    var(--impact2-headline-family);
  font-size:      var(--impact2-headline-size);
  font-weight:    var(--impact2-headline-weight);
  line-height:    var(--impact2-headline-lh);
  letter-spacing: var(--impact2-headline-ls);
  color: var(--wp--preset--color--white);
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
  max-width: 16ch;
}
.impact-2__this {
  color: var(--wp--preset--color--bright-yellow);
  display: inline;
}
.impact-2__char {
  visibility: hidden;
  display: inline;
}
.impact-2__char--flash { animation: cursor-blink 0.7s step-end infinite; }
@keyframes cursor-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
.impact-2__cursor {
  color: var(--wp--preset--color--bright-yellow);
  animation: cursor-blink 0.7s step-end infinite;
}
.impact-2__cta-wrap {
  margin-top: var(--wp--preset--spacing--60);
  position: relative;
  z-index: 1;
  will-change: transform, opacity;
}
.impact-2__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--wp--preset--gradient--btn-secondary);
  color: var(--wp--preset--color--white);
  font-family: var(--wp--preset--font-family--body);
  font-size: var(--wp--preset--font-size--sm);
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  border: none;
  border-radius: 0;
  min-height: 44px;
  padding-inline: 1.25rem;
  padding-block: 0.8125rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 160ms var(--wp--custom--motion--ease-out),
    transform  160ms var(--wp--custom--motion--ease-out);
}
@media (hover: hover) {
  .impact-2__btn:hover {
    background: var(--wp--preset--gradient--btn-secondary-hover);
    transform: translateY(-1px);
  }
}
.impact-2__btn:active {
  background: var(--wp--preset--gradient--btn-secondary-hover);
  transform: translateY(1px);
}
.impact-2__btn:focus-visible {
  outline: 2px solid var(--wp--preset--color--white);
  outline-offset: 3px;
}
.impact-2__btn-qr { width: 11px; height: 15px; flex-shrink: 0; display: block; }

.impact-2__br--mobile { display: none; }

@media (max-width: 1023px) {
  .impact-2 { height: auto; min-height: 480px; padding-block: 5rem; }
  .impact-2__inner { margin-top: 0; }
  .impact-2__mic      { width: 210px; }
  .impact-2__mic-wrap { height: 80px; margin-bottom: -64px; padding-right: 40px; }
  :root { --impact2-headline-size: clamp(3rem, 6.5vw, 5rem); }
}
@media (max-width: 640px) {
  .impact-2 { height: auto; min-height: 0; padding-block: 8rem 3rem; }
  .impact-2__br--mobile { display: inline; }
  .impact-2__br--desktop { display: none; }
  .impact-2__inner { margin-top: 0; }
  .impact-2__mic      { width: 150px; }
  .impact-2__mic-wrap { height: 80px; margin-bottom: -68px; padding-right: 24px; }
  :root {
    --impact2-mic-shadow:    drop-shadow(-28px 80px 0px rgba(0, 0, 0, 0.15));
    --impact2-headline-size: clamp(2.25rem, 12vw, 3rem);
    --impact2-headline-lh:   0.88;
  }
  .impact-2__cta-wrap { margin-top: var(--wp--preset--spacing--50); }
}