/* Top-centre controls */
.nav-tools {
  position: absolute;
  top: 2rem;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 2.5rem;              /* was 1.55rem */
  transform: translateX(-50%);
  pointer-events: auto;
}

.nav-tool {
  min-width: 1.5rem;       /* was 2rem */
  height: 1.5rem;          /* was 2rem */
  padding: 0;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  cursor: pointer;
  opacity: .55;
  transition: opacity .25s ease;
}

.nav-tool-icon {
  width: auto;
  height: 1.2rem;           /* was 1.9rem */
  max-width: 1.8rem;        /* was 2.5rem */
  display: block;
  object-fit: contain;
}

.nav-tool:hover,
.nav-tool:focus-visible,
.nav-tool[aria-expanded="true"],
.sound-toggle[aria-pressed="false"] {
  opacity: 1;
}


.sound-icon-off { display: none; }
.sound-toggle[aria-pressed="true"] .sound-icon-on { display: none; }
.sound-toggle[aria-pressed="true"] .sound-icon-off { display: block; }

.poem-menu {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 5.75rem 4rem 2.5rem 7rem;
  background:
    linear-gradient(180deg, rgba(97,29,29,.82), rgba(97,29,29,.985)),
    radial-gradient(circle at 50% 18%, rgba(243,189,51,.07), transparent 44%);
  backdrop-filter: blur(.35rem);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, visibility .4s ease;
}

.poem-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.menu-view {
  display: none;
  width: 100%;
  height: 100%;
  min-height: 0;
}

.menu-view.active { display: block; }

/* Recital */
.recital-view.active {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: stretch;
  min-height: 0;
}

.recital-lyrics {
  width: min(48rem, 72vw);
  height: 100%;
  min-height: 0;
  margin: auto;
  padding-block: 34vh;
  overflow-y: auto;
  overflow-x: hidden;
  text-align: center;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
}

.recital-lyrics::-webkit-scrollbar { display: none; }

.recital-line {
  margin: 1.15rem 0;
  padding: .15rem .5rem;
  border: 0;
  color: rgba(236,218,180,.22);
  font: 300 1.25rem/1.55 var(--mono);
  cursor: pointer;
  transition: color .4s ease, opacity .4s ease;
}

.recital-line:hover { color: rgba(236,218,180,.48); }
.recital-line.active { color: var(--cream); }

.recital-player {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .8rem 0 .15rem;
}

.recital-play {
  border: 0;
  padding: .5rem 1rem;
  background: transparent;
  color: var(--yellow);
  font: 500 .9rem/1 var(--mono);
  text-transform: uppercase;
  letter-spacing: .1em;
  cursor: pointer;
  opacity: .72;
  transition: opacity .25s ease;
}
.recital-credit{

  position:absolute;
  bottom:1.8rem;

  color:var(--yellow);

  font-family:var(--mono);
  font-size:.9rem;
  font-weight:400;
  line-height:1.45;

  opacity:.82;
}

.recital-credit-left{

  left:5rem;
  text-align:left;
}

.recital-credit-right{

  right:2rem;
  text-align:right;
}
.recital-play:hover,
.recital-play:focus-visible { opacity: 1; }

/* =========================
   ARCHIVE
========================= */

.archive-view {
  position: absolute;
  inset: 0;
  min-width: 100%;
  min-height: 100%;
}

.archive-view.active {
  display: block;
}

.archive-viewport {
  position: absolute;
  inset: 4.75rem 0 0;
  min-width: 100%;
  min-height: calc(100% - 4.75rem);

  overflow: hidden;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.archive-viewport.dragging {
  cursor: grabbing;
}

.archive-world {
  position: absolute;
  left: 0;
  top: 0;

  width: 1px;
  height: 1px;

  transform: translate3d(0, 0, 0);
  will-change: transform;
}


/* =========================
   ARCHIVE ITEMS
========================= */

.archive-world-item {
  position: absolute;

  display: flex;
  flex-direction: column;
  align-items: center;

  opacity: 0;
  transform: translateY(.6rem);

  transition:
    opacity 1.8s ease,
    transform 1.8s ease;

  pointer-events: none;
}

.archive-world-item.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Smaller, consistent kolam images */
.archive-world-item.kolam {
  width: clamp(7.5rem, 9vw, 9.5rem);
}

.archive-world-item.kolam img {
  width: 100%;
  aspect-ratio: 1;
  display: block;
  object-fit: cover;
}

/* Smaller, consistent book images */
.archive-world-item.book {
  width: clamp(11rem, 14vw, 14rem);
}

.archive-world-item.book img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.archive-world-date {
  width: 100%;
  margin-top: .55rem;

  color: var(--yellow);
  font-family: var(--mono);
  font-size: .65rem;
  line-height: .9rem;
  letter-spacing: .1em;

  text-align: center;
  white-space: nowrap;
}

/* Prevent browser image dragging */

.archive-world-item img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}


/* =========================
   MOBILE
========================= */

@media (max-width: 56.25rem) {
  .archive-viewport {
    inset: 4.5rem 0 0;
  }

  .archive-world-item.kolam {
    width: 8.5rem;
  }

  .archive-world-item.book {
    width: 14rem;
  }

  .archive-world-date {
    margin-top: .45rem;
    font-size: .6rem;
  }
}
.geometry-view.active {
  display: grid;
  place-items: center;
  color: var(--cream);
  font: 300 1.1rem/1.5 var(--mono);
}

body.menu-open { overflow: hidden; }
body.menu-open .stage,
body.menu-open .scroll-dots { filter: brightness(.55); }
body.menu-open * { animation-play-state: paused !important; }
body.menu-open .poem-menu,
body.menu-open .poem-menu * { animation-play-state: running !important; }

@media (max-width: 56.25rem) {

  .nav-tools {
    gap: 1.15rem;           /* was .7rem */
    top: 1.45rem;
  }

  .nav-tool {
    min-width: 1.35rem;     /* was 1.55rem */
    height: 1.35rem;
  }

  .nav-tool-icon {
    height: 1.2rem;         /* was 1.45rem */
    max-width: 1.65rem;     /* was 1.9rem */
  }


  .poem-menu { padding: 5rem 1rem 1.5rem 3.5rem; }
  .recital-lyrics { width: 88vw; padding-block: 31vh; }
  .recital-line { font-size: .95rem; margin: .9rem 0; }
  .archive-viewport {
    inset: 4.5rem 0 0;
    min-height: calc(100% - 4.5rem);
  }
}