/* Corsan Estates — self-hosted Montserrat (SIL Open Font License 1.1) */
@font-face {
  font-family: "Montserrat";
  src: url("/assets/fonts/montserrat-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #1c1b19;
  --ink: #f5f3ee;
  --muted: #b9b2a3;
  --gold: #c9a86a;
  --gold-light: #ecd9a4;
  --gold-dark: #8c7a56;
}

*, *::before, *::after { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  color: var(--ink);
  background-color: var(--bg);
  /* Smoky charcoal with a warm gold haze, echoing the logo artwork */
  background-image:
    radial-gradient(ellipse 55% 45% at 82% 18%, rgba(120, 100, 62, 0.55), transparent 70%),
    radial-gradient(ellipse 45% 35% at 58% 32%, rgba(95, 88, 76, 0.35), transparent 70%),
    radial-gradient(ellipse 60% 50% at 18% 30%, rgba(62, 60, 56, 0.45), transparent 75%),
    linear-gradient(180deg, #252421 0%, #1e1d1b 55%, #1a1917 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 12vh 1.5rem 4rem;
}

/* ---- Logo (live text recreation of the original artwork) ---- */
.logo {
  margin: 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  font-weight: 400;
  line-height: 1;
  font-size: clamp(2.75rem, 14vw, 5.5rem); /* size of "CORSAN" */
}

.logo__name {
  display: block;
  font-weight: 400;
  letter-spacing: 0.045em;
  margin-right: -0.045em; /* optically re-centre tracked text */
  color: #ffffff;
}

.logo__rule {
  display: block;
  width: 104%;
  height: max(2px, 0.04em);
  margin: 0 0 0.08em;
  border-radius: 1px;
  background: linear-gradient(90deg,
    rgba(150, 128, 84, 0) 0%,
    rgba(150, 128, 84, 0.85) 6%,
    #d9bf86 30%,
    #f4e2a8 50%,
    #d9bf86 70%,
    rgba(150, 128, 84, 0.85) 94%,
    rgba(150, 128, 84, 0) 100%);
}

.logo__sub {
  display: block;
  font-size: 0.49em;
  font-weight: 400;
  letter-spacing: 0.14em;
  margin-right: -0.14em;
  color: #f7f5f0;
}

/* ---- Copy ---- */
.tagline {
  margin: clamp(2.5rem, 7vh, 4rem) 0 0;
  max-width: 34rem;
  font-size: clamp(0.95rem, 2.4vw, 1.125rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6;
  text-wrap: balance;
  color: var(--ink);
}

.soon {
  margin: 1.1rem 0 0;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---- Footer ---- */
.footer {
  padding: 0 1.5rem 2.25rem;
  text-align: center;
}

.est {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: #e9e6df;
}

.copy {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: var(--muted);
}

@media (prefers-reduced-motion: no-preference) {
  /* Sequence (~5s): CORSAN + gold line, Estates, EST/footer, tagline, pause, "Website coming soon" */
  .logo__name, .logo__sub, .tagline, .est, .copy, .soon {
    animation: fade-up .8s cubic-bezier(.25,.6,.2,1) both;
  }
  .logo__name { animation-name: name-in; animation-duration: 2.6s; }
  .logo__rule { animation: rule-in 2s cubic-bezier(.45,0,.2,1) .5s both; }
  .logo__sub  { animation-delay: 1s; animation-duration: 1.5s; }
  .est, .copy { animation-delay: 2.5s; }
  .tagline    { animation-delay: 3s; }
  .soon       { animation-delay: 4.05s; }
  @keyframes name-in {
    from { opacity: 0; letter-spacing: 0.32em; filter: blur(4px); }
    to   { opacity: 1; filter: blur(0); }
  }
  @keyframes rule-in {
    from { opacity: 0; transform: scaleX(0); }
    to   { opacity: 1; transform: scaleX(1); }
  }
  @keyframes fade-up {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
}

/* Reduce Motion on: keep a gentle opacity-only fade in the same order */
@media (prefers-reduced-motion: reduce) {
  .logo__name, .logo__rule, .logo__sub, .tagline, .est, .copy, .soon {
    animation: fade-only .8s ease-out both;
  }
  .logo__name { animation-duration: 2.6s; }
  .logo__rule { animation-duration: 2s; animation-delay: .5s; }
  .logo__sub  { animation-delay: 1s; animation-duration: 1.5s; }
  .est, .copy { animation-delay: 2.5s; }
  .tagline    { animation-delay: 3s; }
  .soon       { animation-delay: 4.05s; }
  @keyframes fade-only { from { opacity: 0; } to { opacity: 1; } }
}

/* Portrait phones: rounder glows so the haze doesn't stretch into a streak */
@media (max-aspect-ratio: 3/4) {
  body {
    background-image:
      radial-gradient(circle at 85% 16%, rgba(120, 100, 62, 0.5), transparent 55vw),
      radial-gradient(circle at 60% 30%, rgba(95, 88, 76, 0.3), transparent 50vw),
      radial-gradient(circle at 10% 26%, rgba(62, 60, 56, 0.45), transparent 60vw),
      linear-gradient(180deg, #252421 0%, #1e1d1b 55%, #1a1917 100%);
  }
}