/* r15h type — Syne ExtraBold wordmark, Space Grotesk chill + body
   Chill: noticeable crimson dynamic gradient wash + readable center; no plate */

.wordmark {
  position: relative;
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(60px, 8.5vw, 112px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  text-transform: lowercase;
  color: var(--text);
  text-shadow: none;
}

.wordmark .dot {
  color: var(--crimson);
  display: inline-block;
}

.chill {
  position: relative;
  display: inline-block;
  margin-top: var(--air-wm-chill);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.2;
  letter-spacing: -0.015em;
}

/* Crimson / blood-red soft wash on glyphs; center stays readable light */
.chill.chill--wash {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-color: transparent;
  background-image: linear-gradient(
    100deg,
    rgba(120, 16, 26, 0) 0%,
    rgba(180, 28, 40, 0.55) 8%,
    rgba(224, 62, 62, 0.95) 18%,
    rgba(255, 140, 150, 0.98) 30%,
    rgba(255, 228, 232, 1) 42%,
    rgba(255, 242, 244, 1) 50%,
    rgba(255, 228, 232, 1) 58%,
    rgba(255, 140, 150, 0.98) 70%,
    rgba(224, 62, 62, 0.95) 82%,
    rgba(180, 28, 40, 0.55) 92%,
    rgba(120, 16, 26, 0) 100%
  );
  background-size: 220% 100%;
  background-position: 30% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  filter:
    drop-shadow(0 0 14px rgba(224, 62, 62, 0.45))
    drop-shadow(0 0 36px rgba(224, 62, 62, 0.32))
    drop-shadow(0 0 70px rgba(160, 30, 45, 0.22));
}

.chill.chill--wash::before,
.chill.chill--wash::after {
  content: none;
}

@keyframes chill-shift {
  0%, 100% { background-position: 22% 50%; }
  50% { background-position: 78% 50%; }
}

.chill.chill--wash.chill--breathe.is-in,
.chill.chill--wash.chill--breathe {
  animation:
    chill-breathe 5.5s ease-in-out infinite,
    chill-shift 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .chill.chill--wash.chill--breathe,
  .chill.chill--wash.chill--breathe.is-in {
    animation: none !important;
    background-position: 50% 50%;
  }
}