/* Panel 1 hero layout */
:root {
  --stage-w: 1920px;
  --stage-h: 908px;
  --stage-w-mobile: 360px;
  --stage-h-mobile: 812px;

  --stage-scale: 1;
  --stage-translate-x: 0px;
  --stage-translate-y: 0px;
  --stage-offset-y: 150px;

  --p2-w: 1920px;
  --p2-h: 1616px;

  /* Animation */
  --p1-anim-delay-base: 0.5s;

  --p1-esports-left: 36px;
  --p1-esports-top: 150px; /* align top edge with THE MEL */
  --p1-esports-width: 45.056px;

  --p1-military-left: 36px;
  --p1-military-top: 26px;
  --p1-military-width: 930px;

  --p1-themel-left: 130px;
  --p1-themel-top: 150px;
  --p1-themel-width: 819.28px;

  --p1-sirviendo-left: 126px;
  --p1-sirviendo-bottom: -10px;
  --p1-sirviendo-width: 769.5px;

  --p1-character-top: -18px;
  --p1-character-right: -70px;
  --p1-character-width: 1180px;

  /* Panel 2 sizing */
  --p2-register-h: 447px;
  --p2-register-shift: -50px;
  --p2-register-size: 240px;
  --p2-anim-delay-base: 0.3s;

  /* Panel 3 sizing */
  --p3-w: 1920px;
  --p3-h: 868px;
  --p3-anim-delay-base: 0.18s;

  /* Panel 4 sizing */
  --p4-w: 1920px;
  --p4-h: 876px;
  --p4-anim-delay-base: 0.12s;

  /* Panel 5 sizing */
  --p5-w: 1920px;
  --p5-h: 876px;
  --p5-anim-delay-base: 0.1s;

  /* Panel 6 sizing */
  --p6-w: 1920px;
  --p6-h: 881px;
  --p6-anim-delay-base: 0.1s;
  --p6-logo-speed: 70; /* px per second for partner logo crawl */
  --p6-marquee-duration: 34s;
}

.home-mobile-hero {
  display: none;
}
/* Panel 1 stacking context to keep hero in document flow */
.panel1-stack {
  position: relative;
  /* width: 100%; */
  /* height: calc(var(--stage-h) + var(--stage-offset-y)); */
  margin: 0 auto;
  /* height: 960px; */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(100vw, 1920px); /* scales with device, capped */
  aspect-ratio: 16 / 9;   /* height = width * 9/16 */
}

.hero-interactive {
  position: absolute;
  z-index: 2;
  /* width: 100vw; */
  height: 100%;
  width: 100%;
}

.hero-static {
  display: none;
}

#stage {
  position: relative;
  left: 0;
  margin-top: 160px;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: left;
  /* transform: translate3d(
      var(--stage-translate-x),
      calc(var(--stage-translate-y) + var(--stage-offset-y)),
      0
    )
    scale(var(--stage-scale)); */
  /* transform: scale(0.90); */
  overflow: visible;
  z-index: 20;
  background: none;
}
main.viewport {
  display: block;
}

.social-links {
  z-index: 60;
}

#stage-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: top left;
  transform: translate3d(
      var(--stage-translate-x),
      calc(var(--stage-translate-y) + var(--stage-offset-y)),
      0
    )
    scale(var(--stage-scale));
  overflow: hidden;
  z-index: 0;
  background-image: url("/panel1/panel1_background.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}

#stage.panel1 {
  pointer-events: none;
}

.panel1-board {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel1-board img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(var(--p1-from-x, 0), var(--p1-from-y, 0), 0)
    scale(var(--p1-from-scale, 0.98));
  animation: panel1-slide-fade var(--p1-anim-duration, 0.78s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p1-anim-delay-base, 0s) + var(--p1-anim-delay, 0s))
      forwards;
}

.panel1-esports {
  left: var(--p1-esports-left);
  top: var(--p1-esports-top);
  width: var(--p1-esports-width);
  height: auto;
  z-index: 5;
  --p1-from-x: -90px;
  --p1-anim-delay: 0.05s;
  --p1-from-scale: 0.95;
}

.panel1-military {
  left: var(--p1-military-left);
  top: var(--p1-military-top);
  width: var(--p1-military-width);
  height: auto;
  z-index: 6;
  --p1-from-x: -70px;
  --p1-anim-delay: 0.12s;
}

