/* =====================================================
   THE SAVAGE SAINTS
   HALLOWEEN + HARVEST HOMEPAGE HERO
===================================================== */


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

.hero{

  --hero-black:#090607;
  --hero-brown-deep:#120807;
  --hero-brown:#241008;
  --hero-brown-soft:#3a190b;

  --hero-orange:#f07812;
  --hero-orange-light:#ffad42;

  --hero-harvest:#d5a438;
  --hero-harvest-light:#f0c861;

  --hero-green:#9aae49;
  --hero-green-light:#c3ca63;

  --hero-purple:#714979;
  --hero-purple-light:#a276a7;

  --hero-gold:#d6a840;
  --hero-gold-soft:#f1d98a;

  --hero-white:#fffaf1;

  --hero-muted:
    rgba(255,243,225,.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(9,6,7,.99) 0%,
      rgba(18,8,7,.96) 25%,
      rgba(33,13,8,.87) 48%,
      rgba(55,23,10,.61) 69%,
      rgba(48,15,21,.40) 100%
    ),

    linear-gradient(
      180deg,
      rgba(15,7,5,.12),
      rgba(10,5,5,.46)
    ),

    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(240,120,18,.14),
      transparent 30%
    ),

    radial-gradient(
      circle at 76% 56%,
      rgba(113,73,121,.12),
      transparent 34%
    ),

    radial-gradient(
      circle at 56% 84%,
      rgba(154,174,73,.07),
      transparent 28%
    ),

    linear-gradient(
      180deg,
      transparent 65%,
      rgba(9,6,7,.30) 100%
    );

}


.hero::after{

  content:"";


  position:absolute;

  left:0;
  right:0;
  bottom:0;


  z-index:3;


  height:2px;


  background:

    linear-gradient(
      90deg,
      transparent,
      var(--hero-green),
      var(--hero-orange),
      var(--hero-harvest),
      var(--hero-purple),
      transparent
    );


  opacity:.78;


  box-shadow:
    0 0 20px rgba(240,120,18,.30);

}



/* =====================================================
   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-green-light);


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


  font-size:.69rem;

  font-weight:900;


  letter-spacing:.25em;

  text-transform:uppercase;


  text-shadow:
    0 0 16px rgba(154,174,73,.22);

}



/* =====================================================
   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(234,190,102,.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(36,12,5,.62),
    0 16px 34px rgba(0,0,0,.42);

}


.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(214,168,64,.18),
    0 10px 28px rgba(0,0,0,.38);

}



/* =====================================================
   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,.40);

}



/* =====================================================
   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:#241006;


  border:
    1px solid rgba(255,184,79,.86);


  background:

    linear-gradient(
      135deg,
      #ef7b16,
      #d59a31
    );


  box-shadow:
    0 12px 28px rgba(124,52,4,.24),
    0 0 16px rgba(240,120,18,.12),
    inset 0 1px rgba(255,255,255,.32);

}



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

.actions .btn.secondary{

  color:#ffffff;


  border:
    1px solid rgba(162,118,167,.64);


  background:
    rgba(88,47,94,.58);


  backdrop-filter:
    blur(8px);


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


  box-shadow:
    inset 0 1px rgba(255,255,255,.055),
    0 10px 26px rgba(28,8,31,.16);

}



/* =====================================================
   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(241,217,138,.88);


  box-shadow:
    0 16px 30px rgba(0,0,0,.30),
    0 0 20px rgba(240,120,18,.15);

}


.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(244,225,198,.58);


  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(214,168,64,.70);

}



/* =====================================================
   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(240,200,97,.11) 0%,
      rgba(240,120,18,.060) 34%,
      rgba(113,73,121,.048) 54%,
      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(214,168,64,.17);


  box-shadow:
    0 0 52px rgba(240,120,18,.10),
    inset 0 0 50px rgba(214,168,64,.035);


  pointer-events:none;

}


.heart-stage::after{

  content:"";


  position:absolute;


  inset:20%;


  border-radius:50%;


  background:

    radial-gradient(
      circle,
      rgba(240,200,97,.13),
      rgba(240,120,18,.04) 45%,
      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(214,168,64,.19);


  border-radius:50%;


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


  box-shadow:
    0 0 34px rgba(240,120,18,.07);


  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(11,6,6,.94) 0%,
        rgba(24,10,7,.84) 48%,
        rgba(36,13,12,.68) 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;

  }

}