.brand img,
.hero-logo,
.venue-mark > img,
.footer-logos img {
  background: transparent;
  object-fit: contain;
}

.hero-logo {
  width: 230px;
  height: auto;
}
.brand img {
  width: 58px;
  height: 52px;
}
.hero-poster {
  transform: perspective(1000px) rotateY(var(--poster-x, -2deg))
    rotateX(var(--poster-y, 1deg));
  transition: transform 0.25s ease-out;
}
.hero-poster img {
  width: 100%;
}

.qr-from-poster {
  display: block;
  width: 74px;
  aspect-ratio: 1;
  border: 0 !important;
  background-image: url("../images/event/poster-register-esports.jpeg");
  background-repeat: no-repeat;
  background-size: 406% auto;
  background-position: 76% 68.4%;
  border-radius: 7px;
  box-shadow: inset 0 0 0 4px #fff;
}
.entry-actions .qr-from-poster {
  width: 96px;
  flex: 0 0 96px;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 5px #fff,
    0 12px 24px rgba(0, 0, 0, 0.24);
}
.qr-live {
  box-shadow:
    0 0 0 2px var(--lime),
    0 0 28px rgba(184, 245, 0, 0.38);
}
.large-qr .qr-from-poster {
  width: 142px;
}
.large-qr {
  gap: 9px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}
.large-qr:hover {
  transform: translateY(-7px) rotate(1deg);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.25);
}

.partner-grid article {
  overflow: hidden;
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease;
}
.partner-grid article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(255, 255, 255, 0.9) 50%,
    transparent 70%
  );
  transform: translateX(-120%);
  transition: transform 0.65s ease;
}
.partner-grid article {
  position: relative;
}
.partner-grid article:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(20, 39, 112, 0.16);
  border-color: #9db0e9;
}
.partner-grid article:hover::before {
  transform: translateX(120%);
}
.partner-grid article img {
  position: relative;
  z-index: 1;
  max-width: 190px;
  max-height: 100px;
}
.partner-grid article:nth-child(2) img,
.partner-grid article:nth-child(6) img {
  max-width: 210px;
}
.partner-grid article:nth-child(8) img {
  max-width: 180px;
  max-height: 88px;
}
.partner-grid article span {
  position: relative;
  z-index: 1;
}
.venue-mark p img {
  width: 92px;
  height: 68px;
  object-fit: contain;
}
.venue-mark p img[alt="ESI"] {
  width: 150px;
}
.footer-logos img {
  width: 75px;
  height: 55px;
}
.footer-logos img:nth-child(3) {
  width: 135px;
}

.button {
  position: relative;
  overflow: hidden;
}
.button::after {
  content: "";
  position: absolute;
  inset: -60% auto -60% -35%;
  width: 25%;
  background: rgba(255, 255, 255, 0.55);
  transform: rotate(18deg);
  transition: left 0.55s ease;
}
.button:hover::after {
  left: 120%;
}
.grid-pattern {
  animation: grid-drift 22s linear infinite;
}
.hero-copy > * {
  animation: hero-in 0.7s both cubic-bezier(0.2, 0.7, 0.2, 1);
}
.hero-copy > :nth-child(2) {
  animation-delay: 0.08s;
}
.hero-copy > :nth-child(3) {
  animation-delay: 0.16s;
}
.hero-copy > :nth-child(4) {
  animation-delay: 0.24s;
}
.hero-copy > :nth-child(5) {
  animation-delay: 0.32s;
}
.hero-copy > :nth-child(6) {
  animation-delay: 0.4s;
}
.hero-poster {
  animation:
    poster-in 0.9s 0.2s both cubic-bezier(0.2, 0.8, 0.2, 1),
    poster-float 5s 1.2s ease-in-out infinite;
}
.schedule li.highlight {
  animation: highlight-glow 2.5s ease-in-out infinite;
}

