/* =====================================================
   THE SAVAGE SAINTS
   SEPTEMBER HOMEPAGE HERO
===================================================== */


/* =====================================================
   1. HERO SHELL
===================================================== */

.hero{
  --hero-navy:#04172b;
  --hero-navy-deep:#02101f;

  --hero-blue:#69c7ff;
  --hero-teal:#70e1df;

  --hero-purple:#9f86e8;

  --hero-gold:#e2c778;
  --hero-gold-soft:#f3e4ae;

  --hero-white:#f9fcff;
  --hero-muted:rgba(240,248,255,.78);

  position:relative;
  isolation:isolate;

  width:100%;
  min-height:560px;

  display:grid;

  grid-template-columns:
    minmax(0,610px)
    minmax(300px,390px);

  align-items:center;
  justify-content:center;

  gap:clamp(52px,7vw,100px);

  padding:
    58px
    max(32px,calc((100vw - 1180px) / 2))
    64px;

  overflow:hidden;

  background:
    linear-gradient(
      90deg,
      rgba(2,16,31,.98) 0%,
      rgba(2,16,31,.94) 26%,
      rgba(3,22,42,.82) 49%,
      rgba(5,27,51,.54) 68%,
      rgba(5,27,51,.34) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,16,31,.10),
      rgba(2,16,31,.40)
    ),
    url("/media/SuicideHero.png");

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;
}


/* =====================================================
   2. BACKGROUND POLISH
===================================================== */

.hero::before{
  content:"";

  position:absolute;
  inset:0;

  z-index:0;

  pointer-events:none;

  background:
    radial-gradient(
      circle at 72% 42%,
      rgba(105,199,255,.12),
      transparent 30%
    ),
    radial-gradient(
      circle at 76% 56%,
      rgba(159,134,232,.10),
      transparent 34%
    ),
    linear-gradient(
      180deg,
      transparent 65%,
      rgba(2,16,31,.24) 100%
    );
}


.hero::after{
  content:"";

  position:absolute;
  left:0;
  right:0;
  bottom:0;

  z-index:3;

  height:2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--hero-teal),
      var(--hero-blue),
      var(--hero-purple),
      transparent
    );

  opacity:.75;

  box-shadow:
    0 0 20px rgba(105,199,255,.28);
}


/* =====================================================
   3. HERO CONTENT
===================================================== */

.hero-copy,
.hero-mark-wrap{
  position:relative;
  z-index:2;
}


.hero-copy{
  width:100%;
  max-width:610px;

  animation:
    heroCopyReveal
    .75s
    ease
    both;
}


/* =====================================================
   4. EYEBROW
===================================================== */

.hero-eyebrow{
  margin:0 0 12px;

  color:var(--hero-teal);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size:.69rem;
  font-weight:900;

  letter-spacing:.25em;
  text-transform:uppercase;

  text-shadow:
    0 0 16px rgba(112,225,223,.20);
}


/* =====================================================
   5. TITLE
===================================================== */

.hero h1{
  margin:0;

  max-width:610px;

  font-family:
    "Cinzel",
    Georgia,
    serif;

  text-transform:uppercase;
}


.title-small{
  display:block;

  margin-bottom:10px;

  color:rgba(180,230,255,.92);

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size:.68rem;
  font-weight:900;

  letter-spacing:.25em;
  line-height:1.3;

  text-transform:uppercase;
}


.title-main{
  display:block;

  color:var(--hero-white);

  font-size:
    clamp(
      3.8rem,
      5.4vw,
      6rem
    );

  font-weight:800;

  line-height:.88;

  letter-spacing:-.025em;

  text-shadow:
    0 5px 0 rgba(3,26,48,.60),
    0 16px 34px rgba(0,0,0,.32);
}


.title-main span{
  display:block;

  margin-top:8px;

  color:var(--hero-gold-soft);

  font-size:.64em;

  letter-spacing:.015em;

  text-shadow:
    0 0 28px rgba(226,199,120,.13),
    0 10px 28px rgba(0,0,0,.32);
}


/* =====================================================
   6. HERO MESSAGE
===================================================== */

.hero-message{
  max-width:570px;

  margin-top:25px;
}


