/* Minimal, slightly artistic landing */

:root {
  --bg: #0e0f12;
  --fg: #e6e6e6;
  --muted: #a4a6ac;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: radial-gradient(1200px 800px at 20% 10%, #1a1d23 0%, transparent 60%),
              radial-gradient(900px 600px at 80% 80%, #121316 0%, transparent 60%),
              var(--bg);
  color: var(--fg);
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  line-height: 1.4;
  overflow-x: hidden;
}

.wrap {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 6rem 2rem 5rem;
}

.poem {
  max-width: 38rem;
  width: 100%;
  mix-blend-mode: normal;
  text-align: center;
  position: relative;
  margin: 0 auto;
  padding-bottom: 2.1rem; /* space for author tag at bottom-right */
}

.line {
  margin: 0 0 0.6rem 0;
  font-family: 'Source Serif 4', ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif;
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw + 0.8rem, 2rem);
  letter-spacing: 0.01em;
  opacity: 0.92;
  transform: translateY(8px);
  animation: float-in 900ms ease-out forwards;
  text-wrap: balance;
}

.line:nth-child(2) { animation-delay: 90ms; }
.line:nth-child(3) { animation-delay: 180ms; }
.line:nth-child(4) { animation-delay: 270ms; }

.indent-1 { text-indent: 0; }
.indent-2 { text-indent: 0; }

.punch {
  margin-top: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg);
  text-shadow: 0 0 18px color-mix(in oklab, var(--fg), transparent 75%);
}

/* Author credit anchored bottom-right of the quote */
.author {
  position: absolute;
  right: 0;
  bottom: 0.2rem;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  font-size: 0.8rem;
  color: var(--muted);
  letter-spacing: 0.02em;
  opacity: 0.8;
}

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

/* decorative loop removed */

/* Subtle animated grain overlay (local GIF as background) */
.grain {
  position: fixed;
  inset: 0;
  background-image: url('assets/grain.gif');
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.12;
  pointer-events: none;
}

.foot {
  position: fixed;
  bottom: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Respect reduced motion: hide the grain and drop animations */
@media (prefers-reduced-motion: reduce) {
  .grain { display: none; }
  .line { animation: none; transform: none; }
}