:root {
  --navy: #13294b;
  --navy-deep: #0a1320;
  --gold: #c9a24b;
  --gold-light: #e7cd8a;
  --ivory: #f4efe4;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  background: var(--navy-deep);
  overflow-x: hidden;
}

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

.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("assets/bg.png");
  background-size: cover;
  background-position: center 30%;
  background-repeat: no-repeat;
  animation: driftZoom 26s ease-in-out infinite alternate;
  filter: saturate(0.92) contrast(1.03);
}

@keyframes driftZoom {
  0% {
    transform: scale(1.04) translate(0, 0);
  }

  100% {
    transform: scale(1.12) translate(-1%, -1.5%);
  }
}

.hero__veil {
  position: absolute;
  inset: 0;
  background-image: url("bg.png");
  background-color: #cccccc;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: brightness(50%);
}

@media (max-width: 700px) {
  .hero__veil {
    position: absolute;
    inset: 0;
    background-image: url("mobile-bg.PNG");
    background-color: #cccccc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    filter: brightness(50%);
  }
}


/* corner frame, echoes the building's formal symmetry */
.hero__corner {
  position: absolute;
  width: 64px;
  height: 64px;
  border: 1px solid rgba(201, 162, 75, 0.55);
  opacity: 0;
  animation: cornerIn 1.2s ease-out 0.4s forwards;
  z-index: 3;
}

.hero__corner--tl {
  top: 28px;
  left: 28px;
  border-right: none;
  border-bottom: none;
}

.hero__corner--tr {
  top: 28px;
  right: 28px;
  border-left: none;
  border-bottom: none;
}

.hero__corner--bl {
  bottom: 28px;
  left: 28px;
  border-right: none;
  border-top: none;
}

.hero__corner--br {
  bottom: 28px;
  right: 28px;
  border-left: none;
  border-top: none;
}

@keyframes cornerIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

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

.hero__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 24px 9vh;
  width: 100%;
  max-width: 900px;
}

.crest {
  opacity: 0;
  transform: translateY(10px);
  animation: fadeUp 0.9s ease-out 0.3s forwards;
  margin-bottom: 14px;
}

.eyebrow {
  overflow: hidden;
  margin-bottom: 22px;
}

.eyebrow span {
  display: inline-block;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(0.78rem, 1.4vw, 1.05rem);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--ivory);
  opacity: 0;
  transform: translateY(100%);
  animation: revealUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

.rule {
  width: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-light), transparent);
  margin-bottom: 22px;
  animation: drawRule 1.3s cubic-bezier(0.65, 0, 0.35, 1) 0.85s forwards;
}

@keyframes drawRule {
  from {
    width: 0;
    opacity: 0.2;
  }

  to {
    width: min(280px, 60vw);
    opacity: 1;
  }
}

.headline {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-style: italic;
  color: var(--ivory);
  font-size: clamp(2.8rem, 9vw, 7rem);
  letter-spacing: 0.01em;
  text-shadow: 0 2px 28px rgba(0, 0, 0, 0.55), 0 0 80px rgba(201, 162, 75, 0.12);
  opacity: 0;
  transform: translateY(28px) scale(0.98);
  filter: blur(6px);
  animation: headlineIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards;
}

@keyframes headlineIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.headline::after {
  content: "";
}

.tagline {
  margin-top: 24px;
  font-family: "Cormorant Garamond", serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 1.6vw, 1.15rem);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold-light);
  opacity: 0;
  animation: fadeUp 1s ease-out 1.9s forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* subtle gold shimmer sweep across the headline, very slow, ambient */
.headline {
  background: linear-gradient(100deg,
      var(--ivory) 40%,
      var(--gold-light) 50%,
      var(--ivory) 60%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation:
    headlineIn 1.3s cubic-bezier(0.16, 1, 0.3, 1) 1.05s forwards,
    shimmer 7s linear 2.4s infinite;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }

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

/* ---------- RESPONSIVE ---------- */

@media (max-width: 600px) {
  .hero__corner {
    width: 40px;
    height: 40px;
  }

  .hero__corner--tl, .hero__corner--tr {
    top: 18px;
  }

  .hero__corner--bl, .hero__corner--br {
    bottom: 18px;
  }

  .hero__corner--tl, .hero__corner--bl {
    left: 18px;
  }

  .hero__corner--tr, .hero__corner--br {
    right: 18px;
  }

  .hero__content {
    padding-bottom: 11vh;
  }
}

/*  accessibilities  */

@media (prefers-reduced-motion: reduce) {

  .hero__bg,
  .crest,
  .eyebrow span,
  .rule,
  .headline,
  .tagline {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    width: auto !important;
  }

  .rule {
    width: min(280px, 60vw) !important;
  }

  .headline {
    -webkit-text-fill-color: var(--ivory);
    background: none;
  }
}