/* ── Plaid Background ─────────────────────────────────── */

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  overflow-x: hidden;
  background-image:
    /* Vertical bands */
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent 60px,
      rgba(201, 169, 110, 0.03) 60px,
      rgba(201, 169, 110, 0.03) 62px,
      transparent 62px,
      transparent 120px,
      rgba(201, 169, 110, 0.05) 120px,
      rgba(201, 169, 110, 0.05) 124px,
      transparent 124px,
      transparent 200px
    ),
    /* Horizontal bands */
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 60px,
      rgba(201, 169, 110, 0.03) 60px,
      rgba(201, 169, 110, 0.03) 62px,
      transparent 62px,
      transparent 120px,
      rgba(201, 169, 110, 0.05) 120px,
      rgba(201, 169, 110, 0.05) 124px,
      transparent 124px,
      transparent 200px
    ),
    /* Diagonal accent */
    repeating-linear-gradient(
      135deg,
      transparent,
      transparent 140px,
      rgba(201, 169, 110, 0.02) 140px,
      rgba(201, 169, 110, 0.02) 142px,
      transparent 142px,
      transparent 280px
    );
}

/* ── Hero Section ────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: var(--page-padding);
  position: relative;
}

.hero__title {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(var(--text-3xl), 8vw, var(--text-5xl));
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.1;
}

/* ── Scroll Indicator ────────────────────────────────── */

.scroll-indicator {
  position: absolute;
  bottom: var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.scroll-indicator__arrow {
  width: 1px;
  height: 40px;
  background: var(--color-muted);
  position: relative;
  overflow: hidden;
}

.scroll-indicator__arrow::after {
  content: "";
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-accent);
  animation: scroll-line 2s var(--ease-out) infinite;
}

@keyframes scroll-line {
  0% { top: -100%; }
  50% { top: 0; }
  100% { top: 100%; }
}

/* ── Tagline Section ─────────────────────────────────── */

.tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 80vh;
  padding: var(--page-padding);
  text-align: center;
}

.tagline__text {
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  letter-spacing: 0.05em;
  color: var(--color-accent);
  line-height: 1.3;
}

/* ── Scroll Reveal Animations ────────────────────────── */

.tagline__word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--duration-slow) var(--ease-out),
              transform var(--duration-slow) var(--ease-out);
}

.tagline__text.revealed .tagline__word {
  opacity: 1;
  transform: translateY(0);
}

.tagline__word:nth-child(2) { transition-delay: 100ms; }
.tagline__word:nth-child(3) { transition-delay: 200ms; }
.tagline__word:nth-child(4) { transition-delay: 300ms; }
.tagline__word:nth-child(5) { transition-delay: 400ms; }

/* ── Footer ──────────────────────────────────────────── */

.footer {
  text-align: center;
  padding: var(--space-xl) var(--page-padding);
  color: var(--color-muted);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
}