/* fcrav.com — tinta sobre papel, un solo trazo.
   Sin JavaScript, sin recursos externos, sin fuentes remotas. */

:root {
  --papel: #eef1ea;  /* verde tan pálido que casi es papel */
  --tinta: #2f3b2b;  /* verde profundo, casi negro */
  --musgo: #7d9471;  /* el trazo del enso */
  --trazo: 0.14;     /* su opacidad */
}

@media (prefers-color-scheme: dark) {
  :root {
    --papel: #161b15;
    --tinta: #c5d2bd;
    --musgo: #6f8664;
    --trazo: 0.20;
  }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  background: var(--papel);
}

main {
  height: 100%;
  display: grid;
  place-items: center;
  position: relative;
  overflow: hidden;
  padding: 2rem;
}

/* El enso: un círculo trazado de una pincelada, nunca del todo cerrado.
   El hueco se consigue dejando un borde sin color y girando la figura. */
.enso {
  position: absolute;
  width: min(58vmin, 26rem);
  aspect-ratio: 1;
  border: 1px solid var(--musgo);
  border-right-color: transparent;
  border-radius: 50%;
  opacity: var(--trazo);
  transform: rotate(-38deg);
  /* El trazo se posa despacio. La animación vive aquí, en lo decorativo,
     y nunca en el texto: un borde no cuenta para el First Contentful Paint,
     así que si el navegador congela la animación no se pierde nada. */
  animation: posarse 2.4s ease-out both;
}

h1 {
  position: relative;
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 5vw, 2.1rem);
  font-weight: 400;
  letter-spacing: 0.42em;
  /* El tracking añade aire a la derecha; se compensa para centrar de verdad. */
  text-indent: 0.42em;
  color: var(--tinta);
  white-space: nowrap;
  /* El texto se pinta en el primer fotograma, sin animación de por medio.
     Es el único contenido que cuenta para el First Contentful Paint. */
}

.punto {
  color: var(--musgo);
}

@keyframes posarse {
  from { opacity: 0; }
  to   { opacity: var(--trazo); }
}

@media (prefers-reduced-motion: reduce) {
  .enso { animation: none; }
}