/* ------------------------------------------------
   Base
   ------------------------------------------------ */

body {
  margin: 40px auto;
  max-width: 650px;
  line-height: 1.6;
  font-size: 18px;
  color: #444;
  padding: 0 10px;
  font-family: "Georgia", serif;
  font-weight: normal;
}

h1, h2, h3 {
  line-height: 1.2;
  font-weight: normal;
}

h1 {
  font-size: 1.1em;
  margin-top: 1.8em;
  margin-bottom: 0.4em;
}

p {
  margin: 0;
  padding: 0;
}

a {
  color: #444;
}

a:hover {
  color: #000;
}

/* ------------------------------------------------
   Footer links
   ------------------------------------------------ */

.footer-links {
  margin-top: 2em;
}

.footer-links a {
  margin-right: 1em;
}

/* ------------------------------------------------
   Eyeball widget
   ------------------------------------------------ */

.eye-widget {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.eye {
  width: 16px;
  height: 16px;
  border: 1.5px solid black;
  border-radius: 50%;
  position: relative;
  overflow: hidden;
  background: white;
}

.pupil {
  width: 5px;
  height: 5px;
  background: black;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pupil-move 12s ease-in-out infinite;
}

.lid.upper {
  position: absolute;
  width: 100%;
  height: 100%;
  background: white;
  top: 0;
  left: 0;
  transform: translateY(-100%);
  animation: eyelid 10s ease-in-out infinite;
  border-bottom: 1.5px solid black;
}

.lid.lower {
  position: absolute;
  width: 100%;
  height: 3px;
  background: white;
  bottom: 0;
  left: 0;
}

/* ------------------------------------------------
   Keyframes — pupil movement
   ------------------------------------------------ */

@keyframes pupil-move {
  /* center — long hold */
  0%, 12%   { transform: translate(-50%, -50%) translate(0, 0); }
  /* snap left */
  14%, 30%  { transform: translate(-50%, -50%) translate(-3px, 1px); }
  /* snap right */
  32%, 50%  { transform: translate(-50%, -50%) translate(3px, -1px); }
  /* up-left */
  52%, 64%  { transform: translate(-50%, -50%) translate(-2px, -2px); }
  /* center hold */
  66%, 78%  { transform: translate(-50%, -50%) translate(0, 0); }
  /* down-right */
  80%, 92%  { transform: translate(-50%, -50%) translate(2px, 2px); }
  /* back to center */
  94%, 100% { transform: translate(-50%, -50%) translate(0, 0); }
}

/* ------------------------------------------------
   Keyframes — upper lid (blink + sleep cycle)
   ------------------------------------------------ */

@keyframes eyelid {
  /* open */
  0%, 19%    { transform: translateY(-100%); }

  /* blink 1 — fast */
  20%        { transform: translateY(0); }
  22%        { transform: translateY(-100%); }

  /* open hold */
  22.1%, 49% { transform: translateY(-100%); }

  /* blink 2 — fast */
  50%        { transform: translateY(0); }
  52%        { transform: translateY(-100%); }

  /* open hold */
  52.1%, 74% { transform: translateY(-100%); }

  /* quarter squint — ease in */
  78%        { transform: translateY(-65%); }
  /* hold squint */
  78.1%, 86% { transform: translateY(-65%); }
  /* ease back open */
  92%        { transform: translateY(-100%); }

  /* open to end */
  92.1%, 100% { transform: translateY(-100%); }
}

/* ------------------------------------------------
   Reduced motion
   ------------------------------------------------ */

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

  .lid.upper {
    animation: none;
  }
}