.panel1-themel {
  left: var(--p1-themel-left);
  top: var(--p1-themel-top);
  width: var(--p1-themel-width);
  height: auto;
  z-index: 7;
  --p1-from-x: -60px;
  --p1-anim-delay: 0.2s;
}

.panel1-sirviendo {
  left: var(--p1-sirviendo-left);
  bottom: var(--p1-sirviendo-bottom);
  width: var(--p1-sirviendo-width);
  height: auto;
  z-index: 8;
  --p1-from-x: -30px;
  --p1-from-y: 40px;
  --p1-anim-delay: 0.28s;
}

.panel1-character {
  right: var(--p1-character-right);
  top: var(--p1-character-top);
  width: var(--p1-character-width);
  height: auto;
  z-index: 10;
  --p1-from-x: 140px;
  --p1-from-scale: 0.99;
  --p1-anim-delay: 0.16s;
}

/* Panel 2 registration layout */
.panel2 {
  position: relative;
  width: min(100vw, var(--p2-w));
  max-width: var(--p2-w);
  aspect-ratio: 1920 / 1616;
  margin: 0 auto clamp(48px, 8vw, 120px);
  margin-top: -100px;
  background-image: url("/panel2/panel2_background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 40;
}

.panel2 img {
  display: block;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
}

.panel2-register-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.panel2-register-row {
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--p2-register-h);
  background-image: url("/panel2/panel2_register_orange.png");
  background-repeat: space no-repeat;
  background-size: auto var(--p2-register-size);
  background-position: 130% 0;
  opacity: 0;
  transform: translateY(var(--p2-register-shift));
  animation: p2-marquee-rtl 23.6s linear infinite, p2-row-fade 0.9s ease calc(var(--p2-anim-delay-base) + 0.1s) forwards;
}

.panel2-register-row--1 { top: 6%; }
.panel2-register-row--2 {
  top: 32%;
  background-position: -130% 0;
  animation-name: p2-marquee-ltr, p2-row-fade;
}
.panel2-register-row--3 {
  top: 58%;
  animation-delay: 0s, calc(var(--p2-anim-delay-base) + 0.3s);
}
.panel2-register-row--4 {
  top: 78%;
  background-position: -130% 0;
  animation-name: p2-marquee-ltr, p2-row-fade;
  animation-delay: 0s, calc(var(--p2-anim-delay-base) + 0.4s);
}

.panel2-rect {
  position: absolute;
  left: 2.86%;
  width: 94.28%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--p2-from-x, 0), var(--p2-from-y, 0), 0)
    scale(var(--p2-from-scale, 0.98));
  animation: panel2-slide-fade var(--p2-anim-duration, 0.78s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p2-anim-delay-base, 0s) + var(--p2-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel2-rect--masters {
  top: 11%;
  --p2-from-y: -32px;
  --p2-anim-delay: 0.02s;
}
.panel2-rect--pro {
  top: 43%;
  --p2-from-y: -20px;
  --p2-anim-delay: 0.08s;
}
.panel2-rect--collegiate {
  top: 72.5%;
  --p2-from-y: -14px;
  --p2-anim-delay: 0.14s;
}

.panel2-text {
  position: absolute;
  z-index: 6;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--p2-from-x, 0), var(--p2-from-y, 0), 0)
    scale(var(--p2-from-scale, 0.98));
  animation: panel2-slide-fade var(--p2-anim-duration, 0.78s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p2-anim-delay-base, 0s) + var(--p2-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel2-text--masters {
  top: 18%;
  left: 11.23%;
  width: 77.55%;
  --p2-from-y: -36px;
  --p2-anim-delay: 0.05s;
}

.panel2-text--pro {
  top: 48.5%;
  left: 32.2%;
  width: 35.6%;
  --p2-from-y: -24px;
  --p2-anim-delay: 0.12s;
}

.panel2-text--pro-echo1,
.panel2-text--pro-echo2 {
  top: 50.3%;
  width: 27.6%;
  opacity: 0.72;
  --p2-from-y: -18px;
  --p2-anim-delay: 0.18s;
}

.panel2-text--pro-echo1 {
  left: 4.6%;
}
.panel2-text--pro-echo2 {
  left: 67.8%;
}

.panel2-text--collegiate {
  top: 79.5%;
  left: 4.95%;
  width: 90.1%;
  --p2-from-y: -20px;
  --p2-anim-delay: 0.24s;
}

.panel2-register-link {
  position: absolute;
  left: calc(50% - 250px);
  top: calc(50% - 210px);
  transform: translate(-50%, -50%);
  z-index: 10;
  cursor: pointer;
  opacity: 0;
  --p2-from-y: -24px;
  animation: panel2-slide-fade 0.82s cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p2-anim-delay-base) + 0.32s)
      forwards;
  animation-play-state: paused;
}

