/* ================= COLORS ================= */
:root {
  --color-pale: #fcfade;
  --color-blue: #58c4b1;
  --color-yellow: #fcd658;
  --color-dark: #61555a;
}

/* ================= BODY ================= */
html, body {
  height: 100%;
  background-color: var(--color-pale);
  font-family: 'Montserrat', sans-serif;
  font-size: 62.5%;
  line-height: 3rem;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* ================= VERTICAL CENTERING ================= */
.v-t { display: table; width: 100%; height: 100%; }
.v-tc { display: table-cell; vertical-align: middle; text-align: center; position: relative; }

/* ================= BACKGROUND GRADIENT ================= */
.background-gradient {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(rgba(255,250,222,0.8) 20%, rgba(245,240,230,0.1) 100%);
}

/* ================= BIG TEXT ================= */
h1 {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  position: absolute;
  width: 100%;
  z-index: 10;
  top: 16%;
  color: rgba(0, 0, 0, 0.5);
  font-size: 1.8rem;
}
h1 span {
  display: block;
  font-size: 9.2rem;
  line-height: 98px;
  z-index: 100;
  text-shadow: .04em .04em 0 var(--color-pale);
  color: var(--color-blue);
  white-space: nowrap;
  letter-spacing: 0.16em;
  position: relative;
}

/* ================= BEE FLOAT ================= */
@keyframes float {
  0% { transform: rotate(2deg) translateY(0); }
  50% { transform: rotate(2deg) translateY(-6px); }
  100% { transform: rotate(2deg) translateY(0); }
}

.bee {
  display: inline-block;
  position: relative;
  width: 130px;
  height: 90px;
  margin: -2rem auto;
  z-index: 20;
  background-color: var(--color-dark);
  border-radius: 100% 98% 98% 100%;
  box-shadow:
    inset 0px -10px 0px -2px rgba(0,0,0,0.15),
    inset 32px 0px 0px -20px var(--color-dark),
    inset 48px 0px 0px -20px var(--color-yellow),
    inset 58px 0px 0px -20px var(--color-dark),
    inset 88px 0px 0px -28px var(--color-yellow);
  transform: rotate(2deg);
  animation: float 3s infinite;
}

/* ================= BLINKING EYES ================= */
.bee::before {
  content: "";
  position: absolute;
  right: 24px;
  bottom: 57%;
  width: 8px;
  height: 15px;
  border-radius: 100% 100% 88% 88%;
  background-color: #fff;
  box-shadow: 10px 0px 0 -2px #fff;
  animation: blink 7s infinite;
}
@keyframes blink {
  0%,30%,32%,88%,90%,100% { height: 14px; }
  31%,89% { height: 1px; }
}

/* ================= WINGS ================= */
.wing {
  position: absolute;
  background-color: rgba(255,255,255,0.7);
  border-radius: 50%;
  transform-origin: 50% 100%;
  z-index: 18;
}
.wing.one {
  width:34px; height:52px;
  top:-38px; left:15px;
  transform: rotate(-30deg);
  animation: wings 0.3s infinite alternate;
}
.wing.two {
  width:32px; height:44px;
  top:-44px; left:65px;
  transform: rotate(40deg);
  animation: wingsTwo 0.3s infinite alternate;
}

@keyframes wings {
  0% { transform: rotate(-30deg); }
  50% { transform: rotate(-40deg); }
  100% { transform: rotate(-30deg); }
}
@keyframes wingsTwo {
  0% { transform: rotate(40deg); }
  50% { transform: rotate(30deg); }
  100% { transform: rotate(40deg); }
}

/* ================= ANTENNAE ================= */
.antennae {
  position: relative;
}
.antennae::before,
.antennae::after {
  content:"";
  display:block;
  position:absolute;
  border-left: 4px solid var(--color-dark);
  border-radius: 100% 0 0 100%;
}
.antennae::before {
  top: 4px; right: 2px;
  width: 18px; height: 32px;
  transform: rotate(30deg);
  animation: antenna 5s infinite;
  z-index:-1;
}
.antennae::after {
  top: -4px; right: 20px;
  width: 6px; height: 32px;
  transform: rotate(14deg);
  animation: antenna 10s infinite;
  z-index:-1;
}
@keyframes antenna {
  0% { transform: rotate(0deg);}
  30% { transform: rotate(-8deg);}
  79% { transform: rotate(0deg);}
  80% { transform: rotate(10deg);}
  81% { transform: rotate(0deg);}
  100% { transform: rotate(0deg);}
}

/* ================= STINGER ================= */

.stinger {
  position: relative;
}
.stinger::before,
.stinger::after {
  content:"";
  display:block;
  position:absolute;
  border-left: 4px solid var(--color-dark);
  border-radius: 100% 0 0 100%;
}
.stinger::before {
  top: 32px; left: -3px;
  width: 5px; height: 23px;
  transform: rotate(43deg);
  animation: stinger 5s infinite;
  z-index: -1;
}

@keyframes stinger {
  0% { transform: rotate(80deg);}
  30% { transform: rotate(90deg);}
  79% { transform: rotate(75deg);}
  80% { transform: rotate(70deg);}
  81% { transform: rotate(80deg);}
  100% { transform: rotate(80deg);}
}
/* ================= SHADOW ================= */

.shadow {
  position: absolute;
  width: 90px;
  height: 30px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.2);
  z-index: 15;

  /* Position under the bee */
  top: calc(50% + 50px); /* 50% of v-tc + half the bee's height */
  left: 50%;
  transform: translateX(-50%);
  
  animation: shadowAnim 3s infinite;
}

@keyframes shadowAnim {
  0%, 100% { width: 98px; }
  50% { width: 90px; }
}

/* ================= RESPONSIVE ================= */
@media (max-width:768px){
  h1 span { font-size:8rem; }
  h1 { font-size:1.6rem; }
  .bee { width:100px; height:70px; margin:-1rem auto; }
  .wing.one { top:-35px; }
  .wing.two { top:-35px; }
  .shadow { width:70px; height:20px; }
}

/* ================= QUOTE BOX ================= */
.quote-box {
  position: absolute;
  bottom: 5%; /* roughly half an inch from bottom */
  left: 50%;
  transform: translateX(-50%);
  z-index: 10; /* below bee & shadow */
  padding: 1rem 2rem;
  width: fit-content;
  max-width: 600px; /* match title width */
  background-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  border-radius: 6px;
  font-size: 1.6rem;
  color: var(--color-dark);
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.03em;
}



/* Align quote box width to match title width on larger screens */
@media (min-width: 769px) {
  .quote-box {
    max-width: 600px; /* roughly matches The Beehive title width */
  }
}

/* Responsive tweaks for smaller screens */
@media (max-width: 768px) {
  .quote-box {
    font-size: 1.4rem;
    padding: 0.8rem 1.5rem;
  }
}