/* The approved hero artwork is a fixed frame: always complete, proportional and still. */
.hero-bg{
  inset:0;
  background-size:contain;
  background-position:50% 50%;
  background-repeat:no-repeat;
  filter:none;
  transform:none;
  animation:none;
  will-change:auto;
}

/* Match the desktop frame to the artwork instead of filling it with empty bands. */
@media(min-width:761px){
  .hero{
    min-height:0;
    aspect-ratio:2 / 1;
  }
  .hero-content{
    min-height:0;
    height:100%;
    padding:clamp(22px,2vw,30px) clamp(28px,2.6vw,38px);
  }
  .hero-content h1{
    margin:clamp(12px,1.2vw,17px) 0 8px;
    font-size:clamp(40px,3.8vw,56px);
    line-height:.98;
  }
  .hero-content .actions{margin-top:12px}
  .hero-content .info-box{margin-top:10px;padding:11px 14px}
  .hero-content .hero-signature{margin-top:11px}
}

/* Preserve text contrast without hiding the player, referee tower or embedded medal. */
.hero::after{
  background:
    linear-gradient(90deg,
      rgba(4,18,33,.985) 0%,
      rgba(4,18,33,.91) 31%,
      rgba(4,18,33,.27) 49%,
      rgba(4,18,33,.018) 69%,
      rgba(4,18,33,.006) 100%),
    linear-gradient(180deg,rgba(0,0,0,.01),rgba(0,0,0,.045));
}

/* A fast independent glow supplies pointer parallax without moving the artwork. */
.hero-light{
  inset:-18%;
  background:
    radial-gradient(circle at var(--hx,72%) var(--hy,36%),rgba(255,233,157,.34),transparent 13%),
    radial-gradient(circle at 76% 57%,rgba(238,174,43,.18),transparent 25%),
    radial-gradient(circle at 61% 24%,rgba(255,249,218,.12),transparent 16%);
  filter:blur(2px) drop-shadow(0 0 28px rgba(255,196,54,.42));
  animation:heroLightTravel 2.6s cubic-bezier(.45,.05,.55,.95) infinite alternate;
  will-change:transform,opacity,filter;
}
@keyframes heroLightTravel{
  0%{transform:translate3d(calc(var(--motion-x,0px) - 5%),calc(var(--motion-y,0px) - 4%),0);opacity:.52;filter:blur(3px) brightness(.82) drop-shadow(0 0 18px rgba(255,196,54,.30))}
  48%{opacity:1;filter:blur(1px) brightness(1.42) drop-shadow(0 0 44px rgba(255,205,73,.68))}
  100%{transform:translate3d(calc(var(--motion-x,0px) + 6%),calc(var(--motion-y,0px) + 5%),0);opacity:.72;filter:blur(2px) brightness(1.12) drop-shadow(0 0 31px rgba(255,196,54,.52))}
}

/* A narrow golden glint crosses quickly without veiling the scene. */
.hero-sweep{
  display:block;
  left:-12%;
  top:-20%;
  width:7%;
  height:145%;
  background:linear-gradient(90deg,transparent,rgba(239,177,42,.05),rgba(255,210,83,.22),rgba(221,145,20,.07),transparent);
  filter:blur(2px) drop-shadow(0 0 10px rgba(236,175,40,.28));
  animation:heroSweepStrong 2.8s ease-in-out infinite;
  will-change:transform,opacity;
}
@keyframes heroSweepStrong{
  0%{transform:translate3d(0,0,0) rotate(12deg);opacity:0}
  10%{opacity:.18}
  42%{opacity:.72}
  72%{transform:translate3d(1800%,0,0) rotate(12deg);opacity:.34}
  100%{transform:translate3d(1800%,0,0) rotate(12deg);opacity:0}
}

