/* ARENA seasonal accents. Every rule is restricted to the existing TOP hero. */
main.home-main .signature-hero[data-arena-season] {
  --arena-seasonal-ink: #e2c89f;
  --arena-rule: rgba(255, 255, 255, .3);
}

main.home-main .signature-hero[data-arena-season="halloween"] {
  --arena-lime: #f0c992;
  --arena-seasonal-ink: #e9ba80;
  background: radial-gradient(ellipse at 97% 6%, rgba(201, 123, 58, .17), transparent 44%),
    radial-gradient(ellipse at 6% 100%, rgba(145, 95, 45, .13), transparent 35%), #235e3e;
}

main.home-main .signature-hero[data-arena-season="christmas"] {
  --arena-lime: #e8dbab;
  --arena-seasonal-ink: #eee0b3;
  background: radial-gradient(ellipse at 95% 0, rgba(192, 172, 109, .12), transparent 45%),
    radial-gradient(ellipse at 0 100%, rgba(80, 134, 103, .14), transparent 45%), #1c553f;
}

main.home-main .signature-hero[data-arena-season="newyear"] {
  --arena-lime: #f0dcb0;
  --arena-seasonal-ink: #ecd6a0;
  background: radial-gradient(ellipse at 94% 8%, rgba(218, 184, 112, .14), transparent 42%),
    radial-gradient(ellipse at 0 100%, rgba(179, 139, 76, .09), transparent 45%), #245e42;
}

main.home-main .signature-hero[data-arena-season="spring"] {
  --arena-lime: #f4dedc;
  --arena-seasonal-ink: #efd2d2;
  background: radial-gradient(ellipse at 95% 6%, rgba(235, 177, 182, .13), transparent 43%),
    radial-gradient(ellipse at 0 100%, rgba(168, 199, 114, .14), transparent 45%), #286549;
}

/* The original content stays above the decorative layer, including all links. */
main.home-main .signature-hero[data-arena-season] > .signature-topline,
main.home-main .signature-hero[data-arena-season] > .signature-layout,
main.home-main .signature-hero[data-arena-season] > .signature-bottom {
  position: relative;
  z-index: 1;
}

main.home-main .signature-hero[data-arena-season] > .arena-seasonal-style__layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none !important;
  user-select: none;
  color: var(--arena-seasonal-ink);
  contain: layout paint;
}

main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__layer *,
main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament {
  pointer-events: none !important;
}

main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament {
  position: absolute;
  display: block;
  height: auto;
  max-width: none;
  overflow: visible;
}

/* These two corners are the cut-away areas of the existing image composition. */
main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament--primary {
  width: clamp(96px, 9vw, 120px);
  right: max(5px, calc(var(--arena-seasonal-world-right, 5%) - 12px));
  top: calc(var(--arena-seasonal-world-top, 90px) - 52px);
}

main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament--secondary {
  width: clamp(84px, 7.8vw, 122px);
  left: max(3px, calc(var(--arena-seasonal-world-left, 50%) - 17px));
  top: calc(var(--arena-seasonal-world-bottom, 500px) - 49px);
}

main.home-main .signature-hero[data-arena-season-motion="true"] .arena-seasonal-style__ornament {
  animation: arena-seasonal-style-arrive 1.8s ease-out 1 both;
}

main.home-main .signature-hero[data-arena-season-motion="true"] .arena-seasonal-style__ornament--secondary {
  animation-duration: 2.2s;
}

@keyframes arena-seasonal-style-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 600px) {
  main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament--primary {
    width: 82px;
    right: max(4px, calc(var(--arena-seasonal-world-right, 6%) - 7px));
    top: calc(var(--arena-seasonal-world-top, 420px) - 37px);
  }

  main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament--secondary {
    width: 76px;
    left: max(3px, calc(var(--arena-seasonal-world-left, 6%) - 12px));
    top: calc(var(--arena-seasonal-world-bottom, 660px) - 29px);
  }
}

@media (prefers-reduced-motion: reduce) {
  main.home-main .signature-hero[data-arena-season] .arena-seasonal-style__ornament {
    animation: none !important;
    transform: none !important;
  }
}

@media print {
  main.home-main .signature-hero[data-arena-season] > .arena-seasonal-style__layer {
    display: none;
  }
}