/* Ver.12 — one coherent photographic hero. No cutout silhouettes and no member-name overlays. */
.hero {
  background: radial-gradient(ellipse at 50% 26%,#a63ba9 0%,#4a186c 48%,#200d48 77%,#3c0f58 100%);
}
.hero-illustration {
  inset:0;
  z-index:3;
  background-image:url('./assets/hero-photo-seamless-desktop.webp');
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;
  filter:none;
  opacity:1;
  transform:none;
  animation:hero-photo-reveal 1.25s cubic-bezier(.22,.61,.36,1) both;
}
.hero::before {
  z-index:4;
  background:
    linear-gradient(180deg,rgba(20,5,41,.20) 0%,transparent 16%,transparent 39%,rgba(37,9,71,.08) 53%,rgba(26,8,58,.30) 71%,rgba(24,8,50,.46) 88%,#3c0f58 100%),
    linear-gradient(90deg,rgba(31,10,69,.13),transparent 13%,transparent 86%,rgba(31,10,69,.14));
}
.hero .rays {z-index:4;opacity:.18;mix-blend-mode:screen}
.hero-stars {z-index:5;opacity:.56}
.hero-sidecopy {z-index:6;right:1.5%;top:136px;font-size:clamp(11px,1vw,17px);text-shadow:0 2px 10px #3e105e,0 0 12px #ec62d2}
.hero-title-wrap {z-index:10;top:42%}
.hero-title-wrap .hero-overline {letter-spacing:.18em;text-shadow:0 2px 13px #51034a,0 0 18px #ef5b9e}
.flyer-wordmark {filter:none;transform:rotate(-2deg)}
.flyer-wordmark img {filter:drop-shadow(0 8px 10px #2e0b52a8) drop-shadow(0 0 12px #4ab3ff7c)}
.hero-live-data {bottom:42px;z-index:11;background:linear-gradient(90deg,transparent,rgba(60,12,80,.50) 12%,rgba(79,17,92,.45) 88%,transparent)}
.hero .bottom-crowd {z-index:5;opacity:.24;filter:blur(1px);height:148px;mix-blend-mode:screen}
@keyframes hero-photo-reveal {from{opacity:0;scale:1.025}to{opacity:1;scale:1}}
@media (min-width: 1101px) {
  .hero-title-wrap{top:43%}
  .flyer-wordmark{width:min(680px,72vw)}
}
@media (min-width: 581px) and (max-width:1100px) {
  .hero-illustration{background-position:center top}
  .hero-title-wrap{top:43%}
}
@media(max-width:580px) {
  .hero {height:795px;min-height:795px;}
  .hero-illustration {
    background-image:url('./assets/hero-photo-seamless-mobile.webp');
    background-size:118% auto;
    background-position:center 54px;
  }
  .hero::before {
    background:linear-gradient(180deg,rgba(24,8,50,.18) 0%,transparent 22%,transparent 40%,rgba(35,8,67,.30) 51%,rgba(32,9,64,.42) 67%,#291052 96%,#3c0f58 100%);
  }
  .hero .rays{opacity:.12}
  .hero-sidecopy {display:none}
  .hero-title-wrap {top:40.5%}
  .hero-overline{font-size:10px;letter-spacing:.12em}
  .flyer-wordmark {width:min(94vw,440px);margin:8px auto 0}
  .hero-title-wrap .hero-copy{margin-top:4px;font-size:clamp(13px,3.5vw,17px)}
  .hero-live-data {bottom:65px;background:linear-gradient(90deg,transparent,#4e16676b 8%,#63176e68 90%,transparent)}
  .hero .bottom-crowd {height:110px;opacity:.26}
}
@media(max-width:365px){.hero-title-wrap{top:39.5%}.hero-illustration{background-size:123% auto}}
@media(prefers-reduced-motion:reduce){.hero-illustration{animation:none}}



/* v49: seamless three-member hero, made slightly larger on mobile. */
.hero .hero-illustration {
 background-image:url('./assets/hero-v49-desktop.webp');
 background-size:cover;
 background-position:center top;
}
@media(max-width:580px) {
  .hero {height:760px;min-height:760px;}
  .hero .hero-illustration {
    background-image:url('./assets/hero-v49-mobile.webp');
    background-size:97% auto;
    background-position:center 56px;
  }
  .hero-title-wrap {top:42.1%;}
  .hero-live-data {bottom:58px;}
}
@media(max-width:365px) {
  .hero .hero-illustration {background-size:98% auto;}
  .hero-title-wrap {top:41.6%;}
}

/* Ver.51 — mobile hero composition tuned to the supplied right-hand reference.
   Original hero photo files are retained byte-for-byte. Only CSS placement changes.
   The photo moves down; the wordmark stays at the previous on-screen position. */
@media (max-width:580px) {
  .hero { height:792px; min-height:792px; }
  .hero .hero-illustration {
    background-size:97% auto;
    background-position:center 96px;
  }
  .hero-title-wrap { top:40.4%; }
  .hero-live-data { bottom:58px; }
}
@media (max-width:365px) {
  .hero .hero-illustration {
    background-size:98% auto;
    background-position:center 96px;
  }
  .hero-title-wrap { top:39.9%; }
}