/* Golden energy rotates, travels and flashes independently of the fixed image. */
.energy{
  filter:blur(.5px) drop-shadow(0 0 18px rgba(255,205,79,.72)) drop-shadow(0 0 42px rgba(255,169,25,.38));
  opacity:.94;
  animation:energyStrong 2.35s linear infinite;
  will-change:transform,opacity,filter;
}
@keyframes energyStrong{
  0%{transform:translate3d(-5%,5%,0) rotate(0deg);opacity:.48;filter:blur(1px) brightness(.8) drop-shadow(0 0 12px rgba(255,205,79,.45))}
  30%{opacity:1;filter:blur(0) brightness(1.65) drop-shadow(0 0 30px rgba(255,220,105,.92))}
  58%{transform:translate3d(5%,-6%,0) rotate(215deg);opacity:.9}
  100%{transform:translate3d(-5%,5%,0) rotate(360deg);opacity:.52;filter:blur(1px) brightness(.9) drop-shadow(0 0 14px rgba(255,190,45,.55))}
}

/* Right-side sparks use distinct diagonal paths and phases for visible depth. */
.spark{
  width:9px;
  height:9px;
  animation-name:sparkStrong!important;
  animation-timing-function:cubic-bezier(.35,.05,.55,.95)!important;
  animation-iteration-count:infinite!important;
  will-change:transform,opacity,filter;
}
.s1{animation-duration:1.35s!important;animation-delay:-.15s!important}
.s2{animation-duration:1.8s!important;animation-delay:-1.1s!important}
.s3{animation-duration:2.15s!important;animation-delay:-1.65s!important}
@keyframes sparkStrong{
  0%{transform:translate3d(38px,42px,0) scale(.45);opacity:0;filter:brightness(.7)}
  22%{opacity:.9}
  55%{transform:translate3d(-12px,-24px,0) scale(1.55);opacity:1;filter:brightness(1.8)}
  100%{transform:translate3d(-62px,-82px,0) scale(.72);opacity:0;filter:brightness(1)}
}

/* Keep the animated emblem distinct from the medal painted into the artwork. */
.medal-float{
  right:3%;
  bottom:5%;
  width:clamp(115px,10vw,155px);
  height:auto;
  aspect-ratio:1;
  perspective:1400px;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(222,171,43,.24));
}

.medal{
  animation:medalStrongSpin 5.2s linear infinite!important;
  will-change:transform;
}
@keyframes medalStrongSpin{
  0%{transform:rotateY(0deg) rotateX(10deg) rotateZ(-1.5deg)}
  25%{transform:rotateY(90deg) rotateX(-5deg) rotateZ(2deg)}
  50%{transform:rotateY(180deg) rotateX(9deg) rotateZ(-1deg)}
  75%{transform:rotateY(270deg) rotateX(-6deg) rotateZ(1.8deg)}
  100%{transform:rotateY(360deg) rotateX(10deg) rotateZ(-1.5deg)}
}
.medal::before{animation-duration:2.6s}

.lead{text-shadow:0 1px 2px rgba(0,0,0,.62)}

@media(max-width:760px){
  .hero-bg{
    inset:0;
    background-size:contain;
    background-position:50% 50%;
    transform:none;
    animation:none;
  }
  .hero::after{
    background:linear-gradient(180deg,rgba(4,18,33,.25),rgba(4,18,33,.72) 45%,rgba(4,18,33,.96) 100%);
  }
  .hero-light{animation-duration:3.4s;opacity:.72}
  .hero-sweep{display:block;animation-duration:4.4s;opacity:.62}
  .energy{animation-duration:3.15s;filter:drop-shadow(0 0 14px rgba(255,205,79,.58))}
  .spark{width:7px;height:7px}
  .medal-float{
    top:160px;
    right:18px;
    bottom:auto;
    width:clamp(90px,24vw,115px);
    height:auto;
  }
  .medal{animation-duration:5s!important}
}

@media(max-width:419px){
  .medal-float{display:none}
}

@media(prefers-reduced-motion:reduce){
  .hero-light,.hero-sweep,.energy,.spark,.medal,.medal::before{animation:none!important}
  .hero-bg{
    inset:0!important;
    background-size:contain!important;
    background-position:50% 50%!important;
    transform:none!important;
    animation:none!important;
  }
}