/* ═══════════════════════════════════════════════════════
   EMOJI BEADWORK POETRY
   Gibson geometry × Judd minimalism
   6 randomized design variants
   ═══════════════════════════════════════════════════════ */

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

html, body {
  height: 100%;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: #fff;
  color: #000;
  font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  overflow-x: hidden;
}

/* Each design fills exactly the viewport — no scroll unless poem list is long */
.design {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.design[hidden] {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════
   SHARED COMPONENTS
   ═══════════════════════════════════════════════════════ */

/* ─── Beads ─── */

.bead {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(1.5rem, 3vw, 2.5rem);
  height: clamp(1.5rem, 3vw, 2.5rem);
  font-size: clamp(1rem, 2.2vw, 1.6rem);
  flex-shrink: 0;
}

.bead.sm {
  width: clamp(0.6rem, 1.4vw, 1.2rem);
  height: clamp(0.6rem, 1.4vw, 1.2rem);
  font-size: clamp(0.4rem, 1vw, 0.75rem);
  color: #ccc;
}

/* ─── Content area ─── */

.content {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  padding: clamp(2rem, 5vh, 7rem) clamp(1.5rem, 4vw, 3rem);
  overflow: hidden;
}

/* ─── Hidden eyes & lips (scattered in white space) ─── */

.hidden-eye,
.hidden-lip {
  position: absolute;
  font-size: clamp(1rem, 1.5vw, 1.4rem);
  opacity: 0;
  pointer-events: none;
  user-select: none;
}

.hidden-eye:nth-of-type(1) { animation: hidden-blink 5s 1.2s infinite; }
.hidden-eye:nth-of-type(2) { animation: hidden-blink 7s 3.5s infinite; }
.hidden-eye:nth-of-type(3) { animation: hidden-blink 4s 0.8s infinite; }
.hidden-eye:nth-of-type(4) { animation: hidden-blink 6s 4.2s infinite; }
.hidden-eye:nth-of-type(5) { animation: hidden-blink 5.5s 2.0s infinite; }
.hidden-eye:nth-of-type(6) { animation: hidden-blink 8s 5.5s infinite; }
.hidden-eye:nth-of-type(7) { animation: hidden-blink 6.5s 1.8s infinite; }
.hidden-eye:nth-of-type(8) { animation: hidden-blink 4.5s 3.0s infinite; }

.hidden-lip:nth-of-type(1) { animation: hidden-lip-appear 9s 2.5s infinite; }
.hidden-lip:nth-of-type(2) { animation: hidden-lip-appear 7s 5.0s infinite; }
.hidden-lip:nth-of-type(3) { animation: hidden-lip-appear 11s 1.0s infinite; }
.hidden-lip:nth-of-type(4) { animation: hidden-lip-appear 8s 6.0s infinite; }
.hidden-lip:nth-of-type(5) { animation: hidden-lip-appear 10s 3.0s infinite; }
.hidden-lip:nth-of-type(6) { animation: hidden-lip-appear 6s 7.0s infinite; }

@keyframes hidden-blink {
  0%, 92%, 100% { opacity: 0; }
  95%, 97% { opacity: 0.6; }
}

@keyframes hidden-lip-appear {
  0%, 90%, 100% { opacity: 0; transform: scale(1); }
  94%, 96% { opacity: 0.4; transform: scale(1.05); }
}

/* ─── Blink animations (varied, irregular) ─── */

.blink-1  { animation: blink 4s   0.5s infinite; }
.blink-2  { animation: blink 5.5s 1.3s infinite; }
.blink-3  { animation: blink 3.5s 2.8s infinite; }
.blink-4  { animation: blink 6s   0.2s infinite; }
.blink-5  { animation: blink 4.5s 3.5s infinite; }
.blink-6  { animation: blink 7s   1.0s infinite; }
.blink-7  { animation: blink 5s   0.7s infinite; }
.blink-8  { animation: blink 3.8s 2.1s infinite; }
.blink-9  { animation: blink 6.5s 4.0s infinite; }
.blink-10 { animation: blink 4.2s 1.6s infinite; }

@keyframes blink {
  0%, 90%, 100% { transform: scaleY(1); }
  93%, 97%      { transform: scaleY(0.1); }
}

/* ─── Lip pulse animations ─── */

.pulse-1 { animation: lip-pulse 6s 2s infinite; }
.pulse-2 { animation: lip-pulse 8s 4s infinite; }

@keyframes lip-pulse {
  0%, 85%, 100% { transform: scale(1); }
  90%           { transform: scale(1.08); }
  95%           { transform: scale(1); }
}

/* ─── Face rows (shared) ─── */

.face-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  line-height: 1;
  margin: clamp(0.15rem, 0.5vh, 0.3rem) 0;
}

.face-row .bead {
  font-size: clamp(1.5rem, 3vh, 2.5rem);
  width: auto;
  height: auto;
}

.face-row .spacer { width: clamp(2rem, 5vw, 4rem); }
.face-row .spacer-sm { width: clamp(1rem, 2.5vw, 2rem); }

/* ─── Poem navigation (shared) ─── */

.poem-links {
  text-align: center;
  z-index: 1;
  max-width: 32rem;
  width: 100%;
}

.poems-nav ul {
  list-style: none;
  padding: 0;
}

.poems-nav li {
  margin: clamp(0.5rem, 1.2vh, 1.2rem) 0;
}

.poems-nav a {
  color: #000;
  text-decoration: none;
  font-family: "Courier Prime", "Courier New", Courier, monospace;
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: none;
  transition: opacity 0.3s ease;
  opacity: 0.5;
}

.poems-nav a:hover {
  opacity: 1;
}

.empty-note {
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 200;
  letter-spacing: 0.14em;
  color: #999;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════
   DESIGN 1 — "Bands"
   Beadwork bands top/bottom, side columns, central face
   ═══════════════════════════════════════════════════════ */

.beadwork-band {
  width: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.bead-row {
  display: flex;
  justify-content: center;
  gap: 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

.top-band { padding-top: clamp(0.3rem, 1.2vh, 1.2rem); }
.bottom-band { padding-bottom: clamp(0.3rem, 1.2vh, 1.2rem); }

.side-column {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.left-column { left: clamp(2rem, 6vw, 5rem); }
.right-column { right: clamp(2rem, 6vw, 5rem); }

.diamond-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.6rem, 1.8vh, 1.8rem);
}

.diamond-stack .bead {
  font-size: clamp(1.2rem, 2.5vh, 2rem);
  width: auto;
  height: auto;
}

.design-1 .face-motif {
  margin: clamp(1.2rem, 3vh, 3rem) 0;
}

/* ═══════════════════════════════════════════════════════
   DESIGN 2 — "Totem"
   Vertical totem pole of faces, poem links beside it
   ═══════════════════════════════════════════════════════ */

.totem-content {
  flex-direction: row;
  gap: clamp(2.5rem, 7vw, 7rem);
}

.totem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}

.totem-face {
  padding: clamp(0.2rem, 0.6vh, 0.6rem) 0;
}

.totem-spacer {
  font-size: clamp(0.7rem, 1.4vh, 1.4rem);
  color: #ddd;
  line-height: 1;
  padding: clamp(0.05rem, 0.35vh, 0.3rem) 0;
}

.totem-links {
  max-width: 22rem;
}

.totem-content .face-row .bead {
  font-size: clamp(1.1rem, 2.5vh, 2.5rem);
}

/* ═══════════════════════════════════════════════════════
   DESIGN 3 — "Grid"
   Strict quilt pattern with gap for poems
   ═══════════════════════════════════════════════════════ */

.grid-content {
  flex-direction: column;
  gap: 0;
}

.quilt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.15rem, 0.4vh, 0.3rem);
}

