/* =========================================================
   CENTRAL COFFEE ROASTERS
   OFFERINGS HERO
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;

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

  background: #f7f4ee;
}

main.hero {
  position: relative;
  z-index: 50;

  width: min(1400px, calc(100vw - 40px));

  min-height: 55vh;

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

  margin: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(250, 247, 242, 0.3),
      rgba(250, 247, 242, 0.9)
    ),
    url("https://centralcoffeeroasters.com/newsite/img/IMG_5668Large.jpg")
    no-repeat center;

  background-size: cover;

  padding: 4rem 1.25rem;

  text-align: center;

  border: 5px solid #d8d0c4;
}

/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hero {
  position: relative;
  z-index: 50;

  min-height: 55vh;

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

  background:
    linear-gradient(
      to bottom,
      rgba(250, 247, 242, 0.3),
      rgba(250, 247, 242, 0.9)
    ),
    url("https://centralcoffeeroasters.com/newsite/img/IMG_5668Large.jpg")
    no-repeat center;

  background-size: cover;

  padding: 4rem 1.25rem;

  text-align: center;

  border: 5px solid #d8d0c4;
}


/* ---------------------------------------------------------
   HERO CONTENT
   --------------------------------------------------------- */

.hero-content {
  max-width: 750px;

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

  padding: 3rem 2rem;

  border-radius: 160px;

  border: 1px solid #d8d0c4;

  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}


/* ---------------------------------------------------------
   ROASTING SINCE 1999
   --------------------------------------------------------- */

.hero .tagline {
  display: inline-block;

  font-family: Impact, "Arial Black", sans-serif;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.12em;

  color: #ffffff;

  background-color: #ff0033;

  padding: 0.6rem 2.2rem;

  margin: 0.5rem 0 1rem;

  clip-path: polygon(
    0% 0%,
    95% 0%,
    100% 50%,
    95% 100%,
    0% 100%,
    5% 50%
  );

  border: 2px solid #ffff00;

  box-shadow:
    0 0 15px #ff0033,
    0 0 30px #ff0000;

  text-shadow:
    2px 2px 0 #000000,
    0 0 8px #ffff00;

  transform: rotate(-3deg);

  animation:
    saleFlash 1.2s infinite alternate
    cubic-bezier(0.6, 0, 0.4, 1);
}


/* ---------------------------------------------------------
   CENTRAL COFFEE ROASTERS
   GOLD ANIMATED HEADING
   --------------------------------------------------------- */

.hero h1 {
  font-family: Cinzel, Georgia, serif;

  font-size: clamp(3rem, 5vw, 4rem);

  margin: 0;

  line-height: 1.15;

  display: inline-block;

  background: linear-gradient(
    110deg,
    #bf953f 0%,
    #fcf6ba 20%,
    #b38728 40%,
    #ffffff 50%,
    #fbf5b7 60%,
    #aa771c 80%,
    #bf953f 100%
  );

  background-size: 200% auto;

  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  -webkit-text-stroke: 1.5px #1a0f00;

  filter:
    drop-shadow(2px 3px 0 #000000)
    drop-shadow(0 0 12px rgba(255, 215, 0, 0.85))
    drop-shadow(0 0 25px rgba(255, 140, 0, 0.6));

  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;

  will-change: transform, background-position;

  opacity: 0;

  animation:
    trumpEntrance 1.2s
    cubic-bezier(0.175, 0.885, 0.32, 1.275)
    forwards,

    blingShimmer 2.5s linear infinite;
}


/* ---------------------------------------------------------
   GOLD HEADING HOVER
   --------------------------------------------------------- */

.hero h1:hover,
.hero:hover h1 {
  filter:
    drop-shadow(4px 5px 0 #000000)
    drop-shadow(0 0 20px #ffd700)
    drop-shadow(0 0 40px #ff8c00);

  transform: scale(1.05);

  transition:
    filter 0.3s ease,
    transform 0.3s ease;
}


/* ---------------------------------------------------------
   RED BANNER ANIMATION
   --------------------------------------------------------- */

@keyframes saleFlash {

  0% {
    background-color: #d60029;

    box-shadow:
      0 0 10px #ff0033,
      0 0 20px #ff0000;

    transform:
      rotate(-3deg)
      scale(1);
  }

  100% {
    background-color: #ff0000;

    box-shadow:
      0 0 25px #ff0000,
      0 0 50px #ff0055,
      0 0 10px #ffff00;

    transform:
      rotate(-3deg)
      scale(1.08);
  }
}


/* ---------------------------------------------------------
   GOLD HEADING ENTRANCE
   --------------------------------------------------------- */

@keyframes trumpEntrance {

  0% {
    opacity: 0;

    transform:
      translateY(60px)
      scale(0.6)
      rotate(-4deg);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1)
      rotate(0deg);
  }
}


/* ---------------------------------------------------------
   GOLD SHIMMER
   --------------------------------------------------------- */

@keyframes blingShimmer {

  0% {
    background-position: 200% center;
  }

  100% {
    background-position: -200% center;
  }
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 600px) {

.hero {
  position: relative;
  z-index: 50;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

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

  margin: 0;

  background:
    linear-gradient(
      to bottom,
      rgba(250, 247, 242, 0.3),
      rgba(250, 247, 242, 0.9)
    ),
    url("https://centralcoffeeroasters.com/newsite/img/IMG_5668Large.jpg")
    no-repeat center;

  background-size: cover;

  padding: 4rem 1.25rem;

  text-align: center;

  border: 5px solid #d8d0c4;
}
  .hero h1 {
    font-size: clamp(2.5rem, 11vw, 4rem);
  }

  .hero .tagline {
    font-size: 0.75rem;

    padding:
      0.55rem
      1.5rem;
  }
}