/* Set height to 100% for body and html to enable the background image to cover the whole page: */
body, html {
  height: 100%;
  font-family: "Futura PT Demi";
}

.bgimg {
  /* Background image */
  background-image: url('./images/BlackSmith.jpg');
  /* Full-screen */
  height: 100%;
  /* Center the background image */
  background-position: center;
  /* Scale and zoom in the image */
  background-size: cover;
  /* Add position: relative to enable absolutely positioned elements inside the image (place text) */
  position: relative;
  /* Add a white text color to all elements inside the .bgimg container */
  color: white;
  /* Set the font-size to 25 pixels */
  font-size: 25px;
}

/* Dark overlay for better text contrast */
.bgimg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 0;
}

/* Fireplace fire effect overlay (right side) */
.fireplace-effect {
  position: absolute;
  right: 0;
  top: 40%;
  bottom: 20%;
  width: 20%;
  z-index: 0.5;
  pointer-events: none;
  overflow: hidden;
}

.fireplace-effect .fire-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 80% at 70% 60%,
    rgba(255, 180, 50, 0.5) 0%,
    rgba(255, 120, 30, 0.35) 30%,
    rgba(200, 60, 20, 0.2) 60%,
    transparent 85%
  );
  animation: fireFlicker 1.8s ease-in-out infinite;
  filter: blur(2px);
}

.fireplace-effect .fire-flicker {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 90% at 75% 55%,
    rgba(255, 220, 100, 0.4) 0%,
    rgba(255, 150, 50, 0.25) 40%,
    transparent 75%
  );
  animation: fireFlicker 1.2s ease-in-out infinite reverse;
}

@keyframes fireFlicker {
  0%, 100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}

/* Position text in the top-left corner */
.topleft {
  position: absolute;
  top: 0;
  left: 16px;
  z-index: 1;
}

/* Position text in the bottom-left corner */
.bottomleft {
  position: absolute;
  bottom: 0;
  left: 16px;
  z-index: 1;
}

/* Position text in the middle */
.middle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 1;
  opacity: 0;
  animation: fadeIn 0.8s ease-out forwards;
  padding: 1.5em 2em;
}

.middle h1 {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  animation: softPulse 3s ease-in-out infinite;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

@keyframes softPulse {
  0%, 100% {
    opacity: 0.95;
  }
  50% {
    opacity: 1;
  }
}

.middle .tagline,
.middle .expected {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.middle .tagline {
  margin: 0.5em 0;
  font-size: 1em;
  opacity: 0.95;
  animation: taglineBreath 4s ease-in-out infinite;
}

@keyframes taglineBreath {
  0%, 100% {
    opacity: 0.9;
    transform: translateY(0);
  }
  50% {
    opacity: 1;
    transform: translateY(-2px);
  }
}

.middle .cta {
  display: inline-block;
  margin: 1em 0;
  padding: 0.5em 1.25em;
  color: white;
  text-decoration: none;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 4px;
  font-family: inherit;
  font-size: 0.9em;
  transition: background 0.2s, border-color 0.2s;
}

.middle .cta:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: white;
}

.middle .expected {
  margin-top: 0.5em;
  font-size: 0.75em;
  opacity: 0.85;
}

/* Style the <hr> element */
hr {
  margin: auto;
  width: 40%;
}

@font-face {
    font-family: 'Futura PT Demi';
    src: url('./fonts/Futura/FuturaPT-Demi.eot');
    src: local('Futura PT Demi'), local('FuturaPT-Demi'),
        url('./fonts/Futura/FuturaPT-Demi.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Futura/FuturaPT-Demi.woff2') format('woff2'),
        url('./fonts/Futura/FuturaPT-Demi.woff') format('woff'),
        url('./fonts/Futura/FuturaPT-Demi.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}