.panel2-register-btn {
  position: relative;
  width: clamp(220px, 48vw, 68%);
  height: auto;
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1), filter 180ms ease;
}

.panel2-register-link:hover .panel2-register-btn,
.panel2-register-link:focus-visible .panel2-register-btn {
  transform: scale(1.04);
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.28));
}

.panel2-register-link:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 6px;
}

.panel2.is-animating .panel2-rect,
.panel2.is-animating .panel2-text,
.panel2.is-animating .panel2-register-link {
  animation-play-state: running;
}

/* Panel 3 About layout */
.panel3 {
  position: relative;
  width: min(100vw, var(--p3-w));
  max-width: var(--p3-w);
  aspect-ratio: 1920 / 868;
  margin: -125px auto clamp(56px, 8vw, 140px);
  background-image: url("/panel3/panel3_background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 30;
}

.panel3-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel3-stage img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(var(--p3-from-x, 0), var(--p3-from-y, 0), 0)
    scale(var(--p3-from-scale, 0.99));
  animation: panel3-slide-fade var(--p3-anim-duration, 0.88s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p3-anim-delay-base, 0s) + var(--p3-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel3-about-text {
  left: calc(2.6% - 10px);
  top: calc(14% - 65px);
  width: 91.04592%; /* additional 2% shrink */
  z-index: 3;
  --p3-from-y: -30px;
  --p3-from-scale: 0.985;
  --p3-anim-delay: 0.02s;
}

.panel3-mel-logo {
  right: -1%;
  top: 10%;
  width: 54.375%; /* +25% scale */
  z-index: 1;
  --p3-from-x: 28px;
  --p3-from-scale: 0.985;
  --p3-anim-delay: 0.12s;
}

.panel3-character {
  left: -4%;
  bottom: calc(-10% + 20px);
  width: 63.8%;
  z-index: 2;
  --p3-from-x: -32px;
  --p3-from-y: 18px;
  --p3-from-scale: 0.985;
  --p3-anim-delay: 0.08s;
}

.panel3-about-link {
  position: absolute;
  left: calc(55.5% + 200px);
  top: calc(50% - 50px);
  width: 22.4%;
  transform: translate(-6%, -50%);
  z-index: 6;
  cursor: pointer;
  opacity: 0;
  --p3-from-y: 26px;
  animation: panel3-slide-fade 0.92s cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p3-anim-delay-base) + 0.2s)
      forwards;
  animation-play-state: paused;
}

.panel3-about-btn {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.32));
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms ease;
}

.panel3-about-link:hover .panel3-about-btn,
.panel3-about-link:focus-visible .panel3-about-btn {
  transform: scale(1.045);
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.4));
}

.panel3-about-link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 6px;
}

.panel3.is-animating .panel3-stage img,
.panel3.is-animating .panel3-about-link {
  animation-play-state: running;
}