.quilt-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(0.3rem, 0.8vw, 0.6rem);
}

.quilt-row .bead {
  font-size: clamp(1.2rem, 2.6vh, 2.2rem);
  width: clamp(1.8rem, 3.5vw, 3rem);
  height: clamp(1.8rem, 3.5vw, 3rem);
}

.quilt-gap {
  width: clamp(4rem, 12vw, 10rem);
}

.grid-links {
  margin: clamp(1rem, 2.5vh, 2.5rem) 0;
}

/* ═══════════════════════════════════════════════════════
   DESIGN 4 — "Chevron"
   V-shaped patterns expanding/contracting
   ═══════════════════════════════════════════════════════ */

.chevron-content {
  flex-direction: column;
  gap: 0;
}

.chevron-pattern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.5vh, 0.5rem);
}

.chevron-v {
  display: flex;
  justify-content: center;
  align-items: center;
}

.chevron-v .bead {
  font-size: clamp(1.1rem, 2.5vh, 1.9rem);
  width: auto;
  height: auto;
}

.chevron-space    { width: clamp(0.6rem, 2.5vw, 2rem); }
.chevron-space-lg { width: clamp(1.2rem, 4.5vw, 4rem); }
.chevron-space-xl { width: clamp(2rem, 7vw, 6rem); }

