:root {
  --ivory: #fffaf0;
}

@font-face {
  font-family: "Wedding Script";
  src: url("assets/wedding-script.otf") format("opentype");
  font-display: swap;
  font-style: italic;
  font-weight: 400;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  background: #172117;
}

.welcome-hero {
  position: relative;
  display: grid;
  min-height: 100svh;
  place-items: center;
  overflow: hidden;
  background: url("assets/forest-avenue.jpg") center center / cover no-repeat;
  isolation: isolate;
}

.welcome-shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at center, transparent 0 18%, rgba(8, 15, 10, 0.1) 52%, rgba(3, 8, 5, 0.5) 100%),
    linear-gradient(180deg, rgba(5, 12, 7, 0.1), rgba(5, 10, 7, 0.28));
}

.welcome-content {
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 3rem 1.5rem;
  color: var(--ivory);
  text-align: center;
  transform: translateY(-2vh);
}

h1 {
  margin: 0;
  font-family: "Wedding Script", "Snell Roundhand", "Segoe Script", cursive;
  font-size: clamp(5rem, 14vw, 12rem);
  font-weight: 400;
  font-style: italic;
  line-height: 0.95;
  letter-spacing: -0.035em;
  text-shadow:
    0 2px 3px rgba(0, 0, 0, 0.42),
    0 8px 28px rgba(0, 0, 0, 0.34);
}

.flourish {
  display: flex;
  align-items: center;
  width: min(17rem, 52vw);
  gap: 0.8rem;
  color: rgba(255, 250, 240, 0.9);
  font-size: 0.55rem;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.flourish::before,
.flourish::after {
  height: 1px;
  flex: 1;
  content: "";
  background: linear-gradient(90deg, transparent, currentColor);
}

.flourish::after {
  background: linear-gradient(90deg, currentColor, transparent);
}

.flourish-top {
  margin-bottom: clamp(1rem, 2vw, 1.5rem);
}

.flourish-bottom {
  margin-top: clamp(1.1rem, 2.5vw, 1.8rem);
}

@media (max-width: 640px) {
  .welcome-hero {
    background-position: 53% center;
  }

  h1 {
    font-size: clamp(4.7rem, 25vw, 7.5rem);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .welcome-content {
    animation: reveal 1.2s ease-out both;
  }

  @keyframes reveal {
    from {
      opacity: 0;
      transform: translateY(calc(-2vh + 1rem));
    }
    to {
      opacity: 1;
      transform: translateY(-2vh);
    }
  }
}