/* Panel 4 FAQ layout */
.panel4 {
  position: relative;
  width: min(100vw, var(--p4-w));
  max-width: var(--p4-w);
  aspect-ratio: 1920 / 876;
  margin: -138px auto clamp(72px, 9vw, 170px);
  background-image: url("/panel4/panel4_background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 24;
}

.panel4-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel4-stage img {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(var(--p4-from-x, 0), var(--p4-from-y, 0), 0)
    scale(var(--p4-from-scale, 0.99));
  animation: panel4-slide-pop var(--p4-anim-duration, 0.9s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p4-anim-delay-base, 0s) + var(--p4-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel4-faq-text {
  left: calc(2.6% - 40px);
  top: calc(6.5% + 40px);
  width: 65.835795625%;
  z-index: 2;
  --p4-from-x: -8%;
  --p4-from-y: -32px;
  --p4-from-scale: 0.985;
  --p4-anim-delay: 0.02s;
}

.panel4-character {
  right: calc(-11% + 190px);
  bottom: calc(-16% + 12px);
  width: 47.6%;
  z-index: 5;
  --p4-from-x: 12%;
  --p4-from-y: 18px;
  --p4-from-scale: 0.982;
  --p4-anim-delay: 0.1s;
}

.panel4-faq-outline {
  left: calc(-1% + 260px);
  top: calc(6% + 20px);
  width: 82.8495%;
  z-index: 6;
  --p4-from-x: 12%;
  --p4-from-y: -12px;
  --p4-from-scale: 0.986;
  --p4-anim-delay: 0.16s;
}

.panel4-faq-link {
  position: absolute;
  left: calc(16% - 230px);
  top: calc(52% - 90px);
  width: 25.515%;
  transform: translate(-8%, -50%);
  z-index: 8;
  cursor: pointer;
  opacity: 0;
  --p4-from-y: 32px;
  --p4-from-scale: 0.97;
  animation: panel4-slide-pop 0.94s cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p4-anim-delay-base) + 0.22s)
      forwards;
  animation-play-state: paused;
}

.panel4-faq-btn {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.36));
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms ease;
}

.panel4-faq-link:hover .panel4-faq-btn,
.panel4-faq-link:focus-visible .panel4-faq-btn {
  transform: scale(1.045);
  filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.4));
}

.panel4-faq-link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 6px;
}

.panel4.is-animating .panel4-stage img,
.panel4.is-animating .panel4-faq-link {
  animation-play-state: running;
}

/* Panel 5 Upcoming Major layout */
.panel5 {
  position: relative;
  width: min(100vw, var(--p5-w));
  max-width: var(--p5-w);
  aspect-ratio: 1920 / 876;
  margin: -155px auto clamp(82px, 10vw, 200px);
  background-image: url("/panel5/panel5_background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 18;
}

.panel5-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel5-stage img,
.panel5-major-link {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(
      calc(var(--p5-base-x, 0) + var(--p5-from-x, 0)),
      calc(var(--p5-base-y, 0) + var(--p5-from-y, 0)),
      0
    )
    scale(var(--p5-from-scale, 0.99));
  animation: panel5-slide-pop var(--p5-anim-duration, 0.92s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p5-anim-delay-base, 0s) + var(--p5-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel5-upcoming-black {
  left: 28.65%;
  top: calc(4.2% - 26px);
  width: 42.708%;
  z-index: 3;
  --p5-from-y: -32px;
  --p5-from-scale: 0.985;
  --p5-anim-delay: 0.02s;
}

.panel5-character {
  left: calc(5.6% + 50px);
  top: calc(18.8% + 40px);
  width: 88.8%;
  z-index: 4;
  --p5-from-x: -7%;
  --p5-from-y: 18px;
  --p5-from-scale: 0.986;
  --p5-anim-delay: 0.1s;
}

.panel5-upcoming-outline {
  left: 3.6%;
  top: calc(3.5% + 40px);
  width: 92.76%;
  z-index: 6;
  --p5-from-x: 8%;
  --p5-from-y: -12px;
  --p5-from-scale: 0.986;
  --p5-anim-delay: 0.16s;
}

.panel5-major-link {
  left: calc(50% + 350px);
  top: 49%;
  width: 42%;
  max-width: 820px;
  min-width: 260px;
  --p5-base-x: -50%;
  --p5-base-y: -48%;
  z-index: 10;
  cursor: pointer;
  --p5-from-y: 28px;
  --p5-from-scale: 0.97;
  --p5-anim-duration: 0.96s;
  --p5-anim-delay: 0.24s;
}

.panel5-major-btn {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.38));
  transition: transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 180ms ease;
}

.panel5-major-link:hover .panel5-major-btn,
.panel5-major-link:focus-visible .panel5-major-btn {
  transform: scale(1.045);
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.44));
}

.panel5-major-link:focus-visible {
  outline: 2px solid #111;
  outline-offset: 6px;
}

.panel5.is-animating .panel5-stage img,
.panel5.is-animating .panel5-major-link {
  animation-play-state: running;
}

