@import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap");

.eu-hero {
  --eu-w: 1920px;
  --eu-h: 1080px;
  --eu-ink: #11110f;
  --eu-orange: #ff6600;
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #ffffff;
  container-type: inline-size;
  color: var(--eu-ink);
  font-family: Inter, system-ui, sans-serif;
}

.eu-hero__art {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--eu-w);
  height: var(--eu-h);
  overflow: hidden;
  background: #ffffff;
  transform: scale(var(--eu-scale, calc(100cqi / 1920px)));
  transform-origin: top left;
  pointer-events: none;
}

.eu-hero--hero {
  margin: 0 0 2.5rem;
  border-radius: 24px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

#content .eu-hero p,
#content .eu-hero span {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  color: inherit;
}

#content .eu-hero img,
.eu-hero img {
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  max-width: none;
  object-fit: cover;
}

.eu-hero__warmup {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 126px 160px 128px;
  box-sizing: border-box;
}

.eu-hero__warm {
  width: 720px;
  height: 154px;
  flex-shrink: 0;
  background: var(--eu-orange);
  border-radius: 6px;
  clip-path: polygon(2% 4%, 98% 0, 100% 88%, 96% 98%, 4% 94%, 0 12%);
  opacity: 0;
  animation: eu-warm 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  will-change: transform, opacity, filter;
}

.eu-hero__burst {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: 0;
  animation: eu-burst-layer 6s linear infinite;
}

.eu-hero__shard {
  position: absolute;
  background: var(--eu-orange);
  border-radius: 9px;
  clip-path: polygon(
    2% 8%, 14% 4%, 42% 5%, 63% 2%, 92% 5%, 99% 12%,
    97% 88%, 86% 96%, 55% 94%, 28% 98%, 5% 92%, 0 18%
  );
  opacity: 0;
  will-change: transform, opacity, filter;
}

.eu-hero__shard--a {
  left: 735px;
  top: 418px;
  width: 162px;
  height: 90px;
  animation: eu-shard-a 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__shard--b {
  left: 920px;
  top: 414px;
  width: 172px;
  height: 92px;
  animation: eu-shard-b 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__shard--c {
  left: 1300px;
  top: 420px;
  width: 96px;
  height: 92px;
  animation: eu-shard-c 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__shard--d {
  left: 790px;
  top: 648px;
  width: 172px;
  height: 94px;
  animation: eu-shard-d 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__shard--e {
  left: 1042px;
  top: 642px;
  width: 90px;
  height: 96px;
  animation: eu-shard-e 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%, -50%);
}

.eu-hero__badge-inner {
  display: flex;
  align-items: center;
  gap: 42px;
  background: var(--eu-orange);
  border-radius: 48px;
  padding: 54px 96px 54px 66px;
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3);
  opacity: 0;
  transform-origin: center;
  animation: eu-badge 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform, opacity;
}

.eu-hero__badge-inner img,
#content .eu-hero .eu-hero__badge-inner img {
  width: 132px;
  height: 132px;
  flex-shrink: 0;
}

.eu-hero__badge-text,
#content .eu-hero .eu-hero__badge-text {
  color: #fff;
  font-size: 90px;
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}

.eu-hero__frags {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.eu-hero__frag {
  position: absolute;
  color: var(--eu-ink);
  font-size: 88px;
  font-weight: 590;
  line-height: 0.9;
  letter-spacing: -0.055em;
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity, filter;
}

.eu-hero__frag--edit {
  left: 580px;
  top: 484px;
  animation: eu-frag-edit 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__frag--able {
  left: 730px;
  top: 490px;
  animation: eu-frag-able 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__frag--url {
  left: 1040px;
  top: 484px;
  animation: eu-frag-url 6s cubic-bezier(0.45, 0, 0.2, 1) infinite;
}

.eu-hero__wordmark {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: 0;
  animation: eu-wordmark 6s cubic-bezier(0.22, 1, 0.36, 1) infinite;
  will-change: transform, opacity, filter;
}

.eu-hero__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 24px;
  white-space: nowrap;
}

.eu-hero__title,
#content .eu-hero .eu-hero__title {
  font-size: 88px;
  font-weight: 620;
  letter-spacing: -0.055em;
  color: var(--eu-ink);
  line-height: 1;
}

.eu-hero__chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--eu-orange);
  border-radius: 14px;
  padding: 14px 26px 14px 18px;
  box-shadow: 0 6px 20px rgba(255, 102, 0, 0.3);
}