.hero-message .lead{
  margin:0;

  color:var(--hero-muted);

  font-family:
    "Cormorant Garamond",
    Georgia,
    serif;

  font-size:
    clamp(
      1.15rem,
      1.55vw,
      1.38rem
    );

  font-weight:600;

  line-height:1.52;

  letter-spacing:.005em;

  text-shadow:
    0 4px 18px rgba(0,0,0,.34);
}


/* =====================================================
   7. ACTIONS
===================================================== */

.actions{
  width:100%;
  max-width:590px;

  margin-top:28px;

  display:flex;
  align-items:center;

  gap:10px;
}


.actions .btn{
  position:relative;

  min-height:48px;

  padding:
    0
    22px;

  display:inline-flex;
  align-items:center;
  justify-content:center;

  flex:1;

  border-radius:6px;

  font-family:
    "Inter",
    Arial,
    sans-serif;

  font-size:.63rem;
  font-weight:900;

  letter-spacing:.10em;

  text-align:center;
  text-decoration:none;
  text-transform:uppercase;

  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


/* =====================================================
   PRIMARY BUTTON
===================================================== */

.actions .btn.primary{
  color:#03151f;

  border:
    1px solid rgba(147,240,241,.82);

  background:
    linear-gradient(
      135deg,
      #62dbd9,
      #5bb7ef
    );

  box-shadow:
    0 12px 28px rgba(12,101,148,.20),
    inset 0 1px rgba(255,255,255,.34);
}


/* =====================================================
   SECONDARY BUTTON
===================================================== */

.actions .btn.secondary{
  color:#ffffff;

  border:
    1px solid rgba(159,134,232,.58);

  background:
    rgba(86,76,165,.50);

  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}


/* =====================================================
   STORE BUTTON
===================================================== */

.actions .btn.store{
  position:relative;

  overflow:hidden;

  color:#fff9e9;

  border:
    1px solid rgba(255,225,132,.82);

  background:
    linear-gradient(
      135deg,
      #7d500d 0%,
      #c8942e 50%,
      #7d500d 100%
    );

  text-shadow:
    0 1px 2px rgba(46,26,0,.82);

  box-shadow:
    0 12px 28px rgba(70,40,0,.24),
    0 0 18px rgba(226,180,65,.18),
    inset 0 1px rgba(255,255,255,.28);
}


.actions .btn.store::before{
  content:"";

  position:absolute;
  top:0;
  left:-75%;

  width:48%;
  height:100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,249,218,.34),
      transparent
    );

  transform:skewX(-18deg);

  transition:
    left .45s ease;

  pointer-events:none;
}


.actions .btn.store:hover,
.actions .btn.store:focus-visible{
  border-color:
    rgba(255,239,178,.98);

  background:
    linear-gradient(
      135deg,
      #946215,
      #ddb044 50%,
      #946215
    );

  box-shadow:
    0 16px 32px rgba(70,40,0,.30),
    0 0 24px rgba(226,180,65,.28);
}


.actions .btn.store:hover::before,
.actions .btn.store:focus-visible::before{
  left:130%;
}


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

.actions .btn:hover,
.actions .btn:focus-visible{
  transform:translateY(-2px);

  border-color:
    rgba(243,228,174,.85);

  box-shadow:
    0 16px 30px rgba(0,0,0,.24),
    0 0 20px rgba(105,199,255,.12);
}


.actions .btn:focus-visible{
  outline:
    2px
    solid
    var(--hero-gold-soft);

  outline-offset:4px;
}


/* =====================================================
   8. IDENTITY LINE
===================================================== */

.hero-identity{
  margin-top:20px;

  display:flex;
  align-items:center;

  gap:0;

  color:rgba(218,239,249,.54);

  font-size:.59rem;
  font-weight:800;

  letter-spacing:.10em;

  text-transform:uppercase;
}


.hero-identity span{
  display:inline-flex;
  align-items:center;
}


.hero-identity span + span::before{
  content:"•";

  margin:
    0
    10px;

  color:rgba(226,199,120,.62);
}


/* =====================================================
   9. HEART AREA
===================================================== */

.hero-mark-wrap{
  width:100%;

  display:grid;
  place-items:center;
}


/* =====================================================
   HEART STAGE
===================================================== */

.heart-stage{
  position:relative;

  width:min(350px,29vw);

  aspect-ratio:1 / 1;

  display:grid;
  place-items:center;

  border:0;

  background:
    radial-gradient(
      circle at center,
      rgba(242,219,144,.09) 0%,
      rgba(105,199,255,.045) 35%,
      rgba(159,134,232,.035) 53%,
      transparent 72%
    );

  box-shadow:none;

  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}