/* Panel 6 Partners & Campaigns layout */
.panel6 {
  position: relative;
  width: min(100vw, var(--p6-w));
  max-width: var(--p6-w);
  aspect-ratio: 1920 / 881;
  margin: -172px auto clamp(86px, 9vw, 188px);
  background-image: url("/panel6/panel6_background.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
  overflow: hidden;
  z-index: 12;
}

.panel6-stage {
  position: relative;
  width: 100%;
  height: 100%;
}

.panel6-stage > img,
.panel6-logos {
  position: absolute;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;
  transform: translate3d(
      calc(var(--p6-base-x, 0) + var(--p6-from-x, 0)),
      calc(var(--p6-base-y, 0) + var(--p6-from-y, 0)),
      0
    )
    scale(var(--p6-from-scale, 0.99));
  animation: panel6-slide-pop var(--p6-anim-duration, 0.94s)
      cubic-bezier(0.19, 1, 0.3, 1)
      calc(var(--p6-anim-delay-base, 0s) + var(--p6-anim-delay, 0s))
      forwards;
  animation-play-state: paused;
}

.panel6-collabs {
  left: calc(4% - 70px);
  top: calc(2% + 60px);
  width: 77.04%;
  z-index: 1;
  --p6-from-y: 32px;
  --p6-from-scale: 0.986;
  --p6-anim-delay: 0.02s;
}

.panel6-partners {
  left: calc(7% - 70px);
  top: calc(12% + 150px);
  width: 30.8%;
  z-index: 4;
  --p6-from-x: -7%;
  --p6-from-y: -28px;
  --p6-from-scale: 0.985;
  --p6-anim-delay: 0.08s;
}

.panel6-campaigns {
  left: calc(6.9% - 70px);
  top: calc(21.5% + 160px);
  width: 36%;
  z-index: 4;
  --p6-from-x: -7%;
  --p6-from-y: -16px;
  --p6-from-scale: 0.985;
  --p6-anim-delay: 0.14s;
}

.panel6-description {
  left: 56.5%;
  top: calc(33% + 40px);
  width: 36%;
  z-index: 5;
  --p6-from-x: 8%;
  --p6-from-y: 18px;
  --p6-from-scale: 0.986;
  --p6-anim-delay: 0.2s;
}

.panel6-logos {
  left: -6%;
  width: 112%;
  bottom: 4.8%;
  height: 20.6%;
  min-height: clamp(96px, 10vw, 164px);
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  --p6-logo-gap: 200px;
}

.panel6-logos-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: var(--p6-logo-gap, 32px);
  width: max-content;
  height: 100%;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.panel6-logo-set {
  position: relative;
  height: 100%;
  width: auto;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.2));
}

/* Ensure Panel 6 assets are visible */
.panel6-stage > img,
.panel6-logos {
  opacity: 1;
}

.panel6-logos-seq {
  display: contents;
}

.panel6-logo-set {
  position: relative;
  opacity: 1;
  transform: none;
  animation: none;
}

.panel6.is-animating .panel6-stage > img,
.panel6.is-animating .panel6-logos {
  animation-play-state: running;
}

/* Footer layout */
.footer {
  position: relative;
  width: min(100vw, 1920px);
  max-width: 1920px;
  margin: -148px auto 0;
  padding: clamp(36px, 4vw, 68px) clamp(28px, 6vw, 88px);
  min-height: clamp(540px, 46vw, 944px);
  background-image: url("/footer/footer_background_Orange.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 6;
  overflow: hidden;
}

.footer-inner {
  width: min(1120px, 88vw);
  display: flex;
  align-items: center;
  gap: clamp(28px, 5vw, 78px);
}

.footer-logo {
  width: clamp(200px, 24vw, 360px);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.38));
}

.footer-separator {
  height: clamp(280px, 38vw, 560px);
  width: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.26));
}

.footer-nav-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(16px, 2vw, 28px);
  flex: 1;
}

.footer-nav {
  width: 100%;
}

.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.4vw, 18px);
}

.footer-nav a {
  display: inline-block;
  font-family: "HomepageBaukasten Book", "HomepagebaukastenBook", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(18px, 2.1vw, 32px);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 9px 26px rgba(0, 0, 0, 0.4);
  transition: color 160ms ease, transform 160ms ease, text-shadow 160ms ease;
}

.footer-nav a:hover,
.footer-nav a:focus-visible {
  color: #ffe5c4;
  transform: translateX(5px);
  text-shadow: 0 12px 30px rgba(0, 0, 0, 0.52);
}

