:root {
  --ink: #1a1a1a;
  --muted: #555;
  --bg: #fbfaf7;
  --accent: #6b5b4a;

  /* --- Animation timing (tweak here) --- */
  /* This keeps the ORIGINAL draw look. --ink-length is intentionally larger
     than the real outline, so the letters finish drawing partway through the
     timeline and the easing's slow tail is never seen (that's the look we
     want). To avoid the long dead pause that used to follow, the fill no
     longer waits for the full --draw-duration -- it starts at --draw-visible,
     the moment the letters actually finish drawing. */
  --ink-length: 1000; /* draw LOOK/speed (bigger = faster, crisper finish) */
  --draw-duration: 1s; /* full sweep timeline */
  --draw-visible: 0.55s; /* when the letters visually finish drawing.
                            = --draw-duration x (realOutline / --ink-length).
                            Nudge this until the fill starts right as the
                            letters complete (no gap, no early fill). */

  --fill-duration: 0.2s; /* how long the black fill fades in   */
  --fill-gap: 0.1s; /* PAUSE 1: wait after the draw before filling */
  --tagline-gap: 0.05s; /* PAUSE 2: wait after fill before tagline */
}

* {
  box-sizing: border-box;
}

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

body {
  background: var(--bg);
  color: var(--ink);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.stage {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: center;
}

/* ---- Title (handwriting draw) ---- */
.title {
  width: min(680px, 90vw);
  height: auto;
  overflow: visible;
}

.title-text {
  font-family: "Great Vibes", cursive;
  font-size: 132px;
  fill: var(--ink);
  stroke: var(--ink);
  stroke-width: 1;

  /* One dash as long as the outline hides it entirely; the sweep
     (--ink-length over --draw-duration) then draws it into view. */
  stroke-dasharray: var(--ink-length);
  stroke-dashoffset: var(--ink-length);

  /* Start invisible: fill fades in only after the stroke is drawn. */
  fill-opacity: 0;

  animation:
    draw var(--draw-duration) ease forwards,
    fill var(--fill-duration) ease forwards;
  /* Fill starts when the letters VISUALLY finish (--draw-visible), not when
     the full sweep timeline ends -- this removes the old dead pause while
     leaving the draw itself untouched. */
  animation-delay: 0s, calc(var(--draw-visible) + var(--fill-gap));
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  to {
    fill-opacity: 1;
  }
}

/* ---- Tagline (fades in after the title is written) ---- */
.tagline {
  opacity: 0;
  max-width: 42rem;
}

.tagline.show {
  animation: fadeUp 1s ease forwards;
}

.tagline p {
  margin: 0.35rem 0;
  font-size: clamp(1.1rem, 1rem + 0.8vw, 1.5rem);
  color: var(--muted);
  letter-spacing: 0.01em;
}

.tagline a {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(107, 91, 74, 0.4);
  transition: border-color 0.2s ease;
}

.tagline a:hover {
  border-color: var(--accent);
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Respect users who prefer reduced motion: show everything instantly. */
@media (prefers-reduced-motion: reduce) {
  .title-text {
    animation: none;
    stroke-dashoffset: 0;
    fill-opacity: 1;
  }
  .tagline {
    opacity: 1;
    animation: none;
  }
}