.chevron-links {
  margin: clamp(1.2rem, 3.5vh, 3.5rem) 0;
}

.chevron-bottom {
  flex-direction: column;
}

/* ═══════════════════════════════════════════════════════
   DESIGN 5 — "Curtain"
   Vertical bead strands hanging at varying lengths
   ═══════════════════════════════════════════════════════ */

.curtain-content {
  flex-direction: column;
  align-items: center;
  padding: 0 clamp(1.5rem, 4vw, 3rem) clamp(1.2rem, 3.5vh, 5rem);
  gap: 0;
}

.curtain {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(0.6rem, 2.5vw, 2rem);
  width: 100%;
}

.strand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.6vh, 0.5rem);
}

.strand .bead {
  font-size: clamp(1rem, 2.2vh, 1.8rem);
  width: auto;
  height: auto;
}

.strand-gap {
  width: clamp(1rem, 2.2vh, 1.8rem);
}

.curtain-links {
  margin-top: clamp(2rem, 5vh, 5rem);
}

/* ═══════════════════════════════════════════════════════
   DESIGN 6 — "Diamond Frame"
   Large diamond shape framing center content
   ═══════════════════════════════════════════════════════ */

.diamond-content {
  flex-direction: column;
  gap: 0;
}

.diamond-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.2rem, 0.5vh, 0.5rem);
}

.df-row {
  display: flex;
  justify-content: center;
  align-items: center;
}

.df-row .bead {
  font-size: clamp(1.2rem, 2.6vh, 2.2rem);
  width: auto;
  height: auto;
}

.df-space-xs { width: clamp(1rem, 2.5vw, 2rem); }
.df-space-sm { width: clamp(2rem, 6vw, 5rem); }
.df-space-md { width: clamp(3rem, 9vw, 8rem); }
.df-space-lg { width: clamp(5rem, 14vw, 13rem); }
.df-space-xl { width: clamp(7rem, 20vw, 19rem); }

.diamond-links {
  margin: clamp(0.6rem, 1.8vh, 1.8rem) 0;
}

/* ═══════════════════════════════════════════════════════
   RESPONSIVE — small screens
   ═══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .side-column {
    display: none;
  }

  /* Totem: stack vertically on mobile */
  .totem-content {
    flex-direction: column;
    gap: clamp(1rem, 3vh, 3rem);
    align-items: center;
  }
}

/* ═══════════════════════════════════════════════════════
   LANDSCAPE SHORT VIEWPORTS
   ═══════════════════════════════════════════════════════ */

@media (max-height: 500px) {
  .design-1 .face-motif {
    margin: 0.5rem 0;
  }

  .totem-face {
    padding: 0.1rem 0;
  }

  .totem-spacer {
    display: none;
  }

  .poems-nav li {
    margin: 0.25rem 0;
  }
}

/* ═══════════════════════════════════════════════════════
   PREFERS REDUCED MOTION
   ═══════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .blink-1, .blink-2, .blink-3, .blink-4, .blink-5,
  .blink-6, .blink-7, .blink-8, .blink-9, .blink-10,
  .pulse-1, .pulse-2,
  .hidden-eye, .hidden-lip {
    animation: none;
  }

  .hidden-eye {
    opacity: 0.15;
  }

  .hidden-lip {
    opacity: 0.1;
  }
}