.eu-hero__chip img,
#content .eu-hero .eu-hero__chip img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.eu-hero__chip-label,
#content .eu-hero .eu-hero__chip-label {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1;
}

@keyframes eu-warm {
  0%, 0.3% {
    opacity: 0;
    transform: translate3d(-820px, 0, 0) scaleX(0.42);
    filter: blur(14px);
  }
  4% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0) scaleX(1);
    filter: blur(0);
  }
  8.2%, 100% {
    opacity: 0;
    transform: translate3d(620px, 0, 0) scaleX(1);
    filter: blur(18px);
  }
}

@keyframes eu-burst-layer {
  0%, 8% { opacity: 0; filter: blur(0); }
  8.2%, 64% { opacity: 1; filter: blur(0); }
  68%, 100% { opacity: 0; filter: blur(6px); }
}

@keyframes eu-badge {
  0%, 8.6% {
    opacity: 0;
    transform: scale(0.08) rotate(-20deg);
  }
  10% {
    opacity: 1;
    transform: scale(0.16) rotate(-6deg);
  }
  17.7%, 58% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  60.3% {
    opacity: 0.45;
    transform: translate3d(118px, -62px, 0) scale(0.16) rotate(0deg);
  }
  63.7%, 100% {
    opacity: 0;
    transform: translate3d(118px, -62px, 0) scale(0.16);
  }
}

