/*==========================================================
 NEXIA UI FRAMEWORK
 COMPONENT : MANIFESTO
 PURPOSE   : Homepage manifesto section
==========================================================*/


/*==========================================================
 MANIFESTO BAND
==========================================================*/

.nx-manifesto-band{
  position:relative;
  isolation:isolate;

  width:min(1200px,92%);
  margin-inline:auto;

  padding:
    var(--nx-space-xxl)
    var(--nx-space-lg);

  text-align:center;
  overflow:hidden;

  box-shadow:
    0 10px 40px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.10);

  transition:
    box-shadow .35s ease;
}


/*==========================================================
 EYEBROW
==========================================================*/

.nx-manifesto-eyebrow{
  margin-bottom:var(--nx-space-sm);

  font-family:var(--nx-font);
  font-size:var(--nx-font-size-sm);
  font-weight:var(--nx-weight-semibold);

  line-height:1.2;
  letter-spacing:.14em;
  text-transform:uppercase;

  color:var(--nx-text);
  opacity:.72;
}


/*==========================================================
 HEADLINE
==========================================================*/

.nx-manifesto-headline{
  margin-bottom:var(--nx-space-md);

  font-family:var(--nx-font);

  font-size:clamp(
    var(--nx-font-size-xl),
    4vw,
    var(--nx-font-size-xxl)
  );

  font-weight:var(--nx-weight-bold);
  line-height:1.15;

  color:var(--nx-heading);

  text-wrap:balance;
}


/*==========================================================
 HEADLINE HIGHLIGHT
==========================================================*/

.nx-manifesto-highlight{
  display:inline;

  color:var(--nx-primary);

  text-shadow:
    0 0 24px var(--nx-primary-glow);
}


/*==========================================================
 BODY
==========================================================*/

.nx-manifesto-text{
  position:relative;
  z-index:1;

  max-width:70ch;

  margin-inline:auto;
  margin-bottom:var(--nx-space-xl);

  font-family:var(--nx-font);
  font-size:var(--nx-font-size-lg);
  font-weight:var(--nx-weight-normal);
  line-height:1.75;

  color:var(--nx-text);
}


/*==========================================================
 ACCENT
==========================================================*/

.nx-manifesto-accent{
  width:72px;
  height:2px;

  margin:
    var(--nx-space-lg)
    auto 0;

  background:var(--nx-primary);

  box-shadow:
    0 0 10px var(--nx-primary-glow);

  transition:
    width .4s ease,
    box-shadow .4s ease;
}


/*==========================================================
 HOVER
==========================================================*/

@media (hover:hover){

  .nx-manifesto-band:hover{
    box-shadow:
      0 12px 45px rgba(0,0,0,.08),
      inset 0 1px 0 rgba(255,255,255,.14);
  }

  .nx-manifesto-band:hover .nx-manifesto-accent{
    width:110px;

    box-shadow:
      0 0 14px var(--nx-primary-glow-strong);
  }

}


/*==========================================================
 TABLET / MOBILE
==========================================================*/

@media (max-width:768px){

  .nx-manifesto-band{
    width:min(94%,1200px);

    padding:
      var(--nx-space-xl)
      var(--nx-space-md);
  }

  .nx-manifesto-headline{
    font-size:clamp(
      1.35rem,
      6vw,
      var(--nx-font-size-xl)
    );
  }

  .nx-manifesto-text{
    font-size:var(--nx-font-size-md);
    line-height:1.7;
  }

  .nx-manifesto-eyebrow{
    font-size:var(--nx-font-size-xs);
    letter-spacing:.11em;
  }

}


/*==========================================================
 REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion:reduce){

  .nx-manifesto-band,
  .nx-manifesto-accent{
    transition:none;
  }

}

/*==========================================================
 DARK MODE HIGHLIGHT GLOW
==========================================================*/

html.nx-dark-mode .nx-manifesto-highlight{
  text-shadow:
    0 0 8px var(--nx-primary-glow),
    0 0 20px var(--nx-primary-glow);
}