@keyframes iago21-light {
  0%,18% {
    transform:translateX(-160%) skewX(-22deg);
    opacity:0;
  }
  29% {opacity:.55}
  42%,100% {
    transform:translateX(170%) skewX(-22deg);
    opacity:0;
  }
}

@keyframes iago21-rise {
  from {opacity:0;transform:translateY(14px)}
  to {opacity:1;transform:translateY(0)}
}

#hero {isolation:isolate}

#hero .hero-title {
  position:relative;
  isolation:isolate;
}

#hero .hero-title::after {
  content:"";
  position:absolute;
  inset:-10% -30%;
  pointer-events:none;
  background:linear-gradient(
    110deg,
    transparent 42%,
    rgba(255,255,255,.14) 49%,
    rgba(255,211,152,.24) 51%,
    transparent 59%
  );
  mix-blend-mode:screen;
  animation:iago21-light 8s ease-in-out infinite;
}

#hero .hero-cta {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

#hero .hero-cta::after {
  content:"";
  position:absolute;
  inset:-30% -80%;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 43%,
    rgba(255,255,255,.3) 50%,
    transparent 57%
  );
  animation:iago21-light 7s ease-in-out infinite;
}

#hero .iago21-gallery {
  position:absolute;
  bottom:22px;
  right:clamp(22px,4vw,75px);
  width:min(44%,560px);
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:12px;
  animation:iago21-rise .6s ease-out both;
}

#hero .iago21-label {
  color:#fff2e8;
  font:800 11px/1.2 Inter,Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-shadow:0 2px 5px #18051f;
}

#hero .iago21-items {
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-end;
  gap:10px;
}

#hero .iago21-item {
  flex:0 1 115px;
  min-width:0;
  aspect-ratio:2/3;
  display:block;
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:0;
  cursor:pointer;
  border-radius:11px;
  border:1px solid rgba(255,204,139,.42);
  background:linear-gradient(160deg,#371237,#18091e);
  box-shadow:0 12px 25px #0a0017a8;
  transition:
    transform .26s ease,
    border-color .26s ease,
    box-shadow .26s ease;
}

#hero .iago21-item:first-child {
  flex-basis:128px;
  box-shadow:
    0 17px 33px #0a0017d4,
    0 0 17px #ff8c6333;
}

#hero .iago21-item img {
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  pointer-events:none;
}

#hero .iago21-item::after {
  content:"";
  position:absolute;
  inset:-25% -100%;
  pointer-events:none;
  background:linear-gradient(
    105deg,
    transparent 44%,
    rgba(255,255,255,.28) 50%,
    transparent 56%
  );
  animation:iago21-light 7.3s ease-in-out infinite;
  animation-delay:var(--delay,0s);
}

#hero .iago21-item:hover {
  transform:translateY(-5px);
  border-color:#ffe6ad;
  box-shadow:
    0 19px 35px #0a0017dd,
    0 0 25px #ff9a4c3d;
}

#hero .iago21-item:focus-visible {
  outline:3px solid #ffca68;
  outline-offset:3px;
}

#hero .hero-stage-note {
  display:block;
  margin-top:8px;
  color:#f7d8ee;
}

@media(max-width:1040px) {
  #hero .iago21-gallery {
    right:18px;
    width:min(42%,405px);
  }
  #hero .iago21-items {gap:7px}
  #hero .iago21-item {flex-basis:92px}
  #hero .iago21-item:first-child {flex-basis:104px}
}

@media(max-width:720px) {
  #hero {height:605px!important}
  #hero .hero-copy {
    height:auto;
    justify-content:flex-start;
    padding:37px 20px 0;
  }
  #hero .hero-title {
    font-size:clamp(60px,13vw,77px);
  }
  #hero .iago21-gallery {
    left:16px;
    right:16px;
    bottom:20px;
    width:auto;
    align-items:flex-start;
    gap:10px;
  }
  #hero .iago21-items {
    justify-content:space-between;
    gap:8px;
  }
  #hero .iago21-item,
  #hero .iago21-item:first-child {
    flex:1 1 0;
    max-width:105px;
  }
  #hero .iago21-label {font-size:10px}
}

@media(max-width:390px) {
  #hero {height:575px!important}
  #hero .hero-copy {padding-top:24px}
  #hero .iago21-item,
  #hero .iago21-item:first-child {max-width:90px}
}

@media(prefers-reduced-motion:reduce) {
  #hero .hero-title::after,
  #hero .hero-cta::after,
  #hero .iago21-item::after {
    animation:none;
    opacity:0;
  }
  #hero .iago21-gallery {animation:none}
  #hero .iago21-item {transition:none}
  #hero .iago21-item:hover {transform:none}
}