.footer-nav a:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 4px;
  border-radius: 6px;
}

.footer-contact {
  display: inline-block;
  line-height: 0;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.3));
  transition: transform 160ms cubic-bezier(0.16, 1, 0.3, 1), filter 160ms ease;
}

.footer-contact img {
  width: clamp(220px, 22vw, 360px);
  height: auto;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.footer-contact:hover,
.footer-contact:focus-visible {
  transform: translateY(-2px) scale(1.028);
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.36));
}

.footer-contact:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 6px;
  border-radius: 12px;
}

/* Desktop: stack panels flush without vertical gaps */
@media (min-width: 1087px) {
  .panel2,
  .panel3,
  .panel4,
  .panel5,
  .panel6,
  .footer {
    margin: 0 auto;
    width: 100vw;
    max-width: 100%;
    background-size: cover;
    background-position: center top;
  }
}
@keyframes panel1-slide-fade {
  0% {
    opacity: 0;
    transform: translate3d(var(--p1-from-x, 0), var(--p1-from-y, 0), 0)
      scale(var(--p1-from-scale, 0.98));
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.005);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes panel2-slide-fade {
  0% {
    opacity: 0;
    transform: translate3d(var(--p2-from-x, 0), var(--p2-from-y, 0), 0)
      scale(var(--p2-from-scale, 0.98));
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.006);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes p2-marquee-rtl {
  0% { background-position: 130% 0; }
  100% { background-position: -130% 0; }
}

@keyframes p2-marquee-ltr {
  0% { background-position: -130% 0; }
  100% { background-position: 130% 0; }
}

@keyframes p2-row-fade {
  from { opacity: 0; }
  to { opacity: 0.32; }
}

@keyframes panel3-slide-fade {
  0% {
    opacity: 0;
    transform: translate3d(var(--p3-from-x, 0), var(--p3-from-y, 0), 0)
      scale(var(--p3-from-scale, 0.98));
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.008);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@media (max-width: 1086px) {
  :root {
    --stage-w: var(--stage-w-mobile);
    --stage-h: var(--stage-h-mobile);

    --p1-esports-left: 8px;
    --p1-esports-top: 186px; /* align top edge with THE MEL */
    --p1-esports-width: 25.344px;

    --p1-military-left: 8px;
    --p1-military-top: 52px;
    --p1-military-width: 230px;

    --p1-themel-left: -2px;
    --p1-themel-top: 186px;
    --p1-themel-width: 259.16px;

    --p1-sirviendo-left: 18px;
    --p1-sirviendo-bottom: -16px;
    --p1-sirviendo-width: 290.7px;

    --p1-character-top: 32px;
    --p1-character-right: -108px;
    --p1-character-width: 620px;
  }

  .panel1-stack {
    padding-top: clamp(88px, 18vw, 136px);
    margin-bottom: clamp(28px, 9vw, 52px);
    min-height: calc(var(--stage-h-mobile) + var(--stage-offset-y));
  }

  .hero-interactive {
    display: none;
  }

  .hero-static {
    display: block;
  }

  .interactive-canvas-container {
    height: min(70vh, 560px);
    min-height: 360px;
    max-height: 640px;
  }

  #stage,
  #stage-bg {
    width: var(--stage-w-mobile);
    height: var(--stage-h-mobile);
  }

  /* Panel 2 responsive tweaks */
  .panel2 {
    margin-top: clamp(16px, 6vw, 36px);
  }

  :root {
    --p2-register-h: 315px;
    --p2-register-shift: -45px;
    --p2-register-size: 180px;
  }

  .panel2-register-row {
    animation-duration: 18s, 0.9s;
  }

  :root {
    --p3-w: 360px;
    --p3-h: 376px;
    --p3-anim-delay-base: 0.12s;
    --p4-w: 360px;
    --p4-h: 328px;
    --p4-anim-delay-base: 0.08s;
    --p5-w: 360px;
    --p5-h: 328px;
    --p5-anim-delay-base: 0.08s;
  }

  .panel3 {
    margin: clamp(28px, 10vw, 64px) auto clamp(36px, 12vw, 88px);
    aspect-ratio: 360 / 376;
    background-size: cover;
  }

  .panel3-about-text {
    top: calc(18% - 52px);
    left: 2%;
    width: 94%;
  }

  .panel3-mel-logo {
    top: 28%;
    right: -4%;
    width: 70%;
  }

  .panel3-character {
    left: -6%;
    bottom: calc(-6% + 18px);
    width: 78%;
  }

  .panel3-about-link {
    left: 50%;
    top: calc(72% - 36px);
    width: clamp(180px, 64vw, 280px);
    transform: translate(-50%, -50%);
  }

  .panel4 {
    margin: clamp(32px, 11vw, 72px) auto clamp(40px, 14vw, 96px);
    aspect-ratio: 360 / 328;
    background-size: cover;
  }

  .panel4-faq-text {
    left: 4%;
    top: calc(10% + 24px);
    width: 88%;
  }

  .panel4-character {
    right: -6%;
    bottom: -18%;
    width: 74%;
  }

  .panel4-faq-outline {
    left: 2%;
    top: calc(18% + 10px);
    width: 94%;
  }

  .panel4-faq-link {
    left: 50%;
    top: calc(70% - 56px);
    width: clamp(172px, 58vw, 252px);
    transform: translate(-50%, -50%);
  }

  .panel5 {
    margin: clamp(36px, 12vw, 88px) auto clamp(52px, 16vw, 124px);
    aspect-ratio: 360 / 328;
    background-size: cover;
  }

  .panel5-upcoming-black {
    left: 6%;
    top: 4%;
    width: 92%;
  }

  .panel5-character {
    left: -6%;
    top: calc(22% + 22px);
    width: 104%;
  }

  .panel5-upcoming-outline {
    left: -4%;
    top: 10%;
    width: 106%;
  }

  .panel5-major-link {
    left: 50%;
    top: 66%;
    width: clamp(200px, 74vw, 300px);
    min-width: unset;
    max-width: unset;
    --p5-base-x: -50%;
    --p5-base-y: -50%;
  }

  .panel6 {
    margin: clamp(40px, 14vw, 96px) auto clamp(44px, 14vw, 120px);
    aspect-ratio: 360 / 360;
    background-size: cover;
  }

  .panel6-collabs {
    left: 6%;
    top: 6%;
    width: 92%;
  }

  .panel6-partners {
    left: 10%;
    top: 26%;
    width: 76%;
  }

  .panel6-campaigns {
    left: 10%;
    top: 38%;
    width: 86%;
  }

  .panel6-description {
    left: 8%;
    top: 54%;
    width: 84%;
  }

  .panel6-logos {
    left: -6%;
    width: 118%;
    bottom: 8%;
    height: 26%;
    min-height: clamp(88px, 18vw, 164px);
  }

  .panel6-logos--mobile {
    position: absolute;
    left: -2%;
    top: calc(90% + 20px);
    width: 104%;
    height: 10%;
    min-height: 0;
    pointer-events: none;
    z-index: 4;
    --p6-logo-speed: 45;
    --p6-logo-scale: 0.5;
    --p6-logo-gap: 100px;
  }

  .panel6-logos--mobile .panel6-logos-track {
    gap: var(--p6-logo-gap, 100px);
  }

  .panel6-logos--mobile .panel6-logo-set {
    height: calc(100% * var(--p6-logo-scale, 1));
    max-height: 100%;
    width: auto;
    transform: none;
  }

  .footer {
    margin: 0 auto 0;
    padding: clamp(28px, 8vw, 52px) clamp(18px, 7vw, 42px);
    min-height: clamp(560px, 126vw, 840px);
  }

  .footer-inner {
    flex-direction: column;
    width: min(640px, 94vw);
    gap: clamp(18px, 6vw, 32px);
    text-align: center;
  }

  .footer-logo {
    width: clamp(180px, 62vw, 320px);
    margin: 0 auto;
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.34));
  }

  .footer-separator {
    display: none;
  }

  .footer-nav-block {
    align-items: center;
  }

  .footer-nav ul {
    align-items: center;
    gap: clamp(8px, 3vw, 16px);
  }

  .footer-nav a {
    transform: none;
  }

  .footer-contact img {
    width: clamp(220px, 72vw, 360px);
  }

}