@keyframes eu-shard-a {
  0%, 8.8% {
    opacity: 0;
    transform: translate3d(-1px, 28px, 0) scale(0.78) rotate(-3deg);
    filter: blur(8px);
  }
  12.3% {
    opacity: 1;
    transform: translate3d(-1px, 28px, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  18.3% {
    opacity: 1;
    transform: translate3d(-160px, -96px, 0) scale(1) rotate(-2deg);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate3d(-151px, -126px, 0) scale(1) rotate(-1deg);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translate3d(19px, -68px, 0) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  35.8%, 100% {
    opacity: 0;
    transform: translate3d(19px, -68px, 0) scale(0.5);
    filter: blur(6px);
  }
}

@keyframes eu-shard-b {
  0%, 8.8% {
    opacity: 0;
    transform: translate3d(-11px, 5px, 0) scale(0.78) rotate(3deg);
    filter: blur(8px);
  }
  12.3% {
    opacity: 1;
    transform: translate3d(-11px, 5px, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  18.3% {
    opacity: 1;
    transform: translate3d(165px, -123px, 0) scale(1) rotate(2deg);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate3d(153px, -126px, 0) scale(1) rotate(1deg);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-81px, -65px, 0) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  35.8%, 100% {
    opacity: 0;
    transform: translate3d(-81px, -65px, 0) scale(0.5);
    filter: blur(6px);
  }
}

@keyframes eu-shard-c {
  0%, 8.8% {
    opacity: 0;
    transform: translate3d(-3px, -8px, 0) scale(0.78) rotate(-3deg);
    filter: blur(8px);
  }
  12.3% {
    opacity: 1;
    transform: translate3d(-3px, -8px, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  18.3% {
    opacity: 1;
    transform: translate3d(169px, -28px, 0) scale(1) rotate(-2deg);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate3d(174px, -24px, 0) scale(1) rotate(-1deg);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translate3d(37px, 70px, 0) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  37.5%, 100% {
    opacity: 0;
    transform: translate3d(37px, 70px, 0) scale(0.5);
    filter: blur(6px);
  }
}

@keyframes eu-shard-d {
  0%, 8.8% {
    opacity: 0;
    transform: translate3d(-9px, 2px, 0) scale(0.78) rotate(3deg);
    filter: blur(8px);
  }
  12.3% {
    opacity: 1;
    transform: translate3d(-9px, 2px, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  18.3% {
    opacity: 1;
    transform: translate3d(-153px, 80px, 0) scale(1) rotate(2deg);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate3d(-157px, 76px, 0) scale(1) rotate(1deg);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-90px, -40px, 0) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  35.8%, 100% {
    opacity: 0;
    transform: translate3d(-90px, -40px, 0) scale(0.5);
    filter: blur(6px);
  }
}

@keyframes eu-shard-e {
  0%, 8.8% {
    opacity: 0;
    transform: translate3d(-7px, -13px, 0) scale(0.78) rotate(-3deg);
    filter: blur(8px);
  }
  12.3% {
    opacity: 1;
    transform: translate3d(-7px, -13px, 0) scale(1) rotate(0deg);
    filter: blur(0);
  }
  18.3% {
    opacity: 1;
    transform: translate3d(-10px, 129px, 0) scale(1) rotate(-2deg);
    filter: blur(0);
  }
  25% {
    opacity: 1;
    transform: translate3d(-17px, 128px, 0) scale(1) rotate(-1deg);
    filter: blur(0);
  }
  30% {
    opacity: 1;
    transform: translate3d(-67px, -18px, 0) scale(0.9) rotate(0deg);
    filter: blur(1px);
  }
  37.5%, 100% {
    opacity: 0;
    transform: translate3d(-67px, -18px, 0) scale(0.5);
    filter: blur(6px);
  }
}

@keyframes eu-frag-edit {
  0%, 60% {
    opacity: 0;
    transform: translate3d(112px, -118px, 0);
    filter: blur(4px);
  }
  60.3% {
    opacity: 1;
    transform: translate3d(88px, -96px, 0);
    filter: blur(1.2px);
  }
  63% {
    opacity: 1;
    transform: translate3d(20px, -24px, 0);
    filter: blur(0.35px);
  }
  65.8%, 100% {
    opacity: 0;
    transform: translate3d(28px, -30px, 0);
    filter: blur(4px);
  }
}

@keyframes eu-frag-able {
  0%, 60% {
    opacity: 0;
    transform: translate3d(-12px, 78px, 0);
    filter: blur(5px);
  }
  60.4% {
    opacity: 1;
    transform: translate3d(-22px, 56px, 0);
    filter: blur(1.2px);
  }
  63.1% {
    opacity: 1;
    transform: translate3d(-8px, 18px, 0);
    filter: blur(0.35px);
  }
  65.9%, 100% {
    opacity: 0;
    transform: translate3d(-14px, 25px, 0);
    filter: blur(4px);
  }
}

@keyframes eu-frag-url {
  0%, 60% {
    opacity: 0;
    transform: translate3d(38px, 70px, 0);
    filter: blur(7px);
  }
  60.5% {
    opacity: 1;
    transform: translate3d(18px, 48px, 0);
    filter: blur(1.2px);
  }
  63.2% {
    opacity: 1;
    transform: translate3d(6px, 14px, 0);
    filter: blur(0.35px);
  }
  66%, 100% {
    opacity: 0;
    transform: translate3d(8px, 18px, 0);
    filter: blur(4px);
  }
}

@keyframes eu-wordmark {
  0%, 64.5% {
    opacity: 0;
    transform: translate3d(-12px, 8px, 0) scale(0.995);
    filter: blur(5px);
  }
  68.7%, 96% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .eu-hero__warm,
  .eu-hero__burst,
  .eu-hero__frag {
    animation: none;
    opacity: 0;
  }

  .eu-hero__wordmark {
    animation: none;
    opacity: 1;
    transform: none;
    filter: none;
  }
}