/*
 * Main banner component.
 *
 * This file owns the homepage hero headline typography and CTA artwork.
 * Keep base hero layout in assets/css/main.css; keep exported banner/button
 * skins and font treatment here so banner tuning stays isolated.
 */

.d-hero__title {
  color: #fff9dd;
  font-family: var(--d-font);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: 0;
  -webkit-text-stroke: 3px #ff6f1f;
  paint-order: stroke fill;
  text-shadow:
    0.7px 1px 0.5px rgb(255 119 0),
    1.2px 2px 0.5px rgb(102 51 7),
    1.5px 2.5px 0 rgb(255 178 102 / 0.95),
    0 0 5px rgb(255 103 0),
    0 0 10px rgb(255 55 0),
    0 0 20px rgb(255 55 0 / 0.5);
}

.d-hero__title em {
  color: inherit;
}

.d-hero__inner > .actions {
  position: relative;
  isolation: isolate;
  display: flex;
  justify-content: center;
}

.d-hero__inner > .actions::before {
  content: "";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: clamp(100px, 24vw, 130px);
  aspect-ratio: 465 / 120;
  background: url("../../images/buttons/main-banner/btn-animation.webp")
    center / 100% 100% no-repeat;
  opacity: 0.32;
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(-50%, -50%);
  -webkit-mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    #000 48%,
    transparent 76%
  );
  mask-image: radial-gradient(
    ellipse at center,
    #000 0%,
    #000 48%,
    transparent 76%
  );
}

.d-hero__inner .promo-action {
  position: relative;
  isolation: isolate;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.d-hero__inner .promo-action::before,
.d-hero__inner .promo-action::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}

.d-hero__inner .promo-action::before {
  left: clamp(-45px, -5.5vw, -50px);
  top: 50%;
  z-index: 0;
  width: clamp(96px, 8.8vw, 132px);
  aspect-ratio: 1;
  background: url("../../images/buttons/main-banner/actions-ball.png") center /
    contain no-repeat;
  transform: translateY(-48%);
}

.d-hero__inner .promo-action::after {
  right: clamp(-74px, -7vw, -74px);
  top: 48%;
  z-index: 0;
  width: clamp(150px, 12vw, 190px);
  aspect-ratio: 1;
  background: url("../../images/buttons/main-banner/actions-pin.webp") center /
    contain no-repeat;
  transform: translateY(-50%) rotate(8deg);
}

.d-hero__cta {
  --d-main-banner-cta-h: clamp(90px, 5.5vw, 100px);
  z-index: 2;
  width: min(calc(var(--d-main-banner-cta-h) * 2.6), 100%);
  min-width: 274px;
  height: var(--d-main-banner-cta-h);
  min-height: 0;
  padding: 0 clamp(30px, 3.7vw, 44px);
  border: 2px solid rgba(253, 145, 30, 0.802);
  border-radius: 25px;
  background:
    linear-gradient(
      180deg,
      rgba(255, 249, 221, 0.92) 0%,
      rgba(255, 211, 102, 0.42) 28%,
      rgba(255, 211, 102, 0) 54%
    ),
    radial-gradient(
      ellipse at 50% 18%,
      rgba(255, 249, 221, 0.56) 0%,
      rgba(255, 211, 102, 0.15) 44%,
      rgba(255, 111, 31, 0) 72%
    ),
    linear-gradient(180deg, #ffbd4d 0%, #ff8f24 58%, #ff5f17 100%);
  background-blend-mode: overlay, normal, normal;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -4px 0 rgba(184, 45, 8, 0.38),
    0 5px 0 rgba(184, 45, 8, 0.62),
    0 0 14px rgba(255, 157, 49, 0.82),
    0 0 30px rgba(255, 75, 18, 0.5);
  overflow: visible;
  font-size: 28px;
  text-shadow:
    0 1px 0 rgba(255, 249, 221, 0.34),
    0 2px 0 rgba(141, 38, 14, 0.76),
    0 4px 0 rgba(0, 0, 0, 0.46),
    0 0 8px rgba(255, 255, 255, 0.24);
  filter: none;
}

.d-hero__cta::before {
  content: "";
  display: block;
  position: absolute;
  inset: -7px -10px -12px;
  z-index: -1;
  border-radius: inherit;
  background: radial-gradient(
    ellipse at center,
    rgba(255, 249, 221, 0.38) 0%,
    rgba(255, 157, 49, 0.22) 45%,
    rgba(255, 111, 31, 0) 72%
  );
  opacity: 0.9;
  pointer-events: none;
}

.d-hero__cta::after {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 6px;
  z-index: 1;
  border-radius: inherit;
  background-image: url("../../images/buttons/main-banner/btn-animation.webp");
  background-position: center;
  background-size: cover;
  mix-blend-mode: overlay;
  opacity: 0.4;
  pointer-events: none;
  transition: opacity 0.16s var(--d-ease);
}

.d-hero__cta .action-button__inner {
  z-index: 2;
  color: #ffffff;
  font-family: var(--d-font);
  font-weight: 400;
  line-height: 1;
  -webkit-text-stroke: 3px #ff6f1f;
  paint-order: stroke fill;
  text-shadow:
    0 1px 0 rgba(255, 249, 221, 0.36),
    0 2px 0 rgba(117, 31, 12, 0.72),
    0 0 7px rgba(255, 249, 221, 0.3);
  transform: translateY(-1px);
}

.d-hero__cta:hover,
.d-hero__cta:focus-visible {
  background:
    linear-gradient(
      180deg,
      rgba(255, 249, 221, 0.95) 0%,
      rgba(255, 211, 102, 0.46) 28%,
      rgba(255, 211, 102, 0) 54%
    ),
    radial-gradient(
      ellipse at 50% 18%,
      rgba(255, 249, 221, 0.6) 0%,
      rgba(255, 211, 102, 0.18) 44%,
      rgba(255, 111, 31, 0) 72%
    ),
    linear-gradient(180deg, #ffc85e 0%, #ff992f 58%, #ff6b1c 100%);
}

.d-hero__cta:hover::after,
.d-hero__cta:focus-visible::after {
  opacity: 0.5;
}

.d-hero__cta:active {
  filter: brightness(0.98);
  transform: translateY(1px);
}

@media (max-width: 720px) {
  .d-hero__inner > .actions::before {
    width: clamp(100px, 24vw, 130px);
  }

  .d-hero__inner .promo-action::before {
    left: -50px;
    width: 88px;
  }

  .d-hero__inner .promo-action::after {
    right: -74px;
    width: 136px;
  }

  .d-hero__cta {
    --d-main-banner-cta-h: clamp(48px, 14vw, 54px);
    min-width: 0;
    width: min(260px, calc(100vw - 112px));
    padding: 0 24px;
    font-size: 15px;
  }
}