.motion-ready [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition:
    opacity 0.65s ease,
    transform 0.65s cubic-bezier(0.2, 0.75, 0.25, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.motion-ready [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes hero-in {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes poster-in {
  from {
    opacity: 0;
    transform: translateX(70px) rotate(5deg) scale(0.92);
  }
  to {
    opacity: 1;
  }
}
@keyframes poster-float {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -12px;
  }
}
@keyframes grid-drift {
  to {
    background-position: 52px 52px;
  }
}
@keyframes highlight-glow {
  0%,
  100% {
    box-shadow: 0 12px 35px rgba(16, 37, 189, 0.18);
  }
  50% {
    box-shadow: 0 15px 42px rgba(16, 37, 189, 0.42);
  }
}

/* Futuristic poster and card motion ------------------------------------- */
.poster-card {
  overflow: hidden;
  will-change: translate, filter, box-shadow;
}

.poster-card::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -45% -25%;
  pointer-events: none;
  background: linear-gradient(
    108deg,
    transparent 38%,
    rgba(32, 224, 255, 0.08) 45%,
    rgba(255, 255, 255, 0.52) 50%,
    rgba(197, 249, 0, 0.12) 55%,
    transparent 62%
  );
  transform: translateX(-75%);
  animation: poster-scan 4.8s 1.4s cubic-bezier(0.5, 0, 0.25, 1) infinite;
}

.poster-card img {
  animation: poster-image-pulse 4.2s ease-in-out infinite;
}

.poster-feature {
  animation: poster-depth-front 5.6s ease-in-out infinite;
}

.poster-entry {
  animation: poster-depth-back 5.6s 0.35s ease-in-out infinite;
}

.poster-card figcaption {
  position: relative;
  z-index: 3;
}

.skill-list article,
.category-grid article,
.format-grid article,
.benefit-grid article,
.partner-grid article,
.schedule li,
.accordion details {
  background-size: 220% 100%;
  animation: card-signal 6s ease-in-out infinite;
  will-change: box-shadow, border-color, background-position;
}

.skill-list article:nth-child(2),
.category-grid article:nth-child(2),
.format-grid article:nth-child(2),
.benefit-grid article:nth-child(2),
.partner-grid article:nth-child(2),
.schedule li:nth-child(2),
.accordion details:nth-child(2) {
  animation-delay: -1.2s;
}

.skill-list article:nth-child(3),
.category-grid article:nth-child(3),
.format-grid article:nth-child(3),
.benefit-grid article:nth-child(3),
.partner-grid article:nth-child(3),
.schedule li:nth-child(3),
.accordion details:nth-child(3) {
  animation-delay: -2.4s;
}

.format-grid article:nth-child(4),
.benefit-grid article:nth-child(4),
.partner-grid article:nth-child(4),
.accordion details:nth-child(4) {
  animation-delay: -3.6s;
}

.format-grid article:nth-child(5),
.partner-grid article:nth-child(5),
.accordion details:nth-child(5) {
  animation-delay: -4.8s;
}

.format-grid article:nth-child(6),
.partner-grid article:nth-child(6),
.accordion details:nth-child(6) {
  animation-delay: -5.4s;
}

.skill-list article::after,
.category-grid article::after,
.format-grid article::after,
.benefit-grid article::after,
.partner-grid article::after {
  transform-origin: left center;
  animation: energy-rail 3.8s ease-in-out infinite;
}

.skill-list article:hover,
.category-grid article:hover,
.format-grid article:hover,
.benefit-grid article:hover,
.partner-grid article:hover {
  animation-play-state: paused;
}

.skill-list article:hover::after,
.category-grid article:hover::after,
.format-grid article:hover::after,
.benefit-grid article:hover::after,
.partner-grid article:hover::after {
  animation-duration: 0.75s;
}

.schedule-poster {
  overflow: hidden;
}

.game-visual img,
.schedule-poster img,
.how-to-join-poster img {
  will-change: transform, filter;
  animation: supporting-poster-float 5.2s ease-in-out infinite;
  transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.45s ease;
}

.game-visual img {
  animation-delay: -1.4s;
}

.game-visual:hover img,
.schedule-poster:hover img,
.how-to-join-poster:hover img {
  transform: scale(1.025) rotate(-0.45deg);
  filter: saturate(1.18) contrast(1.05) drop-shadow(0 0 20px rgba(32, 224, 255, 0.32));
}

.poster-scanner {
  position: absolute;
  z-index: 3;
  top: -16%;
  right: 7%;
  left: 7%;
  height: 18%;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(32, 224, 255, 0.04) 32%,
    rgba(32, 224, 255, 0.6) 92%,
    rgba(255, 255, 255, 0.9)
  );
  border-bottom: 2px solid var(--arena-cyan, #20e0ff);
  box-shadow: 0 10px 28px rgba(32, 224, 255, 0.24);
  mix-blend-mode: screen;
  animation: supporting-poster-scan 4.6s 0.7s ease-in-out infinite;
}

.schedule-poster .poster-scanner {
  right: 5%;
  left: 5%;
  animation-delay: -1.6s;
}

.schedule-poster::before,
.schedule-poster::after {
  animation: target-corners 2.2s ease-in-out infinite;
}

.qr-live,
.large-qr {
  animation: qr-lock 2.8s ease-in-out infinite;
}

.qr-from-poster {
  position: relative;
  animation: qr-focus 2.8s ease-in-out infinite;
}

.venue-mark,
.invest-card {
  animation: panel-core 5s ease-in-out infinite;
}

@keyframes poster-scan {
  0%, 20% {
    transform: translateX(-78%);
    opacity: 0;
  }
  28% {
    opacity: 1;
  }
  58% {
    transform: translateX(78%);
    opacity: 0.9;
  }
  66%, 100% {
    transform: translateX(78%);
    opacity: 0;
  }
}

@keyframes poster-image-pulse {
  0%, 100% {
    filter: saturate(1) contrast(1);
  }
  50% {
    filter: saturate(1.12) contrast(1.04) brightness(1.04);
  }
}

@keyframes poster-depth-front {
  0%, 100% {
    translate: 0 0;
    filter: drop-shadow(0 16px 22px rgba(3, 10, 61, 0.35));
  }
  50% {
    translate: 0 -13px;
    filter: drop-shadow(0 26px 28px rgba(32, 224, 255, 0.2));
  }
}

@keyframes poster-depth-back {
  0%, 100% {
    translate: 0 0;
    filter: brightness(0.9) saturate(0.92);
  }
  50% {
    translate: 0 9px;
    filter: brightness(1.03) saturate(1.08);
  }
}

@keyframes card-signal {
  0%, 100% {
    background-position: 0% 50%;
    border-color: rgba(32, 224, 255, 0.22);
  }
  50% {
    background-position: 100% 50%;
    border-color: rgba(32, 224, 255, 0.5);
  }
}

@keyframes energy-rail {
  0%, 100% {
    transform: scaleX(0.25);
    opacity: 0.55;
    filter: brightness(1);
  }
  50% {
    transform: scaleX(1);
    opacity: 1;
    filter: brightness(1.5) drop-shadow(0 0 7px #20e0ff);
  }
}

@keyframes schedule-poster-glow {
  0%, 100% {
    filter: saturate(1) drop-shadow(0 10px 14px rgba(3, 10, 61, 0.2));
  }
  50% {
    filter: saturate(1.12) drop-shadow(0 0 20px rgba(32, 224, 255, 0.3));
  }
}

@keyframes supporting-poster-float {
  0%, 100% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: saturate(1) drop-shadow(0 12px 18px rgba(3, 10, 61, 0.22));
  }
  50% {
    transform: translateY(-9px) rotate(0.35deg) scale(1.008);
    filter: saturate(1.1) drop-shadow(0 0 22px rgba(32, 224, 255, 0.28));
  }
}

@keyframes supporting-poster-scan {
  0%, 16% {
    top: -18%;
    opacity: 0;
  }
  24% {
    opacity: 0.78;
  }
  68% {
    top: 98%;
    opacity: 0.68;
  }
  76%, 100% {
    top: 98%;
    opacity: 0;
  }
}

@keyframes target-corners {
  0%, 100% {
    opacity: 0.65;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
    filter: drop-shadow(0 0 8px currentColor);
  }
}

@keyframes qr-lock {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(32, 224, 255, 0.2), 0 0 22px rgba(32, 224, 255, 0.12);
  }
  50% {
    box-shadow: 0 0 0 2px rgba(197, 249, 0, 0.72), 0 0 34px rgba(32, 224, 255, 0.28);
  }
}

@keyframes qr-focus {
  0%, 100% {
    filter: contrast(1) brightness(1);
  }
  50% {
    filter: contrast(1.12) brightness(1.07) drop-shadow(0 0 7px rgba(197, 249, 0, 0.45));
  }
}

@keyframes panel-core {
  0%, 100% {
    border-color: rgba(32, 224, 255, 0.3);
  }
  50% {
    border-color: rgba(197, 249, 0, 0.58);
    box-shadow: 0 0 35px rgba(32, 224, 255, 0.12), 0 28px 55px rgba(2, 7, 51, 0.32);
  }
}

@media (max-width: 620px) {
  .hero-logo {
    width: 170px;
  }
  .partner-grid article img {
    max-width: 150px;
    max-height: 82px;
  }
  .qr-placeholder .qr-from-poster {
    flex: 0 0 118px;
    width: 118px;
  }
  .venue-mark p img {
    width: min(34vw, 135px);
    height: 70px;
    object-fit: contain;
  }
  .footer-logos {
    flex-wrap: wrap;
  }
  .poster-feature,
  .poster-entry,
  .poster-discord {
    animation-name: poster-mobile-float;
    animation-duration: 4.8s;
  }
  .game-visual img,
  .schedule-poster img {
    animation-name: supporting-poster-float-mobile;
  }
}

@keyframes poster-mobile-float {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}

@keyframes supporting-poster-float-mobile {
  0%, 100% {
    transform: translateY(0);
    filter: saturate(1);
  }
  50% {
    transform: translateY(-4px);
    filter: saturate(1.06) drop-shadow(0 0 12px rgba(32, 224, 255, 0.2));
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .grid-pattern,
  .hero-copy > *,
  .hero-poster,
  .schedule li.highlight,
  .poster-card,
  .poster-card::after,
  .poster-card img,
  .skill-list article,
  .category-grid article,
  .format-grid article,
  .benefit-grid article,
  .partner-grid article,
  .schedule li,
  .accordion details,
  .schedule-poster img,
  .how-to-join-poster img,
  .game-visual img,
  .poster-scanner,
  .schedule-poster::before,
  .schedule-poster::after,
  .qr-live,
  .large-qr,
  .qr-from-poster,
  .venue-mark,
  .invest-card,
  .powered-logo-row img,
  .powered-logo-row figure::before {
    animation: none !important;
  }
  .motion-ready [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .button,
  .partner-grid article,
  .large-qr {
    transition: none;
  }
}