/* Splurjj Shout — hero "wall of people" background (v3)
   v2 + new aspirational picture (images/shout-hero-bg.v2.png), tighter spacing so the
   example profile cards show higher up.
   Picture is AI-generated: generic fictional people, mixed photo + neon graphic tiles.
   Rename this file (v4) if you change it: /css/* is cached for a year. */

body{overflow-x:clip}

.nav{position:relative;z-index:3}

.hero{position:relative;isolation:isolate;padding-top:36px;padding-bottom:52px}
.hero>*{position:relative;z-index:2}
.hero h1{margin-bottom:14px}
.hero .sub{margin-bottom:24px}

/* the picture, full width of the screen, reaching up behind the nav */
.hero::before{
  content:"";position:absolute;z-index:0;
  top:-76px;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:#07070c url("../images/shout-hero-bg.v2.png") center 40% / cover no-repeat;
  filter:saturate(1.08) contrast(1.03);
  animation:heroDrift 38s ease-in-out infinite alternate;
}
@keyframes heroDrift{
  from{background-position:42% 40%}
  to{background-position:58% 40%}
}

/* the darkening: calm centre for text, fade into the page colour top and bottom */
.hero::after{
  content:"";position:absolute;z-index:1;pointer-events:none;
  top:-76px;bottom:0;left:50%;width:100vw;margin-left:-50vw;
  background:
    radial-gradient(ellipse 60% 52% at 50% 40%, rgba(7,7,12,.9) 0%, rgba(7,7,12,.76) 48%, rgba(7,7,12,.3) 100%),
    linear-gradient(180deg, rgba(7,7,12,.78) 0%, rgba(7,7,12,0) 20%, rgba(7,7,12,0) 66%, #07070c 100%);
}

/* text keeps its punch over the picture */
.hero h1{text-shadow:0 2px 28px rgba(0,0,0,.65)}
.hero .sub{color:#d6d6e4;text-shadow:0 1px 14px rgba(0,0,0,.8)}
.hero .eyebrow{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero .alt{text-shadow:0 1px 10px rgba(0,0,0,.8)}
.hero .claimbox{box-shadow:0 18px 60px rgba(0,0,0,.55)}

/* ── example profile cards ── */
.hero-cards{list-style:none;margin:26px auto 0;padding:0;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.pcard{
  display:flex;align-items:center;gap:12px;text-align:left;
  min-width:230px;padding:12px 18px 12px 12px;border-radius:16px;
  background:rgba(18,18,28,.84);border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  animation:cardFloat 6s ease-in-out infinite alternate;
}
.pcard.pc-2{animation-delay:-2s;animation-duration:7s}
.pcard.pc-3{animation-delay:-4s;animation-duration:6.5s}
@keyframes cardFloat{from{transform:translateY(0)}to{transform:translateY(-7px)}}
.pc-av{
  flex:none;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:1.1rem;color:#fff;
  background:linear-gradient(135deg,#ff3d8f,#7c4dff);
}
.pc-2 .pc-av{background:linear-gradient(135deg,#7c4dff,#19c6b7)}
.pc-3 .pc-av{background:linear-gradient(135deg,#19c6b7,#ff3d8f)}
.pc-body{display:flex;flex-direction:column;line-height:1.25}
.pc-h{font-weight:800;color:#fff;font-size:.98rem}
.pc-role{color:#b4b4c6;font-size:.8rem;font-weight:600}
.pc-goal{color:#e9e9f4;font-size:.84rem;margin-top:3px}
.pc-goal i{color:#ff3d8f;margin-right:4px;font-size:.78rem}

@media (max-width:640px){
  .hero{padding-top:26px;padding-bottom:40px}
  .hero::before,.hero::after{top:-64px}
  .hero::before{background-position:center 30%;animation:none}
  /* narrow screens crop the picture, so darken a bit more evenly */
  .hero::after{
    background:
      linear-gradient(180deg, rgba(7,7,12,.7) 0%, rgba(7,7,12,.5) 30%, rgba(7,7,12,.62) 62%, rgba(7,7,12,.8) 88%, #07070c 100%);
  }
  .hero-cards{flex-direction:column;align-items:center;gap:10px;margin-top:24px}
  .pcard{width:100%;max-width:320px}
}

@media (prefers-reduced-motion:reduce){
  .hero::before,.pcard{animation:none}
}
@media (prefers-reduced-data:reduce){
  .hero::before{background-image:none}
}