@media (prefers-reduced-motion: reduce) {
  .panel1-board img {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .panel2-register-row {
    animation: none;
    opacity: 0.32;
  }

  .panel2-text,
  .panel2-register-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .panel3-stage img,
  .panel3-about-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .panel4-stage img,
  .panel4-faq-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .panel5-stage img,
  .panel5-major-link {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .panel6-stage img,
  .panel6-logos {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1086px) {
  .home-mobile-hero {
    position: relative;
    display: block;
    width: 100%;
    max-width: 100vw;
    aspect-ratio: 1920 / 6011;
    margin: clamp(80px, 12vw, 120px) auto 0;
    overflow: hidden;
    z-index: 1000;
  }

  .home-mobile-hero img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
  }

  .home-mobile-hero .hotspot {
    position: absolute;
    display: block;
    z-index: 2300;
    pointer-events: auto;
  }

  .home-mobile-hero .hotspot:focus-visible {
    outline: 2px solid rgba(255, 153, 0, 0.8);
    outline-offset: 2px;
  }

  /* Percentage hotspots derived from 1920x6011 art */
  .home-mobile-hero .register { top: calc(15% + 100px); left: 4.5%; width: 44.5%; height: 5.0%; }
  .home-mobile-hero .about    { top: 49.4%; left: 65.7%; width: 24.9%; height: 2.2%; }
  .home-mobile-hero .faq      { top: 64.8%; left: 4.5%; width: 34.5%; height: 4.8%; }
  .home-mobile-hero .upcoming { top: 77.6%; left: 33.5%; width: 33.0%; height: 3.0%; }
  .home-mobile-hero .partners { top: 82%;   left: 0;    width: 100%;  height: 18%; }

  /* Hide existing multi-panel stack on mobile in favor of single image */
  .panel1-stack,
  #panel2,
  #panel3,
  #panel4,
  #panel5,
  #panel6 {
    display: none;
  }
}

@keyframes panel6-slide-pop {
  0% {
    opacity: 0;
    transform: translate3d(
        calc(var(--p6-base-x, 0) + var(--p6-from-x, 0)),
        calc(var(--p6-base-y, 0) + var(--p6-from-y, 0)),
        0
      )
      scale(var(--p6-from-scale, 0.95));
  }
  68% {
    opacity: 1;
    transform: translate3d(var(--p6-base-x, 0), var(--p6-base-y, 0), 0)
      scale(1.012);
  }
  86% {
    transform: translate3d(var(--p6-base-x, 0), var(--p6-base-y, 0), 0)
      scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--p6-base-x, 0), var(--p6-base-y, 0), 0)
      scale(1);
  }
}