/* =====================================================
   SOFT HALO
===================================================== */

.heart-stage::before{
  content:"";

  position:absolute;

  inset:7%;

  border-radius:50%;

  border:
    1px
    solid
    rgba(226,199,120,.13);

  box-shadow:
    0 0 52px rgba(105,199,255,.08),
    inset 0 0 50px rgba(226,199,120,.025);

  pointer-events:none;
}


.heart-stage::after{
  content:"";

  position:absolute;

  inset:20%;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(238,214,140,.10),
      transparent 70%
    );

  filter:blur(12px);

  pointer-events:none;
}


/* =====================================================
   OUTER RING
===================================================== */

.heart-stage .outer-ring{
  position:absolute;

  top:50%;
  left:50%;

  width:85%;
  height:85%;

  border:
    1px
    solid
    rgba(226,199,120,.16);

  border-radius:50%;

  transform:
    translate(-50%,-50%);

  box-shadow:
    0 0 34px rgba(226,199,120,.05);

  pointer-events:none;
}


/* =====================================================
   HEART MARK
===================================================== */

.heart-mark{
  position:relative;

  z-index:2;

  width:100%;
  height:100%;

  display:grid;
  place-items:center;
}


#heartMatrix{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;
}


.symbol-svg{
  position:absolute;

  inset:0;

  width:100%;
  height:100%;

  overflow:visible;

  pointer-events:none;
}


/* =====================================================
   10. DESKTOP LARGE
===================================================== */

@media(min-width:1400px){

  .hero{
    min-height:575px;
  }

}


/* =====================================================
   11. TABLET
===================================================== */

@media(max-width:960px){

  .hero{
    min-height:auto;

    grid-template-columns:1fr;

    gap:36px;

    padding:
      64px
      28px
      70px;

    text-align:center;

    background:
      linear-gradient(
        180deg,
        rgba(2,16,31,.91) 0%,
        rgba(2,16,31,.78) 48%,
        rgba(2,16,31,.64) 100%
      ),
      url("/media/SuicideHero.png");

    background-size:cover;
    background-position:70% center;
  }


  .hero-copy{
    max-width:680px;

    margin:0 auto;
  }


  .hero-message,
  .actions{
    margin-left:auto;
    margin-right:auto;
  }


  .hero-identity{
    justify-content:center;
  }


  .hero-mark-wrap{
    order:-1;
  }


  .heart-stage{
    width:min(310px,72vw);
  }

}


/* =====================================================
   12. MOBILE
===================================================== */

@media(max-width:620px){

  .hero{
    padding:
      48px
      18px
      56px;

    gap:26px;
  }


  .heart-stage{
    width:min(250px,72vw);
  }


  .hero-eyebrow{
    font-size:.61rem;

    letter-spacing:.18em;
  }


  .title-small{
    font-size:.60rem;

    letter-spacing:.17em;
  }


  .title-main{
    font-size:
      clamp(
        2.8rem,
        15vw,
        4rem
      );

    line-height:.91;
  }


  .title-main span{
    margin-top:7px;

    font-size:.65em;
  }


  .hero-message{
    margin-top:21px;
  }


  .hero-message .lead{
    font-size:1.06rem;

    line-height:1.48;
  }


  .actions{
    margin-top:24px;

    flex-direction:column;
  }


  .actions .btn{
    width:100%;

    flex:none;
  }


  .hero-identity{
    margin-top:18px;

    flex-wrap:wrap;
    justify-content:center;

    row-gap:8px;

    font-size:.54rem;
  }

}


/* =====================================================
   13. VERY SMALL MOBILE
===================================================== */

@media(max-width:390px){

  .hero{
    padding-left:15px;
    padding-right:15px;
  }


  .heart-stage{
    width:220px;
  }


  .hero-identity span + span::before{
    margin:
      0
      7px;
  }

}


/* =====================================================
   14. ANIMATION
===================================================== */

@keyframes heroCopyReveal{

  from{
    opacity:0;

    transform:
      translateY(10px);
  }

  to{
    opacity:1;

    transform:
      translateY(0);
  }

}


/* =====================================================
   15. REDUCED MOTION
===================================================== */

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

  .hero-copy{
    animation:none;
  }

}