@keyframes panel5-slide-pop {
  0% {
    opacity: 0;
    transform: translate3d(
        calc(var(--p5-base-x, 0) + var(--p5-from-x, 0)),
        calc(var(--p5-base-y, 0) + var(--p5-from-y, 0)),
        0
      )
      scale(var(--p5-from-scale, 0.95));
  }
  68% {
    opacity: 1;
    transform: translate3d(var(--p5-base-x, 0), var(--p5-base-y, 0), 0)
      scale(1.014);
  }
  86% {
    transform: translate3d(var(--p5-base-x, 0), var(--p5-base-y, 0), 0)
      scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(var(--p5-base-x, 0), var(--p5-base-y, 0), 0)
      scale(1);
  }
}

@keyframes panel4-slide-pop {
  0% {
    opacity: 0;
    transform: translate3d(var(--p4-from-x, 0), var(--p4-from-y, 0), 0)
      scale(var(--p4-from-scale, 0.95));
  }
  68% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.015);
  }
  86% {
    transform: translate3d(0, 0, 0) scale(0.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Canvas loading spinner */
.interactive-canvas-container {
  position: relative;
  width: 100%;
  height: 100%;
  /* min-height: 960px; */
  /* height: clamp(420px, 120vw, 960px); */
  /* max-height: 960px; */
}

.canvas-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.canvas-loading-spinner .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid rgba(255, 165, 0, 0.2);
  border-top-color: #ff8500;
  border-radius: 50%;
  animation: canvas-spin 0.8s linear infinite;
}

@keyframes canvas-spin {
  to {
    transform: rotate(360deg);
  }
}

#mel-character-pixel-explorer {
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease-in;
}



@media (max-width: 1800px) {
  .panel1#stage{
    transform: scale(0.72);
  }

}



@media (max-width: 1200px) {
  .panel1#stage{
    transform: scale(0.6);
  }
}